Skip to content

Commit

Permalink
feat: update markets page
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyv09
andyv09 committed Jan 12, 2025
1 parent be96ddd commit 197022a
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 24 deletions.
126 changes: 114 additions & 12 deletions apps/frontend/src/components/MarketsView/MarketOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,17 +17,22 @@ 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';
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';
Expand All @@ -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);
Expand Down Expand Up @@ -261,15 +263,115 @@ export default function MarketOverview({
<div className="text-primary text-lg font-semibold">
Net Borrow APR
</div>
<div className="text-xl text-white font-semibold">
{borrowApr}
<div
className={cn(
isAprPending && 'animate-pulse',
'text-xl text-white font-semibold'
)}
>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger
onClick={(e: { preventDefault: () => any }) =>
e.preventDefault()
}
>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
</div>
</TooltipTrigger>
<TooltipContent
onPointerDownOutside={(e: {
preventDefault: () => any;
}) => e.preventDefault()}
>
<div className="w-[200px] p-2">
<div className="flex justify-center font-semibold text-white text-lg">
Net Borrow APY
</div>
<div className="mt-4 mb-2 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Borrow APY</div>
<div>
{aprData?.borrowBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</div>
<div>
{aprData?.borrowRewardApr.times(100).toFixed(2)}
%
</div>
</div>
</div>
<Line />
<div className="flex mt-2 justify-between text-md font-normal">
<div>Net Borrow APY</div>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>

<div className="text-purple text-lg font-semibold mt-8">
Net Earn APR
</div>
<div className="text-xl text-white font-semibold">
{supplyApr}
<div
className={cn(
isAprPending && 'animate-pulse',
'text-xl text-white font-semibold'
)}
>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger
onClick={(e: { preventDefault: () => any }) =>
e.preventDefault()
}
>
<div>
{aprData?.netSupplyApr.times(100).toFixed(2)}%
</div>
</TooltipTrigger>
<TooltipContent
onPointerDownOutside={(e: {
preventDefault: () => any;
}) => e.preventDefault()}
>
<div className="w-[200px] p-2">
<div className="flex justify-center font-semibold text-white text-lg">
Net Earn APY
</div>
<div className="mt-4 mb-2 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Supply APY</div>
<div>
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</div>
<div>
{aprData?.supplyRewardApr.times(100).toFixed(2)}
%
</div>
</div>
</div>
<Line />
<div className="flex mt-2 justify-between text-md font-normal">
<div>Net Supply APY</div>
<div>
{aprData?.netSupplyApr.times(100).toFixed(2)}%
</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<div className="w-3/4">
Expand Down
104 changes: 92 additions & 12 deletions apps/frontend/src/components/MarketsView/MarketTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,39 @@

import { TableCell, TableRow } from '@/components/ui/table';
import {
useBorrowRate,
useApr,
useCollateralConfigurations,
useMarketBasics,
useMarketConfiguration,
usePrice,
useSupplyRate,
useTotalCollateral,
useUtilization,
} from '@/hooks';
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 = (
<TableRow>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -159,11 +161,89 @@ export const MarketTableRow = ({
}
</div>
</TableCell>
<TableCell>
<div className="text-lavender font-medium">{supplyApr}</div>
<TableCell
className={cn(
isAprPending && 'animate-pulse',
'text-lavender font-medium'
)}
>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger
onClick={(e: { preventDefault: () => any }) => e.preventDefault()}
>
<div>{aprData?.netSupplyApr.times(100).toFixed(2)}%</div>
</TooltipTrigger>
<TooltipContent
onPointerDownOutside={(e: {
preventDefault: () => any;
}) => e.preventDefault()}
>
<div className="w-[200px] p-2">
<div className="flex justify-center font-semibold text-white text-lg">
Net Earn APY
</div>
<div className="mt-4 mb-2 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Supply APY</div>
<div>{aprData?.supplyBaseApr.times(100).toFixed(2)}%</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</div>
<div>{aprData?.supplyRewardApr.times(100).toFixed(2)}%</div>
</div>
</div>
<Line />
<div className="flex mt-2 justify-between text-md font-normal">
<div>Net Supply APY</div>
<div>{aprData?.netSupplyApr.times(100).toFixed(2)}%</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>
<div className="text-lavender font-medium">{borrowApr}</div>
<TableCell
className={cn(
isAprPending && 'animate-pulse',
'text-lavender font-medium'
)}
>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger
onClick={(e: { preventDefault: () => any }) => e.preventDefault()}
>
<div>{aprData?.netBorrowApr.times(100).toFixed(2)}%</div>
</TooltipTrigger>
<TooltipContent
onPointerDownOutside={(e: {
preventDefault: () => any;
}) => e.preventDefault()}
>
<div className="w-[200px] p-2">
<div className="flex justify-center font-semibold text-white text-lg">
Net Borrow APY
</div>
<div className="mt-4 mb-2 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Borrow APY</div>
<div>{aprData?.borrowBaseApr.times(100).toFixed(2)}%</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</div>
<div>{aprData?.borrowRewardApr.times(100).toFixed(2)}%</div>
</div>
</div>
<Line />
<div className="flex mt-2 justify-between text-md font-normal">
<div>Net Borrow APY</div>
<div>{aprData?.netBorrowApr.times(100).toFixed(2)}%</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell className="text-lavender font-medium">
{getFormattedPrice(
Expand Down

0 comments on commit 197022a

Please sign in to comment.