feat: small design fixes + update meta description

index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#3A78FF" />
     <meta
       name="description"
-      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
+      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on EVM networks."
     />
     <link
       rel="icon"
@@ -64,7 +64,7 @@
     <meta name="twitter:title" content="Venus Protocol" />
     <meta
       name="twitter:description"
-      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
+      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on EVM networks."
     />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image:src" content="https://venus.io/share.png" />
@@ -76,7 +76,7 @@
     <meta property="og:image" content="https://venus.io/share.png" />
     <meta
       property="og:description"
-      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
+      content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on EVM networks."
     />
 
     <link href="https://venus.io/" rel="canonical" />

src/api/hooks/useProposals.ts

@@ -1,32 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { fetchProposalCount } from '../index';
 
-export const useProposalsCountFromApi = () => {
-  const [data, setData] = useState<number>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | undefined>();
-
-  const fetchData = () => {
-    fetchProposalCount()
-      .then(res => {
-        setData(res);
-        setIsLoading(false);
-      })
-      .catch(e => {
-        setError(e);
-        setIsLoading(false);
-      });
-  };
-
-  useEffect(() => {
-    setIsLoading(true);
-    fetchData();
-  }, []);
-
-  return {
-    data,
-    isLoading,
-    error,
-    fetchData,
-  };
-};
+export const useProposalsCountFromApi = () =>
+  useQuery({
+    queryKey: ['proposalCount'],
+    queryFn: fetchProposalCount,
+  });

src/api/hooks/useVenusApi.ts

@@ -1,42 +1,38 @@
-import { useEffect, useState } from 'react';
-import { MarketMapped } from '../types';
-import { getMarketsToRender, getTotal } from '../utils';
-import fetchMarkets from '../index';
+import { useQuery } from '@tanstack/react-query';
+import { fetchMarkets } from '../index';
+import { getMarketsToRender } from '../utils';
 
 export const useVenusApi = () => {
-  const [data, setData] = useState<MarketMapped[]>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | undefined>();
+  const {
+    data: getLegacyPoolMarketsData,
+    isLoading: isGetLegacyPoolMarketsLoading,
+    error: getLegacyPoolMarketsError,
+    refetch,
+  } = useQuery({
+    queryKey: ['legacyPoolMarkets'],
+    queryFn: fetchMarkets,
+  });
 
-  const fetchData = () => {
-    fetchMarkets()
-      .then(res => {
-        setData(res);
-        setIsLoading(false);
-      })
-      .catch(e => {
-        setError(e);
-        setIsLoading(false);
-      });
-  };
-
-  useEffect(() => {
-    setIsLoading(true);
-    fetchData();
-  }, []);
+  const topMarkets = getMarketsToRender(getLegacyPoolMarketsData);
 
-  const markets = getMarketsToRender(data);
-  const marketSize = getTotal('totalSupplyUsd', data);
-  const borrowedSum = getTotal('totalBorrowsUsd', data);
-  const liquiditySum = getTotal('liquidity', data);
+  const legacyPool = (getLegacyPoolMarketsData ?? []).reduce(
+    (acc, data) => ({
+      marketSize: acc.marketSize + data.totalSupplyUsd,
+      borrowedSum: acc.borrowedSum + data.totalBorrowsUsd,
+      liquiditySum: acc.liquiditySum + data.liquidity,
+    }),
+    {
+      marketSize: 0,
+      borrowedSum: 0,
+      liquiditySum: 0,
+    },
+  );
 
   return {
-    marketSize,
-    borrowedSum,
-    liquiditySum,
-    markets,
-    isLoading,
-    error,
-    fetchData,
+    ...legacyPool,
+    topMarkets,
+    isLoading: isGetLegacyPoolMarketsLoading,
+    error: getLegacyPoolMarketsError,
+    refetch,
   };
 };

src/api/index.ts

@@ -1,11 +1,11 @@
 import axios from 'axios';
+import type { MarketsResponseData, ProposalsResponseData } from './types';
 import { mapMarketsData } from './utils';
-import { MarketsResponseData, ProposalsResponseData } from './types';
 
 const marketsRequestUrl = 'https://api.venus.io/markets/core-pool?limit=999999';
 const proposalsRequestUrl = 'https://api.venus.io/governance/proposals?limit=1';
 
