feat: added additional metric cards

src/components/DisplayCurrency.tsx

@@ -18,6 +18,7 @@ interface Props {
   isApproximation?: boolean
   parentheses?: boolean
   showZero?: boolean
+  abbreviated?: boolean
 }
 
 export default function DisplayCurrency(props: Props) {
@@ -70,7 +71,7 @@ export default function DisplayCurrency(props: Props) {
       options={{
         minDecimals: isUSD ? 2 : 0,
         maxDecimals: 2,
-        abbreviated: true,
+        abbreviated: props.abbreviated ?? true,
         prefix,
         suffix,
       }}

src/components/Earn/Tab.tsx

@@ -10,6 +10,7 @@ const underlineClasses =
 interface Props {
   tabs: Tab[]
   activeTabIdx: number
+  className?: string
 }
 
 export default function Tab(props: Props) {
@@ -17,7 +18,7 @@ export default function Tab(props: Props) {
   const { address } = useParams()
 
   return (
-    <div className='relative w-full'>
+    <div className={classNames(props.className, 'relative w-full')}>
       {props.tabs.map((tab, index) => (
         <NavLink
           key={tab.page}

src/components/Routes.tsx

@@ -34,7 +34,7 @@ export default function Routes() {
         <Route path='/stats' element={<StatsPage />} />
         <Route path='/stats-farm' element={<StatsPage />} />
         <Route path='/stats-lend-borrow' element={<StatsPage />} />
-        <Route path='/stats-accounts' element={<StatsPage />} />
+        <Route path='/stats-additional' element={<StatsPage />} />
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
           <Route path='trade' element={<TradePage />} />
@@ -47,7 +47,7 @@ export default function Routes() {
           <Route path='stats' element={<StatsPage />} />
           <Route path='stats-farm' element={<StatsPage />} />
           <Route path='stats-lend-borrow' element={<StatsPage />} />
-          <Route path='stats-accounts' element={<StatsPage />} />
+          <Route path='stats-additional' element={<StatsPage />} />
           <Route path='portfolio/:accountId'>
             <Route path='' element={<PortfolioAccountPage />} />
           </Route>

src/components/Stats/StatsAccounts.tsx

@@ -1,3 +0,0 @@
-export default function StatsAccounts() {
-  return <div className='flex-1'>Stats Accounts</div>
-}

src/components/Stats/StatsAdditional.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import StatsCardsSkeleton from 'components/Stats/StatsCardsSkeleton'
+import { ORACLE_DENOM } from 'constants/oracle'
+import { BNCoin } from 'types/classes/BNCoin'
+import { DEFAULT_ADDITIONAL_STATS } from 'utils/constants'
+
+export default function StatsAdditional() {
+  const stats = useMemo(() => {
+    const totalTvl = new BNCoin({ denom: ORACLE_DENOM, amount: '121345123.67' })
+    const totalAccounts = 52134
+    const totalFees = new BNCoin({ denom: ORACLE_DENOM, amount: '321230.34' })
+    return [
+      {
+        head: DEFAULT_ADDITIONAL_STATS[0].head,
+        title: <DisplayCurrency className='text-xl' coin={totalTvl} abbreviated={false} />,
+        sub: DEFAULT_ADDITIONAL_STATS[0].sub,
+      },
+      {
+        head: DEFAULT_ADDITIONAL_STATS[1].head,
+        title: (
+          <FormattedNumber
+            className='text-xl'
+            amount={totalAccounts}
+            options={{ maxDecimals: 0, minDecimals: 0, abbreviated: false }}
+          />
+        ),
+        sub: DEFAULT_ADDITIONAL_STATS[1].sub,
+      },
+      {
+        head: DEFAULT_ADDITIONAL_STATS[2].head,
+        title: <DisplayCurrency className='text-xl' coin={totalFees} abbreviated={false} />,
+        sub: DEFAULT_ADDITIONAL_STATS[2].sub,
+      },
+    ]
+  }, [])
+
+  return <StatsCardsSkeleton stats={stats} />
+}

src/components/Stats/StatsCardsSkeleton.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Card from 'components/Card'
+import Loading from 'components/Loading'
+import Text from 'components/Text'
+import TitleAndSubCell from 'components/TitleAndSubCell'
+import { DEFAULT_ADDITIONAL_STATS } from 'utils/constants'
+
+interface Props {
+  stats?: Stat[]
+}
+
+interface Stat {
+  head: string
+  title: React.ReactNode | null
+  sub: string
+}
+
+export default function StatsCardsSkeleton(props: Props) {
+  const stats = props.stats || DEFAULT_ADDITIONAL_STATS
+
+  return (
+    <div className='grid w-full grid-cols-3 gap-4'>
+      {stats.map((stat) => (
+        <Card key={stat.sub} className='p-6 bg-white/5 flex-grow-1'>
+          <Text size='sm' className='mb-2 text-white/60'>
+            {stat.head}
+          </Text>
+          <TitleAndSubCell
+            title={stat.title || <Loading className='w-20 h-6 mx-auto mb-2' />}
+            sub={stat.sub}
+            className='mb-1'
+          />
+        </Card>
+      ))}
+    </div>
+  )
+}

src/constants/pages.ts

@@ -12,5 +12,5 @@ export const STATS_TABS: Tab[] = [
   { page: 'stats', name: 'Trading' },
   { page: 'stats-farm', name: 'Farm' },
   { page: 'stats-lend-borrow', name: 'Lend & Borrow' },
-  { page: 'stats-accounts', name: 'Accounts' },
+  { page: 'stats-additional', name: 'Additional' },
 ]

src/hooks/useUpdatedAccount/index.ts

@@ -201,7 +201,7 @@ export function useUpdatedAccount(account?: Account) {
       removeDeposits([BNCoin.fromDenomAndBigNumber(collateralDenom, removeDepositAmount)])
       removeDebts([BNCoin.fromDenomAndBigNumber(debtDenom, repayAmount)])
     },
-    [prices],
+    [prices, slippage],
   )
 
   const simulateVaultDeposit = useCallback(

src/pages/StatsPage.tsx

@@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom'
 
 import Tab from 'components/Earn/Tab'
 import MigrationBanner from 'components/MigrationBanner'
-import StatsAccounts from 'components/Stats/StatsAccounts'
+import StatsAccounts from 'components/Stats/StatsAdditional'
 import StatsFarm from 'components/Stats/StatsFarm'
 import StatsLendAndBorrow from 'components/Stats/StatsLendAndBorrow'
 import StatsTrading from 'components/Stats/StatsTrading'
@@ -15,7 +15,7 @@ function getStatsComponent(page: Page) {
       return <StatsFarm />
     case 'stats-lend-borrow':
       return <StatsLendAndBorrow />
-    case 'stats-accounts':
+    case 'stats-additional':
       return <StatsAccounts />
     default:
       return <StatsTrading />
@@ -28,9 +28,9 @@ export default function StatsPage() {
   const activeIndex = STATS_TABS.findIndex((tab) => tab.page === page)
 
   return (
-    <div className='flex flex-wrap w-full gap-6'>
+    <div className='flex flex-wrap w-full'>
       <MigrationBanner />
-      <Tab tabs={STATS_TABS} activeTabIdx={activeIndex === -1 ? 0 : activeIndex} />
+      <Tab tabs={STATS_TABS} activeTabIdx={activeIndex === -1 ? 0 : activeIndex} className='mb-8' />
       {getStatsComponent(page)}
     </div>
   )

src/types/interfaces/route.d.ts

@@ -11,4 +11,4 @@ type Page =
   | 'stats'
   | 'stats-farm'
   | 'stats-lend-borrow'
-  | 'stats-accounts'
+  | 'stats-additional'

src/utils/constants.ts

@@ -19,6 +19,11 @@ export const DEFAULT_PORTFOLIO_STATS = [
   { title: null, sub: 'APR' },
   { title: null, sub: 'Account Leverage' },
 ]
+export const DEFAULT_ADDITIONAL_STATS = [
+  { head: 'Total TVL', title: null, sub: 'Last Observed on 28 Jan 2023' },
+  { head: 'Total Credit Accounts', title: null, sub: '494 new credit accounts this week' },
+  { head: 'Total Fees Generated', title: null, sub: 'Includes liquidation, swap and borrow fees' },
+]
 
 export const ENABLE_HLS = true
 export const ENABLE_PERPS = false

src/utils/route.ts

@@ -30,7 +30,7 @@ export function getPage(pathname: string): Page {
     'stats',
     'stats-farm',
     'stats-lend-borrow',
-    'stats-accounts',
+    'stats-additional',
   ]
   const segments = pathname.split('/')