From 197022af3d9b178e485ccdbc749700583ccde44e Mon Sep 17 00:00:00 2001 From: andyv09 Date: Sun, 12 Jan 2025 17:56:44 +0100 Subject: [PATCH] feat: update markets page --- .../components/MarketsView/MarketOverview.tsx | 126 ++++++++++++++++-- .../components/MarketsView/MarketTableRow.tsx | 104 +++++++++++++-- 2 files changed, 206 insertions(+), 24 deletions(-) diff --git a/apps/frontend/src/components/MarketsView/MarketOverview.tsx b/apps/frontend/src/components/MarketsView/MarketOverview.tsx index 92410c0c..c28ab8fe 100644 --- a/apps/frontend/src/components/MarketsView/MarketOverview.tsx +++ b/apps/frontend/src/components/MarketsView/MarketOverview.tsx @@ -2,13 +2,12 @@ import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { - useBorrowRate, + useApr, useCollateralConfigurations, useMarketBalanceOfBase, useMarketBasics, useMarketConfiguration, usePrice, - useSupplyRate, useTotalCollateral, useTotalReserves, } from '@/hooks'; @@ -18,10 +17,8 @@ import { cn } from '@/lib/utils'; import { SYMBOL_TO_ICON, formatUnits, - getBorrowApr, getFormattedNumber, getFormattedPrice, - getSupplyApr, } from '@/utils'; import BigNumber from 'bignumber.js'; import { ChevronLeft } from 'lucide-react'; @@ -29,6 +26,13 @@ import Link from 'next/link'; import type React from 'react'; import { useMemo } from 'react'; import { IconPair } from '../IconPair'; +import { Line } from '../Line'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '../ui/tooltip'; import { KinkChart } from './KinkChart'; import { MarketChart } from './MarketChart'; import { MarketCollateralsTable } from './MarketCollateralsTable'; @@ -44,15 +48,13 @@ export default function MarketOverview({ baseAsset, chartData, }: MarketOverviewProps) { - const { data: borrowRate } = useBorrowRate(baseAsset); - const { data: supplyRate } = useSupplyRate(baseAsset); const { data: totalReserves } = useTotalReserves(baseAsset); + const { data: aprData, isPending: isAprPending } = useApr(); + const { data: collateralConfigurations } = useCollateralConfigurations(baseAsset); const { data: marketConfiguration } = useMarketConfiguration(baseAsset); - const borrowApr = useMemo(() => getBorrowApr(borrowRate), [borrowRate]); - const supplyApr = useMemo(() => getSupplyApr(supplyRate), [supplyRate]); const { data: availableLiquidity } = useMarketBalanceOfBase(baseAsset); const { data: totalCollateral } = useTotalCollateral(baseAsset); @@ -261,15 +263,115 @@ export default function MarketOverview({
Net Borrow APR
-
- {borrowApr} +
+ + + any }) => + e.preventDefault() + } + > +
+ {aprData?.netBorrowApr.times(100).toFixed(2)}% +
+ + any; + }) => e.preventDefault()} + > +
+
+ Net Borrow APY +
+
+
+
Borrow APY
+
+ {aprData?.borrowBaseApr.times(100).toFixed(2)}% +
+
+
+
Reward APY
+
+ {aprData?.borrowRewardApr.times(100).toFixed(2)} + % +
+
+
+ +
+
Net Borrow APY
+
+ {aprData?.netBorrowApr.times(100).toFixed(2)}% +
+
+
+ + +
Net Earn APR
-
- {supplyApr} +
+ + + any }) => + e.preventDefault() + } + > +
+ {aprData?.netSupplyApr.times(100).toFixed(2)}% +
+ + any; + }) => e.preventDefault()} + > +
+
+ Net Earn APY +
+
+
+
Supply APY
+
+ {aprData?.supplyBaseApr.times(100).toFixed(2)}% +
+
+
+
Reward APY
+
+ {aprData?.supplyRewardApr.times(100).toFixed(2)} + % +
+
+
+ +
+
Net Supply APY
+
+ {aprData?.netSupplyApr.times(100).toFixed(2)}% +
+
+
+ + +
diff --git a/apps/frontend/src/components/MarketsView/MarketTableRow.tsx b/apps/frontend/src/components/MarketsView/MarketTableRow.tsx index d7881b2f..c7fa0677 100644 --- a/apps/frontend/src/components/MarketsView/MarketTableRow.tsx +++ b/apps/frontend/src/components/MarketsView/MarketTableRow.tsx @@ -2,12 +2,11 @@ import { TableCell, TableRow } from '@/components/ui/table'; import { - useBorrowRate, + useApr, useCollateralConfigurations, useMarketBasics, useMarketConfiguration, usePrice, - useSupplyRate, useTotalCollateral, useUtilization, } from '@/hooks'; @@ -15,21 +14,27 @@ import { SYMBOL_TO_ICON, SYMBOL_TO_NAME, formatUnits, - getBorrowApr, getFormattedPrice, - getSupplyApr, } from '@/utils'; import BigNumber from 'bignumber.js'; import Image from 'next/image'; import type React from 'react'; import { appConfig } from '@/configs'; +import { cn } from '@/lib/utils'; import { useRouter } from 'next/navigation'; import { useMemo } from 'react'; import SWAY from '/public/tokens/sway.svg?url'; import { CircularProgressBar } from '../CircularProgressBar'; import { type Collateral, CollateralIcons } from '../CollateralIcons'; +import { Line } from '../Line'; import { Skeleton } from '../ui/skeleton'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '../ui/tooltip'; const SkeletonRow = ( @@ -69,10 +74,7 @@ export const MarketTableRow = ({ const { data: marketConfiguration } = useMarketConfiguration(); const { data: utilization } = useUtilization(marketName); - const { data: borrowRate } = useBorrowRate(marketName); - const { data: supplyRate } = useSupplyRate(marketName); - const borrowApr = useMemo(() => getBorrowApr(borrowRate), [borrowRate]); - const supplyApr = useMemo(() => getSupplyApr(supplyRate), [supplyRate]); + const { data: aprData, isPending: isAprPending } = useApr(); const { data: collateralConfigurations, @@ -159,11 +161,89 @@ export const MarketTableRow = ({ }
- -
{supplyApr}
+ + + + any }) => e.preventDefault()} + > +
{aprData?.netSupplyApr.times(100).toFixed(2)}%
+ + any; + }) => e.preventDefault()} + > +
+
+ Net Earn APY +
+
+
+
Supply APY
+
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
+
+
+
Reward APY
+
{aprData?.supplyRewardApr.times(100).toFixed(2)}%
+
+
+ +
+
Net Supply APY
+
{aprData?.netSupplyApr.times(100).toFixed(2)}%
+
+
+ + + - -
{borrowApr}
+ + + + any }) => e.preventDefault()} + > +
{aprData?.netBorrowApr.times(100).toFixed(2)}%
+ + any; + }) => e.preventDefault()} + > +
+
+ Net Borrow APY +
+
+
+
Borrow APY
+
{aprData?.borrowBaseApr.times(100).toFixed(2)}%
+
+
+
Reward APY
+
{aprData?.borrowRewardApr.times(100).toFixed(2)}%
+
+
+ +
+
Net Borrow APY
+
{aprData?.netBorrowApr.times(100).toFixed(2)}%
+
+
+ + + {getFormattedPrice(