From 31eceeb9fbff004b807de841b3d783b63d3a62f3 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Wed, 22 Nov 2023 15:10:25 +0100 Subject: [PATCH] feat: added additional metric cards --- src/components/DisplayCurrency.tsx | 3 +- src/components/Earn/Tab.tsx | 3 +- src/components/Routes.tsx | 4 +- src/components/Stats/StatsAccounts.tsx | 3 -- src/components/Stats/StatsAdditional.tsx | 41 +++++++++++++++++++++ src/components/Stats/StatsCardsSkeleton.tsx | 38 +++++++++++++++++++ src/constants/pages.ts | 2 +- src/hooks/useUpdatedAccount/index.ts | 2 +- src/pages/StatsPage.tsx | 8 ++-- src/types/interfaces/route.d.ts | 2 +- src/utils/constants.ts | 5 +++ src/utils/route.ts | 2 +- 12 files changed, 98 insertions(+), 15 deletions(-) delete mode 100644 src/components/Stats/StatsAccounts.tsx create mode 100644 src/components/Stats/StatsAdditional.tsx create mode 100644 src/components/Stats/StatsCardsSkeleton.tsx diff --git a/src/components/DisplayCurrency.tsx b/src/components/DisplayCurrency.tsx index b19ee332..be3ae9b7 100644 --- a/src/components/DisplayCurrency.tsx +++ b/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, }} diff --git a/src/components/Earn/Tab.tsx b/src/components/Earn/Tab.tsx index 1495c47c..4b534bae 100644 --- a/src/components/Earn/Tab.tsx +++ b/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 ( -
+
{props.tabs.map((tab, index) => ( } /> } /> } /> - } /> + } /> } /> } /> @@ -47,7 +47,7 @@ export default function Routes() { } /> } /> } /> - } /> + } /> } /> diff --git a/src/components/Stats/StatsAccounts.tsx b/src/components/Stats/StatsAccounts.tsx deleted file mode 100644 index dbced76d..00000000 --- a/src/components/Stats/StatsAccounts.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function StatsAccounts() { - return
Stats Accounts
-} diff --git a/src/components/Stats/StatsAdditional.tsx b/src/components/Stats/StatsAdditional.tsx new file mode 100644 index 00000000..b802845f --- /dev/null +++ b/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: , + sub: DEFAULT_ADDITIONAL_STATS[0].sub, + }, + { + head: DEFAULT_ADDITIONAL_STATS[1].head, + title: ( + + ), + sub: DEFAULT_ADDITIONAL_STATS[1].sub, + }, + { + head: DEFAULT_ADDITIONAL_STATS[2].head, + title: , + sub: DEFAULT_ADDITIONAL_STATS[2].sub, + }, + ] + }, []) + + return +} diff --git a/src/components/Stats/StatsCardsSkeleton.tsx b/src/components/Stats/StatsCardsSkeleton.tsx new file mode 100644 index 00000000..0613de4b --- /dev/null +++ b/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 ( +
+ {stats.map((stat) => ( + + + {stat.head} + + } + sub={stat.sub} + className='mb-1' + /> + + ))} +
+ ) +} diff --git a/src/constants/pages.ts b/src/constants/pages.ts index 816522b9..f4ceb079 100644 --- a/src/constants/pages.ts +++ b/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' }, ] diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts index 5232a4a1..a3a9bbf1 100644 --- a/src/hooks/useUpdatedAccount/index.ts +++ b/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( diff --git a/src/pages/StatsPage.tsx b/src/pages/StatsPage.tsx index 0f5ff560..02c85063 100644 --- a/src/pages/StatsPage.tsx +++ b/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 case 'stats-lend-borrow': return - case 'stats-accounts': + case 'stats-additional': return default: return @@ -28,9 +28,9 @@ export default function StatsPage() { const activeIndex = STATS_TABS.findIndex((tab) => tab.page === page) return ( -
+
- + {getStatsComponent(page)}
) diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts index 94160241..5d6a0cb0 100644 --- a/src/types/interfaces/route.d.ts +++ b/src/types/interfaces/route.d.ts @@ -11,4 +11,4 @@ type Page = | 'stats' | 'stats-farm' | 'stats-lend-borrow' - | 'stats-accounts' + | 'stats-additional' diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 61c6db82..9435fad2 100644 --- a/src/utils/constants.ts +++ b/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 diff --git a/src/utils/route.ts b/src/utils/route.ts index 81a51c6d..9e6505bb 100644 --- a/src/utils/route.ts +++ b/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('/')