add rank to top bar points
This commit is contained in:
parent
d1dabf97b2
commit
5a9024a74d
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
) : (
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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'],
|
||||
|
|
Loading…
Reference in New Issue