-export default async function fetchMarkets() {
+export async function fetchMarkets() {
   const { data: response }: { data: MarketsResponseData } = await axios.get(marketsRequestUrl);
   return mapMarketsData(response.result);
 }

src/api/utils.ts

@@ -1,10 +1,10 @@
-import { MarketMapped, MarketResponse } from './types';
 import {
-  tokenIconUrls,
   bscMainnetVCanAddress,
   compoundDecimals,
+  tokenIconUrls,
   vTokenDecimals,
 } from './constants';
+import type { MarketMapped, MarketResponse } from './types';
 
 export const scale = (value: string | number, decimals: number) => Number(value) / 10 ** decimals;
 
@@ -65,22 +65,14 @@ export const getMarketsToRender = (markets?: MarketMapped[]) => {
   return sortedMarkets.slice(0, 5).sort(sortBySupplyApy);
 };
 
-const sumArray = (numbers: number[]) => numbers.reduce((partialSum, a) => partialSum + a, 0);
-
 const addSpaceBeforeUSDSymbol = (string: string) => string.replace(/^(\D+)/, '$\u00a0');
 
-export const getTotal = (
-  key: 'totalSupplyUsd' | 'totalBorrowsUsd' | 'liquidity',
-  markets?: MarketMapped[],
-) => {
-  if (!markets) return [];
-  const totalSupplyUsd = markets.map(i => i[key]);
-  const sum = sumArray(totalSupplyUsd);
-  const formattedSum = new Intl.NumberFormat('en-EN', {
+export const formatUsd = (value: number) => {
+  const formattedValue = new Intl.NumberFormat('en-EN', {
     style: 'currency',
     currency: 'USD',
-  }).format(sum);
-  return addSpaceBeforeUSDSymbol(formattedSum);
+  }).format(value);
+  return addSpaceBeforeUSDSymbol(formattedValue);
 };
 
 export const nFormatter = (num: number, digits = 2) => {

src/components/App.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import MainContent from './MainContent/MainContent';
-import Footer from './Footer/Footer';
+import { useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import s from './App.module.css';
+import Footer from './Footer/Footer';
+import MainContent from './MainContent/MainContent';
 
 function Main() {
   return (
@@ -21,7 +21,7 @@ function App() {
     if (window.location.pathname.startsWith('/discord')) {
       window.location.replace('https://discord.com/servers/venus-protocol-912811548651708448');
     }
-  }, [window.location.pathname]);
+  }, []);
 
   return (
     <QueryClientProvider client={queryClient}>

src/components/Footer/Footer.module.css

@@ -112,10 +112,6 @@
     @media (min-width: 416px) {
         margin: 0;
     }
-
-    @media (min-width: 640px) {
-        display: none;
-    }
 }
 
 .socialLinksWrapperDesktop {
@@ -151,6 +147,14 @@
     align-items: center;
 }
 
+.navOptionsMobile {
+    display: flex;
+
+    @media (min-width: 640px) {
+        display: none;
+    }
+}
+
 .btnMobile {
     display: block;
 

src/components/Footer/Footer.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import cn from 'classnames';
 import Container from '../Container/Container';
-import NavigationLinks from '../NavigationLinks/NavigationLinks';
 import Logo from '../Header/assets/logo.svg?react';
-import LogoMobile from './assets/logoSmall.svg?react';
-import SocialLinks from './SocialLinks';
-import s from './Footer.module.css';
 import Link from '../Link/Link';
+import NavigationLinks from '../NavigationLinks/NavigationLinks';
+import s from './Footer.module.css';
+import SocialLinks from './SocialLinks';
+import LogoMobile from './assets/logoSmall.svg?react';
 
 const content = [
   {
@@ -47,7 +46,7 @@ const Footer: React.FC<IFooterProps> = ({ className }) => (
               White paper
             </Link>
           </div>
-          <div className={s.navOptions}>
+          <div className={cn(s.navOptions, s.navOptionsMobile)}>
             <SocialLinks className={s.socialLinksWrapperMobile} />
             <Link
               variant="buttonTransparent"

src/components/Link/Link.module.css

@@ -1,52 +1,52 @@
-.link {
+.root {
     display: inline-block;
     transition: background-color .3s, border-color .3s, color .3s;
     color: white;
     text-decoration: none;
     white-space: nowrap;
+}
 
-    &_button {
-        padding: 12px 32px;
-        background-color: var(--color-primary);
-        border-radius: 8px;
-
-        &:hover {
-            background-color: var(--color-primary-hover);
-        }
+.link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-        &:active {
-            background-color: var(--color-primary-active);
-        }
+    &:hover {
+        color: var(--color-text-secondary);
+    }
 
-        @media (max-width: 360px) {
-            padding: 12px;
-        }
+    &:active {
+        color: var(--color-primary);
     }
+}
 
-    &_buttonTransparent {
-        background-color: transparent;
-        border: 1px solid var(--color-primary);
+.button {
+    padding: 12px 32px;
+    background-color: var(--color-primary);
+    border-radius: 8px;
 
-        &:hover {
-            border-color: transparent;
-        }
+    &:hover {
+        background-color: var(--color-primary-hover);
+    }
+
+    &:active {
+        background-color: var(--color-primary-active);
+    }
 
-        &:active {
-            border-color: transparent;
-        }
+    @media (max-width: 360px) {
+        padding: 12px;
     }
+}
 
-    &_default {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+.buttonTransparent {
+    background-color: transparent;
+    border: 1px solid var(--color-primary);
 
-        &:hover {
-            color: var(--color-text-secondary);
-        }
+    &:hover {
+        border-color: transparent;
+    }
 
-        &:active {
-            color: var(--color-primary);
-        }
+    &:active {
+        border-color: transparent;
     }
 }

src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import cn from 'classnames';
+import type { ReactNode } from 'react';
 import s from './Link.module.css';
 
 interface ILinkProps {
@@ -13,11 +13,10 @@ const Link: React.FC<ILinkProps> = ({ className, href, children, variant = 'butt
   <a
     className={cn(
       s.root,
-      s.link,
       {
-        [s.link_button]: variant === 'button' || variant === 'buttonTransparent',
-        [s.link_buttonTransparent]: variant === 'buttonTransparent',
-        [s.link_default]: variant === 'link',
+        [s.button]: variant === 'button' || variant === 'buttonTransparent',
+        [s.buttonTransparent]: variant === 'buttonTransparent',
+        [s.link]: variant === 'link',
       },
       className,
     )}
@@ -28,5 +27,4 @@ const Link: React.FC<ILinkProps> = ({ className, href, children, variant = 'butt
     {children}
   </a>
 );
-
 export default Link;