feat: token graph design (#13)

public/locales/en/common.json

@@ -4,7 +4,12 @@
     "subtitle": "Ecosystem",
     "gasPrice": "L1 Gas Price",
     "transfer": "ERC-20 Transfer",
-    "lockedAssets": "Locked assets in shared bridge",
+    "LOCKEDASSETS": {
+      "lockedAssets": "Locked assets",
+      "lockedAssetsDescription": "Locked assets in Elastic Chain Ecosystem",
+      "others": "Others",
+      "allTokens": "All tokens"
+    },
     "DASHBOARD": {
       "title": "Chain list",
       "chain": "Chain",

public/locales/es/common.json

@@ -4,7 +4,12 @@
     "subtitle": "Ecosistema",
     "gasPrice": "Precio del gas L1",
     "transfer": "Transferencia ERC-20",
-    "lockedAssets": "Activos bloqueados en puente compartido",
+    "LOCKEDASSETS": {
+      "lockedAssets": "Activos bloqueados",
+      "lockedAssetsDescription": "Activos bloqueados en el ecosistema de Elastic Chain",
+      "others": "Otros",
+      "allTokens": "Todos los tokens"
+    },
     "DASHBOARD": {
       "title": "Lista de cadenas",
       "chain": "Cadena",

src/components/Gas.tsx

@@ -16,11 +16,11 @@ export const Gas = () => {
       <Image src={theme === 'dark' ? GasDark : GasLight} alt='gas' />
       <Box>
         <SBox>
-          <Typography>{t('HOME.gasPrice')}:</Typography>
+          <GasLabel>{t('HOME.gasPrice')}:</GasLabel>
           <GasValueText>10 wei</GasValueText>
         </SBox>
         <SBox>
-          <Typography>{t('HOME.transfer')}:</Typography>
+          <GasLabel>{t('HOME.transfer')}:</GasLabel>
           <GasValueText>$10</GasValueText>
         </SBox>
       </Box>
@@ -34,11 +34,7 @@ const GasContainer = styled(Box)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
-    color: currentTheme.textSecondary,
     gap: currentTheme.gap,
-    fontWeight: 400,
-    fontSize: '0.7rem',
-    lineHeight: '1.25rem',
     padding: '0.5rem 1rem',
   };
 });
@@ -49,6 +45,17 @@ const GasValueText = styled(Typography)(() => {
   return {
     color: currentTheme.textPrimary,
     fontWeight: 500,
-    letterSpacing: '-0.03em',
+    fontSize: '0.9rem',
+  };
+});
+
+const GasLabel = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+
+  return {
+    color: currentTheme.textSecondary,
+    fontSize: '0.9rem',
+    fontWeight: 400,
+    lineHeight: '1rem',
   };
 });

src/components/TitleBanner.tsx

@@ -28,6 +28,7 @@ const TitleBox = styled(Box)(() => {
   return {
     display: 'flex',
     alignItems: 'center',
+    alignSelf: 'flex-start',
     gap: currentTheme.gap,
   };
 });
@@ -48,5 +49,4 @@ const Subtitle = styled(Typography)(() => ({
   fontWeight: 700,
   lineHeight: '4rem',
   letterSpacing: '-0.03em',
-  textAlign: 'left',
 }));

src/components/TotalValueLocked.tsx

@@ -1,10 +1,132 @@
+import { Box, Typography, Grid, styled } from '@mui/material';
+import { useTranslation } from 'next-i18next';
 import { TvlData } from '~/types';
-import { Box } from '@mui/material';
+import { TvlContentBox } from '~/components';
+import { useCustomTheme } from '~/hooks';
+
 interface TotalValueLockedProps {
   tvl: TvlData[];
 }
 
 export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
-  console.log(tvl);
-  return <Box>{/* Token graph tvl */}</Box>;
+  const { t } = useTranslation();
+
+  /**
+   * Renders the TVL content within a grid container.
+   * @param data - The TVL data.
+   * @param index - The index of the item in the array.
+   * @param height - The height of the container.
+   * @param xs - The grid size for the container.
+   * @param smallCard - Whether the card is small or not.
+   * @param isLast - Whether the card is the last one or not.
+   */
+  const renderTvlContent = (
+    data: TvlData,
+    index: number,
+    height: string,
+    xs: number,
+    smallCard?: boolean,
+    isLast?: boolean,
+  ) => (
+    <Grid item xs={xs} key={index}>
+      <GridContainer imageUrl={data.imageUrl} height={height} smallCard={smallCard}>
+        <TvlContentBox
+          avatar={data.imageUrl}
+          token={data.token}
+          total={data.total}
+          tokenName={data.tokenName}
+          isLast={isLast}
+        />
+      </GridContainer>
+    </Grid>
+  );
+
+  return (
+    <TvlContainer container spacing={0.5}>
+      {renderTvlContent(tvl[0], 0, '12rem', 12)}
+
+      <Grid item container xs={12} spacing={0.5}>
+        {renderTvlContent(tvl[1], 1, '12rem', 6)}
+
+        <Grid item container xs={6} spacing={0.5}>
+          {tvl.slice(2, 4).map((data, index) => renderTvlContent(data, index + 2, '12rem', 4, true))}
+
+          <Grid item container xs={4} direction='column'>
+            {renderTvlContent(tvl[4], 4, '5.85rem', 6, true)}
+
+            <Grid item container xs={6} spacing={0.5}>
+              {renderTvlContent(tvl[5], 5, '5.85rem', 9, true, true)}
+              <Grid item xs={3}>
+                <GridContainer height='5.85rem'>
+                  <OthersBox>
+                    <OthersText>{t('HOME.LOCKEDASSETS.others')}</OthersText>
+                  </OthersBox>
+                </GridContainer>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </TvlContainer>
+  );
 };
