add swap history pagination

2023-01-12 14:21:23 +11:00 · 2023-01-12 14:21:23 +11:00 · badb6931bc
parent 85f81ce55b
commit badb6931bc
5 changed files with 93 additions and 48 deletions
--- 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 pt-6">
          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
        </div>
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
 import {
  ArrowRightIcon,
  ChevronDownIcon,
@ -9,7 +9,7 @@ import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
 import { breakpoints } from '../../utils/theme'
 import { useViewport } from '../../hooks/useViewport'
-import { IconButton } from '../shared/Button'
+import { IconButton, LinkButton } from '../shared/Button'
 import { Transition } from '@headlessui/react'
 import SheenLoader from '../shared/SheenLoader'
 import mangoStore from '@store/mangoStore'
@ -31,11 +31,15 @@ import useMangoAccount from 'hooks/useMangoAccount'
 const SwapHistoryTable = () => {
  const { t } = useTranslation(['common', 'settings', 'swap'])
  const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
-  const initialLoad = mangoStore(
-    (s) => s.mangoAccount.stats.swapHistory.initialLoad
+  // const initialLoad = mangoStore(
+  //   (s) => s.mangoAccount.stats.swapHistory.initialLoad
+  // )
+  const loadSwapHistory = mangoStore(
+    (s) => s.mangoAccount.stats.swapHistory.loading
  )
  const { mangoTokens } = useJupiterMints()
  const [showSwapDetails, setSwapDetails] = useState('')
+  const [offset, setOffset] = useState(0)
  const actions = mangoStore.getState().actions
  const { mangoAccountAddress } = useMangoAccount()
  const { width } = useViewport()
@ -51,13 +55,25 @@ const SwapHistoryTable = () => {
    }
  }, [actions, mangoAccountAddress])

+  const handleShowMore = useCallback(() => {
+    const set = mangoStore.getState().set
+    set((s) => {
+      s.mangoAccount.stats.swapHistory.loading = true
+    })
+    if (!mangoAccountAddress) return
+    setOffset(offset + 10)
+    actions.fetchSwapHistory(mangoAccountAddress, 0, offset + 10)
+  }, [actions, offset, mangoAccountAddress])
+
  const handleShowSwapDetails = (signature: string) => {
    showSwapDetails ? setSwapDetails('') : setSwapDetails(signature)
  }

-  return initialLoad ? (
-    mangoAccountAddress && swapHistory.length ? (
-      showTableView ? (
+  console.log(swapHistory)
+
+  return mangoAccountAddress && (swapHistory.length || loadSwapHistory) ? (
+    <>
+      {showTableView ? (
        <Table>
          <thead>
            <TrHead>
@ -100,7 +116,6 @@ const SwapHistoryTable = () => {

              const inSymbol = formatTokenSymbol(swap_in_symbol)
              const outSymbol = formatTokenSymbol(swap_out_symbol)
-              console.log('mangoTokens', mangoTokens)

              if (mangoTokens.length) {
                baseLogoURI = mangoTokens.find(
@ -401,20 +416,26 @@ const SwapHistoryTable = () => {
            )
          })}
        </div>
-      )
-    ) : (
-      <div className="flex flex-col items-center p-8">
-        <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-        <p>{t('swap:no-history')}</p>
-      </div>
-    )
+      )}
+      {loadSwapHistory ? (
+        <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}
+      {swapHistory.length && swapHistory.length % 10 === 0 ? (
+        <div className="flex justify-center pt-6">
+          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
+        </div>
+      ) : null}
+    </>
  ) : (
-    <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 className="flex flex-col items-center p-8">
+      <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+      <p>{t('swap:no-history')}</p>
    </div>
  )
 }
--- a/components/wallet/ConnectedMenu.tsx
+++ b/components/wallet/ConnectedMenu.tsx
@ -43,7 +43,6 @@ const ConnectedMenu = () => {
  const handleDisconnect = useCallback(() => {
    set((state) => {
      state.activityFeed.feed = []
-      state.activityFeed.initialLoad = false
      state.mangoAccount.current = undefined
      state.mangoAccounts = []
      state.mangoAccount.openOrders = {}
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -222,7 +222,6 @@ export const DEFAULT_TRADE_FORM: TradeForm = {
 export type MangoStore = {
  activityFeed: {
    feed: Array<DepositWithdrawFeedItem | LiquidationFeedItem>
-    initialLoad: boolean
    loading: boolean
  }
  connected: boolean
@ -244,6 +243,7 @@ export type MangoStore = {
      swapHistory: {
        data: SwapHistoryItem[]
        initialLoad: boolean
+        loading: boolean
      }
    }
    tradeHistory: SpotTradeHistory[]
@ -326,7 +326,8 @@ export type MangoStore = {
    fetchProfileDetails: (walletPk: string) => void
    fetchSwapHistory: (
      mangoAccountPk: string,
-      timeout?: number
+      timeout?: number,
+      offset?: number
    ) => Promise<void>
    fetchTokenStats: () => void
    fetchTourSettings: (walletPk: string) => void
@ -362,7 +363,6 @@ const mangoStore = create<MangoStore>()(
    return {
      activityFeed: {
        feed: [],
-        initialLoad: false,
        loading: true,
      },
      connected: false,
@ -381,7 +381,7 @@ const mangoStore = create<MangoStore>()(
        stats: {
          interestTotals: { data: [], loading: false },
          performance: { data: [], loading: false },
-          swapHistory: { data: [], initialLoad: false },
+          swapHistory: { data: [], initialLoad: false, loading: true },
        },
        tradeHistory: [],
      },
@ -532,7 +532,7 @@ const mangoStore = create<MangoStore>()(
          params = ''
        ) => {
          const set = get().set
-          const currentFeed = mangoStore.getState().activityFeed.feed
+          const loadedFeed = mangoStore.getState().activityFeed.feed
          const connectedMangoAccountPk = mangoStore
            .getState()
            .mangoAccount.current?.publicKey.toString()
@ -563,15 +563,15 @@ const mangoStore = create<MangoStore>()(
              )

            // only add to current feed if data request is offset and the mango account hasn't changed
-            const feed =
+            const combinedFeed =
              offset !== 0 &&
              connectedMangoAccountPk ===
-                currentFeed[0].activity_details.mango_account
-                ? currentFeed.concat(latestFeed)
+                loadedFeed[0]?.activity_details?.mango_account
+                ? loadedFeed.concat(latestFeed)
                : latestFeed

            set((state) => {
-              state.activityFeed.feed = feed
+              state.activityFeed.feed = combinedFeed
            })
          } catch {
            notify({
@ -579,12 +579,6 @@ const mangoStore = create<MangoStore>()(
              type: 'error',
            })
          } finally {
-            const initialLoad = mangoStore.getState().activityFeed.initialLoad
-            if (!initialLoad) {
-              set((state) => {
-                state.activityFeed.initialLoad = true
-              })
-            }
            set((state) => {
              state.activityFeed.loading = false
            })
@ -827,12 +821,22 @@ const mangoStore = create<MangoStore>()(
            })
          }
        },
-        fetchSwapHistory: async (mangoAccountPk: string, timeout = 0) => {
+        fetchSwapHistory: async (
+          mangoAccountPk: string,
+          timeout = 0,
+          offset = 0
+        ) => {
          const set = get().set
+          const loadedSwapHistory =
+            mangoStore.getState().mangoAccount.stats.swapHistory.data
+          const connectedMangoAccountPk = mangoStore
+            .getState()
+            .mangoAccount.current?.publicKey.toString()
+
          setTimeout(async () => {
            try {
              const history = await fetch(
-                `https://mango-transaction-log.herokuapp.com/v4/stats/swap-history?mango-account=${mangoAccountPk}`
+                `https://mango-transaction-log.herokuapp.com/v4/stats/swap-history?mango-account=${mangoAccountPk}&offset=${offset}&limit=10`
              )
              const parsedHistory = await history.json()
              const sortedHistory =
@ -844,18 +848,32 @@ const mangoStore = create<MangoStore>()(
                    )
                  : []

+              const combinedHistory =
+                offset !== 0 &&
+                connectedMangoAccountPk === loadedSwapHistory[0]?.mango_account
+                  ? loadedSwapHistory.concat(sortedHistory)
+                  : sortedHistory
+
              set((state) => {
-                state.mangoAccount.stats.swapHistory.data = sortedHistory
-                state.mangoAccount.stats.swapHistory.initialLoad = true
+                state.mangoAccount.stats.swapHistory.data = combinedHistory
              })
            } catch {
-              set((state) => {
-                state.mangoAccount.stats.swapHistory.initialLoad = true
-              })
              notify({
                title: 'Failed to load account swap history data',
                type: 'error',
              })
+            } finally {
+              if (
+                !mangoStore.getState().mangoAccount.stats.swapHistory
+                  .initialLoad
+              ) {
+                set((state) => {
+                  state.mangoAccount.stats.swapHistory.initialLoad = true
+                })
+              }
+              set((state) => {
+                state.mangoAccount.stats.swapHistory.loading = false
+              })
            }
          }, timeout)
        },
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -65,3 +65,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