diff --git a/src/components/BasicSelect.tsx b/src/components/BasicSelect.tsx index 001e162..c2bd600 100644 --- a/src/components/BasicSelect.tsx +++ b/src/components/BasicSelect.tsx @@ -93,7 +93,7 @@ const MenuButton = styled(Button)(({ theme }) => { fontSize: '1rem', color: currentTheme.textPrimary, '&:hover': { - backgroundColor: currentTheme.backgroundSecondary, + backgroundColor: currentTheme.backgroundHover, }, [theme.breakpoints.down('sm')]: { width: '100%', diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx index 4a8bb3f..1698452 100644 --- a/src/components/Breadcrumb.tsx +++ b/src/components/Breadcrumb.tsx @@ -65,6 +65,9 @@ const BreadcrumbLink = styled(Link)(() => { textDecoration: 'none', fontSize: '0.875rem', lineHeight: '1.25rem', + '&:hover': { + textDecoration: 'underline', + }, }; }); diff --git a/src/components/ChainInformation.tsx b/src/components/ChainInformation.tsx index 275fe6b..e8f86b0 100644 --- a/src/components/ChainInformation.tsx +++ b/src/components/ChainInformation.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography, styled, Box } from '@mui/material'; +import { Typography, styled, Box } from '@mui/material'; import { useTranslation } from 'next-i18next'; import { InfoBox } from '~/components'; @@ -70,7 +70,7 @@ export const ChainInformation = () => { { }; }); -export const GridContainer = styled(Grid)(() => { - const { currentTheme } = useCustomTheme(); - return { - width: '100%', - borderRadius: 'inherit', - overflow: 'hidden', - border: currentTheme.border, - }; -}); - export const STitle = styled(Typography)(() => { return { fontSize: '1.5rem', diff --git a/src/components/ChainTable.tsx b/src/components/ChainTable.tsx index bba8b20..cfd5091 100644 --- a/src/components/ChainTable.tsx +++ b/src/components/ChainTable.tsx @@ -48,7 +48,7 @@ export const ChainTable = ({ chains }: TableProps) => { {chains?.map((data, index) => { return ( - handleChainNavigation(data.chainId)}> + handleChainNavigation(data.chainId)}> {/* Chain Name with Logo and Tags */} @@ -69,7 +69,7 @@ export const ChainTable = ({ chains }: TableProps) => { {formatDataNumber(data.tvl, 0, true)} {data.chainType} - + ); })} @@ -119,8 +119,21 @@ export const STableRow = styled(TableRow)(() => { '&:not(:last-child)': { border: currentTheme.border, }, + transition: currentTheme.transition, + }; +}); + +export const STableBodyRow = styled(TableRow)(() => { + const { currentTheme } = useCustomTheme(); + return { cursor: 'pointer', + '&:not(:last-child)': { + border: currentTheme.border, + }, transition: currentTheme.transition, + '&:hover': { + backgroundColor: currentTheme.backgroundHover, + }, }; }); diff --git a/src/components/DesktopTvlContainer.tsx b/src/components/DesktopTvlContainer.tsx new file mode 100644 index 0000000..32e9fe7 --- /dev/null +++ b/src/components/DesktopTvlContainer.tsx @@ -0,0 +1,64 @@ +import { Grid } from '@mui/material'; +import { useTranslation } from 'next-i18next'; + +import { TvlData, TotalValueLockedProps } from '~/types'; +import { TvlContentBox, GridContainer, TvlContainer, OthersText, OthersBox } from '~/components'; + +export const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => { + const { t } = useTranslation(); + + const renderTvlContent = ( + data: TvlData, + index: number, + height: string, + xs: number, + smallCard?: boolean, + isLast?: boolean, + ) => ( + + + + + + ); + + return ( + + {/* First item: full width */} + {renderTvlContent(tvl[0], 0, '12rem', 12)} + + + {/* Second item: half width */} + {renderTvlContent(tvl[1], 1, '12rem', 6)} + + + {/* Third and fourth items: one-third width each*/} + {tvl.slice(2, 4).map((data, index) => renderTvlContent(data, index + 2, '12rem', 4, true))} + + + {/* Fifth item: one-third width and half height */} + {renderTvlContent(tvl[4], 4, '5.85rem', 6, true)} + + + {/* Sixth item: three-fourths width and halft height + others remaining width same height*/} + {renderTvlContent(tvl[5], 5, '5.85rem', 9, true, true)} + + + + {t('HOME.LOCKEDASSETS.others')} + + + + + + + + + ); +}; diff --git a/src/components/MobileTvlContainer.tsx b/src/components/MobileTvlContainer.tsx new file mode 100644 index 0000000..c7b299d --- /dev/null +++ b/src/components/MobileTvlContainer.tsx @@ -0,0 +1,63 @@ +import { Grid } from '@mui/material'; +import { useTranslation } from 'next-i18next'; + +import { TvlData, TotalValueLockedProps } from '~/types'; +import { TvlContentBox, GridContainer, TvlContainer, OthersText, OthersBox } from '~/components'; + +export const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => { + const { t } = useTranslation(); + + const renderTvlContent = ( + data: TvlData, + index: number, + height: string, + xs: number, + smallCard?: boolean, + isLast?: boolean, + ) => ( + + + + + + ); + + return ( + + {/* First item: full width */} + {renderTvlContent(tvl[0], 0, '12rem', 12)} + + {/* Second item: full width, half height */} + {renderTvlContent(tvl[1], 1, '6rem', 12)} + + {/* Third and Fourth items: half width each */} + + {renderTvlContent(tvl[2], 2, '6rem', 6)} + {renderTvlContent(tvl[3], 3, '6rem', 6)} + + + {/* Fifth item: half width */} + + {renderTvlContent(tvl[4], 4, '5rem', 6, true, true)} + + {/* Sixth item: two-thirds width + others remaining */} + + {renderTvlContent(tvl[5], 5, '5rem', 9, true, true)} + + + + {t('HOME.LOCKEDASSETS.others')} + + + + + + + ); +}; diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx index a25c542..c178d2e 100644 --- a/src/components/TVL.tsx +++ b/src/components/TVL.tsx @@ -12,6 +12,7 @@ import { FirstCellWithLogo, TokenAvatar, STitle, + STableBodyRow, TableCellHeadFirst, } from '~/components'; @@ -34,16 +35,16 @@ export const TVL = () => { {tvl.map((token, index) => ( - + - + - {token.tokenName} ({token.token}) + {token.name} ({token.symbol}) ${token.price.toLocaleString()} - ${((token.total * token.price) / 1e18).toLocaleString()} - + ${((token.amountUsd * token.price) / 1e18).toLocaleString()} + ))} diff --git a/src/components/Theme/theme.ts b/src/components/Theme/theme.ts index a5aaded..107e0b0 100644 --- a/src/components/Theme/theme.ts +++ b/src/components/Theme/theme.ts @@ -78,6 +78,7 @@ export const darkTheme: Theme = { backgroundPrimary: '#000000', backgroundSecondary: '#262B33', backgroundTertiary: 'rgba(17, 20, 26, 1)', + backgroundHover: 'rgba(61, 66, 77, 0.85)', titleFontFamily: 'Inter-Variable', textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', @@ -105,6 +106,7 @@ export const lightTheme: Theme = { backgroundPrimary: 'rgba(247, 249, 252, 1)', backgroundSecondary: 'rgba(232, 236, 242, 1)', backgroundTertiary: ' rgba(218, 221, 229, 1)', + backgroundHover: 'rgba(218, 221, 229, 1)', titleFontFamily: 'Inter-Variable', textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', diff --git a/src/components/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx index af449ca..a1cf3fd 100644 --- a/src/components/TotalValueLocked.tsx +++ b/src/components/TotalValueLocked.tsx @@ -1,13 +1,12 @@ import { Box, Typography, Grid, styled, useMediaQuery, useTheme } from '@mui/material'; -import { useTranslation } from 'next-i18next'; -import { TvlData, TotalValueLockedProps } from '~/types'; -import { TvlContentBox } from '~/components'; +import { TotalValueLockedProps } from '~/types'; import { useCustomTheme } from '~/hooks'; +import { MobileTvlContainer, DesktopTvlContainer } from '~/components'; export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <> @@ -17,136 +16,19 @@ export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => { ); }; -const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => { - const { t } = useTranslation(); - - const renderTvlContent = ( - data: TvlData, - index: number, - height: string, - xs: number, - smallCard?: boolean, - isLast?: boolean, - ) => ( - - - - - - ); - - return ( - - {/* First item: full width */} - {renderTvlContent(tvl[0], 0, '12rem', 12)} - - {/* Second item: full width, half height */} - {renderTvlContent(tvl[1], 1, '6rem', 12)} - - {/* Third and Fourth items: half width each */} - - {renderTvlContent(tvl[2], 2, '6rem', 6)} - {renderTvlContent(tvl[3], 3, '6rem', 6)} - - - {/* Fifth item: half width */} - - {renderTvlContent(tvl[4], 4, '5rem', 6, true, true)} - - {/* Sixth item: two-thirds width + others remaining */} - - {renderTvlContent(tvl[5], 5, '5rem', 9, true, true)} - - - - {t('HOME.LOCKEDASSETS.others')} - - - - - - - ); -}; - -const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => { - const { t } = useTranslation(); - - const renderTvlContent = ( - data: TvlData, - index: number, - height: string, - xs: number, - smallCard?: boolean, - isLast?: boolean, - ) => ( - - - - - - ); - - return ( - - {/* First item: full width */} - {renderTvlContent(tvl[0], 0, '12rem', 12)} - - - {/* Second item: half width */} - {renderTvlContent(tvl[1], 1, '12rem', 6)} - - - {/* Third and fourth items: one-third width each*/} - {tvl.slice(2, 4).map((data, index) => renderTvlContent(data, index + 2, '12rem', 4, true))} - - - {/* Fifth item: one-third width and half height */} - {renderTvlContent(tvl[4], 4, '5.85rem', 6, true)} - - - {/* Sixth item: three-fourths width and halft height + others remaining width same height*/} - {renderTvlContent(tvl[5], 5, '5.85rem', 9, true, true)} - - - - {t('HOME.LOCKEDASSETS.others')} - - - - - - - - - ); -}; - -const TvlContainer = styled(Grid)({ +export const TvlContainer = styled(Grid)({ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', }); -interface GridContainerProps { +export interface GridContainerProps { imageUrl?: string; height?: string; smallCard?: boolean; } -const GridContainer = styled(Grid)(({ imageUrl, height, smallCard }: GridContainerProps) => { +export const GridContainer = styled(Grid)(({ imageUrl, height, smallCard }: GridContainerProps) => { const { currentTheme } = useCustomTheme(); return { position: 'relative', @@ -171,10 +53,18 @@ const GridContainer = styled(Grid)(({ imageUrl, height, smallCard }: GridContain backgroundPosition: smallCard && 'center', filter: smallCard ? 'blur(85px)' : 'blur(120px)', }, + '@media (max-width: 600px)': { + '&::before': { + top: smallCard ? -10 : -15, + left: smallCard ? -25 : -45, + backgroundSize: smallCard ? '150px' : '250px', + filter: smallCard ? 'blur(60px)' : 'blur(90px)', + }, + }, }; }); -const OthersBox = styled(Box)({ +export const OthersBox = styled(Box)({ position: 'absolute', top: '50%', left: '50%', @@ -185,7 +75,7 @@ const OthersBox = styled(Box)({ justifyContent: 'center', }); -const OthersText = styled(Typography)(() => { +export const OthersText = styled(Typography)(() => { const { currentTheme } = useCustomTheme(); return { color: currentTheme.textSecondary, diff --git a/src/components/TvlContentBox.tsx b/src/components/TvlContentBox.tsx index 2876302..b6aefac 100644 --- a/src/components/TvlContentBox.tsx +++ b/src/components/TvlContentBox.tsx @@ -10,6 +10,10 @@ interface TvlContentBoxProps { isLast?: boolean; } +interface TvlProps { + isLast: boolean; +} + export const TvlContentBox = ({ avatar, token, total, tokenName, isLast }: TvlContentBoxProps) => { return ( @@ -46,10 +50,6 @@ const TopBox = styled(Box)(() => { }; }); -interface TvlProps { - isLast: boolean; -} - const TokenLogo = styled(Avatar)(({ isLast }) => ({ width: `${isLast ? '1.25rem' : '2.5rem'}`, height: `${isLast ? '1.25rem' : '2.5rem'}`, diff --git a/src/components/index.ts b/src/components/index.ts index b995248..5044900 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -15,3 +15,5 @@ export * from './Gas'; export * from './TvlContentBox'; export * from './Breadcrumb'; export * from './Icon'; +export * from './DesktopTvlContainer'; +export * from './MobileTvlContainer'; diff --git a/src/containers/ChainDetail/index.tsx b/src/containers/ChainDetail/index.tsx index a2f97bc..ea42782 100644 --- a/src/containers/ChainDetail/index.tsx +++ b/src/containers/ChainDetail/index.tsx @@ -34,8 +34,9 @@ export const ChainContainer = styled(Box)(({ theme }) => ({ gap: '4rem', marginTop: '4rem', marginBottom: '4rem', - + minHeight: 'calc(100vh - 19rem)', [theme.breakpoints.down('sm')]: { padding: '0 1rem', + minHeight: 'calc(100vh - 23rem)', }, })); diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx index 9fd0f7e..70c1055 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -49,11 +49,13 @@ const DashboardContainer = styled('section')(({ theme }) => { return { width: '100%', + minHeight: 'calc(100vh - 19rem)', ...(isSearch && { padding: '0 7rem', minHeight: 'calc(100vh - 11rem)', [theme.breakpoints.down('sm')]: { padding: '0 1rem', + minHeight: 'calc(100vh - 23rem)', }, }), }; diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx index 53c2447..b5ad12b 100644 --- a/src/containers/Footer/index.tsx +++ b/src/containers/Footer/index.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'next-i18next'; import { styled } from '@mui/material/styles'; -import { Box, Typography } from '@mui/material'; +import { Typography, Button } from '@mui/material'; import Image from 'next/image'; import Link from 'next/link'; @@ -20,11 +20,11 @@ export const Footer = () => { return ( - {t('FOOTER.docs')} - + {t('FOOTER.docs')} + github {t('FOOTER.github')} - + @@ -66,18 +66,21 @@ const Subtitle = styled('div')(() => { display: 'flex', alignItems: 'center', gap: currentTheme.gap, + '& p': { display: 'inline-block', }, '& a': { textDecoration: 'none', color: 'inherit', + cursor: 'pointer', }, }; }); -const IconText = styled(Box)(() => { +const FooterButton = styled(Button)(() => { const { currentTheme } = useCustomTheme(); + return { display: 'flex', gap: currentTheme.gap, @@ -85,15 +88,13 @@ const IconText = styled(Box)(() => { backgroundColor: currentTheme.backgroundSecondary, borderRadius: currentTheme.borderRadius, padding: currentTheme.padding, - }; -}); - -const SText = styled(Typography)(() => { - const { currentTheme } = useCustomTheme(); - - return { - backgroundColor: currentTheme.backgroundSecondary, - borderRadius: currentTheme.borderRadius, - padding: currentTheme.padding, + cursor: 'pointer', + color: currentTheme.textPrimary, + textTransform: 'none', + fontSize: '1rem', + height: '3.5rem', + '&:hover': { + backgroundColor: currentTheme.backgroundHover, + }, }; }); diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index e9e11e2..2303be1 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -29,7 +29,7 @@ export const Header = () => { const router = useRouter(); const { isSearch } = useSearchContext(); const { locales, pathname, query } = router; - const isMobile = useMediaQuery('(max-width:600px)'); + const isMobile = useMediaQuery('(max-width:900px)'); const localesMap = locales ? Object.fromEntries(locales.map((locale) => [locale, t(`LOCALES.${locale}`)])) : {}; @@ -94,6 +94,7 @@ export const LogoContainer = styled(Box)({ alignItems: 'center', height: '100%', flexShrink: 0, + cursor: 'pointer', }); export const Logo = styled(Image)({ @@ -112,5 +113,8 @@ export const SIconButton = styled(IconButton)(() => { gap: currentTheme.gap, width: '3.5rem', height: '3.5rem', + '&:hover': { + backgroundColor: currentTheme.backgroundHover, + }, }; }); diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index 7479882..b230761 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -32,7 +32,9 @@ const LandingContainer = styled('main')(({ theme }) => ({ gap: '4rem', marginTop: '4rem', marginBottom: '4rem', + minHeight: 'calc(100vh - 19rem)', [theme.breakpoints.down('sm')]: { padding: '0 1rem', + minHeight: 'calc(100vh - 23rem)', }, })); diff --git a/src/containers/Tokens/TokensTable.tsx b/src/containers/Tokens/TokensTable.tsx index d9348e5..c2197b3 100644 --- a/src/containers/Tokens/TokensTable.tsx +++ b/src/containers/Tokens/TokensTable.tsx @@ -12,6 +12,7 @@ import { LogoCell, TokenAvatar, STitle, + STableBodyRow, } from '~/components'; export const TokensTable = ({ tvl }: TotalValueLockedProps) => { @@ -32,18 +33,18 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => { {tvl.map((token, index) => ( - + - + - {token.tokenName} ({token.token}) + {token.name} ({token.symbol}) ${token.price.toLocaleString()} - ${((token.total * token.price) / 1e18).toLocaleString()} - + ${((token.amountUsd * token.price) / 1e18).toLocaleString()} + ))} diff --git a/src/containers/Tokens/index.tsx b/src/containers/Tokens/index.tsx index e3bf26e..a2796d5 100644 --- a/src/containers/Tokens/index.tsx +++ b/src/containers/Tokens/index.tsx @@ -29,7 +29,9 @@ const TokensContainer = styled('main')(({ theme }) => ({ gap: '4rem', marginTop: '4rem', marginBottom: '4rem', + minHeight: 'calc(100vh - 19rem)', [theme.breakpoints.down('sm')]: { padding: '0 1rem', + minHeight: 'calc(100vh - 23rem)', }, })); diff --git a/src/data/chainMockData.json b/src/data/chainMockData.json index aa5a7e5..abc22f3 100644 --- a/src/data/chainMockData.json +++ b/src/data/chainMockData.json @@ -2,58 +2,58 @@ "chainType": "Rollup", "tvl": [ { - "token": "ETH", - "tokenName": "Ethereum", - "total": 557596566000, + "symbol": "ETH", + "name": "Ethereum", + "amountUsd": 557596566000, "price": 3500, "imageUrl": "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png" }, { - "token": "USDT", - "tokenName": "Tether USD", - "total": 114493849618, + "symbol": "USDT", + "name": "Tether USD", + "amountUsd": 114493849618, "price": 3500, "imageUrl": "https://www.cryptomkt.com/static/landing/img/crypto-pages/trending/usdt.svg" }, { - "token": "USDC", - "tokenName": "Bridged USD", - "total": 34115209093, + "symbol": "USDC", + "name": "Bridged USD", + "amountUsd": 34115209093, "price": 3500, "imageUrl": "https://assets.coingecko.com/coins/images/6319/standard/usdc.png?1696506694" }, { - "token": "KOI", - "tokenName": "Koi Finance", - "total": 24115209093, + "symbol": "KOI", + "name": "Koi Finance", + "amountUsd": 24115209093, "price": 3500, "imageUrl": "https://assets.coingecko.com/coins/images/35766/standard/Koi_logo.png?1709782399" }, { - "token": "WBTC", - "tokenName": "Wrapped BTC", - "total": 12620248, + "symbol": "WBTC", + "name": "Wrapped BTC", + "amountUsd": 12620248, "price": 3500, "imageUrl": "https://assets.coingecko.com/coins/images/7598/standard/wrapped_bitcoin_wbtc.png?1696507857" }, { - "token": "wstETH", - "tokenName": "Lido wstETH", - "total": 3552439, + "symbol": "wstETH", + "name": "Lido wstETH", + "amountUsd": 3552439, "price": 3500, "imageUrl": "https://assets.coingecko.com/coins/images/18834/standard/wstETH.png?1696518295" }, { - "token": "cbETH", - "tokenName": "Curve cbETH", - "total": 2552439, + "symbol": "cbETH", + "name": "Curve cbETH", + "amountUsd": 2552439, "price": 3500, "imageUrl": "https://assets.coingecko.com/coins/images/27008/standard/cbeth.png?1709186989" }, { - "token": "BAL", - "tokenName": "Balancer", - "total": 1552439, + "symbol": "BAL", + "name": "Balancer", + "amountUsd": 1552439, "price": 3500, "imageUrl": "https://coin-images.coingecko.com/coins/images/671/large/balancer.png" } @@ -61,7 +61,7 @@ "batchesInfo": { "commited": 100, "verified": 90, - "proved": 80 + "executed": 80 }, "feeParams": { "batchOverheadL1Gas": 50000, diff --git a/src/data/ecosystemMockData.json b/src/data/ecosystemMockData.json index ef8d37f..4ba4094 100644 --- a/src/data/ecosystemMockData.json +++ b/src/data/ecosystemMockData.json @@ -1,58 +1,58 @@ { "l1Tvl": [ { - "token": "ETH", - "tokenName": "Ethereum", - "total": 557596566000, + "symbol": "ETH", + "name": "Ethereum", + "amountUsd": 557596566000, "price": 300, "imageUrl": "https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png" }, { - "token": "USDT", - "tokenName": "Tether USD", - "total": 114493849618, + "symbol": "USDT", + "name": "Tether USD", + "amountUsd": 114493849618, "price": 300, "imageUrl": "https://www.cryptomkt.com/static/landing/img/crypto-pages/trending/usdt.svg" }, { - "token": "USDC", - "tokenName": "Bridged USD", - "total": 34115209093, + "symbol": "USDC", + "name": "Bridged USD", + "amountUsd": 34115209093, "price": 300, "imageUrl": "https://assets.coingecko.com/coins/images/6319/standard/usdc.png?1696506694" }, { - "token": "KOI", - "tokenName": "Koi Finance", - "total": 24115209093, + "symbol": "KOI", + "name": "Koi Finance", + "amountUsd": 24115209093, "price": 300, "imageUrl": "https://assets.coingecko.com/coins/images/35766/standard/Koi_logo.png?1709782399" }, { - "token": "WBTC", - "tokenName": "Wrapped BTC", - "total": 12620248, + "symbol": "WBTC", + "name": "Wrapped BTC", + "amountUsd": 12620248, "price": 300, "imageUrl": "https://assets.coingecko.com/coins/images/7598/standard/wrapped_bitcoin_wbtc.png?1696507857" }, { - "token": "wstETH", - "tokenName": "Lido wstETH", - "total": 3552439, + "symbol": "wstETH", + "name": "Lido wstETH", + "amountUsd": 3552439, "price": 300, "imageUrl": "https://assets.coingecko.com/coins/images/18834/standard/wstETH.png?1696518295" }, { - "token": "cbETH", - "tokenName": "Curve cbETH", - "total": 2552439, + "symbol": "cbETH", + "name": "Curve cbETH", + "amountUsd": 2552439, "price": 300, "imageUrl": "https://assets.coingecko.com/coins/images/27008/standard/cbeth.png?1709186989" }, { - "token": "BAL", - "tokenName": "Balancer", - "total": 1552439, + "symbol": "BAL", + "name": "Balancer", + "amountUsd": 1552439, "price": 300, "imageUrl": "https://coin-images.coingecko.com/coins/images/671/large/balancer.png" } diff --git a/src/providers/DataProvider.tsx b/src/providers/DataProvider.tsx index 6fd831e..d2b2ff3 100644 --- a/src/providers/DataProvider.tsx +++ b/src/providers/DataProvider.tsx @@ -56,7 +56,7 @@ export const DataProvider = ({ children }: DataProps) => { }, [isEcosystemError, isChainError, router]); const totalL1TVL = (ecosystemData?.l1Tvl || []).reduce((accumulator: number, token: TvlData) => { - return accumulator + (token.total || 0); + return accumulator + (token.amountUsd || 0); }, 0); return ( diff --git a/src/types/Data.ts b/src/types/Data.ts index e89c330..22aff46 100644 --- a/src/types/Data.ts +++ b/src/types/Data.ts @@ -4,7 +4,7 @@ export interface ChainData { batchesInfo: { commited: number; verified: number; - proved: number; + executed: number; }; feeParams: { batchOverheadL1Gas: number; @@ -59,17 +59,17 @@ export interface EcosystemData { } export interface TvlData { - token: string; - tokenName: string; - total: number; + symbol: string; + name: string; + amountUsd: number; price: number; imageUrl: string; } export interface ChainTvl { - token: string; - tokenName: string; - total: number; + symbol: string; + name: string; + amountUsd: number; imageUrl: string; price: number; } diff --git a/src/types/Theme.ts b/src/types/Theme.ts index dcc5dbe..c17f7d5 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -7,6 +7,7 @@ export interface Theme { backgroundPrimary: string; backgroundSecondary: string; backgroundTertiary: string; + backgroundHover: string; titleColor: string; titleFontFamily: string; textFontFamily: string; diff --git a/src/utils/services.ts b/src/utils/services.ts index 6715c04..b315190 100644 --- a/src/utils/services.ts +++ b/src/utils/services.ts @@ -16,7 +16,7 @@ export const fetchEcosystemData = async () => { if (!res.ok) { throw new Error('Failed to fetch ecosystem data'); } - return res.json(); + return await res.json(); }; export const fetchChainData = async (chainId: number) => { @@ -29,5 +29,5 @@ export const fetchChainData = async (chainId: number) => { if (!res.ok) { throw new Error('Failed to fetch chain data'); } - return res.json(); + return await res.json(); };