add activity details view

components/account/ActivityFeed.tsx

@@ -1,76 +1,129 @@
-import { LinkButton } from '@components/shared/Button'
+import { IconButton } from '@components/shared/Button'
-import mangoStore from '@store/mangoStore'
+import { ArrowLeftIcon } from '@heroicons/react/20/solid'
+import mangoStore, {
+  DepositWithdrawFeedItem,
+  LiquidationFeedItem,
+} from '@store/mangoStore'
 import dayjs from 'dayjs'
+import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
-import { useCallback, useState } from 'react'
+import Image from 'next/image'
-import { formatFixedDecimals } from 'utils/numbers'
+import { EXPLORERS } from 'pages/settings'
+import { useState } from 'react'
+import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
+import ActivityFeedTable from './ActivityFeedTable'
 
 const ActivityFeed = () => {
-  const { t } = useTranslation(['common', 'activity'])
   const activityFeed = mangoStore((s) => s.activityFeed.feed)
-  const actions = mangoStore((s) => s.actions)
   const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
-  const [offset, setOffset] = useState(0)
+  const [showActivityDetail, setShowActivityDetail] = useState(null)
 
-  const handleShowMore = useCallback(() => {
+  const handleShowActivityDetails = (activity: any) => {
-    const mangoAccount = mangoStore.getState().mangoAccount.current
+    setShowActivityDetail(activity)
-    if (!mangoAccount) return
+  }
-    setOffset(offset + 25)
-    actions.fetchActivityFeed(mangoAccount.publicKey.toString(), offset + 25)
-  }, [actions, offset])
 
+  return !showActivityDetail ? (
+    <ActivityFeedTable
+      activityFeed={activityFeed}
+      handleShowActivityDetails={handleShowActivityDetails}
+    />
+  ) : (
+    <ActivityDetails
+      activity={showActivityDetail}
+      setShowActivityDetail={setShowActivityDetail}
+    />
+  )
+}
+
+export default ActivityFeed
+
+const ActivityDetails = ({
+  activity,
+  setShowActivityDetail,
+}: {
+  activity: LiquidationFeedItem
+  setShowActivityDetail: (x: any) => void
+}) => {
+  console.log(activity)
+  const { t } = useTranslation(['common', 'activity'])
+  const [preferredExplorer] = useLocalStorageState(
+    PREFERRED_EXPLORER_KEY,
+    EXPLORERS[0]
+  )
+  const { block_datetime } = activity
+  const {
+    asset_amount,
+    asset_price,
+    asset_symbol,
+    liab_amount,
+    liab_price,
+    liab_symbol,
+    signature,
+  } = activity.activity_details
   return (
-    <>
+    <div>
-      <table className="min-w-full">
+      <div className="flex items-center p-6">
-        <thead>
+        <IconButton
-          <tr>
+          className="mr-4"
-            <th className="bg-th-bkg-1 text-left">{t('date')}</th>
+          onClick={() => setShowActivityDetail(null)}
-            <th className="bg-th-bkg-1 text-right">{t('activity:activity')}</th>
+        >
-            <th className="bg-th-bkg-1 text-right">{t('activity:credit')}</th>
+          <ArrowLeftIcon className="h-5 w-5" />
-            <th className="bg-th-bkg-1 text-right">{t('activity:debit')}</th>
+        </IconButton>
-            <th className="bg-th-bkg-1 text-right">
+        <h2 className="text-lg">Liquidation Details</h2>
-              {t('activity:activity-value')}
+      </div>
-            </th>
+      <div className="grid grid-cols-3 gap-6 px-6">
-            {/* <th className="bg-th-bkg-1 text-right">{t('account-value')}</th> */}
+        <div className="col-span-1">
-          </tr>
+          <p className="mb-0.5 text-sm">{t('date')}</p>
-        </thead>
+          <p className="text-th-fgd-1">
-        <tbody>
-          {activityFeed.map((activity, i) => {
-            const { activity_type, block_datetime } = activity
-            const { symbol, quantity, usd_equivalent } =
-              activity.activity_details
-            const credit =
-              activity_type === 'Deposit' ? `${quantity} ${symbol}` : '0'
-            const debit =
-              activity_type === 'Withdraw' ? `${quantity} ${symbol}` : '0'
-            return (
-              <tr key={block_datetime + i} className="text-sm">
-                <td>
-                  <p className="font-body tracking-wide">
             {dayjs(block_datetime).format('ddd D MMM')}
           </p>
           <p className="text-xs text-th-fgd-3">
             {dayjs(block_datetime).format('h:mma')}
           </p>
-                </td>
-                <td className="text-right">{activity_type}</td>
-                <td className="text-right">{credit}</td>
-                <td className="text-right">{debit}</td>
-                <td className="text-right">
-                  {formatFixedDecimals(usd_equivalent, true)}
-                </td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
-      {activityFeed.length % 25 === 0 ? (
-        <div className="flex justify-center pt-6">
-          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
         </div>
-      ) : null}
+        <div className="col-span-1">
-    </>
+          <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
+          <p className="text-th-fgd-1">
+            {`${formatDecimal(
+              asset_amount
+            )} ${asset_symbol} at ${formatFixedDecimals(asset_price, true)}`}
+          </p>
+          <p className="text-xs text-th-fgd-3">
+            {formatFixedDecimals(asset_price * asset_amount, true)}
+          </p>
+        </div>
+        <div className="col-span-1">
+          <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
+          <p className="text-th-fgd-1">
+            {`${formatDecimal(
+              liab_amount
+            )} ${liab_symbol} at ${formatFixedDecimals(liab_price, true)}`}
+          </p>
+          <p className="text-xs text-th-fgd-3">
+            {formatFixedDecimals(liab_price * liab_amount, true)}
+          </p>
+        </div>
+      </div>
+      <div className="col-span-3 mt-8 flex justify-center border-y border-th-bkg-3 py-3">
+        {/* <p className="mb-0.5 text-sm">{t('transaction')}</p> */}
+        <a
+          className="default-transition flex items-center text-th-fgd-1 hover:text-th-fgd-3"
+          href={`${preferredExplorer.url}${signature}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            alt=""
+            width="20"
+            height="20"
+            src={`/explorer-logos/${preferredExplorer.name}.png`}
+          />
+          <span className="ml-2 text-base">{`View on ${t(
+            `settings:${preferredExplorer.name}`
+          )}`}</span>
+        </a>
+      </div>
+    </div>
   )
 }
-
-export default ActivityFeed

components/account/ActivityFeedTable.tsx

@@ -0,0 +1,199 @@
+import { LinkButton } from '@components/shared/Button'
+import Tooltip from '@components/shared/Tooltip'
+import { BoltIcon, ChevronRightIcon, LinkIcon } from '@heroicons/react/20/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
+import mangoStore, {
+  DepositWithdrawFeedItem,
+  LiquidationFeedItem,
+} from '@store/mangoStore'
+import dayjs from 'dayjs'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { capitalize } from 'lodash'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import { EXPLORERS } from 'pages/settings'
+import { useCallback, useState } from 'react'
+import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
+import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
+
+const ActivityFeedTable = ({
+  activityFeed,
+  handleShowActivityDetails,
+}: {
+  activityFeed: any
+  handleShowActivityDetails: (x: LiquidationFeedItem) => void
+}) => {
+  const { t } = useTranslation(['common', 'activity'])
+  const { connected } = useWallet()
+  // const activityFeed = mangoStore((s) => s.activityFeed.feed)
+  const actions = mangoStore((s) => s.actions)
+  const [offset, setOffset] = useState(0)
+  const [preferredExplorer] = useLocalStorageState(
+    PREFERRED_EXPLORER_KEY,
+    EXPLORERS[0]
+  )
+
+  const handleShowMore = useCallback(() => {
+    const mangoAccount = mangoStore.getState().mangoAccount.current
+    if (!mangoAccount) return
+    setOffset(offset + 25)
+    actions.fetchActivityFeed(mangoAccount.publicKey.toString(), offset + 25)
+  }, [actions, offset])
+
+  const getCreditAndDebit = (activity: any) => {
+    const { activity_type } = activity
+    let credit = '0'
+    let debit = '0'
+    if (activity_type === 'liquidate_token_with_token') {
+      const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } =
+        activity.activity_details
+      if (side === 'liqee') {
+        credit = `${formatDecimal(liab_amount)} ${liab_symbol}`
+        debit = `${formatDecimal(asset_amount)} ${asset_symbol}`
+      } else {
+        credit = `${formatDecimal(asset_amount)} ${asset_symbol}`
+        debit = `${formatDecimal(liab_amount)} ${liab_symbol}`
+      }
+    }
+    if (activity_type === 'deposit') {
+      const { symbol, quantity } = activity.activity_details
+      credit = `${formatDecimal(quantity)} ${symbol}`
+      debit = '0'
+    }
+    if (activity_type === 'withdraw') {
+      const { symbol, quantity } = activity.activity_details
+      credit = '0'
+      debit = `${formatDecimal(quantity)} ${symbol}`
+    }
+    return { credit, debit }
+  }
+
+  const getValue = (activity: any) => {
+    const { activity_type } = activity
+    let value = 0
+    if (activity_type === 'liquidate_token_with_token') {
+      const { side, liab_amount, liab_price, asset_amount, asset_price } =
+        activity.activity_details
+      if (side === 'liqee') {
+        value = asset_amount * asset_price - liab_amount * liab_price
+      } else {
+        value = liab_amount * liab_price - asset_amount * asset_price
+      }
+    }
+    if (activity_type === 'deposit' || activity_type === 'withdraw') {
+      const { usd_equivalent } = activity.activity_details
+      value = usd_equivalent
+    }
+    return value
+  }
+
+  return connected ? (
+    activityFeed.length ? (
+      <>
+        <table className="min-w-full">
+          <thead>
+            <tr className="sticky top-0 z-10">
+              <th className="bg-th-bkg-1 text-left">{t('date')}</th>
+              <th className="bg-th-bkg-1 text-right">
+                {t('activity:activity')}
+              </th>
+              <th className="bg-th-bkg-1 text-right">{t('activity:credit')}</th>
+              <th className="bg-th-bkg-1 text-right">{t('activity:debit')}</th>
+              <th className="bg-th-bkg-1 text-right">
+                {t('activity:activity-value')}
+              </th>
+              <th className="bg-th-bkg-1 text-right">{t('explorer')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {activityFeed.map((activity: any, i: number) => {
+              const { activity_type, block_datetime } = activity
+              const { signature } = activity.activity_details
+              const isLiquidation =
+                activity_type === 'liquidate_token_with_token'
+              const activityName = isLiquidation ? 'liquidation' : activity_type
+              const amounts = getCreditAndDebit(activity)
+              const value = getValue(activity)
+              return (
+                <tr
+                  key={block_datetime + i}
+                  className={`default-transition text-sm hover:bg-th-bkg-2 ${
+                    isLiquidation ? 'cursor-pointer' : ''
+                  }`}
+                  onClick={
+                    isLiquidation
+                      ? () => handleShowActivityDetails(activity)
+                      : undefined
+                  }
+                >
+                  <td>
+                    <p className="font-body tracking-wide">
+                      {dayjs(block_datetime).format('ddd D MMM')}
+                    </p>
+                    <p className="text-xs text-th-fgd-3">
+                      {dayjs(block_datetime).format('h:mma')}
+                    </p>
+                  </td>
+                  <td className="text-right">{capitalize(activityName)}</td>
+                  <td className="text-right">{amounts.credit}</td>
+                  <td className="text-right">{amounts.debit}</td>
+                  <td className="text-right">
+                    {formatFixedDecimals(value, true)}
+                  </td>
+                  <td>
+                    {activity_type !== 'liquidate_token_with_token' ? (
+                      <div className="flex items-center justify-end">
+                        <Tooltip
+                          content={`View on ${t(
+                            `settings:${preferredExplorer.name}`
+                          )}`}
+                          placement="top-end"
+                        >
+                          <a
+                            href={`${preferredExplorer.url}${signature}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <div className="h-6 w-6">
+                              <Image
+                                alt=""
+                                width="24"
+                                height="24"
+                                src={`/explorer-logos/${preferredExplorer.name}.png`}
+                              />
+                            </div>
+                          </a>
+                        </Tooltip>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-end">
+                        <ChevronRightIcon className="h-6 w-6 text-th-fgd-3" />
+                      </div>
+                    )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+        {activityFeed.length % 25 === 0 ? (
+          <div className="flex justify-center pt-6">
+            <LinkButton onClick={handleShowMore}>Show More</LinkButton>
+          </div>
+        ) : null}
+      </>
+    ) : (
+      <div className="flex flex-col items-center p-8">
+        <BoltIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+        <p>No account activity found...</p>
+      </div>
+    )
+  ) : (
+    <div className="flex flex-col items-center p-8">
+      <LinkIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+      <p>Connect to view your account activity</p>
+    </div>
+  )
+}
+
+export default ActivityFeedTable

store/mangoStore.ts

@@ -73,7 +73,7 @@ export interface PerformanceDataItem {
   transfer_balance: number
 }
 
-export interface ActivityFeedItem {
+export interface DepositWithdrawFeedItem {
   activity_details: {
     block_datetime: string
     mango_account: string
@@ -88,6 +88,25 @@ export interface ActivityFeedItem {
   symbol: string
 }
 
+export interface LiquidationFeedItem {
+  activity_details: {
+    asset_amount: number
+    asset_price: number
+    asset_symbol: string
+    block_datetime: string
+    liab_amount: number
+    liab_price: number
+    liab_symbol: string
+    mango_account: string
+    mango_group: string
+    side: string
+    signature: string
+  }
+  activity_type: string
+  block_datetime: string
+  symbol: string
+}
+
 export interface SwapHistoryItem {
   block_datetime: string
   mango_account: string
@@ -118,7 +137,7 @@ interface ProfileDetails {
 
 export type MangoStore = {
   activityFeed: {
-    feed: ActivityFeedItem[]
+    feed: Array<DepositWithdrawFeedItem | LiquidationFeedItem>
     loading: boolean
   }
   coingeckoPrices: {
@@ -375,7 +394,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=8nHXz5wvZw6mVySbgXLfc9tx68ep9aGSy44ZaNiY9Viv&offset=${offset}&limit=25`
             )
             const parsedResponse = await response.json()
             const entries: any = Object.entries(parsedResponse).sort((a, b) =>
@@ -389,7 +408,10 @@ const mangoStore = create<MangoStore>()(
                 })
                 .filter((x: string) => x)
                 .sort(
-                  (a: ActivityFeedItem, b: ActivityFeedItem) =>
+                  (
+                    a: DepositWithdrawFeedItem | LiquidationFeedItem,
+                    b: DepositWithdrawFeedItem | LiquidationFeedItem
+                  ) =>
                     dayjs(b.block_datetime).unix() -
                     dayjs(a.block_datetime).unix()
                 )