From 522425d90bfb4a20af61d8799b5f67747cbe6554 Mon Sep 17 00:00:00 2001
From: saml33 <30796577+saml33@users.noreply.github.com>
Date: Mon, 19 Jul 2021 19:51:40 +1000
Subject: [PATCH] Pnl leaderboard (#43)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* leaderboard layout

* hook up pnl endpoint

* api limits, offset and start_date

* pnl history charts

* support account names

* ui feedback updates

* play with leaderboard 🙈

* fix chart bug

Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net>
---
 @types/index.d.ts                         |   8 +
 components/LeaderboardTable.tsx           | 242 ++++++++++++++++++++++
 components/TopBar.tsx                     |   1 +
 components/account-page/AccountAssets.tsx |   2 +-
 components/icons.jsx                      |  29 +++
 pages/leaderboard.tsx                     |  47 +++++
 public/assets/icons/step.png              | Bin 0 -> 9561 bytes
 stores/useMangoStore.tsx                  |  96 ++++++++-
 yarn.lock                                 |   4 +-
 9 files changed, 425 insertions(+), 4 deletions(-)
 create mode 100644 components/LeaderboardTable.tsx
 create mode 100644 pages/leaderboard.tsx
 create mode 100644 public/assets/icons/step.png

diff --git a/@types/index.d.ts b/@types/index.d.ts
index 9b9471d..b630a55 100644
--- a/@types/index.d.ts
+++ b/@types/index.d.ts
@@ -1,4 +1,12 @@
+import 'dayjs'
+
 declare module '*.svg' {
   const content: any
   export default content
 }
+
+declare module 'dayjs' {
+  interface Dayjs {
+    utc()
+  }
+}
diff --git a/components/LeaderboardTable.tsx b/components/LeaderboardTable.tsx
new file mode 100644
index 0000000..fea3447
--- /dev/null
+++ b/components/LeaderboardTable.tsx
@@ -0,0 +1,242 @@
+import { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import dayjs from 'dayjs'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import { AreaChart, Area, ReferenceLine, XAxis, YAxis, Tooltip } from 'recharts'
+import { ExternalLinkIcon } from '@heroicons/react/outline'
+import { usdFormatter } from '../utils'
+import { AwardIcon, TrophyIcon } from './icons'
+import useMangoStore from '../stores/useMangoStore'
+
+const utc = require('dayjs/plugin/utc')
+dayjs.extend(utc)
+
+const StyledTooltipWrapper = styled.div`
+  min-width: 180px;
+`
+
+const LeaderboardTable = () => {
+  const [pnlHistory, setPnlHistory] = useState([])
+  const [loading, setLoading] = useState(false)
+  const pnlLeaderboard = useMangoStore((s) => s.pnlLeaderboard)
+
+  /* API Returns:
+   * [ {  cumulative_pnl: -3.687498
+          date: "2021-06-10"
+          margin_account: "J8XtwLVyZjeH1PG1Nnk9cWbLn3zEemS1rCbn4x6AjtXM"
+          name: ""
+          owner: "APLKzSqJQw79q4U4ipBWnLdqkVzijSPNpDCNKwL8mW3B"
+      }, ... ]
+   */
+  useEffect(() => {
+    const getPnlHistory = async () => {
+      setLoading(true)
+      const start = dayjs().utc().subtract(31, 'day').format('YYYY-MM-DD')
+      console.log(start)
+      const results = await Promise.all(
+        pnlLeaderboard.slice(pnlHistory.length).map(async (acc) => {
+          const response = await fetch(
+            `https://mango-transaction-log.herokuapp.com/stats/pnl_history/${acc.margin_account}?start_date=${start}`
+          )
+          const parsedResponse = await response.json()
+          return parsedResponse ? parsedResponse.reverse() : []
+        })
+      )
+      setPnlHistory(pnlHistory.concat(results))
+      setLoading(false)
+    }
+    getPnlHistory()
+  }, [pnlLeaderboard])
+
+  const formatPnlHistoryData = (data) => {
+    const start = new Date(
+      dayjs().utc().hour(0).minute(0).subtract(31, 'day')
+    ).getTime()
+
+    return data.filter((d) => new Date(d.date).getTime() > start)
+  }
+
+  const tooltipContent = (tooltipProps) => {
+    if (tooltipProps.payload.length > 0) {
+      return (
+        <StyledTooltipWrapper className="bg-th-bkg-1 flex p-2 rounded">
+          <div>
+            <div className="text-th-fgd-3 text-xs">Date</div>
+            <div className="font-bold text-th-fgd-1 text-xs">
+              {tooltipProps.payload[0].payload.date}
+            </div>
+          </div>
+          <div className="pl-3">
+            <div className="text-th-fgd-3 text-xs">PNL</div>
+            <div className="font-bold text-th-fgd-1 text-xs">
+              {usdFormatter.format(
+                tooltipProps.payload[0].payload.cumulative_pnl
+              )}
+            </div>
+          </div>
+        </StyledTooltipWrapper>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div className={`flex flex-col py-4`}>
+      <div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
+        <div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
+          {pnlLeaderboard.length > 0 ? (
+            <div className={`shadow overflow-hidden border-b border-th-bkg-2`}>
+              <Table className={`min-w-full divide-y divide-th-bkg-2`}>
+                <Thead>
+                  <Tr className="text-th-fgd-3 text-xs">
+                    <Th
+                      scope="col"
+                      className={`px-6 py-3 text-left font-normal`}
+                    >
+                      Rank
+                    </Th>
+                    <Th
+                      scope="col"
+                      className={`px-6 py-3 text-left font-normal`}
+                    >
+                      Account
+                    </Th>
+                    <Th
+                      scope="col"
+                      className={`px-6 py-3 text-right font-normal`}
+                    >
+                      PNL
+                    </Th>
+                    <Th
+                      scope="col"
+                      className={`px-6 py-3 text-right font-normal`}
+                    >
+                      PNL / Time
+                    </Th>
+                    <Th
+                      scope="col"
+                      className={`px-6 py-3 text-right font-normal`}
+                    >
+                      <div className="flex items-center justify-start md:justify-end">
+                        <span>View on Step</span>
+                        <img
+                          alt=""
+                          width="20"
+                          height="20"
+                          src="/assets/icons/step.png"
+                          className={`ml-1`}
+                        />
+                      </div>
+                    </Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {pnlLeaderboard.map((acc, index) => (
+                    <Tr
+                      key={acc.margin_account}
+                      className={`border-b border-th-bkg-3
+                        ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
+                      `}
+                    >
+                      <Td
+                        className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1 w-8`}
+                      >
+                        <div className="flex items-center">
+                          {acc.rank}
+                          {acc.rank === 1 ? (
+                            <TrophyIcon className="h-5 w-5 ml-1.5 text-th-primary" />
+                          ) : null}
+                          {acc.rank === 2 || acc.rank === 3 ? (
+                            <AwardIcon className="h-5 w-5 ml-1.5 text-th-primary-dark" />
+                          ) : null}
+                        </div>
+                      </Td>
+                      <Td
+                        className={`px-6 py-3 whitespace-nowrap text-left text-sm text-th-fgd-1 md:w-1/3`}
+                      >
+                        {acc.name
+                          ? acc.name
+                          : `${acc.margin_account.slice(
+                              0,
+                              5
+                            )}...${acc.margin_account.slice(-5)}`}
+                      </Td>
+                      <Td
+                        className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
+                      >
+                        <div className="flex md:justify-end">
+                          {usdFormatter.format(acc.pnl)}
+                        </div>
+                      </Td>
+                      <Td
+                        className={`flex justify-end px-6 py-3 whitespace-nowrap`}
+                      >
+                        {loading && !pnlHistory[index] ? (
+                          <div className="animate-pulse bg-th-fgd-4 h-14 opacity-10 rounded-md w-44" />
+                        ) : (
+                          <AreaChart
+                            width={176}
+                            height={56}
+                            data={
+                              pnlHistory[index]
+                                ? formatPnlHistoryData(pnlHistory[index])
+                                : null
+                            }
+                          >
+                            <ReferenceLine
+                              y={0}
+                              stroke="#FF9C24"
+                              strokeDasharray="3 3"
+                              strokeOpacity={0.6}
+                            />
+                            <Area
+                              isAnimationActive={false}
+                              type="monotone"
+                              dataKey="cumulative_pnl"
+                              stroke="#FF9C24"
+                              fill="#FF9C24"
+                              fillOpacity={0.1}
+                            />
+                            <XAxis dataKey="date" hide />
+                            <YAxis dataKey="cumulative_pnl" hide />
+                            <Tooltip
+                              content={tooltipContent}
+                              position={{ x: 0, y: -50 }}
+                            />
+                          </AreaChart>
+                        )}
+                      </Td>
+                      <Td
+                        className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
+                      >
+                        <a
+                          className="default-transition flex items-center md:justify-end text-th-fgd-2"
+                          href={`https://app.step.finance/#/watch/${acc.owner}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <span>View</span>
+                          <ExternalLinkIcon className={`h-4 w-4 ml-1.5`} />
+                        </a>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </div>
+          ) : (
+            <div className="pt-2">
+              <div className="animate-pulse bg-th-bkg-3 h-10 mb-2 rounded-md w-full" />
+              <div className="animate-pulse bg-th-bkg-3 h-10 mb-2 rounded-md w-full" />
+              <div className="animate-pulse bg-th-bkg-3 h-10 mb-2 rounded-md w-full" />
+              <div className="animate-pulse bg-th-bkg-3 h-10 mb-2 rounded-md w-full" />
+              <div className="animate-pulse bg-th-bkg-3 h-10 mb-2 rounded-md w-full" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LeaderboardTable
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 83d9651..5c84026 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -31,6 +31,7 @@ const TopBar = () => {
                 <MenuItem href="/account">Account</MenuItem>
                 <MenuItem href="/borrow">Borrow</MenuItem>
                 <MenuItem href="/alerts">Alerts</MenuItem>
+                <MenuItem href="/leaderboard">Leaderboard</MenuItem>
                 <MenuItem href="/stats">Stats</MenuItem>
                 <MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
               </div>
diff --git a/components/account-page/AccountAssets.tsx b/components/account-page/AccountAssets.tsx
index 8105937..936085b 100644
--- a/components/account-page/AccountAssets.tsx
+++ b/components/account-page/AccountAssets.tsx
@@ -147,7 +147,7 @@ export default function AccountAssets() {
                       scope="col"
                       className={`px-6 py-3 text-left font-normal`}
                     >
-                      Available
+                      Deposits
                     </Th>
                     <Th
                       scope="col"
diff --git a/components/icons.jsx b/components/icons.jsx
index 8a3f83e..ebb63e5 100644
--- a/components/icons.jsx
+++ b/components/icons.jsx
@@ -141,3 +141,32 @@ export const ProfileIcon = ({ className }) => {
     </svg>
   )
 }
+
+export const AwardIcon = ({ className }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <circle cx="12" cy="8" r="7"></circle>
+      <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
+    </svg>
+  )
+}
+
+export const TrophyIcon = ({ className }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 38 34"
+      fill="currentColor"
+    >
+      <path d="M36.0082 3.8971H30.7152V1.9751C30.7152 1.1461 30.0432 0.475098 29.2152 0.475098H8.78519C7.95619 0.475098 7.28519 1.1461 7.28519 1.9751V3.8971L1.99219 3.8981C1.16319 3.8981 0.492188 4.5701 0.492188 5.3981C0.492188 9.4881 3.47119 12.8871 7.37219 13.5611C7.87919 17.8821 10.7462 21.4901 14.6442 23.0591V25.6651H14.1752C13.7802 25.6651 13.4012 25.8211 13.1202 26.1001C11.5172 27.6871 10.6362 29.7911 10.6362 32.0241C10.6362 32.8521 11.3082 33.5241 12.1362 33.5241H25.8622C26.6902 33.5241 27.3622 32.8521 27.3622 32.0241C27.3622 29.7921 26.4802 27.6881 24.8792 26.1001C24.5992 25.8221 24.2192 25.6651 23.8232 25.6651H23.3542V23.0601C27.2532 21.4901 30.1212 17.8831 30.6272 13.5621C34.5272 12.8881 37.5072 9.4891 37.5072 5.3981C37.5082 4.5681 36.8362 3.8971 36.0082 3.8971ZM7.28519 10.4751C5.57019 9.9671 4.21519 8.6131 3.70819 6.8981H7.28519V10.4751ZM24.1462 30.5241H13.8532C14.0512 29.8511 14.3852 29.2211 14.8382 28.6661H23.1622C23.6152 29.2221 23.9472 29.8521 24.1462 30.5241ZM17.6452 25.6661V23.8171C18.0902 23.8691 18.5412 23.9041 18.9992 23.9041C19.4592 23.9041 19.9092 23.8691 20.3542 23.8171V25.6661H17.6452ZM27.7152 12.1911C27.7152 16.9961 23.8052 20.9041 18.9992 20.9041C14.1932 20.9041 10.2852 16.9961 10.2852 12.1911V3.4751H27.7152V12.1911ZM30.7152 10.4751V6.8981L34.2912 6.8991C33.7842 8.6131 32.4302 9.9671 30.7152 10.4751Z" />
+    </svg>
+  )
+}
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
new file mode 100644
index 0000000..f43676c
--- /dev/null
+++ b/pages/leaderboard.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import useMangoStore from '../stores/useMangoStore'
+import PageBodyContainer from '../components/PageBodyContainer'
+import TopBar from '../components/TopBar'
+import LeaderboardTable from '../components/LeaderboardTable'
+import { LinkButton } from '../components/Button'
+
+export default function Leaderboard() {
+  const [offsetResults, setOffsetResults] = useState(0)
+  const actions = useMangoStore((s) => s.actions)
+  const pnlLeaderboard = useMangoStore((s) => s.pnlLeaderboard)
+
+  useEffect(() => {
+    actions.fetchPnlLeaderboard(offsetResults, 29)
+  }, [])
+
+  const handleShowMore = async () => {
+    const offset = offsetResults + 25
+    await actions.fetchPnlLeaderboard(offset, 29)
+    setOffsetResults(offset)
+  }
+
+  return (
+    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+      <TopBar />
+      <PageBodyContainer>
+        <div className="pt-8 pb-3 sm:pb-6 md:pt-10">
+          <h1 className={`font-semibold text-th-fgd-1 text-2xl`}>
+            Leaderboard
+          </h1>
+        </div>
+        <div className="p-6 rounded-lg bg-th-bkg-2">
+          <p className="mb-0">Top 100 accounts by PNL over the last 30 days</p>
+          <LeaderboardTable />
+          {pnlLeaderboard.length < 100 ? (
+            <LinkButton
+              className="flex h-10 items-center justify-center mt-1 text-th-primary w-full"
+              onClick={() => handleShowMore()}
+            >
+              Show More
+            </LinkButton>
+          ) : null}
+        </div>
+      </PageBodyContainer>
+    </div>
+  )
+}
diff --git a/public/assets/icons/step.png b/public/assets/icons/step.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7364f57a538e02b67ddd945947d0a6a0d8a2dfb
GIT binary patch
literal 9561
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

literal 0
HcmV?d00001

diff --git a/stores/useMangoStore.tsx b/stores/useMangoStore.tsx
index fe9fe49..6adac4b 100644
--- a/stores/useMangoStore.tsx
+++ b/stores/useMangoStore.tsx
@@ -10,11 +10,15 @@ import {
 } from '@blockworks-foundation/mango-client'
 import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
 import { AccountInfo, Connection, PublicKey } from '@solana/web3.js'
+import dayjs from 'dayjs'
 import { EndpointInfo, WalletAdapter } from '../@types/types'
 import { getWalletTokenInfo } from '../utils/tokens'
 import { isDefined } from '../utils/index'
 import { notify } from '../utils/notifications'
 
+const utc = require('dayjs/plugin/utc')
+dayjs.extend(utc)
+
 export const ENDPOINTS: EndpointInfo[] = [
   {
     name: 'mainnet-beta',
@@ -57,6 +61,14 @@ interface AccountInfoList {
   [key: string]: AccountInfo<Buffer>
 }
 
+interface AccountPnl {
+  margin_account: string
+  name: string
+  owner: string
+  pnl: number
+  rank: number
+}
+
 interface MangoStore extends State {
   notifications: Array<{
     type: string
@@ -119,9 +131,12 @@ interface MangoStore extends State {
   liquidationHistory: any[]
   withdrawalHistory: any[]
   tradeHistory: any[]
+  pnlHistory: any[]
+  pnlLeaderboard: any[]
+  accountPnl: AccountPnl
   set: (x: any) => void
   actions: {
-    [key: string]: () => void
+    [key: string]: (...args: any[]) => void
   }
 }
 
@@ -177,6 +192,9 @@ const useMangoStore = create<MangoStore>((set, get) => ({
   liquidationHistory: [],
   withdrawalHistory: [],
   tradeHistory: [],
+  pnlHistory: [],
+  pnlLeaderboard: [],
+  accountPnl: null,
   set: (fn) => set(produce(fn)),
   actions: {
     async fetchWalletBalances() {
@@ -428,6 +446,82 @@ const useMangoStore = create<MangoStore>((set, get) => ({
         state.withdrawalHistory = results
       })
     },
+    async fetchPnlHistory(marginAccount = null) {
+      const selectedMarginAccount =
+        marginAccount ||
+        get().selectedMarginAccount.current.publicKey.toString()
+      const set = get().set
+
+      if (!selectedMarginAccount) return
+
+      const response = await fetch(
+        `https://mango-transaction-log.herokuapp.com/stats/pnl_history/${selectedMarginAccount}`
+      )
+      const parsedResponse = await response.json()
+      const results = parsedResponse.length ? parsedResponse.reverse() : []
+
+      set((state) => {
+        state.pnlHistory = results
+      })
+    },
+    async fetchPnlLeaderboard(offset = 0, start?: number) {
+      const baseUrl =
+        'https://mango-transaction-log.herokuapp.com/stats/pnl_leaderboard'
+
+      const startAt = start
+        ? dayjs().utc().subtract(start, 'day').format('YYYY-MM-DD')
+        : null
+
+      const url = startAt
+        ? `${baseUrl}?start_date=${startAt}&limit=25&offset=${offset}`
+        : `${baseUrl}?limit=25&offset=${offset}`
+
+      const response = await fetch(url)
+      const parsedResponse = await response.json()
+      const results = parsedResponse ? parsedResponse : []
+
+      const currentLeaderboard = get().pnlLeaderboard
+
+      if (currentLeaderboard.length > 0 && offset > 0) {
+        const updatedLeaderboard = currentLeaderboard.concat(results)
+        set((state) => {
+          state.pnlLeaderboard = updatedLeaderboard
+        })
+      } else {
+        set((state) => {
+          state.pnlLeaderboard = results
+        })
+      }
+    },
+    async fetchPnlByAccount(marginAccount = null, start?: number) {
+      const selectedMarginAccount =
+        marginAccount || get().selectedMarginAccount.current
+      const set = get().set
+
+      if (!selectedMarginAccount) return
+
+      const startAt = start
+        ? new Date(Date.now() - start * 24 * 60 * 60 * 1000).toLocaleDateString(
+            'en-ZA'
+          )
+        : null
+
+      const baseUrl =
+        'https://mango-transaction-log.herokuapp.com/stats/pnl_leaderboard_rank'
+
+      const url = startAt
+        ? `${baseUrl}/${selectedMarginAccount.publicKey.toString()}?start_date=${startAt}`
+        : `${baseUrl}/${selectedMarginAccount.publicKey.toString()}`
+
+      const response = await fetch(url)
+      const parsedResponse =
+        response.status === 200 ? await response.json() : null
+      const results = parsedResponse ? parsedResponse : null
+
+      set((state) => {
+        state.accountPnl = results
+      })
+    },
   },
 }))
 
diff --git a/yarn.lock b/yarn.lock
index 57336e8..74f9f14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2515,9 +2515,9 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-"borsh@git+https://github.com/defactojob/borsh-js.git#field-mapper":
+"borsh@https://github.com/defactojob/borsh-js#field-mapper":
   version "0.3.1"
-  resolved "git+https://github.com/defactojob/borsh-js.git#33a0d24af281112c0a48efb3fa503f3212443de9"
+  resolved "https://github.com/defactojob/borsh-js#33a0d24af281112c0a48efb3fa503f3212443de9"
   dependencies:
     "@types/bn.js" "^4.11.5"
     bn.js "^5.0.0"