Merge branch 'dev' into feat/add-network-btn

public/locales/en/common.json

@@ -83,6 +83,10 @@
     "madeWith": "Made with",
     "by": "by"
   },
+  "ERROR":{
+    "title": "Error",
+    "message": "An error occurred while fetching the data. Please try again later."
+  },
   "LOCALES": {
     "en": "English",
     "es": "Spanish"

public/locales/es/common.json

@@ -81,9 +81,13 @@
     "madeWithLove": "Hecho con",
     "by": "por"
   },
-  "WALLET":{
+  "WALLET": {
     "connection": "Conectar Wallet"
   },
+  "ERROR": {
+    "title": "Error",
+    "message": "Lo sentimos, algo salió mal. Por favor, inténtelo de nuevo más tarde."
+  },
   "LOCALES": {
     "en": "Inglés",
     "es": "Español"

src/components/Breadcrumb.tsx

@@ -21,7 +21,7 @@ export const Breadcrumb = ({ isChain }: BreadcrumbProps) => {
 
   const breadcrumbItems = pathNames.map((path, index) => {
     const isLast = index === pathNames.length - 1;
-    const displayName = isChain && isLast ? chainData?.metadata?.chainName || path : path;
+    const displayName = isChain && isLast ? chainData?.metadata?.name || path : path;
     const href = `/${pathNames.slice(0, index + 1).join('/')}`;
 
     return {

src/components/ChainInformation.tsx

@@ -10,8 +10,8 @@ import ChainTypeDark from '~/assets/icons/chainTypeDark.svg';
 import ChainTypeLight from '~/assets/icons/chainTypeLight.svg';
 import CheckBlockDark from '~/assets/icons/checkBlockDark.svg';
 import CheckBlockLight from '~/assets/icons/checkBlockLight.svg';
-import SpeedDark from '~/assets/icons/speedDark.svg';
-import SpeedLight from '~/assets/icons/speedLight.svg';
+// import SpeedDark from '~/assets/icons/speedDark.svg';
+// import SpeedLight from '~/assets/icons/speedLight.svg';
 
 export const ChainInformation = () => {
   const { t } = useTranslation();
@@ -32,7 +32,7 @@ export const ChainInformation = () => {
           alt='chain-type-icon'
         />
 
-        <InfoBox
+        {/* <InfoBox
           title={t('CHAIN.CHAININFORMATION.lastBlock')}
           description={chainData?.l2ChainInfo.lastBlock}
           darkIcon={BlockDark}
@@ -57,7 +57,7 @@ export const ChainInformation = () => {
           lightIcon={SpeedLight}
           size={22}
           alt='speed-icon'
-        />
+        /> */}
 
         <InfoBox
           title={t('CHAIN.CHAININFORMATION.totalBatchesCommitted')}
@@ -86,14 +86,14 @@ export const ChainInformation = () => {
           alt='check-block'
         />
 
-        <InfoBox
+        {/* <InfoBox
           title={t('CHAIN.CHAININFORMATION.averageBlockTime')}
           description={chainData?.l2ChainInfo.avgBlockTime}
           darkIcon={SpeedDark}
           lightIcon={SpeedLight}
           size={22}
           alt='speed-icon'
-        />
+        /> */}
       </DataContainer>
     </article>
   );

src/components/ChainTable.tsx

@@ -26,7 +26,7 @@ export const ChainTable = ({ chains }: TableProps) => {
   const { t } = useTranslation();
   const router = useRouter();
 
-  const handleChainNavigation = (id: number) => {
+  const handleChainNavigation = (id: string) => {
     router.push(`/${id}`);
   };
 
@@ -51,19 +51,20 @@ export const ChainTable = ({ chains }: TableProps) => {
               <STableBodyRow key={index} onClick={() => handleChainNavigation(data.chainId)}>
                 {/* Chain Name with Logo and Tags */}
                 <FirstCellWithLogo>
-                  <ChainAvatar alt={`${data.chainName} logo`} src={data.iconUrl} />
-                  <ChainName>{data.chainName}</ChainName>
+                  <ChainAvatar alt={`${data.chainId}`} src={data.metadata?.iconUrl} />
+                  <ChainName>{data.metadata?.name ? data.metadata.name : `ZK Chain ${data.chainId}`}</ChainName>
+
                   <InfoTagsContainer>
                     {!data.rpc && <InfoTag information={t('HOME.DASHBOARD.noRPC')} />}
-                    {!data.metadata && <InfoTag information={t('HOME.DASHBOARD.noMetadata')} />}
+                    {data.metadata === undefined && <InfoTag information={t('HOME.DASHBOARD.noMetadata')} />}
                   </InfoTagsContainer>
                 </FirstCellWithLogo>
 
                 <STableCell sx={{ width: '10%' }}>{data.chainId}</STableCell>
 
                 <LogoCell sx={{ width: '10%' }}>
-                  <TokenAvatar alt={`${data.nativeToken} logo`} src={data.tokenImgUrl} />
-                  <Typography>{data.nativeToken}</Typography>
+                  <TokenAvatar alt={`${data.baseToken.symbol} logo`} src={data.baseToken.imageUrl} />
+                  <Typography>{data.baseToken.symbol}</Typography>
                 </LogoCell>
 
                 <STableCell sx={{ width: '10%' }}>{formatDataNumber(data.tvl, 0, true)}</STableCell>
@@ -146,16 +147,18 @@ export const STableCellHead = styled(TableCell)(() => {
   };
 });
 
-export const TableCellHeadFirst = styled(TableCell)(() => {
+export const TableCellHeadFirst = styled(TableCell)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
   return {
     color: currentTheme.textSecondary,
     textAlign: 'left',
     borderBottom: 'none',
-    position: 'sticky',
-    left: 0,
-    zIndex: 1,
-    backgroundColor: currentTheme.backgroundTertiary,
+    [theme.breakpoints.down('sm')]: {
+      position: 'sticky',
+      left: 0,
+      zIndex: 1,
+      backgroundColor: currentTheme.backgroundTertiary,
+    },
   };
 });
 
@@ -172,7 +175,7 @@ export const STableCell = styled(TableCell)(({ theme }) => {
   };
 });
 
-export const FirstCellWithLogo = styled(TableCell)(() => {
+export const FirstCellWithLogo = styled(TableCell)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
   return {
     color: currentTheme.textPrimary,
@@ -181,11 +184,13 @@ export const FirstCellWithLogo = styled(TableCell)(() => {
     gap: currentTheme.gap,
     border: 'none',
     textAlign: 'left',
-    position: 'sticky',
-    left: 0,
-    backgroundColor: currentTheme.backgroundSecondary,
-    zIndex: 1,
     minWidth: 'max-content',
+    [theme.breakpoints.down('sm')]: {
+      position: 'sticky',
+      left: 0,
+      backgroundColor: currentTheme.backgroundSecondary,
+      zIndex: 1,
+    },
   };
 });
 

src/components/RPC.tsx

@@ -1,32 +1,52 @@
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, Typography, Tooltip, styled } from '@mui/material';
 import { CheckCircle as CheckIcon, Cancel as CancelIcon } from '@mui/icons-material';
 
 import { useData, useCustomTheme } from '~/hooks';
 import { DataContainer, STitle } from '~/components';
+import { checkRpcStatus } from '~/utils';
 
 export const RPC = () => {
   const { t } = useTranslation();
   const { chainData } = useData();
+  const [rpcData, setRpcData] = useState<{ url: string; status: boolean }[]>([]);
+
+  useEffect(() => {
+    const updateRpcStatuses = async () => {
+      if (!chainData?.metadata?.publicRpcs) return;
+
+      const updatedRpcData = await Promise.all(
+        chainData.metadata.publicRpcs.map(async (rpc) => {
+          const status = await checkRpcStatus(rpc);
+          return { url: rpc, status };
+        }),
+      );
+
+      setRpcData(updatedRpcData);
+    };
+
+    updateRpcStatuses();
+  }, [chainData]);
+
   return (
     <article>
       <STitle>{t('CHAIN.RPC.title')}</STitle>
       <DataContainer>
-        {chainData?.metadata?.publicRpcs &&
-          chainData.metadata.publicRpcs.map((rpc, index) => (
-            <RPCBox key={index}>
-              <Tooltip title={rpc.status ? t('CHAIN.RPC.statusActive') : t('CHAIN.RPC.statusInactive')}>
-                {rpc.status ? <CheckIcon color='success' /> : <CancelIcon color='error' />}
-              </Tooltip>
-              <RPCUrl>{rpc.url}</RPCUrl>
-            </RPCBox>
-          ))}
+        {rpcData.map((rpc, index) => (
+          <RPCBox key={index}>
+            <Tooltip title={rpc.status ? t('CHAIN.RPC.statusActive') : t('CHAIN.RPC.statusInactive')}>
+              {rpc.status ? <CheckIcon color='success' /> : <CancelIcon color='error' />}
+            </Tooltip>
+            <RPCUrl>{rpc.url}</RPCUrl>
+          </RPCBox>
+        ))}
       </DataContainer>
     </article>
   );
 };
 
-export const RPCBox = styled(Box)(() => {
+const RPCBox = styled(Box)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
@@ -37,7 +57,7 @@ export const RPCBox = styled(Box)(() => {
   };
 });
 
-export const RPCUrl = styled(Typography)(() => {
+const RPCUrl = styled(Typography)(() => {
   const { currentTheme } = useCustomTheme();
   return {
     textDecoration: 'underline',

src/components/TvlContentBox.tsx

@@ -5,7 +5,7 @@ import { formatDataNumber } from '~/utils';
 interface TvlContentBoxProps {
   avatar: string;
   token: string;
-  total: number;
+  total: string;
   tokenName: string;
   isLast?: boolean;
 }

src/containers/ChainDetail/ChainMetadata.tsx

@@ -1,5 +1,6 @@
 import { Avatar, Box, Button, Typography, styled } from '@mui/material';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import Image from 'next/image';
 
 import { useCustomTheme, useData } from '~/hooks';
@@ -19,6 +20,8 @@ import SettingsLight from '~/assets/icons/settingsLight.svg';
 
 export const ChainMetadata = () => {
   const { t } = useTranslation();
+  const router = useRouter();
+  const { chain } = router.query;
   const { chainData } = useData();
   const { theme } = useCustomTheme();
   const data = chainData?.metadata;
@@ -28,17 +31,17 @@ export const ChainMetadata = () => {
     <MetadataContainer>
       <FirstRow>
         <ChainIdentity>
-          <Avatar src={data?.iconUrl} alt={data?.chainName} sx={{ width: 72, height: 72 }} />
+          <Avatar src={data?.iconUrl} alt={data?.name} sx={{ width: 72, height: 72 }} />
           <Box>
-            <ChainName>{data?.chainName}</ChainName>
+            <ChainName>{data?.name}</ChainName>
             <ChainId>
-              {t('CHAIN.chainId')}: <ChainIdValue>{data?.chainId}</ChainIdValue>
+              {t('CHAIN.chainId')}: <ChainIdValue>{chain}</ChainIdValue>
             </ChainId>
           </Box>
         </ChainIdentity>
 
         <ButtonsContainer>
-          <MetadataButton variant='contained' href={data?.websiteUrl}>
+          <MetadataButton variant='contained' href={data?.explorerUrl}>
             <WebIcon src={dark ? WebDark : WebLight} alt='web icon' />
             {t('CHAIN.website')}
             <SIcon src={dark ? LinkDark : LinkLight} alt='link icon' />
@@ -70,15 +73,15 @@ export const ChainMetadata = () => {
             <Label variant='subtitle1' color='textSecondary' gutterBottom>
               {t('CHAIN.environment')}
             </Label>
-            <Value>{data?.environment}</Value>
+            <Value>{data?.chainType}</Value>
           </Box>
         </MetadataItem>
 
         <MetadataItem>
-          <NativeTokenAvatar src={data?.nativeTokenIconUrl} alt={data?.nativeToken} />
+          <NativeTokenAvatar src={data?.baseToken.imageUrl || ''} alt={data?.baseToken.symbol} />
           <Box>
             <Label>{t('CHAIN.nativeToken')}</Label>
-            <Value>{data?.nativeToken}</Value>
+            <Value>{data?.baseToken.symbol}</Value>
           </Box>
         </MetadataItem>
       </SecondRow>

src/containers/Dashboard/index.tsx

@@ -13,7 +13,7 @@ export const Dashboard = () => {
     const chainIdStr = String(chain.chainId);
     const formattedSearchTerm = String(searchTerm).toLowerCase();
 
-    const matchesName = chain.chainName.toLowerCase().includes(formattedSearchTerm);
+    const matchesName = chain.metadata?.name.toLowerCase().includes(formattedSearchTerm);
     const matchesId = chainIdStr.includes(formattedSearchTerm);
 
     return matchesName || matchesId;

src/containers/ErrorContainer/index.tsx

@@ -0,0 +1,33 @@
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+
+import { Title } from '~/components';
+
+export const ErrorContainer = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ErrorPageContainer>
+      <Title title={t('ERROR.title')} />
+      <Typography>{t('ERROR.message')}</Typography>
+    </ErrorPageContainer>
+  );
+};
+
+const ErrorPageContainer = styled('main')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '0 7rem',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  gap: '4rem',
+  marginTop: '4rem',
+  marginBottom: '4rem',
+  minHeight: 'calc(100vh - 19rem)',
+  [theme.breakpoints.down('sm')]: {
+    padding: '0 1rem',
+    minHeight: 'calc(100vh - 23rem)',
+  },
+}));

src/containers/LockedAssets/index.tsx

@@ -83,6 +83,9 @@ const AllTokensButton = styled(Button)(() => {
     fontSize: '0.75rem',
     marginTop: '1.5rem',
     alignItems: 'center',
+    '&:hover': {
+      backgroundColor: currentTheme.backgroundHover,
+    },
   };
 });
 

src/containers/Tokens/TokensTable.tsx

@@ -43,7 +43,7 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
 
                 <STableCell>${token.price.toLocaleString()}</STableCell>
 
-                <STableCell>${((token.amountUsd * token.price) / 1e18).toLocaleString()}</STableCell>
+                <STableCell>${((Number(token.amountUsd) * Number(token.price)) / 1e18).toLocaleString()}</STableCell>
               </STableBodyRow>
             ))}
           </STableBody>

src/containers/index.ts

@@ -8,3 +8,4 @@ export * from './ChainDetail';
 export * from './ChainDetail/ChainDescription';
 export * from './ChainDetail/ChainMetadata';
 export * from './Tokens';
+export * from './ErrorContainer';