add transaction history scaffold

components/StakeForm.tsx

@@ -167,7 +167,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
         solAmountToBorrow,
         stakeBank.mint,
         parseFloat(inputAmount),
-        newAccountNum,
+        newAccountNum + 300,
       )
       notify({
         title: 'Transaction confirmed',

components/TransactionHistory.tsx

@@ -1,7 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import useAccountHistory from 'hooks/useAccountHistory'
+import { ActivityFeed } from 'types'
+
 const TransactionHistory = () => {
+  const { data } = useAccountHistory()
+  console.log('tx history data', data)
   return (
     <div className="flex justify-center rounded-2xl border border-th-fgd-1 p-6">
-      <span>No transaction history found</span>
+      {data && Array.isArray(data) ? (
+        data.map((history: ActivityFeed | any) => {
+          return (
+            <div key={history.block_datetime}>
+              <div>{history.activity_type}</div>
+              <div>{history.activity_details.symbol}</div>
+              <div>{history.activity_details.quantity}</div>
+              <div>{history.activity_details.signature}</div>
+            </div>
+          )
+        })
+      ) : (
+        <span>No transaction history found</span>
+      )}
     </div>
   )
 }

hooks/useAccountHistory.ts

@@ -0,0 +1,54 @@
+import { useQuery } from '@tanstack/react-query'
+import { MANGO_DATA_API_URL } from 'utils/constants'
+import { ActivityFeed, EmptyObject } from 'types'
+import dayjs from 'dayjs'
+import useMangoAccount from './useMangoAccount'
+
+const fetchHistory = async (
+  mangoAccountPk: string,
+): Promise<Array<ActivityFeed> | EmptyObject | null> => {
+  const response = await fetch(
+    `${MANGO_DATA_API_URL}/stats/activity-feed?mango-account=${mangoAccountPk}&offset=0&limit=1000`,
+  )
+  const parsedResponse: Array<ActivityFeed> = await response.json()
+
+  if (Array.isArray(parsedResponse)) {
+    const activity = parsedResponse
+      .map((i) => {
+        return {
+          ...i,
+        }
+      })
+      .sort(
+        (a, b) =>
+          dayjs(b.block_datetime).unix() - dayjs(a.block_datetime).unix(),
+      )
+
+    // only add to current feed if data request is offset and the mango account hasn't changed
+    // const combinedFeed =
+    //   offset !== 0 ? loadedFeed.concat(latestFeed) : latestFeed
+
+    return activity
+  } else return null
+}
+
+export default function useAccountHistory() {
+  const { mangoAccount } = useMangoAccount()
+
+  const response = useQuery<Array<ActivityFeed> | EmptyObject | null>(
+    ['history'],
+    () =>
+      mangoAccount?.publicKey
+        ? fetchHistory(mangoAccount.publicKey.toString())
+        : null,
+    {
+      cacheTime: 1000 * 60 * 5,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: true,
+      enabled: !!mangoAccount,
+    },
+  )
+
+  return response
+}