+
+const TvlContainer = styled(Grid)({
+  display: 'flex',
+  flexWrap: 'wrap',
+  width: '75rem',
+});
+
+interface GridContainerProps {
+  imageUrl?: string;
+  height?: string;
+  smallCard?: boolean;
+}
+
+const GridContainer = styled(Grid)(({ imageUrl, height, smallCard }: GridContainerProps) => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    position: 'relative',
+    height: height || 'fit-content',
+    display: 'flex',
+    color: currentTheme.textPrimary,
+    overflow: 'hidden',
+    backgroundColor: currentTheme.backgroundSecondary,
+    borderRadius: '1rem',
+    padding: currentTheme.padding,
+    border: currentTheme.border,
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: smallCard ? -20 : -25,
+      left: smallCard ? -50 : -95,
+      width: '100%',
+      height: '100%',
+      backgroundImage: `url(${imageUrl})`,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: smallCard ? '200px' : '400px',
+      backgroundPosition: smallCard && 'center',
+      filter: smallCard ? 'blur(85px)' : 'blur(120px)',
+    },
+  };
+});
+
+const OthersBox = styled(Box)({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const OthersText = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    color: currentTheme.textSecondary,
+    writingMode: 'vertical-rl',
+    transform: 'rotate(180deg)',
+  };
+});

src/components/TvlContentBox.tsx

@@ -0,0 +1,85 @@
+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 (
+    <ContentBox>
+      <TopBox>
+        <TokenLogo src={avatar} alt={token} isLast={isLast || false} />
+        <TextBox>
+          <TokenName>{tokenName}</TokenName>
+          <TokenTicker>{token}</TokenTicker>
+        </TextBox>
+      </TopBox>
+
+      <TvlAmount isLast={isLast || false}>{formatDataNumber(total, 0, true)}</TvlAmount>
+    </ContentBox>
+  );
+};
+
+const ContentBox = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  zIndex: 1,
+  width: '100%',
+});
+
+const TopBox = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    gap: currentTheme.gap,
+    width: '100%',
+  };
+});
+
+interface TvlProps {
+  isLast: boolean;
+}
+
+const TokenLogo = styled(Avatar)<TvlProps>(({ isLast }) => ({
+  width: `${isLast ? '1.25rem' : '2.5rem'}`,
+  height: `${isLast ? '1.25rem' : '2.5rem'}`,
+}));
+
+const TvlAmount = styled(Typography)<TvlProps>(({ isLast }) => ({
+  fontSize: `${isLast ? '0.85rem' : '1rem'}`,
+  fontWeight: 400,
+}));
+
+const TextBox = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: currentTheme.gap,
+  };
+});
+
+const TokenName = styled(Typography)({
+  fontSize: '0.85rem',
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+});
+
+const TokenTicker = styled(Typography)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    fontSize: '0.85rem',
+    fontWeight: 400,
+    color: currentTheme.textSecondary,
+    whiteSpace: 'nowrap',
+  };
+});

src/components/index.ts

@@ -13,3 +13,4 @@ export * from './ChainInformation';
 export * from './BasicSelect';
 export * from './NotFound';
 export * from './Gas';
+export * from './TvlContentBox';

src/containers/Header/index.tsx

@@ -85,7 +85,6 @@ const StyledLink = styled(Link)({
 const SIconButton = styled(IconButton)(() => {
   const { currentTheme } = useCustomTheme();
   return {
-    marginRight: '1rem',
     color: `${currentTheme.textPrimary}`,
     backgroundColor: `${currentTheme.backgroundSecondary}`,
     borderRadius: `${currentTheme.borderRadius}`,

src/containers/Landing/index.tsx

@@ -20,4 +20,7 @@ const LandingContainer = styled('main')({
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
+  gap: '4rem',
+  marginTop: '4rem',
+  marginBottom: '4rem',
 });