Skip to content

Commit

Permalink
chore: tooltip for info bowl, new banner (#239)
Browse files Browse the repository at this point in the history
  • Loading branch information
@martines3000
martines3000 committed Jan 14, 2025
1 parent f3f3b9a commit 519ea73
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 200 deletions.
34 changes: 2 additions & 32 deletions apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { InfoIcon } from '@/components/InfoIcon';
import { Line } from '@/components/Line';
import { NetBorrowTooltip } from '@/components/NetBorrowTooltip';
import { PointIcons } from '@/components/PointIcons';
import {
POINTS_BORROW,
Expand Down Expand Up @@ -343,38 +344,7 @@ export const BorrowTable = () => {
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 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 pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
- {aprData?.borrowRewardApr.times(100).toFixed(2)}
%
</div>
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
</div>
</div>
</div>
<NetBorrowTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
34 changes: 2 additions & 32 deletions apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { InfoIcon } from '@/components/InfoIcon';
import { Line } from '@/components/Line';
import { NetEarnTooltip } from '@/components/NetEarnTooltip';
import { PointIcons } from '@/components/PointIcons';
import { POINTS_LEND, POINTS_LM } from '@/components/PointIcons/PointsTooltip';
import { Title } from '@/components/Title';
Expand Down Expand Up @@ -305,38 +306,7 @@ export const LendTable = () => {
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 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Earn APY</div>
<div>
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
+ {aprData?.supplyRewardApr.times(100).toFixed(2)}
%
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Earn APY</div>
<div>
{aprData?.netSupplyApr.times(100).toFixed(2)}%
</div>
</div>
</div>
</div>
<NetEarnTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
38 changes: 26 additions & 12 deletions apps/frontend/src/components/DashboardView/Stats/InfoBowl.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { NetBorrowTooltip } from '@/components/NetBorrowTooltip';
import { NetEarnTooltip } from '@/components/NetEarnTooltip';
import { Skeleton } from '@/components/ui/skeleton';
import {
Tooltip,
Expand Down Expand Up @@ -169,24 +171,36 @@ export const InfoBowl = () => {
</TooltipTrigger>
<TooltipContent
className={cn(
bowlMode !== 2 && 'hidden',
(bowlMode === undefined || isAprPending) && 'hidden',
'w-[300px]',
'max-lg:hidden'
)}
side="bottom"
onPointerDownOutside={(e) => e.preventDefault()}
>
<div className="p-1">
<span className="font-semibold text-primary">
Liquidation Risk{' '}
</span>
is a measure of how close your position is to being{' '}
<span className="font-semibold text-red-500"> liquidated</span>. The
higher the percentage, the closer you are to liquidation. Upon
reaching <span className="font-semibold text-red-500"> 100%</span>,
your position will be{' '}
<span className="font-semibold text-red-500"> liquidated</span>.
</div>
{bowlMode === 2 && (
<div className="p-1">
<span className="font-semibold text-primary">
Liquidation Risk{' '}
</span>
is a measure of how close your position is to being{' '}
<span className="font-semibold text-red-500"> liquidated</span>.
The higher the percentage, the closer you are to liquidation. Upon
reaching <span className="font-semibold text-red-500"> 100%</span>
, your position will be{' '}
<span className="font-semibold text-red-500"> liquidated</span>.
</div>
)}
{bowlMode === 1 && (
<div className="p-1">
<NetBorrowTooltip aprData={aprData} />
</div>
)}
{bowlMode === 0 && (
<div className="p-1 w-full">
<NetEarnTooltip aprData={aprData} />
</div>
)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
70 changes: 4 additions & 66 deletions apps/frontend/src/components/MarketsView/MarketOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import type React from 'react';
import { useMemo } from 'react';
import { IconPair } from '../IconPair';
import { Line } from '../Line';
import { NetBorrowTooltip } from '../NetBorrowTooltip';
import { NetEarnTooltip } from '../NetEarnTooltip';
import {
Tooltip,
TooltipContent,
Expand Down Expand Up @@ -285,39 +287,7 @@ export default function MarketOverview({
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 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 pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
-{' '}
{aprData?.borrowRewardApr.times(100).toFixed(2)}
%
</div>
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
</div>
</div>
</div>
<NetBorrowTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down Expand Up @@ -348,39 +318,7 @@ export default function MarketOverview({
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 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Earn APY</div>
<div>
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
+{' '}
{aprData?.supplyRewardApr.times(100).toFixed(2)}
%
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Earn APY</div>
<div>
{aprData?.netSupplyApr.times(100).toFixed(2)}%
</div>
</div>
</div>
</div>
<NetEarnTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
58 changes: 4 additions & 54 deletions apps/frontend/src/components/MarketsView/MarketTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import SWAY from '/public/tokens/sway.svg?url';
import { CircularProgressBar } from '../CircularProgressBar';
import { type Collateral, CollateralIcons } from '../CollateralIcons';
import { Line } from '../Line';
import { NetBorrowTooltip } from '../NetBorrowTooltip';
import { NetEarnTooltip } from '../NetEarnTooltip';
import { Skeleton } from '../ui/skeleton';
import {
Tooltip,
Expand Down Expand Up @@ -179,33 +181,7 @@ export const MarketTableRow = ({
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 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Earn APY</div>
<div>{aprData?.supplyBaseApr.times(100).toFixed(2)}%</div>
</div>
<div className="flex justify-between text-md pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
+ {aprData?.supplyRewardApr.times(100).toFixed(2)}%
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Earn APY</div>
<div>{aprData?.netSupplyApr.times(100).toFixed(2)}%</div>
</div>
</div>
</div>
<NetEarnTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand All @@ -228,33 +204,7 @@ export const MarketTableRow = ({
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 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 pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">
Distributed in $FUEL
</div>
</div>
<div>
- {aprData?.borrowRewardApr.times(100).toFixed(2)}%
</div>
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>{aprData?.netBorrowApr.times(100).toFixed(2)}%</div>
</div>
</div>
<NetBorrowTooltip aprData={aprData} />
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
14 changes: 10 additions & 4 deletions apps/frontend/src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,22 @@ export const Navbar = ({ mobile = false }: { mobile?: boolean }) => {

return (
<>
<div className="w-full text-center bg-purple font-medium text-md text-lavender py-2 px-4">
SwayPoints are live! Start earning points now.
<div className="w-full text-center bg-purple font-medium text-md text-lavender py-1 px-4">
Phase 2 & Fuel Points are over! 🎉 View your points
<a
href="https://docs.swaylend.com/swaypoints"
href="https://app.fuel.network/earn-points/phase-2/"
target="_blank"
rel="noreferrer"
className="underline ml-1"
>
Learn more
here
</a>
.
</div>
<div className="w-full text-center bg-purple font-medium text-md text-lavender pb-1 px-4">
Fuel Season 1 starts NOW! Earn Fuel tokens by: Borrowing USDC using ETH,
FUEL, and USDT as collateral. Supplying USDC. Your journey to greater
rewards begins today. 🔥
</div>
{/* DESKTOP */}
<div className="max-lg:hidden">
Expand Down
43 changes: 43 additions & 0 deletions apps/frontend/src/components/NetBorrowTooltip/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import BigNumber from 'bignumber.js';
import { Line } from '../Line';

type NetBorrowTooltipProps = {
aprData:
| {
supplyBaseApr: BigNumber;
borrowBaseApr: BigNumber;
supplyRewardApr: BigNumber;
borrowRewardApr: BigNumber;
netSupplyApr: BigNumber;
netBorrowApr: BigNumber;
}
| undefined;
};

export const NetBorrowTooltip = ({ aprData }: NetBorrowTooltipProps) => {
return (
<div className="min-w-[200px] p-2">
<div className="flex justify-center font-semibold text-white text-lg">
Net Borrow APY
</div>
<div className="mt-4 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 pb-2">
<div className="flex flex-col gap-y-1">
<div>Reward APY</div>
<div className="text-xs italic text-moon">Distributed in $FUEL</div>
</div>
<div>- {aprData?.borrowRewardApr.times(100).toFixed(2)}%</div>
</div>
</div>
<Line />
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>{aprData?.netBorrowApr.times(100).toFixed(2)}%</div>
</div>
</div>
);
};
Loading

0 comments on commit 519ea73

Please sign in to comment.