Merge branch 'dev' into feat/mobile-table

defi-wonderland · Aug 15, 2024 · 30304b4 · 30304b4
2 parents a370dfe + 710dd65
commit 30304b4
Show file tree

Hide file tree

Showing 17 changed files with 205 additions and 10 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -71,6 +71,9 @@
     },
     "backButton": "Go back"
   },
+  "TOKENS": {
+    "title": "Tokens"
+  },
   "FOOTER": {
     "docs": "Documentation",
     "github": "GitHub",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -72,6 +72,9 @@
     },
     "backButton": "Volver"
   },
+  "TOKENS": {
+    "title": "Tokens"
+  },
   "FOOTER": {
     "docs": "Documentación",
     "github": "GitHub",

diff --git a/src/components/Table.tsx → src/components/ChainTable.tsx b/src/components/Table.tsx → src/components/ChainTable.tsx
@@ -22,7 +22,7 @@ interface TableProps {
   chains: EcosystemChainData[];
 }
 
-export const DataTable = ({ chains }: TableProps) => {
+export const ChainTable = ({ chains }: TableProps) => {
   const { t } = useTranslation();
   const router = useRouter();
 

diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx
@@ -31,6 +31,7 @@ export const TVL = () => {
               <STableCellHead>{t('CHAIN.TVL.tvl')}</STableCellHead>
             </STableRow>
           </STableHead>
+
           <STableBody>
             {tvl.map((token, index) => (
               <STableRow key={index}>

diff --git a/src/components/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx
@@ -1,13 +1,10 @@
 import { Box, Typography, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
 import { useTranslation } from 'next-i18next';
-import { TvlData } from '~/types';
+
+import { TvlData, TotalValueLockedProps } from '~/types';
 import { TvlContentBox } from '~/components';
 import { useCustomTheme } from '~/hooks';
 
-interface TotalValueLockedProps {
-  tvl: TvlData[];
-}
-
 export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

diff --git a/src/components/TvlContentBox.tsx b/src/components/TvlContentBox.tsx
@@ -15,6 +15,7 @@ export const TvlContentBox = ({ avatar, token, total, tokenName, isLast }: TvlCo
     <ContentBox>
       <TopBox>
         <TokenLogo src={avatar} alt={token} isLast={isLast || false} />
+
         <TextBox>
           <TokenName isLast={isLast || false}>{tokenName}</TokenName>
           <TokenTicker isLast={isLast || false}>{token}</TokenTicker>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,6 +1,6 @@
 export * from './Theme';
 export * from './CustomHead';
-export * from './Table';
+export * from './ChainTable';
 export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';

diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'next-i18next';
 import { Typography, styled } from '@mui/material';
 
-import { DataTable } from '~/components';
+import { ChainTable } from '~/components';
 import { useData, useSearchContext, useCustomTheme } from '~/hooks';
 
 export const Dashboard = () => {
@@ -38,7 +38,7 @@ export const Dashboard = () => {
         {enterSearchTerm && <SearchLabel>{t('HOME.DASHBOARD.enterSearchTerm')}</SearchLabel>}
       </header>
 
-      {availableChains && <DataTable chains={filteredChains} />}
+      {availableChains && <ChainTable chains={filteredChains} />}
       {!availableChains && <SearchLabel>{t('HOME.DASHBOARD.notFound')}</SearchLabel>}
     </DashboardContainer>
   );

diff --git a/src/containers/Header/MobileHeader.tsx b/src/containers/Header/MobileHeader.tsx
@@ -39,6 +39,7 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
       <LogoContainer onClick={goToHome} role='button' aria-label='Navigate to home'>
         <Logo src={theme === 'dark' ? LogoDark : LogoLight} alt='ZK Chain Hub' />
       </LogoContainer>
+
       <IconsContainer>
         <SIconButton onClick={navigateToSearch}>
           {theme === 'dark' ? (
@@ -47,10 +48,12 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
             <Image src={SearchLight} alt='search-icon' />
           )}
         </SIconButton>
+
         <SIconButton onClick={toggleDrawer(true)}>
           {theme === 'dark' ? <Image src={MenuDark} alt='menu-icon' /> : <Image src={MenuLight} alt='menu-icon' />}
         </SIconButton>
       </IconsContainer>
+
       <Menu
         open={drawerOpen}
         onClose={toggleDrawer(false)}
@@ -67,17 +70,20 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
               <Image src={theme === 'dark' ? CloseDark : CloseLight} alt='close icon' />
             </SIconButton>
           </DrawerHeader>
+
           <MenuList>
             <MenuListItem>
               <Gas />
             </MenuListItem>
+
             <MenuListItem>
               <BasicSelect
                 value={t(`LOCALES.${language}`)}
                 setValue={handleChangeLanguage}
                 list={Object.values(localesMap)}
               />
             </MenuListItem>
+
             <MenuListItem>
               <ThemeButton onClick={changeTheme}>
                 {theme === 'dark' ? t('HEADER.lightMode') : t('HEADER.darkMode')}

diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-i18next';
-import { Box, Typography, styled } from '@mui/material';
+import { useRouter } from 'next/router';
+import { Box, Typography, styled, Button } from '@mui/material';
 
 import { TotalValueLocked } from '~/components';
 import { useData, useCustomTheme } from '~/hooks';
@@ -8,6 +9,11 @@ import { formatDataNumber } from '~/utils';
 export const LockedAssets = () => {
   const { t } = useTranslation();
   const { ecosystemData, totalL1TVL } = useData();
+  const router = useRouter();
+
+  const goToTokensPage = () => {
+    router.push('/tokens');
+  };
 
   return (
     <StyledSection>
@@ -18,9 +24,14 @@ export const LockedAssets = () => {
               <Title>{t('HOME.LOCKEDASSETS.lockedAssets')}</Title>
               <Subtitle>{t('HOME.LOCKEDASSETS.lockedAssetsDescription')}</Subtitle>
             </Box>
+
             <TitleAmount>{formatDataNumber(totalL1TVL, 0, true, true)}</TitleAmount>
           </LockedAssetsContainer>
+
           <TotalValueLocked tvl={ecosystemData.l1Tvl} />
+          <ButtonContainer>
+            <AllTokensButton onClick={goToTokensPage}> {t('HOME.LOCKEDASSETS.allTokens')} </AllTokensButton>{' '}
+          </ButtonContainer>
         </>
       )}
     </StyledSection>
@@ -58,3 +69,26 @@ const TitleAmount = styled(Typography)(() => ({
   fontWeight: 700,
   lineHeight: '2.5rem',
 }));
+
+const AllTokensButton = styled(Button)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textPrimary,
+    backgroundColor: currentTheme.backgroundSecondary,
+    borderRadius: currentTheme.borderRadius,
+    padding: '0.5rem 1rem',
+    gap: currentTheme.gap,
+    width: '5.5rem',
+    textTransform: 'none',
+    fontSize: '0.75rem',
+    marginTop: '1.5rem',
+    alignItems: 'center',
+  };
+});
+
+export const ButtonContainer = styled(Box)(() => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+  };
+});
diff --git a/src/containers/Tokens/SkeletonTokens.tsx b/src/containers/Tokens/SkeletonTokens.tsx
@@ -0,0 +1,17 @@
+import { Box } from '@mui/material';
+import { Skeleton } from '@mui/material';
+
+export const SkeletonTokens = () => {
+  return (
+    <Box width='100%'>
+      {/* Breadcrumb Skeleton */}
+      <Skeleton variant='text' width='20%' height={40} sx={{ marginBottom: 2, borderRadius: 4 }} />
+
+      {/* Title Skeleton */}
+      <Skeleton variant='text' width='40%' height={80} sx={{ marginBottom: 4, borderRadius: 4 }} />
+
+      {/* Main Container Skeleton for Locked Assets */}
+      <Skeleton variant='rectangular' width='100%' height={500} sx={{ borderRadius: 4, marginBottom: 12 }} />
+    </Box>
+  );
+};
diff --git a/src/containers/Tokens/TokensTable.tsx b/src/containers/Tokens/TokensTable.tsx
@@ -0,0 +1,53 @@
+import { useTranslation } from 'next-i18next';
+import { Table, Typography } from '@mui/material';
+
+import { TotalValueLockedProps } from '~/types';
+import {
+  STableContainer,
+  STableHead,
+  STableRow,
+  STableCellHead,
+  STableCell,
+  STableBody,
+  LogoCell,
+  TokenAvatar,
+  STitle,
+} from '~/components';
+
+export const TokensTable = ({ tvl }: TotalValueLockedProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <article>
+      <STitle>{t('TOKENS.title')}</STitle>
+      <STableContainer>
+        <Table>
+          <STableHead>
+            <STableRow>
+              <STableCellHead>{t('CHAIN.TVL.chain')}</STableCellHead>
+              <STableCellHead>{t('CHAIN.TVL.price')}</STableCellHead>
+              <STableCellHead>{t('CHAIN.TVL.tvl')}</STableCellHead>
+            </STableRow>
+          </STableHead>
+
+          <STableBody>
+            {tvl.map((token, index) => (
+              <STableRow key={index}>
+                <LogoCell>
+                  <TokenAvatar alt={token.tokenName} src={token.imageUrl} />
+                  <Typography>
+                    {token.tokenName} ({token.token})
+                  </Typography>
+                </LogoCell>
+
+                <STableCell>${token.price.toLocaleString()}</STableCell>
+
+                <STableCell>${((token.total * token.price) / 1e18).toLocaleString()}</STableCell>
+              </STableRow>
+            ))}
+          </STableBody>
+        </Table>
+      </STableContainer>
+    </article>
+  );
+};
diff --git a/src/containers/Tokens/index.tsx b/src/containers/Tokens/index.tsx
@@ -0,0 +1,35 @@
+import { styled } from '@mui/material';
+
+import { useData } from '~/hooks';
+import { Breadcrumb } from '~/components';
+import { TokensTable } from './TokensTable';
+import { SkeletonTokens } from './SkeletonTokens';
+
+export const Tokens = () => {
+  const { ecosystemData, isEcosystemLoading } = useData();
+  const tvl = ecosystemData?.l1Tvl || [];
+  return (
+    <TokensContainer>
+      {isEcosystemLoading && <SkeletonTokens />}
+      {!isEcosystemLoading && (
+        <>
+          <Breadcrumb isChain={false} />
+          <TokensTable tvl={tvl} />
+        </>
+      )}
+    </TokensContainer>
+  );
+};
+
+const TokensContainer = styled('main')(({ theme }) => ({
+  padding: '0 7rem',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  gap: '4rem',
+  marginTop: '4rem',
+  marginBottom: '4rem',
+  [theme.breakpoints.down('sm')]: {
+    padding: '0 1rem',
+  },
+}));
diff --git a/src/containers/index.ts b/src/containers/index.ts
@@ -7,3 +7,4 @@ export * from './LockedAssets';
 export * from './ChainDetail';
 export * from './ChainDetail/ChainDescription';
 export * from './ChainDetail/ChainMetadata';
+export * from './Tokens';
diff --git a/src/data/ecosystemMockData.json b/src/data/ecosystemMockData.json
@@ -4,48 +4,56 @@
       "token": "ETH",
       "tokenName": "Ethereum",
       "total": 557596566000,
+      "price": 300,
       "imageUrl": "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png"
     },
     {
       "token": "USDT",
       "tokenName": "Tether USD",
       "total": 114493849618,
+      "price": 300,
       "imageUrl": "https://www.cryptomkt.com/static/landing/img/crypto-pages/trending/usdt.svg"
     },
     {
       "token": "USDC",
       "tokenName": "Bridged USD",
       "total": 34115209093,
+      "price": 300,
       "imageUrl": "https://assets.coingecko.com/coins/images/6319/standard/usdc.png?1696506694"
     },
     {
       "token": "KOI",
       "tokenName": "Koi Finance",
       "total": 24115209093,
+      "price": 300,
       "imageUrl": "https://assets.coingecko.com/coins/images/35766/standard/Koi_logo.png?1709782399"
     },
     {
       "token": "WBTC",
       "tokenName": "Wrapped BTC",
       "total": 12620248,
+      "price": 300,
       "imageUrl": "https://assets.coingecko.com/coins/images/7598/standard/wrapped_bitcoin_wbtc.png?1696507857"
     },
     {
       "token": "wstETH",
       "tokenName": "Lido wstETH",
       "total": 3552439,
+      "price": 300,
       "imageUrl": "https://assets.coingecko.com/coins/images/18834/standard/wstETH.png?1696518295"
     },
     {
       "token": "cbETH",
       "tokenName": "Curve cbETH",
       "total": 2552439,
+      "price": 300,
       "imageUrl": "https://assets.coingecko.com/coins/images/27008/standard/cbeth.png?1709186989"
     },
     {
       "token": "BAL",
       "tokenName": "Balancer",
       "total": 1552439,
+      "price": 300,
       "imageUrl": "https://coin-images.coingecko.com/coins/images/671/large/balancer.png"
     }
   ],

diff --git a/src/pages/tokens/index.tsx b/src/pages/tokens/index.tsx
@@ -0,0 +1,32 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { GetStaticProps } from 'next';
+import { useTranslation } from 'next-i18next';
+
+import { CustomHead } from '~/components';
+import { Tokens } from '~/containers';
+import { getConfig } from '~/config';
+
+const { DEFAULT_LANG, SUPPORTED_LANGUAGES } = getConfig();
+
+const TokensPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <CustomHead title={t('HOME.search')} />
+      <Tokens />
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const i18Config = await serverSideTranslations(locale || DEFAULT_LANG, ['common'], null, SUPPORTED_LANGUAGES);
+
+  return {
+    props: {
+      ...i18Config,
+    },
+  };
+};
+
+export default TokensPage;