add rank to top bar points

apis/rewards.ts

@@ -34,22 +34,6 @@ type LeaderboardItem = {
   tier: string
 }
 
-export const fetchRewardsPoints = async (
-  mangoAccountPk: string,
-  seasonId: number,
-) => {
-  try {
-    const data = await fetch(
-      `${MANGO_DATA_API_URL}/seasons/season-total-points-account?mango-account=${mangoAccountPk}&seasons-id=${seasonId}`,
-    )
-    const res = await data.json()
-    return res?.total_points || 0
-  } catch (e) {
-    console.log('Failed to fetch points', e)
-    return 0
-  }
-}
-
 export const fetchDistribution = async (provider: Provider, season: number) => {
   try {
     const client = new MangoMintsRedemptionClient(provider as AnchorProvider)

components/TopBar.tsx

@@ -30,13 +30,14 @@ import { IS_ONBOARDED_KEY } from 'utils/constants'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import SettingsModal from './modals/SettingsModal'
 import DepositWithdrawIcon from './icons/DepositWithdrawIcon'
-import { useCurrentSeason, useWalletPoints } from 'hooks/useRewards'
+import { useAccountPointsAndRank, useCurrentSeason } from 'hooks/useRewards'
 import SheenLoader from './shared/SheenLoader'
 import Link from 'next/link'
 import { useIsWhiteListed } from 'hooks/useIsWhiteListed'
 import FormatNumericValue from './shared/FormatNumericValue'
 import { useRouter } from 'next/router'
 import TopBarStore from '@store/topBarStore'
+import MedalIcon from './icons/MedalIcon'
 
 export const TOPBAR_ICON_BUTTON_CLASSES =
   'relative flex h-16 w-10 sm:w-16 items-center justify-center sm:border-l sm:border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2'
@@ -49,10 +50,10 @@ const TopBar = () => {
   const { connected, wallet } = useWallet()
   const { data: seasonData } = useCurrentSeason()
   const {
-    data: walletPoints,
-    isLoading: loadingWalletRewardsData,
-    refetch: refetchWalletPoints,
-  } = useWalletPoints(mangoAccountAddress, seasonData?.season_id, wallet)
+    data: accountPointsAndRank,
+    isInitialLoading: loadingAccountPointsAndRank,
+    refetch: refetchPoints,
+  } = useAccountPointsAndRank(mangoAccountAddress, seasonData?.season_id)
   const { data: isWhiteListed } = useIsWhiteListed()
   const router = useRouter()
   const themeData = mangoStore((s) => s.themeData)
@@ -102,7 +103,7 @@ const TopBar = () => {
 
   useEffect(() => {
     if (router.pathname === '/rewards') {
-      refetchWalletPoints()
+      refetchPoints()
     }
   }, [router])
 
@@ -184,15 +185,45 @@ const TopBar = () => {
             )
           ) : isWhiteListed ? (
             <Link href="/rewards" shallow={true}>
-              <div className="flex h-16 items-center justify-between border-x border-th-bkg-3 px-4 md:border-l-0 lg:pl-6">
+              <div className="flex h-16 items-center justify-between border-x border-th-bkg-3 px-4 md:border-l-0">
+                {accountPointsAndRank?.rank ? (
+                  <div
+                    className={`relative hidden h-6 w-6 flex-shrink-0 items-center justify-center rounded-full sm:flex ${
+                      accountPointsAndRank.rank < 4 ? '' : 'bg-th-bkg-3'
+                    } mr-2`}
+                  >
+                    <p
+                      className={`relative z-10 text-xs font-bold ${
+                        accountPointsAndRank.rank < 4
+                          ? 'text-th-bkg-1'
+                          : 'text-th-fgd-1'
+                      }`}
+                    >
+                      {accountPointsAndRank.rank}
+                    </p>
+                    {accountPointsAndRank.rank < 4 ? (
+                      <MedalIcon
+                        className="absolute"
+                        rank={accountPointsAndRank.rank}
+                      />
+                    ) : null}
+                  </div>
+                ) : loadingAccountPointsAndRank ? (
+                  <SheenLoader className="mr-2 hidden sm:block">
+                    <div className="h-6 w-6 bg-th-bkg-2" />
+                  </SheenLoader>
+                ) : null}
                 <div>
                   <span className="whitespace-nowrap font-bold text-th-fgd-2">
                     Points
                   </span>
-                  {!loadingWalletRewardsData ? (
+                  {!loadingAccountPointsAndRank ? (
                     <p className="bg-gradient-to-br from-yellow-400 to-red-400 bg-clip-text font-display text-base text-transparent">
-                      {walletPoints ? (
-                        <FormatNumericValue value={walletPoints} decimals={0} />
+                      {accountPointsAndRank?.total_points ? (
+                        <FormatNumericValue
+                          value={accountPointsAndRank.total_points}
+                          decimals={0}
+                        />
                       ) : wallet?.adapter.publicKey ? (
                         0
                       ) : (

hooks/notifications/useNotificationSocket.ts

@@ -8,18 +8,16 @@ import { Notification } from 'apis/notifications/notifications'
 import { tryParse } from 'utils/formatting'
 import { NotificationsWebSocket } from 'apis/notifications/websocket'
 import useMangoAccount from 'hooks/useMangoAccount'
-import { useCurrentSeason, useWalletPoints } from 'hooks/useRewards'
+import { useAccountPointsAndRank, useCurrentSeason } from 'hooks/useRewards'
 
 export function useNotificationSocket() {
   const isAuth = useIsAuthorized()
   const { publicKey } = useWallet()
   const { mangoAccountAddress } = useMangoAccount()
-  const { wallet } = useWallet()
   const { data: seasonData } = useCurrentSeason()
-  const { refetch } = useWalletPoints(
+  const { refetch } = useAccountPointsAndRank(
     mangoAccountAddress,
     seasonData?.season_id,
-    wallet,
   )
 
   const token = NotificationCookieStore((s) => s.currentToken)

hooks/useRewards.ts

@@ -1,4 +1,3 @@
-import { Wallet } from '@solana/wallet-adapter-react'
 import { PublicKey } from '@solana/web3.js'
 import mangoStore from '@store/mangoStore'
 import { useQuery } from '@tanstack/react-query'
@@ -8,7 +7,6 @@ import {
   fetchCurrentSeason,
   fetchDistribution,
   fetchLeaderboard,
-  fetchRewardsPoints,
 } from 'apis/rewards'
 import { useEffect, useState } from 'react'
 
@@ -65,24 +63,6 @@ export const useDistribution = (seasonId: number | undefined) => {
   )
 }
 
-export const useWalletPoints = (
-  mangoAccountAddress: string,
-  season_id: number | undefined,
-  wallet: Wallet | null,
-) => {
-  return useQuery(
-    ['rewards-points', mangoAccountAddress, season_id],
-    () => fetchRewardsPoints(mangoAccountAddress, season_id!),
-    {
-      cacheTime: 1000 * 60 * 10,
-      staleTime: 1000 * 60,
-      retry: 3,
-      refetchOnWindowFocus: false,
-      enabled: !!(wallet?.adapter && mangoAccountAddress),
-    },
-  )
-}
-
 export const useTopAccountsLeaderBoard = (season_id: number | undefined) => {
   return useQuery(
     ['top-accounts-leaderboard-data'],