add equity leaderboard

2023-11-10 13:54:04 +11:00 · 2023-11-10 13:54:04 +11:00 · 761dbeccc1
parent 8cc4053fc0
commit 761dbeccc1
14 changed files with 238 additions and 73 deletions
--- a/components/account/AccountOrders.tsx
+++ b/components/account/AccountOrders.tsx
@ -1,12 +1,11 @@
+import TabsText from '@components/shared/TabsText'
 import SwapOrders from '@components/swap/SwapTriggerOrders'
 import OpenOrders from '@components/trade/OpenOrders'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'

 const AccountOrders = () => {
-  const { t } = useTranslation('trade')
  const { mangoAccount } = useMangoAccount()
  const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
  const [activeTab, setActiveTab] = useState('trade:limit')
@ -24,21 +23,12 @@ const AccountOrders = () => {

  return (
    <>
-      <div className="flex space-x-6 px-4 py-4 md:px-6">
-        {tabsWithCount.map((tab) => (
-          <button
-            className={`flex items-center space-x-2 text-base font-bold focus:outline-none ${
-              activeTab === tab[0] ? 'text-th-active' : ''
-            }`}
-            onClick={() => setActiveTab(tab[0])}
-            key={tab[0]}
-          >
-            <span>{t(tab[0])}</span>
-            <div className="rounded-md bg-th-bkg-3 px-1.5 py-0.5 font-body text-xs font-medium text-th-fgd-2">
-              <span>{tab[1]}</span>
-            </div>
-          </button>
-        ))}
+      <div className="px-4 py-4 md:px-6">
+        <TabsText
+          activeTab={activeTab}
+          onChange={setActiveTab}
+          tabs={tabsWithCount}
+        />
      </div>
      <div className="flex flex-1 flex-col border-t border-th-bkg-3">
        {activeTab === 'trade:limit' ? <OpenOrders /> : <SwapOrders />}
--- a/components/leaderboard/LeaderboardPage.tsx
+++ b/components/leaderboard/LeaderboardPage.tsx
@ -9,40 +9,92 @@ import { useMemo, useState } from 'react'
 import { EmptyObject } from 'types'
 import { MANGO_DATA_API_URL } from 'utils/constants'
 import LeaderboardTable from './LeaderboardTable'
+import TabsText from '@components/shared/TabsText'

 export interface LeaderboardRes {
  date_hour: string
  mango_account: string
-  pnl: number
  profile_image_url: string | null
  profile_name: string
-  start_date_hour: string
  trader_category: string
  wallet_pk: string
 }

-type DaysToShow = '1DAY' | '1WEEK' | 'ALLTIME'
+export interface PnlLeaderboardRes extends LeaderboardRes {
+  pnl: number
+  start_date_hour: string
+}

-const isLeaderboard = (
-  response: null | EmptyObject | LeaderboardRes[],
-): response is LeaderboardRes[] => {
+export interface EquityLeaderboardRes extends LeaderboardRes {
+  account_equity: number
+}
+
+const isPnlLeaderboardRes = (
+  response: null | EmptyObject | PnlLeaderboardRes[],
+): response is PnlLeaderboardRes[] => {
  if (response && Array.isArray(response)) {
    return true
  }
  return false
 }

-const fetchLeaderboard = async (
+const isEquityLeaderboardRes = (
+  response: null | EmptyObject | EquityLeaderboardRes[],
+): response is EquityLeaderboardRes[] => {
+  if (response && Array.isArray(response)) {
+    return true
+  }
+  return false
+}
+
+export const isPnlLeaderboard = (
+  item: PnlLeaderboardRes | EquityLeaderboardRes,
+): item is PnlLeaderboardRes => {
+  if ('pnl' in item) {
+    return true
+  }
+  return false
+}
+
+export const isEquityLeaderboard = (
+  item: PnlLeaderboardRes | EquityLeaderboardRes,
+): item is EquityLeaderboardRes => {
+  if ('account_equity' in item) {
+    return true
+  }
+  return false
+}
+
+type DaysToShow = '1DAY' | '1WEEK' | 'ALLTIME'
+
+const fetchPnlLeaderboard = async (
  daysToShow: DaysToShow,
  offset = 0,
-): Promise<Array<LeaderboardRes>> => {
+): Promise<Array<PnlLeaderboardRes>> => {
  const data = await fetch(
    `${MANGO_DATA_API_URL}/leaderboard-pnl?over_period=${daysToShow}&offset=${offset}`,
  )
-  const parsedData: null | EmptyObject | LeaderboardRes[] = await data.json()
+  const parsedData: null | EmptyObject | PnlLeaderboardRes[] = await data.json()

  let leaderboardData
-  if (isLeaderboard(parsedData)) {
+  if (isPnlLeaderboardRes(parsedData)) {
+    leaderboardData = parsedData
+  }
+
+  return leaderboardData ?? []
+}
+
+const fetchEquityLeaderboard = async (
+  offset = 0,
+): Promise<Array<EquityLeaderboardRes>> => {
+  const data = await fetch(
+    `${MANGO_DATA_API_URL}/leaderboard-account-equity?offset=${offset}`,
+  )
+  const parsedData: null | EmptyObject | EquityLeaderboardRes[] =
+    await data.json()
+
+  let leaderboardData
+  if (isEquityLeaderboardRes(parsedData)) {
    leaderboardData = parsedData
  }

@ -52,72 +104,135 @@ const fetchLeaderboard = async (
 const LeaderboardPage = () => {
  const { t } = useTranslation(['common', 'leaderboard'])
  const [daysToShow, setDaysToShow] = useState<DaysToShow>('ALLTIME')
+  const [leaderboardToShow, setLeaderboardToShow] = useState('pnl')
  const { hiddenAccounts } = useHiddenMangoAccounts()

-  const { data, isLoading, isFetching, isFetchingNextPage, fetchNextPage } =
-    useInfiniteQuery(
-      ['leaderboard', daysToShow],
-      ({ pageParam }) => fetchLeaderboard(daysToShow, pageParam),
-      {
-        cacheTime: 1000 * 60 * 10,
-        staleTime: 1000 * 60 * 5,
-        retry: 3,
-        refetchOnWindowFocus: false,
-        keepPreviousData: true,
-        getNextPageParam: (_lastPage, pages) => pages.length * 20,
-      },
-    )
+  const {
+    data: pnlData,
+    isLoading: loadingPnl,
+    isFetching: fetchingPnl,
+    isFetchingNextPage: fetchingNextPnlPage,
+    fetchNextPage: fetchNextPnlPage,
+  } = useInfiniteQuery(
+    ['pnl-leaderboard', daysToShow, leaderboardToShow],
+    ({ pageParam }) => fetchPnlLeaderboard(daysToShow, pageParam),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60 * 5,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+      getNextPageParam: (_lastPage, pages) => pages.length * 20,
+    },
+  )

-  const leaderboardData = useMemo(() => {
-    if (data?.pages.length) {
+  const {
+    data: equityData,
+    isLoading: loadingEquity,
+    isFetching: fetchingEquity,
+    isFetchingNextPage: fetchingNextEquityPage,
+    fetchNextPage: fetchNextEquityPage,
+  } = useInfiniteQuery(
+    ['equity-leaderboard', leaderboardToShow],
+    ({ pageParam }) => fetchEquityLeaderboard(pageParam),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60 * 5,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+      getNextPageParam: (_lastPage, pages) => pages.length * 20,
+    },
+  )
+
+  const pnlLeaderboardData = useMemo(() => {
+    if (pnlData?.pages.length) {
      if (hiddenAccounts) {
-        return data.pages
+        return pnlData.pages
          .flat()
          .filter((d) => !hiddenAccounts.includes(d.mango_account))
      } else {
-        return data.pages.flat()
+        return pnlData.pages.flat()
      }
    }
    return []
-  }, [data, daysToShow])
+  }, [pnlData, daysToShow])
+
+  const equityLeaderboardData = useMemo(() => {
+    if (equityData?.pages.length) {
+      if (hiddenAccounts) {
+        return equityData.pages
+          .flat()
+          .filter((d) => !hiddenAccounts.includes(d.mango_account))
+      } else {
+        return equityData.pages.flat()
+      }
+    }
+    return []
+  }, [equityData])
+
+  const leaderboardData = useMemo(() => {
+    return leaderboardToShow === 'pnl'
+      ? pnlLeaderboardData
+      : equityLeaderboardData
+  }, [leaderboardToShow, pnlLeaderboardData, equityLeaderboardData])

  const handleDaysToShow = (days: DaysToShow) => {
    setDaysToShow(days)
  }

+  const isPnl = leaderboardToShow === 'pnl'
+  const loading = isPnl ? loadingPnl : loadingEquity
+  const fetching = isPnl ? fetchingPnl : fetchingEquity
+  const fetchingNextPage = isPnl ? fetchingNextPnlPage : fetchingNextEquityPage
+  const fetchNextPage = isPnl ? fetchNextPnlPage : fetchNextEquityPage
+
  return (
    <div className="p-4 md:p-10 lg:px-0">
      <div className="grid grid-cols-12">
        <div className="col-span-12 lg:col-span-8 lg:col-start-3">
-          <div className="mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
+          <h1 className="mb-2">{t('leaderboard')}</h1>
+          <div className="mb-4 flex items-center justify-between">
            <div>
-              <h1 className="mb-2">{t('leaderboard')}</h1>
-              <p className="mb-4 md:mb-0">
-                {t('leaderboard:leaderboard-desc')}
+              <TabsText
+                activeTab={leaderboardToShow}
+                onChange={(v: string) => setLeaderboardToShow(v)}
+                tabs={[
+                  ['pnl', 0],
+                  ['equity', 0],
+                ]}
+              />
+              <p className="mt-1">
+                {isPnl
+                  ? t('leaderboard:leaderboard-desc-pnl')
+                  : t('leaderboard:leaderboard-desc-equity')}
              </p>
            </div>
-            <div className="w-full md:w-48">
-              <ButtonGroup
-                activeValue={daysToShow}
-                disabled={isLoading}
-                onChange={(v) => handleDaysToShow(v)}
-                names={['24h', '7d', '30d', t('all')]}
-                values={['1DAY', '1WEEK', 'ALLTIME']}
-              />
-            </div>
+            {isPnl ? (
+              <div className="w-full md:w-48">
+                <ButtonGroup
+                  activeValue={daysToShow}
+                  disabled={loadingPnl}
+                  onChange={(v) => handleDaysToShow(v)}
+                  names={['24h', '7d', '30d', t('all')]}
+                  values={['1DAY', '1WEEK', 'ALLTIME']}
+                />
+              </div>
+            ) : null}
          </div>
          {leaderboardData.length ? (
            <LeaderboardTable
              data={leaderboardData}
-              loading={isFetching && !isFetchingNextPage}
+              loading={fetching && !fetchingNextPage}
+              type={leaderboardToShow}
            />
-          ) : !isFetching && !isLoading ? (
+          ) : !fetching && !loading ? (
            <div className="flex flex-col items-center rounded-md border border-th-bkg-3 p-4">
              <NoSymbolIcon className="mb-1 h-7 w-7 text-th-fgd-4" />
              <p>{t('leaderboard:leaderboard-unavailable')}</p>
            </div>
          ) : null}
-          {isLoading || isFetchingNextPage ? (
+          {loading || fetchingNextPage ? (
            <div className="mt-2 space-y-2">
              {[...Array(20)].map((x, i) => (
                <SheenLoader className="flex flex-1" key={i}>
--- a/components/leaderboard/LeaderboardTable.tsx
+++ b/components/leaderboard/LeaderboardTable.tsx
@ -4,14 +4,21 @@ import SheenLoader from '@components/shared/SheenLoader'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useViewport } from 'hooks/useViewport'
 import { formatCurrencyValue } from 'utils/numbers'
-import { LeaderboardRes } from './LeaderboardPage'
+import {
+  EquityLeaderboardRes,
+  PnlLeaderboardRes,
+  isEquityLeaderboard,
+  isPnlLeaderboard,
+} from './LeaderboardPage'

 const LeaderboardTable = ({
  data,
  loading,
+  type,
 }: {
-  data: LeaderboardRes[]
+  data: PnlLeaderboardRes[] | EquityLeaderboardRes[]
  loading: boolean
+  type: string
 }) => {
  return (
    <>
@ -21,7 +28,8 @@ const LeaderboardTable = ({
            item={d}
            loading={loading}
            rank={i + 1}
-            key={d.mango_account + d.pnl + i}
+            key={d.mango_account + i}
+            type={type}
          />
        ))}
      </div>
@ -35,13 +43,20 @@ const LeaderboardRow = ({
  item,
  loading,
  rank,
+  type,
 }: {
-  item: LeaderboardRes
+  item: PnlLeaderboardRes | EquityLeaderboardRes
  loading?: boolean
  rank: number
+  type: string
 }) => {
-  const { profile_name, profile_image_url, mango_account, pnl, wallet_pk } =
-    item
+  const { profile_name, profile_image_url, mango_account, wallet_pk } = item
+  const value =
+    type === 'pnl' && isPnlLeaderboard(item)
+      ? item.pnl
+      : isEquityLeaderboard(item)
+      ? item.account_equity
+      : 0
  const { isTablet } = useViewport()

  return !loading ? (
@ -83,7 +98,7 @@ const LeaderboardRow = ({
      </div>
      <div className="flex items-center">
        <span className="mr-3 text-right font-mono md:text-base">
-          {formatCurrencyValue(pnl, 2)}
+          {formatCurrencyValue(value, 2)}
        </span>
        <ChevronRightIcon className="h-5 w-5 text-th-fgd-3" />
      </div>
--- a/components/shared/TabsText.tsx
+++ b/components/shared/TabsText.tsx
@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+
+const TabsText = ({
+  tabs,
+  activeTab,
+  onChange,
+}: {
+  tabs: [string, number][]
+  activeTab: string
+  onChange: (tab: string) => void
+}) => {
+  const { t } = useTranslation(['common', 'trade'])
+  return (
+    <div className="flex space-x-6">
+      {tabs.map((tab) => (
+        <button
+          className={`flex items-center space-x-2 text-base font-bold focus:outline-none ${
+            activeTab === tab[0] ? 'text-th-active' : ''
+          }`}
+          onClick={() => onChange(tab[0])}
+          key={tab[0]}
+        >
+          <span>{t(tab[0])}</span>
+          {tab[1] ? (
+            <div className="rounded-md bg-th-bkg-3 px-1.5 py-0.5 font-body text-xs font-medium text-th-fgd-2">
+              <span>{tab[1]}</span>
+            </div>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default TabsText
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -79,6 +79,7 @@
  "edit-account": "Edit Account Name",
  "edit-profile-image": "Edit Profile Image",
  "enable-notifications": "Enable Notifications",
+  "equity": "Equity",
  "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
  "error-token-positions-full": "Not enough token positions available in your account",
--- a/public/locales/en/leaderboard.json
+++ b/public/locales/en/leaderboard.json
@ -1,4 +1,5 @@
 {
-    "leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)",
+    "leaderboard-desc-equity": "Top 100 Mango traders by account equity",
+    "leaderboard-desc-pnl": "Top 100 Mango traders by total PnL (spot and perp)",
    "leaderboard-unavailable": "Leaderboard unavailable"
 }
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -79,6 +79,7 @@
  "edit-account": "Edit Account Name",
  "edit-profile-image": "Edit Profile Image",
  "enable-notifications": "Enable Notifications",
+  "equity": "Equity",
  "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
  "error-token-positions-full": "Not enough token positions available in your account",
--- a/public/locales/es/leaderboard.json
+++ b/public/locales/es/leaderboard.json
@ -1,4 +1,5 @@
 {
-    "leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)",
+    "leaderboard-desc-equity": "Top 100 Mango traders by account equity",
+    "leaderboard-desc-pnl": "Top 100 Mango traders by total PnL (spot and perp)",
    "leaderboard-unavailable": "Leaderboard unavailable"
 }
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -79,6 +79,7 @@
  "edit-account": "Edit Account Name",
  "edit-profile-image": "Edit Profile Image",
  "enable-notifications": "Enable Notifications",
+  "equity": "Equity",
  "error-borrow-exceeds-limit": "Maximum borrow for the current period is {{remaining}}. New period starts {{resetTime}}",
  "error-repay-insufficient-funds": "Not enough {{token}} in your wallet to repay this amount",
  "error-token-positions-full": "Not enough token positions available in your account",
--- a/public/locales/ru/leaderboard.json
+++ b/public/locales/ru/leaderboard.json
@ -1,4 +1,5 @@
 {
-    "leaderboard-desc": "Top 100 Mango traders by total PnL (spot and perp)",
+    "leaderboard-desc-equity": "Top 100 Mango traders by account equity",
+    "leaderboard-desc-pnl": "Top 100 Mango traders by total PnL (spot and perp)",
    "leaderboard-unavailable": "Leaderboard unavailable"
 }
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -79,6 +79,7 @@
  "edit-account": "编辑帐户标签",
  "edit-profile-image": "切换头像",
  "enable-notifications": "开启通知",
+  "equity": "Equity",
  "error-borrow-exceeds-limit": "目前期间的最大借贷为{{remaining}}.新期间从{{resetTime}}开始",
  "error-repay-insufficient-funds": "钱包里的{{token}}不足归还",
  "error-token-positions-full": "你帐户的币位已占满",
--- a/public/locales/zh/leaderboard.json
+++ b/public/locales/zh/leaderboard.json
@ -1,4 +1,5 @@
 {
-    "leaderboard-desc": "按总盈亏（现货和永续合约）计算的前100名Mango交易商",
+    "leaderboard-desc-equity": "Top 100 Mango traders by account equity",
+    "leaderboard-desc-pnl": "按总盈亏（现货和永续合约）计算的前100名Mango交易商",
    "leaderboard-unavailable": "无法显示排行榜"
 }
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -79,6 +79,7 @@
  "edit-account": "編輯帳戶標籤",
  "edit-profile-image": "切換頭像",
  "enable-notifications": "開啟通知",
+  "equity": "Equity",
  "error-borrow-exceeds-limit": "目前期間的最大借貸為{{remaining}}.新期間從{{resetTime}}開始",
  "error-repay-insufficient-funds": "錢包裡的{{token}}不足歸還",
  "error-token-positions-full": "你帳戶的幣位已占滿",
--- a/public/locales/zh_tw/leaderboard.json
+++ b/public/locales/zh_tw/leaderboard.json
@ -1,4 +1,5 @@
 {
-    "leaderboard-desc": "按總盈虧（現貨和永續合約）計算的前100名Mango交易商",
+    "leaderboard-desc-equity": "Top 100 Mango traders by account equity",
+    "leaderboard-desc-pnl": "按總盈虧（現貨和永續合約）計算的前100名Mango交易商",
    "leaderboard-unavailable": "無法顯示排行榜"
 }