Skip to content

Commit

Permalink
chore: update tooltip text (Swaylend#238)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutralabs-bot
lutralabs-bot committed Jan 14, 2025
1 parent 60d512a commit 79abbaf
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 61 deletions.
48 changes: 40 additions & 8 deletions apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,18 @@ export const BorrowTable = () => {
Reward APY
<InfoIcon
text={
'Reward APY shows partner token APY that the user earns while taking the Borrow position.'
<div className="flex flex-col gap-y-1">
<div>
<span className="font-bold">Reward APY</span> represents
the annual percentage yield (APY) on partner tokens that
users can earn while holding a Borrow position.
</div>
<div className="text-moon italic">
Please note: Rewards are applicable only when the
collateral asset for the Borrow position is ETH, USDT,
or FUEL.
</div>
</div>
}
/>
</div>
Expand All @@ -208,7 +219,22 @@ export const BorrowTable = () => {
Net APY
<InfoIcon
text={
'Net APY shows combined Borrow APY and Reward APY (Net APY = Borrow APY - Reward APY).'
<div className="flex flex-col gap-y-1">
<div>
<span className="font-bold">Net APY</span> represents
the total of Borrow APY and Reward APY, calculated as
follows:{' '}
<span className="font-bold">
Net APY = Borrow APY - Reward APY
</span>
.
</div>
<div className="text-moon italic">
Please note: Rewards are applicable only when the
collateral asset for the Borrow position is ETH, USDT,
or FUEL.
</div>
</div>
}
/>
</div>
Expand Down Expand Up @@ -321,22 +347,28 @@ export const BorrowTable = () => {
<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="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">
<div>Reward APY</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)}%
- {aprData?.borrowRewardApr.times(100).toFixed(2)}
%
</div>
</div>
</div>
<Line />
<div className="flex mt-2 justify-between text-md font-normal">
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
Expand All @@ -352,7 +384,7 @@ export const BorrowTable = () => {
</TableCell>
<TableCell>
{userRole === USER_ROLE.LENDER ? (
<div className=" text-lavender bg-primary/20 rounded-lg px-4 py-2 text-sm font-medium text-center w-full">
<div className="text-lavender bg-primary/20 rounded-lg px-4 py-2 text-sm font-medium text-center w-full">
You cannot Borrow assets while you have an active Earn
position. Learn more about how{' '}
<a
Expand Down
49 changes: 33 additions & 16 deletions apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const SkeletonCardContent = (
<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 APY</div>
<div className="w-1/2 text-moon font-medium">Earn APY</div>
<Skeleton className="w-1/2 h-[24px] bg-primary/20 rounded-md" />
</div>
<div className="w-full flex items-center">
Expand Down Expand Up @@ -162,14 +162,18 @@ export const LendTable = () => {
<InfoIcon text={'Base asset available for lending.'} />
</div>
</TableHead>
<TableHead className="w-2/12">Supply APY</TableHead>
<TableHead className="w-2/12">Earn APY</TableHead>
<TableHead className="w-2/12">Your Supplied Assets</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 Earn position.'
<div>
<span className="font-bold">Reward APY</span> represents
the annual percentage yield (APY) on partner tokens that
users can earn while holding a Earn position.
</div>
}
/>
</div>
Expand All @@ -179,7 +183,14 @@ export const LendTable = () => {
Net APY
<InfoIcon
text={
'Net APY shows combined Earn APY and Reward APY (Net APY = Earn APY + Reward APY).'
<div>
<span className="font-bold">Net APY</span> represents the
total of Earn APY and Reward APY, calculated as follows:{' '}
<span className="font-bold">
Net APY = Earn APY + Reward APY
</span>
.
</div>
}
/>
</div>
Expand Down Expand Up @@ -298,25 +309,31 @@ export const LendTable = () => {
<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="mt-4 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Supply APY</div>
<div>Earn APY</div>
<div>
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</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)}%
+ {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)}%
<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>
Expand Down Expand Up @@ -431,7 +448,7 @@ export const LendTable = () => {
</div>
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">Supply APY</div>
<div className="w-1/2 text-moon font-medium">Earn APY</div>
<div
className={cn(
'text-white',
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/DashboardView/Stats/InfoBowl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const InfoBowl = () => {
)}
{bowlMode === 0 && (
<div className="text-sm sm:text-lg text-white font-bold">
Net Supply APY
Net Earn APY
<div className="sm:text-xl text-lg font-semibold">
{aprData?.netSupplyApr.times(100).toFixed(2)}%
</div>
Expand Down
5 changes: 3 additions & 2 deletions apps/frontend/src/components/InfoIcon/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ import {
TooltipTrigger,
} from '@/components/ui/tooltip';
import { Info } from 'lucide-react';
export const InfoIcon = ({ text }: { text: string }) => {
import { ReactNode } from 'react';
export const InfoIcon = ({ text }: { text: ReactNode }) => {
return (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger onClick={(e) => e.preventDefault()}>
<Info className="w-4 h-4" />
</TooltipTrigger>
<TooltipContent onPointerDownOutside={(e) => e.preventDefault()}>
<div>{text}</div>
<div className="font-normal">{text}</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down
40 changes: 26 additions & 14 deletions apps/frontend/src/components/MarketsView/MarketOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,23 +289,29 @@ export default function MarketOverview({
<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="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">
<div>Reward APY</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 mt-2 justify-between text-md font-normal">
<div className="flex justify-between text-md font-normal pt-1">
<div>Net Borrow APY</div>
<div>
{aprData?.netBorrowApr.times(100).toFixed(2)}%
Expand Down Expand Up @@ -346,26 +352,32 @@ export default function MarketOverview({
<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="mt-4 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Supply APY</div>
<div>Earn APY</div>
<div>
{aprData?.supplyBaseApr.times(100).toFixed(2)}%
</div>
</div>
<div className="flex justify-between text-md">
<div>Reward APY</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>
</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)}%
<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>
Expand Down
44 changes: 29 additions & 15 deletions apps/frontend/src/components/MarketsView/MarketTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,20 +183,27 @@ export const MarketTableRow = ({
<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="mt-4 flex flex-col font-normal">
<div className="flex justify-between text-md">
<div>Supply APY</div>
<div>Earn 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 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>
<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>
Expand Down Expand Up @@ -225,18 +232,25 @@ export const MarketTableRow = ({
<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="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">
<div>Reward APY</div>
<div>{aprData?.borrowRewardApr.times(100).toFixed(2)}%</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 mt-2 justify-between text-md font-normal">
<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>
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/PointIcons/PointsTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const POINTS_LM: Point[] = [
{
id: '1',
name: 'FUEL Token Rewards',
description: <></>,
description: null,
icon: SYMBOL_TO_ICON.FUEL,
displayMultiplier: undefined,
},
Expand Down
11 changes: 7 additions & 4 deletions apps/frontend/src/components/PointIcons/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import clsx from 'clsx';
import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
import Image from 'next/image';
import { ReactNode } from 'react';
import {
Tooltip,
TooltipContent,
Expand All @@ -11,7 +12,7 @@ import {
export type Point = {
id: string;
name: string;
description: any;
description: ReactNode;
icon: string | StaticImport;
displayMultiplier: string | undefined;
};
Expand Down Expand Up @@ -63,9 +64,11 @@ export const PointIcons = ({ points, mobile = false }: PointIconsProps) => {
>
<div className="p-1">
<div className="font-bold">{point.name}</div>
<div className="text-sm mt-2 text-gray-400">
{point.description}
</div>
{point.description && (
<div className="text-sm mt-2 text-gray-400">
{point.description}
</div>
)}
</div>
</TooltipContent>
</Tooltip>
Expand Down

0 comments on commit 79abbaf

Please sign in to comment.