add spot pnl to leaderboard (#349)

* add spot pnl to leaderboard

* run prettier

* update spot icon

* update missing locales

Co-authored-by: saml33 <slam.uke@gmail.com>

components/LeaderboardTable.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import dayjs from 'dayjs'
 import { usdFormatter } from '../utils'
-import { MedalIcon, ProfileIcon } from './icons'
+import { BtcMonoIcon, MedalIcon, ProfileIcon } from './icons'
 import { useTranslation } from 'next-i18next'
 import {
   ChartPieIcon,
@@ -20,6 +20,9 @@ const LeaderboardTable = ({ range = '29' }) => {
   const [perpPnlLeaderboardData, setPerpPnlLeaderboardData] = useState<any[]>(
     []
   )
+  const [spotPnlLeaderboardData, setSpotPnlLeaderboardData] = useState<any[]>(
+    []
+  )
   const [leaderboardType, setLeaderboardType] = useState<string>('total-pnl')
   const [loading, setLoading] = useState(false)
   const connection = useMangoStore(connectionSelector)
@@ -67,24 +70,50 @@ const LeaderboardTable = ({ range = '29' }) => {
     setLoading(false)
   }
 
+  const fetchSpotPnlLeaderboard = async () => {
+    setLoading(true)
+    const response = await fetch(
+      `https://mango-transaction-log.herokuapp.com/v3/stats/spot-pnl-leaderboard?start-date=${dayjs()
+        .hour(0)
+        .minute(0)
+        .utc()
+        .subtract(parseInt(range), 'day')
+        .format('YYYY-MM-DDThh:00:00')}`
+    )
+    const parsedResponse = await response.json()
+    setSpotPnlLeaderboardData(parsedResponse)
+
+    setLoading(false)
+  }
+
   useEffect(() => {
     if (leaderboardType === 'total-pnl') {
       fetchPnlLeaderboard()
-    } else {
+    } else if (leaderboardType === 'futures-only') {
       fetchPerpPnlLeaderboard()
+    } else {
+      fetchSpotPnlLeaderboard()
     }
   }, [range, leaderboardType])
 
   useEffect(() => {
     fetchPerpPnlLeaderboard()
+    fetchSpotPnlLeaderboard()
   }, [])
 
   const leaderboardData = useMemo(
     () =>
       leaderboardType === 'total-pnl'
         ? pnlLeaderboardData
-        : perpPnlLeaderboardData,
-    [leaderboardType, pnlLeaderboardData, perpPnlLeaderboardData]
+        : leaderboardType === 'futures-only'
+        ? perpPnlLeaderboardData
+        : spotPnlLeaderboardData,
+    [
+      leaderboardType,
+      pnlLeaderboardData,
+      perpPnlLeaderboardData,
+      spotPnlLeaderboardData,
+    ]
   )
 
   return (
@@ -104,6 +133,13 @@ const LeaderboardTable = ({ range = '29' }) => {
           label="futures-only"
           icon={<TrendingUpIcon className="mr-3 hidden h-6 w-6 lg:block" />}
         />
+        <LeaderboardTypeButton
+          leaderboardType={leaderboardType}
+          setLeaderboardType={setLeaderboardType}
+          range={range}
+          label="spot-only"
+          icon={<BtcMonoIcon className="mr-3 hidden h-6 w-6 lg:block" />}
+        />
       </div>
       <div className="col-span-12 lg:col-span-8">
         {!loading ? (
@@ -114,7 +150,11 @@ const LeaderboardTable = ({ range = '29' }) => {
                 acc={acc.mango_account}
                 key={acc.mango_account}
                 rawPnl={
-                  leaderboardType === 'total-pnl' ? acc.pnl : acc.perp_pnl
+                  leaderboardType === 'total-pnl'
+                    ? acc.pnl
+                    : leaderboardType === 'futures-only'
+                    ? acc.perp_pnl
+                    : acc.spot_pnl
                 }
                 pnl={
                   leaderboardType === 'total-pnl'
@@ -123,7 +163,9 @@ const LeaderboardTable = ({ range = '29' }) => {
                         currency: 'USD',
                         maximumFractionDigits: 0,
                       })
-                    : usdFormatter(acc.perp_pnl)
+                    : leaderboardType === 'futures-only'
+                    ? usdFormatter(acc.perp_pnl)
+                    : usdFormatter(acc.spot_pnl)
                 }
                 pfp={acc.pfp}
               />

public/locales/en/common.json

@@ -390,6 +390,7 @@
    "spanish": "Español",
    "spot": "Spot",
    "spot-desc": "Spot margin quoted in USDC",
+   "spot-only": "Spot Only",
    "spread": "Spread",
    "stats": "Stats",
    "stop-limit": "Stop Limit",

public/locales/es/common.json

@@ -390,6 +390,7 @@
    "spanish": "Español",
    "spot": "Al contado",
    "spot-desc": "Margen al contado cotizado en USDC",
+   "spot-only": "Spot Only",
    "spread": "Propago",
    "stats": "Estadísticas",
    "stop-limit": "Límite de parada",

public/locales/zh/common.json

@@ -390,6 +390,7 @@
     "spanish": "Español",
     "spot": "现货",
     "spot-desc": "现货市场以USDC报价",
+    "spot-only": "Spot Only",
     "spread": "点差",
     "stats": "统计",
     "stop-limit": "限价止损",

public/locales/zh_tw/common.json

@@ -390,6 +390,7 @@
   "spanish": "Español",
   "spot": "現貨",
   "spot-desc": "現貨市場以USDC報價",
+  "spot-only": "Spot Only",
   "spread": "點差",
   "stats": "統計",
   "stop-limit": "限價止損",