Merge pull request #62 from blockworks-foundation/paginate-trade-history

paginate trade history
2023-01-18 18:58:35 -05:00 · 2023-01-18 18:58:35 -05:00 · 3c83103b30
parent 193d2a16fe bdd03b0e0c
commit 3c83103b30
6 changed files with 138 additions and 79 deletions
--- a/components/account/AccountTabs.tsx
+++ b/components/account/AccountTabs.tsx
@ -8,6 +8,7 @@ import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
+import TradeHistory from '@components/trade/TradeHistory'

 const AccountTabs = () => {
  const [activeTab, setActiveTab] = useState('balances')
@ -23,15 +24,16 @@ const AccountTabs = () => {

    return [
      ['balances', 0],
+      ['trade:unsettled', unsettledTradeCount],
      ['activity:activity', 0],
      ['swap:swap-history', 0],
-      ['trade:unsettled', unsettledTradeCount],
+      ['trade-history', 0],
    ]
  }, [unsettledPerpPositions, unsettledSpotBalances])

  return (
    <>
-      <div className="border-b border-th-bkg-3">
+      <div className="hide-scroll overflow-x-auto border-b border-th-bkg-3">
        <TabButtons
          activeValue={activeTab}
          onChange={(v) => setActiveTab(v)}
@ -51,10 +53,6 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
  switch (activeTab) {
    case 'balances':
      return <TokenList />
-    case 'activity:activity':
-      return <ActivityFeed />
-    case 'swap:swap-history':
-      return <SwapHistoryTable />
    case 'trade:unsettled':
      return (
        <UnsettledTrades
@ -62,6 +60,12 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
          unsettledPerpPositions={unsettledPerpPositions}
        />
      )
+    case 'activity:activity':
+      return <ActivityFeed />
+    case 'swap:swap-history':
+      return <SwapHistoryTable />
+    case 'trade-history':
+      return <TradeHistory />
    default:
      return <TokenList />
  }
--- a/components/account/ActivityFeedTable.tsx
+++ b/components/account/ActivityFeedTable.tsx
@ -17,7 +17,7 @@ import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
 import { Fragment, useCallback, useState } from 'react'
-import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { PAGINATION_PAGE_LENGTH, PREFERRED_EXPLORER_KEY } from 'utils/constants'
 import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'

@ -55,8 +55,12 @@ const ActivityFeedTable = ({
      s.activityFeed.loading = true
    })
    if (!mangoAccountAddress) return
-    setOffset(offset + 25)
-    actions.fetchActivityFeed(mangoAccountAddress, offset + 25, params)
+    setOffset(offset + PAGINATION_PAGE_LENGTH)
+    actions.fetchActivityFeed(
+      mangoAccountAddress,
+      offset + PAGINATION_PAGE_LENGTH,
+      params
+    )
  }, [actions, offset, params, mangoAccountAddress])

  const getCreditAndDebit = (activity: any) => {
@ -316,7 +320,8 @@ const ActivityFeedTable = ({
          ))}
        </div>
      ) : null}
