Merge branch 'dev' into feat/responsiveness

public/locales/en/common.json

@@ -4,6 +4,7 @@
     "subtitle": "Ecosystem",
     "gasPrice": "L1 Gas Price",
     "transfer": "ERC-20 Transfer",
+    "home": "Home",
     "LOCKEDASSETS": {
       "lockedAssets": "Locked assets",
       "lockedAssetsDescription": "Locked assets in Elastic Chain Ecosystem",

public/locales/es/common.json

@@ -4,6 +4,7 @@
     "subtitle": "Ecosistema",
     "gasPrice": "Precio del gas L1",
     "transfer": "Transferencia ERC-20",
+    "home": "Inicio",
     "LOCKEDASSETS": {
       "lockedAssets": "Activos bloqueados",
       "lockedAssetsDescription": "Activos bloqueados en el ecosistema de Elastic Chain",

src/components/Breadcrumb.tsx

@@ -0,0 +1,86 @@
+import { usePathname } from 'next/navigation';
+import { Link, Typography, styled } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+
+import { useData, useCustomTheme } from '~/hooks';
+import SmallArrowDark from '~/assets/icons/smallArrowDark.svg';
+import SmallArrowLight from '~/assets/icons/smallArrowLight.svg';
+
+interface BreadcrumbProps {
+  isChain: boolean;
+}
+
+export const Breadcrumb = ({ isChain }: BreadcrumbProps) => {
+  const pathname = usePathname();
+  const { chainData } = useData();
+  const { theme } = useCustomTheme();
+  const { t } = useTranslation();
+
+  const pathNames = pathname ? pathname.split('/').filter((path) => path) : [];
+
+  const breadcrumbItems = pathNames.map((path, index) => {
+    const isLast = index === pathNames.length - 1;
+    const displayName = isChain && isLast ? chainData?.metadata?.chainName || path : path;
+    const href = `/${pathNames.slice(0, index + 1).join('/')}`;
+
+    return {
+      key: index,
+      isLast,
+      displayName,
+      href,
+    };
+  });
+
+  return (
+    <BreadcrumbNav aria-label='breadcrumb'>
+      <BreadcrumbLink href='/'>{t('HOME.home')}</BreadcrumbLink>
+
+      {breadcrumbItems.map(({ key, isLast, displayName, href }) => (
+        <BreadcrumbItem key={key}>
+          <ArrowIcon src={theme === 'dark' ? SmallArrowDark : SmallArrowLight} alt='arrow' />
+          {isLast ? (
+            <BreadcrumbCurrent aria-current='page'>{displayName}</BreadcrumbCurrent>
+          ) : (
+            <BreadcrumbLink href={href}>{displayName}</BreadcrumbLink>
+          )}
+        </BreadcrumbItem>
+      ))}
+    </BreadcrumbNav>
+  );
+};
+
+const BreadcrumbNav = styled('nav')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const BreadcrumbLink = styled(Link)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    color: currentTheme.textPrimary,
+    textDecoration: 'none',
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+  };
+});
+
+const BreadcrumbItem = styled('span')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const ArrowIcon = styled(Image)({
+  width: '1.25rem',
+});
+
+const BreadcrumbCurrent = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    fontSize: '0.875rem',
+    color: currentTheme.textSecondary,
+    lineHeight: '1.25rem',
+  };
+});

src/components/index.ts

@@ -14,4 +14,5 @@ export * from './BasicSelect';
 export * from './NotFound';
 export * from './Gas';
 export * from './TvlContentBox';
+export * from './Breadcrumb';
 export * from './Icon';

src/containers/ChainDetail/index.tsx

@@ -3,10 +3,12 @@ import { useMediaQuery } from '@mui/material';
 
 import { ChainMetadata } from './ChainMetadata';
 import { ChainDescription } from './ChainDescription';
+import { Breadcrumb } from '~/components';
 
 export const ChainDetail = () => {
   return (
     <ChainContainer>
+      <Breadcrumb isChain={true} />
       <ChainMetadata />
       <ChainDescription />
     </ChainContainer>