From 6b4eef8140171ab7b25b2c05aa13bd75c03a63ba Mon Sep 17 00:00:00 2001 From: Martin Domajnko <35891136+martines3000@users.noreply.github.com> Date: Tue, 26 Nov 2024 12:54:35 +0100 Subject: [PATCH] chore: enable swaypoints (#209) Co-authored-by: tadejpodrekar --- .../DashboardView/AssetsTable/BorrowTable.tsx | 47 +---- .../AssetsTable/CollateralTable.tsx | 85 ++------ .../DashboardView/AssetsTable/LendTable.tsx | 47 +---- .../src/components/LeaderboardView/index.tsx | 184 +++++++++--------- .../frontend/src/components/Navbar/Points.tsx | 62 +----- .../components/PointIcons/PointsTooltip.tsx | 158 +++++++++++++++ .../src/components/PointIcons/index.tsx | 13 +- .../src/hooks/useLeaderboardPoints.ts | 7 +- apps/frontend/src/hooks/useUser.ts | 7 +- 9 files changed, 301 insertions(+), 309 deletions(-) create mode 100644 apps/frontend/src/components/PointIcons/PointsTooltip.tsx diff --git a/apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx b/apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx index 6568b337..22444567 100644 --- a/apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx +++ b/apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx @@ -1,5 +1,6 @@ import { InfoIcon } from '@/components/InfoIcon'; -import { type Point, PointIcons } from '@/components/PointIcons'; +import { PointIcons } from '@/components/PointIcons'; +import { POINTS_BORROW } from '@/components/PointIcons/PointsTooltip'; import { Title } from '@/components/Title'; import { Button } from '@/components/ui/button'; import { @@ -51,46 +52,6 @@ import BigNumber from 'bignumber.js'; import Image from 'next/image'; import { useMemo } from 'react'; -const POINTS_BORROW: Point[] = [ - { - id: '1', - name: 'Activity Points', - description: ( -
- By Borrowing USDC on Swaylend you get{' '} - 4x Fuel Points Multiplier: -
-{' '} - - 2x for Borrowing Activity - -
-{' '} - - 2x for using USDC as Incentivised Asset - -
-
- For more details, check out our{' '} - - blog post - - . -
- ), - icon: SYMBOL_TO_ICON.FUEL, - }, - // { - // id: '2', - // name: 'Swaylend', - // description: 'Earn Swaylend Points by lending assets', - // icon: SYMBOL_TO_ICON.SWAY, - // }, -]; - const SkeletonRow = ( @@ -286,7 +247,7 @@ export const BorrowTable = () => { {borrowedBalance} - + {userRole === USER_ROLE.LENDER ? ( @@ -420,7 +381,7 @@ export const BorrowTable = () => {
Borrow Points
- + diff --git a/apps/frontend/src/components/DashboardView/AssetsTable/CollateralTable.tsx b/apps/frontend/src/components/DashboardView/AssetsTable/CollateralTable.tsx index 99ae3ae5..101b6472 100644 --- a/apps/frontend/src/components/DashboardView/AssetsTable/CollateralTable.tsx +++ b/apps/frontend/src/components/DashboardView/AssetsTable/CollateralTable.tsx @@ -1,7 +1,8 @@ import { AssetName } from '@/components/AssetName'; import { CircularProgressBar } from '@/components/CircularProgressBar'; import { InfoIcon } from '@/components/InfoIcon'; -import { type Point, PointIcons } from '@/components/PointIcons'; +import { PointIcons } from '@/components/PointIcons'; +import { POINTS_COLLATERAL } from '@/components/PointIcons/PointsTooltip'; import { Title } from '@/components/Title'; import { Button } from '@/components/ui/button'; import { @@ -70,61 +71,6 @@ type TableRowProps = { price: BigNumber; }; -const POINTS_COLLATERAL: Point[] = [ - { - id: '1', - name: 'Passive Points', - description: ( -
- Supply this asset as collateral to earn 1 Fuel Point per dollar value. -
Earn up to a 2x multiplier - if the collateral is actively used for borrowing. -
-
- For more details, check out our{' '} - - blog post - - . -
- ), - icon: SYMBOL_TO_ICON.FUEL, - }, - { - id: '2', - name: 'Passive Points', - description: ( -
- Supply this asset as collateral to earn 1 Fuel Point per dollar value. -
-
- For more details, check out our{' '} - - blog post - - . -
- ), - icon: SYMBOL_TO_ICON.FUEL, - }, - // { - // id: '2', - // name: 'Swaylend', - // description: 'Earn Swaylend Points by lending assets', - // icon: SYMBOL_TO_ICON.SWAY, - // }, -]; - const CollateralTableRow = ({ account, assetId, @@ -275,14 +221,16 @@ const CollateralTableRow = ({ - +
+ +
@@ -393,7 +341,14 @@ const CollateralCard = ({
Supply Points
- +
diff --git a/apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx b/apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx index 1313ed49..a569f54e 100644 --- a/apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx +++ b/apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx @@ -1,5 +1,6 @@ import { InfoIcon } from '@/components/InfoIcon'; -import { type Point, PointIcons } from '@/components/PointIcons'; +import { PointIcons } from '@/components/PointIcons'; +import { POINTS_LEND } from '@/components/PointIcons/PointsTooltip'; import { Title } from '@/components/Title'; import { Button } from '@/components/ui/button'; import { @@ -48,46 +49,6 @@ import * as VisuallyHidden from '@radix-ui/react-visually-hidden'; import BigNumber from 'bignumber.js'; import Image from 'next/image'; -const POINTS_LEND: Point[] = [ - { - id: '1', - name: 'Activity Points', - description: ( -
- By Lending USDC on Swaylend you get{' '} - 4x Fuel Points Multiplier: -
-{' '} - - 2x for Lending Activity - -
-{' '} - - 2x for using USDC as Incentivised Asset - -
-
- For more details, check out our{' '} - - blog post - - . -
- ), - icon: SYMBOL_TO_ICON.FUEL, - }, - // { - // id: '2', - // name: 'Swaylend', - // description: 'Earn Swaylend Points by lending assets', - // icon: SYMBOL_TO_ICON.SWAY, - // }, -]; - const SkeletonRow = ( @@ -260,7 +221,7 @@ export const LendTable = () => { {appConfig.assets[marketConfiguration?.baseToken.bits ?? '']} - + {userRole === USER_ROLE.BORROWER ? ( @@ -398,7 +359,7 @@ export const LendTable = () => {
Supply Points
- + diff --git a/apps/frontend/src/components/LeaderboardView/index.tsx b/apps/frontend/src/components/LeaderboardView/index.tsx index 6da4cffe..3616fd61 100644 --- a/apps/frontend/src/components/LeaderboardView/index.tsx +++ b/apps/frontend/src/components/LeaderboardView/index.tsx @@ -1,97 +1,97 @@ 'use client'; -import { notFound } from 'next/navigation'; +import { useLeaderboardPoints, useUser } from '@/hooks'; +import { useIsConnected } from '@fuels/react'; +import { TriangleAlert } from 'lucide-react'; +import { Skeleton } from '../ui/skeleton'; export const LeaderboardView = () => { - return notFound(); - // const { isConnected } = useIsConnected(); - // const { data: leaderboardPoints, isLoading } = useLeaderboardPoints(); - // const { data: user, isLoading: isUserLoading } = useUser(); + const { isConnected } = useIsConnected(); + const { data: leaderboardPoints, isLoading } = useLeaderboardPoints(); + const { data: user, isLoading: isUserLoading } = useUser(); - // return ( - // <> - //
- //
- //
- // Swaylend Leaderboard - //
- //
- // Season 1 - //
- // {isConnected && - // (isUserLoading ? ( - // - // ) : ( - //
- //
- //
Your Rank
- //
- // {user?.rank === 0 ? ( - // Unranked - // ) : ( - // user?.rank - // )} - //
- //
- //
- //
Your Points
- //
- // {user ? user.points : '0'} - //
- //
- //
- // ))} - //
- //
- // Top Contributors - //
- //
- // Points are updated - // every 24 hours - //
- //
- // - // - // - // - // - // - // - // - // - // {isLoading ? ( - // - // - // - // ) : ( - // <> - // {leaderboardPoints?.leaderboard.map((user) => { - // return ( - // - // - // - // - // - // ); - // })} - // - // )} - // - //
RankUserPoints
- // - //
- // {user.rank} - // - // {user.address} - // - // {user.totalPoints} - //
- //
- //
- //
- //
- // Available on Desktop - //
- //
- // - // ); + return ( + <> +
+
+
+ Swaylend Leaderboard +
+
+ Season 1 +
+ {isConnected && + (isUserLoading ? ( + + ) : ( +
+
+
Your Rank
+
+ {user?.rank === 0 ? ( + Unranked + ) : ( + user?.rank + )} +
+
+
+
Your Points
+
+ {user ? user.points : '0'} +
+
+
+ ))} +
+
+ Top Contributors +
+
+ Points are updated + every 24 hours +
+
+ + + + + + + + + + {isLoading ? ( + + + + ) : ( + <> + {leaderboardPoints?.leaderboard.map((user) => { + return ( + + + + + + ); + })} + + )} + +
RankUserPoints
+ +
+ {user.rank} + + {user.address} + + {user.points} +
+
+
+
+ This page is not supported on this screen size. +
+ + ); }; diff --git a/apps/frontend/src/components/Navbar/Points.tsx b/apps/frontend/src/components/Navbar/Points.tsx index f676b5b0..3d920e17 100644 --- a/apps/frontend/src/components/Navbar/Points.tsx +++ b/apps/frontend/src/components/Navbar/Points.tsx @@ -3,38 +3,31 @@ import { PopoverContent, PopoverTrigger, } from '@/components/ui/popover'; +import { useUser } from '@/hooks'; import { useFuelPoints } from '@/hooks/useFuelPoints'; import { cn } from '@/lib/utils'; import { useIsConnected } from '@fuels/react'; +import { Trophy } from 'lucide-react'; import Image from 'next/image'; +import Link from 'next/link'; import { useRef, useState } from 'react'; import { useHover } from 'usehooks-ts'; import POINTS from '/public/icons/points-icon.svg?url'; import { InfoIcon } from '../InfoIcon'; +import { Button } from '../ui/button'; export const Points = () => { const hoverRef = useRef(null); const isHover = useHover(hoverRef); const [isManualOpen, setIsManualOpen] = useState(false); - // const setOpen = useReferralModalStore(selectReferralModalSetOpen); - // const { data: user, isPending, isLoading, isError, refetch } = useUser(); - - // const [isCopied, setIsCopied] = useState(false); + const { data: user } = useUser(); const { isConnected } = useIsConnected(); const { data: fuelPoints } = useFuelPoints(); - // const handleCopy = async (value: string) => { - // setIsCopied(true); - // await navigator.clipboard.writeText(value); - // setTimeout(() => { - // setIsCopied(false); - // }, 1000); - // }; - return ( { ref={hoverRef} onClick={() => setIsManualOpen(true)} > - {/*
- Coming Soon -
*/} points-icon { className="flex flex-col gap-y-2 items-center w-[258px] px-[24px]" >
-
SwayPoints
-
- Coming Soon +
Swaypoints
+
+ {isConnected ? (user ? user.points : '0') : 'Connect Wallet'}
@@ -74,41 +59,12 @@ export const Points = () => { {isConnected ? fuelPoints : 'Connect Wallet'}
- {/* + -
- - {user?.redeemedInviteCode === false && ( - - )} -
*/} ); diff --git a/apps/frontend/src/components/PointIcons/PointsTooltip.tsx b/apps/frontend/src/components/PointIcons/PointsTooltip.tsx new file mode 100644 index 00000000..b5d6786c --- /dev/null +++ b/apps/frontend/src/components/PointIcons/PointsTooltip.tsx @@ -0,0 +1,158 @@ +import { Point } from '@/components/PointIcons'; +import { SYMBOL_TO_ICON } from '@/utils'; + +export const POINTS_COLLATERAL: Point[] = [ + { + id: '1', + name: 'Passive Points', + description: ( +
+ Supply this asset as collateral to earn 1 Fuel Point per dollar value. +
Earn up to a 2x multiplier + if the collateral is actively used for borrowing. +
+
+ For more details, check out our{' '} + + blog post + + . +
+ ), + icon: SYMBOL_TO_ICON.FUEL, + displayMultiplier: '2x', + }, + { + id: '2', + name: 'Passive Points', + description: ( +
+ Supply this asset as collateral to earn 1 Fuel Point per dollar value. +
+
+ For more details, check out our{' '} + + blog post + + . +
+ ), + icon: SYMBOL_TO_ICON.FUEL, + displayMultiplier: undefined, + }, + { + id: '3', + name: 'Swaypoints', + description: ( +
+ Supply this asset as collateral to earn 1 Swaypoint per dollar value. +
+ ), + icon: SYMBOL_TO_ICON.SWAY, + displayMultiplier: undefined, + }, +]; + +export const POINTS_BORROW: Point[] = [ + { + id: '1', + name: 'Activity Points', + description: ( +
+ By Borrowing USDC on Swaylend you get{' '} + 4x Fuel Points Multiplier: +
-{' '} + + 2x for Borrowing Activity + +
-{' '} + + 2x for using USDC as Incentivised Asset + +
+
+ For more details, check out our{' '} + + blog post + + . +
+ ), + icon: SYMBOL_TO_ICON.FUEL, + displayMultiplier: '4x', + }, + { + id: '2', + name: 'Swaypoints', + description: ( +
+ By Borrowing USDC on Swaylend you get a{' '} + 5x Swaypoints Multiplier. +
+ ), + icon: SYMBOL_TO_ICON.SWAY, + displayMultiplier: '5x', + }, +]; + +export const POINTS_LEND: Point[] = [ + { + id: '1', + name: 'Activity Points', + description: ( +
+ By Lending USDC on Swaylend you get{' '} + 4x Fuel Points Multiplier: +
-{' '} + + 2x for Lending Activity + +
-{' '} + + 2x for using USDC as Incentivised Asset + +
+
+ For more details, check out our{' '} + + blog post + + . +
+ ), + icon: SYMBOL_TO_ICON.FUEL, + displayMultiplier: '4x', + }, + { + id: '2', + name: 'Swaypoints', + description: ( +
+ By Lending USDC on Swaylend you get a{' '} + 3x Swaypoints Multiplier. +
+ ), + icon: SYMBOL_TO_ICON.SWAY, + displayMultiplier: '3x', + }, +]; diff --git a/apps/frontend/src/components/PointIcons/index.tsx b/apps/frontend/src/components/PointIcons/index.tsx index 61362fd5..06ab8b79 100644 --- a/apps/frontend/src/components/PointIcons/index.tsx +++ b/apps/frontend/src/components/PointIcons/index.tsx @@ -13,14 +13,14 @@ export type Point = { name: string; description: any; icon: string | StaticImport; + displayMultiplier: string | undefined; }; type PointIconsProps = { points: Point[]; - value?: string; }; -export const PointIcons = ({ points, value }: PointIconsProps) => { +export const PointIcons = ({ points }: PointIconsProps) => { return (
{points.map((point: Point) => { @@ -35,12 +35,15 @@ export const PointIcons = ({ points, value }: PointIconsProps) => {
- {value && ( + {point.displayMultiplier && (
- {value} + {point.displayMultiplier}
)} { }, retry: 3, refetchInterval: false, - refetchOnWindowFocus: false, - gcTime: 60 * 60 * 1000, // Run GC every hour + refetchOnWindowFocus: true, + gcTime: 2 * 60 * 60 * 1000, // Run GC every 2 hours staleTime: 60 * 60 * 1000, // Cache for 1 hour - enabled: false, // FIXME: Enable later }); }; diff --git a/apps/frontend/src/hooks/useUser.ts b/apps/frontend/src/hooks/useUser.ts index f78dfff4..aedffbf0 100644 --- a/apps/frontend/src/hooks/useUser.ts +++ b/apps/frontend/src/hooks/useUser.ts @@ -3,8 +3,6 @@ import { useAccount } from '@fuels/react'; import { useQuery } from '@tanstack/react-query'; type User = { - inviteCode: string; - redeemedInviteCode: boolean; points: number; rank: number; }; @@ -26,10 +24,11 @@ export const useUser = () => { return data as User; }, - // enabled: !!account, - enabled: false, // FIXME: Enable later + enabled: !!account, retry: 3, refetchInterval: false, refetchOnWindowFocus: false, + gcTime: 2 * 60 * 60 * 1000, // Run GC every 2 hours + staleTime: 60 * 60 * 1000, // Cache for 1 hour }); };