Skip to content

Commit

Permalink
feat: lm rewards (#234)
Browse files Browse the repository at this point in the history
Co-authored-by: Andy <69682837+andyv09@users.noreply.github.com>
  • Loading branch information
martines3000 and andyv09 authored Jan 13, 2025
1 parent c28ba9c commit 370ba69
Show file tree
Hide file tree
Showing 19 changed files with 744 additions and 293 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ build
dist
.env
.DS_Store
scripts
1 change: 1 addition & 0 deletions apps/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"bignumber.js": "^9.1.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"dayjs": "^1.11.13",
"encoding": "^0.1.13",
"fuels": "0.96.1",
"lucide-react": "^0.460.0",
Expand Down
170 changes: 150 additions & 20 deletions apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { InfoIcon } from '@/components/InfoIcon';
import { Line } from '@/components/Line';
import { PointIcons } from '@/components/PointIcons';
import { POINTS_BORROW } from '@/components/PointIcons/PointsTooltip';
import {
POINTS_BORROW,
POINTS_LM,
} from '@/components/PointIcons/PointsTooltip';
import { Title } from '@/components/Title';
import { Button } from '@/components/ui/button';
import {
Expand All @@ -20,12 +24,18 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { appConfig } from '@/configs';
import {
USER_ROLE,
useApr,
useBalance,
useBorrowCapacity,
useBorrowRate,
useMarketConfiguration,
usePrice,
useUserRole,
Expand All @@ -40,12 +50,7 @@ import {
selectChangeTokenAmount,
useMarketStore,
} from '@/stores';
import {
SYMBOL_TO_ICON,
formatUnits,
getBorrowApr,
getFormattedNumber,
} from '@/utils';
import { SYMBOL_TO_ICON, formatUnits, getFormattedNumber } from '@/utils';
import { useAccount, useIsConnected } from '@fuels/react';
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import BigNumber from 'bignumber.js';
Expand All @@ -66,6 +71,12 @@ const SkeletonRow = (
<TableCell>
<Skeleton className="w-full h-[40px] bg-primary/20 rounded-md" />
</TableCell>
<TableCell>
<Skeleton className="w-full h-[40px] bg-primary/20 rounded-md" />
</TableCell>
<TableCell>
<Skeleton className="w-full h-[40px] bg-primary/20 rounded-md" />
</TableCell>
<TableCell>
<div className="flex gap-x-2 w-full">
<Button className="w-1/2" disabled={true}>
Expand Down Expand Up @@ -94,6 +105,14 @@ const SkeletonCardContent = (
<div className="w-1/2 text-moon font-medium">Your Supplied Assets</div>
<Skeleton className="w-1/2 h-[24px] bg-primary/20 rounded-md" />
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">Borrow APY</div>
<Skeleton className="w-1/2 h-[24px] bg-primary/20 rounded-md" />
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">Borrow APY</div>
<Skeleton className="w-1/2 h-[24px] bg-primary/20 rounded-md" />
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">Supply Points</div>
<Skeleton className="w-1/2 h-[24px] bg-primary/20 rounded-md" />
Expand All @@ -111,7 +130,6 @@ export const BorrowTable = () => {
);
const changeInputDialogOpen = useMarketStore(selectChangeInputDialogOpen);

const { data: borrowRate, isPending: isBorrowRatePending } = useBorrowRate();
const { data: userSupplyBorrow } = useUserSupplyBorrow();
const { data: priceData } = usePrice();
const { data: marketConfiguration, isPending: isPendingMarketConfiguration } =
Expand All @@ -125,6 +143,8 @@ export const BorrowTable = () => {
changeInputDialogOpen(true);
};

const { data: aprData, isPending: isAprPending } = useApr();

const { isConnected } = useIsConnected();

const { data: balance } = useBalance({
Expand Down Expand Up @@ -161,7 +181,7 @@ export const BorrowTable = () => {
<Table className="max-lg:hidden">
<TableHeader>
<TableRow>
<TableHead className="w-3/12">
<TableHead className="w-2/12">
<div className="flex items-center gap-x-2">
Borrow Asset
<InfoIcon
Expand All @@ -171,9 +191,29 @@ export const BorrowTable = () => {
/>
</div>
</TableHead>
<TableHead className="w-1/6">Borrow APY</TableHead>
<TableHead className="w-1/6">Your Borrow Position</TableHead>
<TableHead className="w-1/6">
<TableHead className="w-2/12">Borrow APY</TableHead>
<TableHead className="w-2/12">Your Borrow Position</TableHead>
<TableHead className="w-1/12">
<div className="flex items-center gap-x-2">
Reward APY
<InfoIcon
text={
'Reward APY shows partner token APY that the user earns while taking the Borrow position.'
}
/>
</div>
</TableHead>
<TableHead className="w-1/12">
<div className="flex items-center gap-x-2">
Net APY
<InfoIcon
text={
'Net APY shows combined Borrow APY and Reward APY (Net APY = Borrow APY - Reward APY).'
}
/>
</div>
</TableHead>
<TableHead className="w-2/12">
<div className="flex items-center gap-x-2">
Borrow Points
<InfoIcon
Expand All @@ -183,11 +223,11 @@ export const BorrowTable = () => {
/>
</div>
</TableHead>
<TableHead className="w-3/12">{}</TableHead>
<TableHead className="w-2/12">{}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isPendingMarketConfiguration ? (
{isPendingMarketConfiguration || isAprPending ? (
SkeletonRow
) : (
<TableRow>
Expand Down Expand Up @@ -239,13 +279,74 @@ export const BorrowTable = () => {
</TableCell>
<TableCell
className={cn(
isBorrowRatePending && 'animate-pulse',
isAprPending && 'animate-pulse',
'text-white text-md font-medium'
)}
>
{getBorrowApr(borrowRate)}
{aprData?.borrowBaseApr.times(100).toFixed(2)}%
</TableCell>
<TableCell>{borrowedBalance}</TableCell>
<TableCell
className={cn(
isAprPending && 'animate-pulse',
'text-white text-md font-medium'
)}
>
<div className="flex gap-x-2 items-center">
{aprData?.borrowRewardApr.times(100).toFixed(2)}%
<PointIcons points={POINTS_LM} />
</div>
</TableCell>
<TableCell
className={cn(
isAprPending && 'animate-pulse',
'text-white text-md 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>
<PointIcons points={POINTS_BORROW} />
</TableCell>
Expand Down Expand Up @@ -307,7 +408,7 @@ export const BorrowTable = () => {
<CardDescription>Card Description</CardDescription>
</CardHeader>
</VisuallyHidden.Root>
{isPendingMarketConfiguration ? (
{isPendingMarketConfiguration || isAprPending ? (
SkeletonCardContent
) : (
<CardContent>
Expand Down Expand Up @@ -365,10 +466,10 @@ export const BorrowTable = () => {
<div
className={cn(
'text-white text-md font-medium',
isBorrowRatePending && 'animate-pulse'
isAprPending && 'animate-pulse'
)}
>
{getBorrowApr(borrowRate)}
{aprData?.borrowBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="w-full flex items-center">
Expand All @@ -377,6 +478,35 @@ export const BorrowTable = () => {
</div>
<div className="text-moon">{borrowedBalance}</div>
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon text-md font-medium">
Reward APY
</div>
<div
className={cn(
'text-white text-md font-medium',
isAprPending && 'animate-pulse'
)}
>
<div className="flex gap-x-2 items-center">
{aprData?.borrowRewardApr.times(100).toFixed(2)}%
<PointIcons points={POINTS_LM} />
</div>
</div>
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon text-md font-medium">
Net APY
</div>
<div
className={cn(
'text-white text-md font-medium',
isAprPending && 'animate-pulse'
)}
>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
</div>
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">
Borrow Points
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -280,14 +280,7 @@ const CollateralTableRow = ({
</TableCell>
<TableCell>
<div className="h-full flex items-center gap-x-2">
<PointIcons
points={[
...(symbol === 'USDT' || symbol === 'ETH'
? [POINTS_COLLATERAL[0]]
: [POINTS_COLLATERAL[1]]),
POINTS_COLLATERAL[2],
]}
/>
<PointIcons points={POINTS_COLLATERAL} />
</div>
</TableCell>
<TableCell>
Expand Down Expand Up @@ -402,15 +395,7 @@ const CollateralCard = ({
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">Supply Points</div>
<PointIcons
points={[
...(symbol === 'USDT' || symbol === 'ETH'
? [POINTS_COLLATERAL[0]]
: [POINTS_COLLATERAL[1]]),
POINTS_COLLATERAL[2],
]}
mobile
/>
<PointIcons points={POINTS_COLLATERAL} mobile />
</div>
</div>
</CardContent>
Expand Down
Loading

0 comments on commit 370ba69

Please sign in to comment.