-      {activityFeed.length && activityFeed.length % 25 === 0 ? (
+      {activityFeed.length &&
+      activityFeed.length % PAGINATION_PAGE_LENGTH === 0 ? (
        <div className="flex justify-center py-6">
          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
        </div>
--- a/components/shared/TableElements.tsx
+++ b/components/shared/TableElements.tsx
@ -7,7 +7,11 @@ export const Table = ({
 }: {
  children: ReactNode
  className?: string
-}) => <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+}) => (
+  <div className="thin-scroll overflow-x-auto">
+    <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+  </div>
+)

 export const TrHead = ({
  children,
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@ -1,4 +1,6 @@
 import { I80F48, PerpMarket } from '@blockworks-foundation/mango-v4'
+import { LinkButton } from '@components/shared/Button'
+import SheenLoader from '@components/shared/SheenLoader'
 import SideBadge from '@components/shared/SideBadge'
 import {
  Table,
@ -14,7 +16,9 @@ import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useViewport } from 'hooks/useViewport'
-import { useMemo } from 'react'
+import { useTranslation } from 'next-i18next'
+import { useCallback, useMemo, useState } from 'react'
+import { PAGINATION_PAGE_LENGTH } from 'utils/constants'
 import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
 import { breakpoints } from 'utils/theme'
 import TableMarketName from './TableMarketName'
@ -86,11 +90,17 @@ const formatTradeHistory = (
 }

 const TradeHistory = () => {
+  const { t } = useTranslation(['common', 'trade'])
  const group = mangoStore.getState().group
  const { selectedMarket } = useSelectedMarket()
  const { mangoAccount, mangoAccountAddress } = useMangoAccount()
+  const actions = mangoStore((s) => s.actions)
  const fills = mangoStore((s) => s.selectedMarket.fills)
-  const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory)
+  const tradeHistory = mangoStore((s) => s.mangoAccount.tradeHistory.data)
+  const loadingTradeHistory = mangoStore(
+    (s) => s.mangoAccount.tradeHistory.loading
+  )
+  const [offset, setOffset] = useState(0)
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false

@ -151,27 +161,35 @@ const TradeHistory = () => {
    return [...newFills, ...tradeHistory]
  }, [eventQueueFillsForAccount, tradeHistory])

-  console.log('trade history', tradeHistory)
+  const handleShowMore = useCallback(() => {
+    const set = mangoStore.getState().set
+    set((s) => {
+      s.mangoAccount.tradeHistory.loading = true
+    })
+    setOffset(offset + PAGINATION_PAGE_LENGTH)
+    actions.fetchTradeHistory(offset + PAGINATION_PAGE_LENGTH)
+  }, [actions, offset])

  if (!selectedMarket || !group) return null

-  return mangoAccount && combinedTradeHistory.length ? (
-    showTableView ? (
-      <div>
+  return mangoAccount &&
+    (combinedTradeHistory.length || loadingTradeHistory) ? (
+    <>
+      {showTableView ? (
        <Table>
          <thead>
            <TrHead>
-              <Th className="text-left">Market</Th>
-              <Th className="text-right">Side</Th>
-              <Th className="text-right">Size</Th>
-              <Th className="text-right">Price</Th>
-              <Th className="text-right">Value</Th>
-              <Th className="text-right">Fee</Th>
-              <Th className="text-right">Time</Th>
+              <Th className="text-left">{t('market')}</Th>
+              <Th className="text-right">{t('trade:side')}</Th>
+              <Th className="text-right">{t('trade:size')}</Th>
+              <Th className="text-right">{t('price')}</Th>
+              <Th className="text-right">{t('value')}</Th>
+              <Th className="text-right">{t('fee')}</Th>
+              <Th className="text-right">{t('date')}</Th>
            </TrHead>
          </thead>
          <tbody>
-            {combinedTradeHistory.map((trade: any) => {
+            {combinedTradeHistory.map((trade: any, index: number) => {
              let market
              if ('market' in trade) {
                market = group.getSerum3MarketByExternalMarket(
@ -202,7 +220,7 @@ const TradeHistory = () => {

              return (
                <TrBody
-                  key={`${trade.signature || trade.marketIndex}${size}`}
+                  key={`${trade.signature || trade.marketIndex}${index}`}
                  className="my-1 p-2"
                >
                  <Td className="">
@ -216,7 +234,7 @@ const TradeHistory = () => {
                    {formatDecimal(trade.price)}
                  </Td>
                  <Td className="text-right font-mono">
-                    {formatFixedDecimals(trade.price * size)}
+                    {formatFixedDecimals(trade.price * size, true, true)}
                  </Td>
                  <Td className="text-right">
                    <span className="font-mono">{formatDecimal(fee)}</span>
@ -240,36 +258,64 @@ const TradeHistory = () => {
            })}
          </tbody>
        </Table>
-      </div>
-    ) : (
-      <div>
-        {eventQueueFillsForAccount.map((trade: any) => {
-          return (
-            <div
-              className="flex items-center justify-between border-b border-th-bkg-3 p-4"
-              key={`${trade.marketIndex}`}
-            >
-              <div>
-                <TableMarketName market={selectedMarket} />
-                <div className="mt-1 flex items-center space-x-1">
-                  <SideBadge side={trade.side} />
-                  <p className="text-th-fgd-4">
-                    <span className="font-mono text-th-fgd-3">
-                      {trade.size}
-                    </span>
-                    {' for '}
-                    <span className="font-mono text-th-fgd-3">
-                      {formatDecimal(trade.price)}
-                    </span>
+      ) : (
+        <div>
+          {combinedTradeHistory.map((trade: any, index: number) => {
+            const size = trade.size || trade.quantity
+            return (
+              <div
+                className="flex items-center justify-between border-b border-th-bkg-3 p-4"
+                key={`${trade.marketIndex}${index}`}
+              >
+                <div>
+                  <TableMarketName market={selectedMarket} />
+                  <div className="mt-1 flex items-center space-x-1">
+                    <SideBadge side={trade.side} />
+                    <p className="text-th-fgd-4">
+                      <span className="font-mono text-th-fgd-2">{size}</span>
+                      {' for '}
+                      <span className="font-mono text-th-fgd-2">
+                        {formatDecimal(trade.price)}
+                      </span>
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-col items-end">
+                  <span className="mb-0.5 flex items-center space-x-1.5">
+                    {trade.block_datetime ? (
+                      <TableDateDisplay
+                        date={trade.block_datetime}
+                        showSeconds
+                      />
+                    ) : (
+                      'Recent'
+                    )}
+                  </span>
+                  <p className="font-mono text-th-fgd-2">
+                    {formatFixedDecimals(trade.price * size, true, true)}
                  </p>
                </div>
              </div>
-              <p className="font-mono">${trade.value.toFixed(2)}</p>
-            </div>
-          )
-        })}
-      </div>
-    )
+            )
+          })}
+        </div>
+      )}
+      {loadingTradeHistory ? (
+        <div className="mt-4 space-y-1.5">
+          {[...Array(4)].map((x, i) => (
+            <SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
+              <div className="h-16 w-full bg-th-bkg-2" />
+            </SheenLoader>
+          ))}
+        </div>
+      ) : null}
+      {combinedTradeHistory.length &&
+      combinedTradeHistory.length % PAGINATION_PAGE_LENGTH === 0 ? (
+        <div className="flex justify-center py-6">
+          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
+        </div>
+      ) : null}
+    </>
  ) : (
    <div className="flex flex-col items-center p-8">
      <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -34,6 +34,7 @@ import {
  INPUT_TOKEN_DEFAULT,
  LAST_ACCOUNT_KEY,
  OUTPUT_TOKEN_DEFAULT,
+  PAGINATION_PAGE_LENGTH,
  RPC_PROVIDER_KEY,
 } from '../utils/constants'
 import { OrderbookL2, SpotBalances, SpotTradeHistory } from 'types'
@ -248,7 +249,7 @@ export type MangoStore = {
        initialLoad: boolean
      }
    }
-    tradeHistory: SpotTradeHistory[]
+    tradeHistory: { data: SpotTradeHistory[]; loading: boolean }
  }
  mangoAccounts: MangoAccount[]
  markets: Serum3Market[] | undefined
@ -332,7 +333,7 @@ export type MangoStore = {
    ) => Promise<void>
    fetchTokenStats: () => void
    fetchTourSettings: (walletPk: string) => void
-    fetchTradeHistory: () => Promise<void>
+    fetchTradeHistory: (offset?: number) => Promise<void>
    fetchWalletTokens: (walletPk: PublicKey) => Promise<void>
    connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
    loadMarketFills: () => Promise<void>
@ -385,7 +386,7 @@ const mangoStore = create<MangoStore>()(
          performance: { data: [], loading: false },
          swapHistory: { data: [], initialLoad: false },
        },
-        tradeHistory: [],
+        tradeHistory: { data: [], loading: true },
      },
      mangoAccounts: [],
      markets: undefined,
@ -541,7 +542,7 @@ const mangoStore = create<MangoStore>()(

          try {
            const response = await fetch(
-              `https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=25${
+              `https://mango-transaction-log.herokuapp.com/v4/stats/activity-feed?mango-account=${mangoAccountPk}&offset=${offset}&limit=${PAGINATION_PAGE_LENGTH}${
                params ? params : ''
              }`
            )
@ -1015,36 +1016,33 @@ const mangoStore = create<MangoStore>()(
            console.log('Error fetching fills:', err)
          }
        },
-        async fetchTradeHistory() {
+        async fetchTradeHistory(offset = 0) {
          const set = get().set
-          const mangoAccount = get().mangoAccount.current
+          const mangoAccountPk =
+            get().mangoAccount?.current?.publicKey.toString()
+          const loadedHistory =
+            mangoStore.getState().mangoAccount.tradeHistory.data
          try {
-            const [spotRes, perpRes] = await Promise.all([
-              fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/openbook-trades?address=${mangoAccount?.publicKey.toString()}&address-type=mango-account`
-              ),
-              fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/perp-trade-history?mango-account=${mangoAccount?.publicKey.toString()}&limit=1000`
-              ),
-            ])
-            const spotHistory = await spotRes.json()
-            const perpHistory = await perpRes.json()
-            console.log('th', spotHistory, perpHistory)
-            let tradeHistory: any[] = []
-            if (spotHistory?.length) {
-              tradeHistory = tradeHistory.concat(spotHistory)
-            }
-            if (perpHistory?.length) {
-              tradeHistory = tradeHistory.concat(perpHistory)
-            }
+            const response = await fetch(
+              `https://mango-transaction-log.herokuapp.com/v4/stats/trade-history?mango-account=${mangoAccountPk}&limit=${PAGINATION_PAGE_LENGTH}&offset=${offset}`
+            )
+            const parsedHistory = await response.json()
+            const newHistory = parsedHistory.map((h: any) => h.activity_details)
+
+            const history =
+              offset !== 0 ? loadedHistory.concat(newHistory) : newHistory

            set((s) => {
-              s.mangoAccount.tradeHistory = tradeHistory.sort(
+              s.mangoAccount.tradeHistory.data = history?.sort(
                (x: any) => x.block_datetime
              )
            })
          } catch (e) {
            console.error('Unable to fetch trade history', e)
+          } finally {
+            set((s) => {
+              s.mangoAccount.tradeHistory.loading = false
+            })
          }
        },
        updateConnection(endpointUrl) {
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -67,3 +67,5 @@ export const MIN_SOL_BALANCE = 0.001
 export const ACCOUNT_ACTION_MODAL_HEIGHT = '506px'

 export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '444px'
+
+export const PAGINATION_PAGE_LENGTH = 25