From be50a8bca18246a7a2637fec2210487e3deb7175 Mon Sep 17 00:00:00 2001 From: titix Date: Wed, 14 Aug 2024 21:48:13 -0300 Subject: [PATCH 1/9] fix: api response await bug --- src/utils/services.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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(); }; From 62742409598458210d1b3d7f3ae2d51d19499fe1 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 00:10:58 -0300 Subject: [PATCH 2/9] fix: backend schemas integration --- src/components/ChainInformation.tsx | 2 +- src/components/TVL.tsx | 6 +++--- src/components/TotalValueLocked.tsx | 12 ++++++------ src/components/TvlContentBox.tsx | 8 ++++---- src/providers/DataProvider.tsx | 2 +- src/types/Data.ts | 14 +++++++------- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/ChainInformation.tsx b/src/components/ChainInformation.tsx index 275fe6b..03248ef 100644 --- a/src/components/ChainInformation.tsx +++ b/src/components/ChainInformation.tsx @@ -70,7 +70,7 @@ export const ChainInformation = () => { { {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/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx index 3af36b2..4d8a63d 100644 --- a/src/components/TotalValueLocked.tsx +++ b/src/components/TotalValueLocked.tsx @@ -35,9 +35,9 @@ const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => { @@ -93,9 +93,9 @@ const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => { diff --git a/src/components/TvlContentBox.tsx b/src/components/TvlContentBox.tsx index bdb29ea..db48d30 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 ( @@ -45,10 +49,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/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 a55acca..aa67be7 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,16 +59,16 @@ export interface EcosystemData { } export interface TvlData { - token: string; - tokenName: string; - total: number; + symbol: string; + name: string; + amountUsd: number; imageUrl: string; } export interface ChainTvl { - token: string; - tokenName: string; - total: number; + symbol: string; + name: string; + amountUsd: number; imageUrl: string; price: number; } From a3a43a643c1c59de73165a5d78746b49e8db7dba Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 01:10:39 -0300 Subject: [PATCH 3/9] feat: cursor pointer | hover effect --- src/components/BasicSelect.tsx | 2 +- src/components/Breadcrumb.tsx | 3 ++ src/components/ChainTable.tsx | 17 ++++++++-- src/components/Theme/theme.ts | 2 ++ src/containers/Footer/index.tsx | 31 ++++++++--------- src/containers/Header/index.tsx | 1 + src/containers/LockedAssets/index.tsx | 2 +- src/data/ecosystemMockData.json | 48 +++++++++++++-------------- src/types/Theme.ts | 1 + 9 files changed, 64 insertions(+), 43 deletions(-) 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/ChainTable.tsx b/src/components/ChainTable.tsx index c99fbfa..d16bf00 100644 --- a/src/components/ChainTable.tsx +++ b/src/components/ChainTable.tsx @@ -47,7 +47,7 @@ export const ChainTable = ({ chains }: TableProps) => { {chains?.map((data, index) => { return ( - handleChainNavigation(data.chainId)}> + handleChainNavigation(data.chainId)}> {/* Chain Name with Logo and Tags */} @@ -66,7 +66,7 @@ export const ChainTable = ({ chains }: TableProps) => { {formatDataNumber(data.tvl, 0, true)} {data.chainType} - + ); })} @@ -107,8 +107,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/Theme/theme.ts b/src/components/Theme/theme.ts index a5aaded..9c315ad 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.25)', 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, 0.5)', titleFontFamily: 'Inter-Variable', textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', 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..f1bb839 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -94,6 +94,7 @@ export const LogoContainer = styled(Box)({ alignItems: 'center', height: '100%', flexShrink: 0, + cursor: 'pointer', }); export const Logo = styled(Image)({ diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx index d5ad6c4..e23d09b 100644 --- a/src/containers/LockedAssets/index.tsx +++ b/src/containers/LockedAssets/index.tsx @@ -14,7 +14,7 @@ export const LockedAssets = () => { const goToTokensPage = () => { router.push('/tokens'); }; - + console.log(ecosystemData.l1Tvl); return ( {ecosystemData && ( 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/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; From b7113f5110dafb0def9093c3474cf712a94324f2 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 01:15:54 -0300 Subject: [PATCH 4/9] refactor: schema update --- src/containers/Tokens/TokensTable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/Tokens/TokensTable.tsx b/src/containers/Tokens/TokensTable.tsx index d9348e5..7b18218 100644 --- a/src/containers/Tokens/TokensTable.tsx +++ b/src/containers/Tokens/TokensTable.tsx @@ -34,15 +34,15 @@ 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()} ))} From 77442ed9d4da27b701ddad6e0b6368e10ee429f2 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 02:09:39 -0300 Subject: [PATCH 5/9] fix: all tables hover --- src/components/TVL.tsx | 5 +-- src/containers/Tokens/TokensTable.tsx | 5 +-- src/data/chainMockData.json | 50 +++++++++++++-------------- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/src/components/TVL.tsx b/src/components/TVL.tsx index 235a705..4cb14ec 100644 --- a/src/components/TVL.tsx +++ b/src/components/TVL.tsx @@ -12,6 +12,7 @@ import { LogoCell, TokenAvatar, STitle, + STableBodyRow, } from '~/components'; export const TVL = () => { @@ -33,7 +34,7 @@ export const TVL = () => { {tvl.map((token, index) => ( - + @@ -43,7 +44,7 @@ export const TVL = () => { ${token.price.toLocaleString()} ${((token.amountUsd * token.price) / 1e18).toLocaleString()} - + ))} diff --git a/src/containers/Tokens/TokensTable.tsx b/src/containers/Tokens/TokensTable.tsx index 7b18218..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,7 +33,7 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => { {tvl.map((token, index) => ( - + @@ -43,7 +44,7 @@ export const TokensTable = ({ tvl }: TotalValueLockedProps) => { ${token.price.toLocaleString()} ${((token.amountUsd * token.price) / 1e18).toLocaleString()} - + ))} 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, From fab045cd2c01d127cad24ff61863668fd0d1c2c5 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 02:17:30 -0300 Subject: [PATCH 6/9] style: backgroundHover --- src/components/Theme/theme.ts | 4 ++-- src/containers/Header/index.tsx | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Theme/theme.ts b/src/components/Theme/theme.ts index 9c315ad..107e0b0 100644 --- a/src/components/Theme/theme.ts +++ b/src/components/Theme/theme.ts @@ -78,7 +78,7 @@ export const darkTheme: Theme = { backgroundPrimary: '#000000', backgroundSecondary: '#262B33', backgroundTertiary: 'rgba(17, 20, 26, 1)', - backgroundHover: 'rgba(61, 66, 77, 0.25)', + backgroundHover: 'rgba(61, 66, 77, 0.85)', titleFontFamily: 'Inter-Variable', textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', @@ -106,7 +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, 0.5)', + backgroundHover: 'rgba(218, 221, 229, 1)', titleFontFamily: 'Inter-Variable', textFontFamily: 'Inter-Variable', borderRadius: '1.5rem', diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx index f1bb839..6786b3c 100644 --- a/src/containers/Header/index.tsx +++ b/src/containers/Header/index.tsx @@ -113,5 +113,8 @@ export const SIconButton = styled(IconButton)(() => { gap: currentTheme.gap, width: '3.5rem', height: '3.5rem', + '&:hover': { + backgroundColor: currentTheme.backgroundHover, + }, }; }); From 2312917443cef3866404dba96992447d6abf878b Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 02:31:57 -0300 Subject: [PATCH 7/9] style: min height --- src/containers/ChainDetail/index.tsx | 3 ++- src/containers/Dashboard/index.tsx | 2 ++ src/containers/Landing/index.tsx | 2 ++ src/containers/Tokens/index.tsx | 2 ++ 4 files changed, 8 insertions(+), 1 deletion(-) 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/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/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)', }, })); From 225f230119faa40060a4fdcd981ce8f5a2408190 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 02:47:39 -0300 Subject: [PATCH 8/9] refactor: split tvl graph mobile and desktop --- src/components/ChainInformation.tsx | 12 +-- src/components/DesktopTvlContainer.tsx | 64 +++++++++++ src/components/MobileTvlContainer.tsx | 63 +++++++++++ src/components/TotalValueLocked.tsx | 142 +++---------------------- src/components/index.ts | 2 + src/containers/Header/index.tsx | 2 +- 6 files changed, 147 insertions(+), 138 deletions(-) create mode 100644 src/components/DesktopTvlContainer.tsx create mode 100644 src/components/MobileTvlContainer.tsx diff --git a/src/components/ChainInformation.tsx b/src/components/ChainInformation.tsx index 03248ef..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'; @@ -115,16 +115,6 @@ export const DataContainer = styled(Box)(({ theme: muiTheme }) => { }; }); -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/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/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx index 33a3d69..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/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/Header/index.tsx b/src/containers/Header/index.tsx index 6786b3c..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}`)])) : {}; From ddf3fabad817cef46ddf06b8ed3b7a9d338b49f2 Mon Sep 17 00:00:00 2001 From: titix Date: Thu, 15 Aug 2024 10:14:59 -0300 Subject: [PATCH 9/9] style: remove log --- src/containers/LockedAssets/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/LockedAssets/index.tsx b/src/containers/LockedAssets/index.tsx index e23d09b..d5ad6c4 100644 --- a/src/containers/LockedAssets/index.tsx +++ b/src/containers/LockedAssets/index.tsx @@ -14,7 +14,7 @@ export const LockedAssets = () => { const goToTokensPage = () => { router.push('/tokens'); }; - console.log(ecosystemData.l1Tvl); + return ( {ecosystemData && (