add basic activity feed

components/Stake.tsx

@@ -3,7 +3,6 @@ import { useCallback, useState } from 'react'
 import TabUnderline from './shared/TabUnderline'
 import StakeForm from '@components/StakeForm'
 import UnstakeForm from '@components/UnstakeForm'
-// import AccountStats from './AccountStats'
 import mangoStore from '@store/mangoStore'
 import { STAKEABLE_TOKENS } from 'utils/constants'
 import { formatTokenSymbol } from 'utils/tokens'
@@ -52,11 +51,6 @@ const Stake = () => {
             ) : null}
           </div>
         </div>
-        {/* <div
-          className={`order-1 col-span-12 border-x border-t border-th-fgd-1 bg-th-bkg-2 p-8 pt-6 md:order-2 md:col-span-5 md:rounded-br-2xl md:border-b md:border-l-0`}
-        >
-          <AccountStats token={selectedToken} />
-        </div> */}
       </div>
       {activeFormTab === 'Add' ? (
         <div className="fixed bottom-8 left-8">

components/TransactionHistory.tsx

@@ -1,28 +1,128 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import dayjs from 'dayjs'
 import useAccountHistory from 'hooks/useAccountHistory'
-import { ActivityFeed } from 'types'
+import { ActivityFeed, DepositWithdrawFeedItem, SwapHistoryItem } from 'types'
+import SheenLoader from './shared/SheenLoader'
 
 const TransactionHistory = () => {
-  const { history } = useAccountHistory()
-
+  const { history, isLoading } = useAccountHistory()
   return (
-    <div className="flex justify-center rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
+    <div className="space-y-2 rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
       {history?.length ? (
         history.map((history: ActivityFeed | any) => {
+          const { activity_type, activity_details } = history
           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>
+            <HistoryContent
+              details={activity_details}
+              type={activity_type}
+              key={activity_details.signature}
+            />
           )
         })
+      ) : isLoading ? (
+        [...Array(4)].map((x, i) => (
+          <SheenLoader className="flex flex-1 rounded-xl" key={i}>
+            <div className="h-[76px] w-full bg-th-bkg-2" />
+          </SheenLoader>
+        ))
       ) : (
-        <span>No transaction history found</span>
+        <span className="text-center">No transaction history found</span>
       )}
     </div>
   )
 }
 
 export default TransactionHistory
+
+type HistoryContentProps = {
+  details: SwapHistoryItem | DepositWithdrawFeedItem
+  type: string
+}
+
+function isDeposit(
+  details: SwapHistoryItem | DepositWithdrawFeedItem,
+): details is DepositWithdrawFeedItem {
+  if ('quantity' in details) return true
+  else return false
+}
+
+function isSwap(
+  details: SwapHistoryItem | DepositWithdrawFeedItem,
+): details is SwapHistoryItem {
+  if ('swap_in_amount' in details) return true
+  else return false
+}
+
+const HistoryContent = ({ details, type }: HistoryContentProps) => {
+  switch (type) {
+    case 'deposit':
+      if (isDeposit(details)) {
+        return <DepositHistory details={details} />
+      }
+      break
+    case 'swap':
+      if (isSwap(details)) {
+        return <SwapHistory details={details} />
+      }
+      break
+    default:
+      return null
+  }
+  return null
+}
+
+const DepositHistory = ({ details }: { details: DepositWithdrawFeedItem }) => {
+  const { block_datetime, quantity, signature, symbol } = details
+  return (
+    <a
+      className="block rounded-xl border-2 border-th-bkg-3 p-4 md:hover:border-th-bkg-2"
+      href={`https://explorer.solana.com/tx/${signature}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div className="w-full">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="mb-1 text-sm">
+              {dayjs(block_datetime).format('ddd D MMM h:mma')}
+            </p>
+            <h4 className="leading-none">{`Deposit ${quantity} ${symbol}`}</h4>
+          </div>
+          <ArrowTopRightOnSquareIcon className="h-6 w-6 text-th-fgd-4" />
+        </div>
+      </div>
+    </a>
+  )
+}
+
+const SwapHistory = ({ details }: { details: SwapHistoryItem }) => {
+  const {
+    block_datetime,
+    signature,
+    swap_in_amount,
+    swap_in_symbol,
+    swap_out_amount,
+    swap_out_symbol,
+  } = details
+  return (
+    <a
+      className="block rounded-xl border-2 border-th-bkg-3 p-4 md:hover:border-th-bkg-2"
+      href={`https://explorer.solana.com/tx/${signature}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div className="w-full">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="mb-1 text-sm">
+              {dayjs(block_datetime).format('ddd D MMM h:mma')}
+            </p>
+            <h4 className="leading-none">{`Swap ${swap_in_amount} ${swap_in_symbol} for ${swap_out_amount} ${swap_out_symbol}`}</h4>
+          </div>
+          <ArrowTopRightOnSquareIcon className="h-6 w-6 text-th-fgd-4" />
+        </div>
+      </div>
+    </a>
+  )
+}

pages/index.tsx

@@ -46,7 +46,7 @@ const Index: NextPage = () => {
       <div className="mb-6 grid grid-cols-4">
         <NavTabs
           activeValue={activeTab}
-          values={['Boost!', 'Positions', 'History', 'Stats']}
+          values={['Boost!', 'Positions', 'Activity', 'Stats']}
           onChange={setActiveTab}
         />
       </div>
@@ -69,7 +69,7 @@ const TabContent = ({
       return <Stake />
     case 'Positions':
       return <Positions setActiveTab={setActiveTab} />
-    case 'History':
+    case 'Activity':
       return <TransactionHistory />
     case 'Stats':
       return <Stats />

styles/globals.css

@@ -158,9 +158,8 @@ svg {
 
 h1,
 h2,
-h3,
-h4 {
-  @apply font-extrabold text-th-fgd-1;
+h3 {
+  @apply font-extrabold;
 }
 
 h1 {
@@ -175,6 +174,10 @@ h3 {
   @apply text-lg;
 }
 
+h4 {
+  @apply text-base font-bold;
+}
+
 p {
   @apply text-th-fgd-1;
 }