fix: breadcrumb | locale | styles

defi-wonderland · Sep 17, 2024 · 8181f17 · 8181f17
1 parent 397f021
commit 8181f17
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 1,171 deletions.
diff --git a/cypress/fixtures/nextData.json b/cypress/fixtures/nextData.json
@@ -206,7 +206,7 @@
                 "batch": "Sobrecarga de lote L1 Gas",
                 "maxPubData": "Máximos datos públicos por lote",
                 "maxGasBatch": "Máximo gas por lote",
-                "priorityTxMaxPubdata": "Maximos datos de prioridad"
+                "priorityTxMaxPubdata": "Máximos datos de prioridad"
               },
               "backButton": "Volver"
             },

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -77,7 +77,7 @@
       "batch": "Sobrecarga de lote L1 Gas",
       "maxPubData": "Máximos datos públicos por lote",
       "maxGasBatch": "Máximo gas por lote",
-      "priorityTxMaxPubdata": "Maximos datos de prioridad"
+      "priorityTxMaxPubdata": "Máximos datos de prioridad"
     },
     "backButton": "Volver"
   },

diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { useData, useCustomTheme } from '~/hooks';
 import SmallArrowDark from '~/assets/icons/smallArrowDark.svg';
 import SmallArrowLight from '~/assets/icons/smallArrowLight.svg';
+import { capitalizeFirstLetter } from '~/utils';
 
 interface BreadcrumbProps {
   isChain: boolean;
@@ -15,13 +16,14 @@ export const Breadcrumb = ({ isChain }: BreadcrumbProps) => {
   const pathname = usePathname();
   const { chainData } = useData();
   const { theme } = useCustomTheme();
-  const { t } = useTranslation();
+  const { t, i18n } = 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?.name || path : path;
+    const displayName =
+      isChain && isLast ? chainData?.metadata?.name || capitalizeFirstLetter(path) : capitalizeFirstLetter(path);
     const href = `/${pathNames.slice(0, index + 1).join('/')}`;
 
     return {
@@ -34,7 +36,7 @@ export const Breadcrumb = ({ isChain }: BreadcrumbProps) => {
 
   return (
     <BreadcrumbNav aria-label='breadcrumb'>
-      <BreadcrumbLink href='/' data-testid='home-breadcrumb'>
+      <BreadcrumbLink href={`/${i18n.language}`} data-testid='home-breadcrumb'>
         {t('HOME.home')}
       </BreadcrumbLink>
 

diff --git a/src/containers/ChainDetail/ChainMetadata.tsx b/src/containers/ChainDetail/ChainMetadata.tsx
@@ -67,7 +67,9 @@ export const ChainMetadata = () => {
         <MetadataItem>
           <NativeTokenAvatar src={chainData?.baseToken.imageUrl || ''} alt={chainData?.baseToken.symbol} />
           <Box>
-            <Label>{t('CHAIN.nativeToken')}</Label>
+            <Label variant='subtitle1' color='textSecondary' gutterBottom>
+              {t('CHAIN.nativeToken')}
+            </Label>
             <Value>{chainData?.baseToken.symbol}</Value>
           </Box>
         </MetadataItem>

diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx
@@ -69,7 +69,7 @@ const AllTokensButton = styled(Button)(() => {
     borderRadius: currentTheme.borderRadius,
     padding: '0.5rem 1rem',
     gap: currentTheme.gap,
-    width: '5.5rem',
+    minWidth: 'fit-content',
     textTransform: 'none',
     fontSize: '0.75rem',
     marginTop: '1.5rem',