Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update tooltip text #238

Merged
merged 1 commit into from
Jan 14, 2025
Merged

chore: update tooltip text #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 40 additions & 8 deletions apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading