From f4281acda891267bb4967a6f3d860470e09ceceb Mon Sep 17 00:00:00 2001 From: titix Date: Sat, 3 Aug 2024 20:29:21 -0300 Subject: [PATCH] feat: token graph design --- src/components/TotalValueLocked.tsx | 146 +++++++++++++++++++++++++++- src/components/TvlContentBox.tsx | 62 ++++++++++++ src/components/index.ts | 1 + src/data/ecosystemMockData.json | 16 ++- src/types/Data.ts | 1 + 5 files changed, 219 insertions(+), 7 deletions(-) create mode 100644 src/components/TvlContentBox.tsx diff --git a/src/components/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx index 36c21a7..f0bce1c 100644 --- a/src/components/TotalValueLocked.tsx +++ b/src/components/TotalValueLocked.tsx @@ -1,10 +1,150 @@ +import { Box, Typography, Grid, styled } from '@mui/material'; import { TvlData } from '~/types'; -import { Box } from '@mui/material'; +import { TvlContentBox } from './TvlContentBox'; + interface TotalValueLockedProps { tvl: TvlData[]; } export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => { - console.log(tvl); - return {/* Token graph tvl */}; + const firstTvl = tvl[0]; + const secondTvl = tvl[1]; + const thirdTvl = tvl[2]; + const fourthTvl = tvl[3]; + const fifthTvl = tvl[4]; + const sixthTvl = tvl[5]; + + return ( + + {/* First tvl row */} + + + + + + + {/* Second tvl row */} + + + + + + + + + + + + + + + + + + + + + {/* Last tvl container */} + + + + + + + + + + + + + + + + + + Others + + + + + + + + + ); }; + +const TvlContainer = styled(Grid)({ + display: 'flex', + flexWrap: 'wrap', + width: '75rem', +}); + +interface GridContainerProps { + imageUrl?: string; + height?: string; +} + +const GridContainer = styled(Grid)(({ imageUrl, height }: GridContainerProps) => ({ + position: 'relative', + height: height || 'fit-content', + display: 'flex', + color: '#fff', + textShadow: '0 0 5px rgba(0, 0, 0, 0.5)', + overflow: 'hidden', + backgroundColor: 'rgba(250, 250, 250, 0.2)', + borderRadius: '1rem', + padding: '1rem', + '&::before': { + content: '""', + position: 'absolute', + top: -20, + left: -450, + right: 0, + bottom: 0, + backgroundImage: `url(${imageUrl})`, + backgroundSize: 'cover', + backgroundPosition: 'center', + filter: 'blur(130px)', + }, +})); + +const OthersBox = styled(Box)({ + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', +}); diff --git a/src/components/TvlContentBox.tsx b/src/components/TvlContentBox.tsx new file mode 100644 index 0000000..9f66cd6 --- /dev/null +++ b/src/components/TvlContentBox.tsx @@ -0,0 +1,62 @@ +import { Box, Avatar, Typography, styled } from '@mui/material'; +import { useCustomTheme } from '~/hooks'; +import { formatDataNumber } from '~/utils'; + +interface TvlContentBoxProps { + avatar: string; + token: string; + total: number; + tokenName: string; + isLast?: boolean; +} + +export const TvlContentBox = ({ avatar, token, total, tokenName, isLast }: TvlContentBoxProps) => { + return ( + + + + {tokenName} + {token} + + + {formatDataNumber(total, 0, true)} + + ); +}; + +const ContentBox = styled(Box)({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + zIndex: 1, +}); + +const TopBox = styled(Box)({ + display: 'flex', + alignItems: 'center', + gap: '0.5rem', +}); + +interface TokenLogoProps { + isLast: boolean; +} + +const TokenLogo = styled(Avatar)(({ isLast }) => ({ + width: `${isLast ? '1.25rem' : '2rem'}`, + height: `${isLast ? '1.25rem' : '2rem'}`, +})); + +const TokenTicker = styled(Typography)(() => { + const { currentTheme } = useCustomTheme(); + return { + fontSize: '0.75rem', + fontWeight: 400, + color: currentTheme.textSecondary, + }; +}); + +const TokenName = styled(Typography)({ + fontSize: '0.75rem', + fontWeight: 400, +}); diff --git a/src/components/index.ts b/src/components/index.ts index 619f451..3e4a494 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -13,3 +13,4 @@ export * from './ChainInformation'; export * from './BasicSelect'; export * from './NotFound'; export * from './Gas'; +export * from './TvlContentBox'; diff --git a/src/data/ecosystemMockData.json b/src/data/ecosystemMockData.json index fe39716..088a95f 100644 --- a/src/data/ecosystemMockData.json +++ b/src/data/ecosystemMockData.json @@ -2,41 +2,49 @@ "l1Tvl": [ { "token": "ETH", + "tokenName": "Ethereum", "total": 557596566000, "imageUrl": "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628" }, { "token": "USDT", + "tokenName": "Tether USD", "total": 114493849618, "imageUrl": "https://coin-images.coingecko.com/coins/images/325/large/tether.png" }, { "token": "USDC", + "tokenName": "Bridged USD", "total": 34115209093, - "imageUrl": "https://coin-images.coingecko.com/coins/images/6319/large/usd-coin.png" + "imageUrl": "https://assets.coingecko.com/coins/images/6319/standard/usdc.png?1696506694" }, { "token": "KOI", + "tokenName": "Koi Finance", "total": 24115209093, "imageUrl": "https://assets.coingecko.com/coins/images/35766/standard/Koi_logo.png?1709782399" }, { "token": "WBTC", + "tokenName": "Wrapped BTC", "total": 12620248, - "imageUrl": "https://coin-images.coingecko.com/coins/images/5757/large/wrapped-bitcoin.png" + "imageUrl": "https://assets.coingecko.com/coins/images/7598/standard/wrapped_bitcoin_wbtc.png?1696507857" }, { - "token": "wsETH", + "token": "wstETH", + "tokenName": "Lido wstETH", "total": 3552439, - "imageUrl": "https://coin-images.coingecko.com/coins/images/11320/large/staked-ether.png" + "imageUrl": "https://assets.coingecko.com/coins/images/18834/standard/wstETH.png?1696518295" }, { "token": "cbETH", + "tokenName": "Curve cbETH", "total": 2552439, "imageUrl": "https://assets.coingecko.com/coins/images/27008/standard/cbeth.png?1709186989" }, { "token": "BAL", + "tokenName": "Balancer", "total": 1552439, "imageUrl": "https://coin-images.coingecko.com/coins/images/671/large/balancer.png" } diff --git a/src/types/Data.ts b/src/types/Data.ts index 30bb671..0b6d75f 100644 --- a/src/types/Data.ts +++ b/src/types/Data.ts @@ -61,6 +61,7 @@ export interface EcosystemData { export interface TvlData { token: string; + tokenName: string; total: number; imageUrl: string; }