feat: evict account from cache when it's stale (#49)

* chore: rename transactions card in asset
* chore: some naming tweaks and setting up structure
* feat: evict account from cache when it's stale

Author: neilcampbell

src/features/accounts/components/account-activity-tabs.tsx

@@ -1,52 +1,66 @@
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { cn } from '@/features/common/utils'
 import { useMemo } from 'react'
+import { AccountAssetHeld } from './account-assets-held'
+import { Account } from '../models'
+
+const accountLiveTransactionsTabId = 'live-transactions'
+const accountHistoricalTransactionsTabId = 'historical-transactions'
+const accountHeldAssetsTabId = 'held-assets'
+const accountCreatedAssetsTabId = 'created-assets'
+const accountCreatedApplicationsTabId = 'created-applications'
+const accountOptedApplicationsTabId = 'opted-applications'
 
-const accountVisualTransactionTabId = 'visual'
-const accountVisualAssetsTabId = 'table'
-const accountVisualCreatedAssetsTabId = 'created-assets'
-const accountVisualCreatedApplicationsTabId = 'created-applications'
-const accountVisualOptedApplicationsTabId = 'opted-applications'
 export const accountDetailsLabel = 'View account Details'
-export const accountVisualGraphTabLabel = 'Transactions'
-export const accountVisualAssetsTabLabel = 'Assets'
-export const accountVisualCreatedAssetsTabLabel = 'Created Assets'
-export const accountVisualCreatedApplicationsTabLabel = 'Created Applications'
-export const accountVisualOptedApplicationsTabLabel = 'Opted Applications'
+export const accountLiveTransactionsTabLabel = 'Live Transactions'
+export const accountHistoricalTransactionsTabLabel = 'Historical Transactions'
+export const accountHeldAssetsTabLabel = 'Held Assets'
+export const accountCreatedAssetsTabLabel = 'Created Assets'
+export const accountCreatedApplicationsTabLabel = 'Created Applications'
+export const accountOptedApplicationsTabLabel = 'Opted Applications'
+
+type Props = {
+  account: Account
+}
 
-export function AccountActivityTabs() {
+export function AccountActivityTabs({ account }: Props) {
   const tabs = useMemo(
     () => [
       {
-        id: accountVisualTransactionTabId,
-        label: accountDetailsLabel,
+        id: accountLiveTransactionsTabId,
+        label: accountLiveTransactionsTabLabel,
         children: '',
       },
       {
-        id: accountVisualAssetsTabId,
-        label: accountVisualAssetsTabLabel,
+        id: accountHistoricalTransactionsTabId,
+        label: accountHistoricalTransactionsTabLabel,
         children: '',
       },
       {
-        id: accountVisualCreatedAssetsTabId,
-        label: accountVisualCreatedAssetsTabLabel,
+        id: accountHeldAssetsTabId,
+        label: accountHeldAssetsTabLabel,
+        children: <AccountAssetHeld address={account.address} />,
+      },
+      {
+        id: accountCreatedAssetsTabId,
+        label: accountCreatedAssetsTabLabel,
         children: '',
       },
       {
-        id: accountVisualCreatedApplicationsTabId,
-        label: accountVisualCreatedApplicationsTabLabel,
+        id: accountCreatedApplicationsTabId,
+        label: accountCreatedApplicationsTabLabel,
         children: '',
       },
       {
-        id: accountVisualOptedApplicationsTabId,
-        label: accountVisualOptedApplicationsTabLabel,
+        id: accountOptedApplicationsTabId,
+        label: accountOptedApplicationsTabLabel,
         children: '',
       },
     ],
-    []
+    [account.address]
   )
   return (
-    <Tabs defaultValue={accountVisualTransactionTabId}>
+    <Tabs defaultValue={accountLiveTransactionsTabId}>
       <TabsList aria-label={accountDetailsLabel}>
         {tabs.map((tab) => (
           <TabsTrigger key={tab.id} className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-44')} value={tab.id}>

src/features/accounts/components/account-assets-held.tsx

@@ -0,0 +1,9 @@
+import { Address } from '../data/types'
+
+type Props = {
+  address: Address
+}
+
+export function AccountAssetHeld({ address }: Props) {
+  return <>Assets Held for {address}</>
+}

src/features/accounts/components/account-details.tsx

@@ -19,7 +19,7 @@ export function AccountDetails({ account }: Props) {
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{activityLabel}</h1>
           <div className={cn('border-solid border-2 border-border grid')}>
-            <AccountActivityTabs />
+            <AccountActivityTabs account={account} />
           </div>
         </CardContent>
       </Card>

src/features/assets/components/asset-details.tsx

@@ -25,7 +25,7 @@ import {
   assetNameLabel,
   assetReserveLabel,
   assetTotalSupplyLabel,
-  assetTransactionsLabel,
+  assetActivityLabel,
   assetUnitNameLabel,
   assetUrlLabel,
 } from './labels'
@@ -162,9 +162,9 @@ export function AssetDetails({ asset }: Props) {
 
           <Card className={cn('p-4')}>
             <CardContent className={cn('text-sm space-y-2')}>
-              <h1 className={cn('text-2xl text-primary font-bold')}>{assetTransactionsLabel}</h1>
+              <h1 className={cn('text-2xl text-primary font-bold')}>{assetActivityLabel}</h1>
               <Tabs defaultValue={assetLiveTransactionsTabId}>
-                <TabsList aria-label={assetTransactionsLabel}>
+                <TabsList aria-label={assetActivityLabel}>
                   <TabsTrigger
                     className={cn('data-[state=active]:border-primary data-[state=active]:border-b-2 w-48')}
                     value={assetLiveTransactionsTabId}

src/features/assets/components/labels.ts

@@ -22,7 +22,7 @@ export const assetMetadataLabel = 'Asset Metadata'
 
 export const assetJsonLabel = 'Asset JSON'
 
-export const assetTransactionsLabel = 'Asset Transactions'
+export const assetActivityLabel = 'Activity'
 export const assetLiveTransactionsTabId = 'live-transactions'
 export const assetLiveTransactionsTabLabel = 'Live Transactions'
 export const assetHistoricalTransactionsTabId = 'historical-transactions'

src/features/assets/pages/asset-page.test.tsx

@@ -17,7 +17,7 @@ import {
   assetReserveLabel,
   assetTotalSupplyLabel,
   assetTraitsLabel,
-  assetTransactionsLabel,
+  assetActivityLabel,
   assetUrlLabel,
 } from '../components/labels'
 import { useParams } from 'react-router-dom'
@@ -149,9 +149,9 @@ describe('asset-page', () => {
               ],
             })
 
-            const transactionTabList = component.getByRole('tablist', { name: assetTransactionsLabel })
-            expect(transactionTabList).toBeTruthy()
-            expect(transactionTabList.children.length).toBe(2)
+            const activityTabList = component.getByRole('tablist', { name: assetActivityLabel })
+            expect(activityTabList).toBeTruthy()
+            expect(activityTabList.children.length).toBe(2)
           })
         }
       )
@@ -614,8 +614,8 @@ describe('asset-page', () => {
             const assetTraitsCard = component.queryByText(assetTraitsLabel)
             expect(assetTraitsCard).toBeNull()
 
-            const transactionTabList = component.queryByRole('tablist', { name: assetTransactionsLabel })
-            expect(transactionTabList).toBeNull()
+            const activityTabList = component.queryByRole('tablist', { name: assetActivityLabel })
+            expect(activityTabList).toBeNull()
           })
         }
       )

src/features/blocks/data/latest-blocks.ts

@@ -6,7 +6,7 @@ import { asTransactionSummary } from '@/features/transactions/mappers'
 import { atomEffect } from 'jotai-effect'
 import { AlgorandSubscriber } from '@algorandfoundation/algokit-subscriber'
 import { algod } from '@/features/common/data'
-import { TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
+import { ApplicationOnComplete, TransactionResult } from '@algorandfoundation/algokit-utils/types/indexer'
 import { BlockResult, Round } from './types'
 import { assetMetadataResultsAtom } from '@/features/assets/data'
 import algosdk from 'algosdk'
@@ -17,6 +17,9 @@ import { BlockSummary } from '../models'
 import { blockResultsAtom, addStateExtractedFromBlocksAtom, syncedRoundAtom } from './block-result'
 import { GroupId, GroupResult } from '@/features/groups/data/types'
 import { AssetId } from '@/features/assets/data/types'
+import { BalanceChangeRole } from '@algorandfoundation/algokit-subscriber/types/subscription'
+import { accountResultsAtom } from '@/features/accounts/data'
+import { Address } from '@/features/accounts/data/types'
 
 const maxBlocksToDisplay = 5
 
@@ -100,15 +103,20 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
       return
     }
 
-    const [blockTransactionIds, transactionResults, groupResults, staleAssetIds] = result.subscribedTransactions.reduce(
+    const [blockTransactionIds, transactionResults, groupResults, staleAssetIds, staleAddresses] = result.subscribedTransactions.reduce(
       (acc, t) => {
         if (!t.parentTransactionId && t['confirmed-round'] != null) {
           const round = t['confirmed-round']
-          // Filter out filtersMatched and balanceChanges, as we don't need them
-          const { filtersMatched, balanceChanges, ...transaction } = t
+          // Remove filtersMatched, balanceChanges and arc28Events, as we don't need to store them in the transaction
+          const { filtersMatched: _filtersMatched, balanceChanges, arc28Events: _arc28Events, ...transaction } = t
 
+          // Accumulate transaction ids by round
           acc[0].set(round, (acc[0].get(round) ?? []).concat(transaction.id))
+
+          // Accumulate transactions
           acc[1].push(transaction)
+
+          // Accumulate group results
           if (t.group) {
             const roundTime = transaction['round-time']
             const group: GroupResult = acc[2].get(t.group) ?? {
@@ -120,16 +128,48 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
             group.transactionIds.push(t.id)
             acc[2].set(t.group, group)
           }
+
+          // Accumulate stale asset ids
           const staleAssetIds = flattenTransactionResult(t)
             .filter((t) => t['tx-type'] === algosdk.TransactionType.acfg)
             .map((t) => t['asset-config-transaction']!['asset-id'])
             .filter(distinct((x) => x))
             .filter(isDefined) // We ignore asset create transactions because they aren't in the atom
           acc[3].push(...staleAssetIds)
+
+          // Accumulate stale addresses
+          const addressesStaleDueToBalanceChanges =
+            balanceChanges
+              ?.filter((bc) => {
+                const isAssetOptIn =
+                  bc.amount === 0n &&
+                  bc.assetId !== 0 &&
+                  bc.roles.includes(BalanceChangeRole.Sender) &&
+                  bc.roles.includes(BalanceChangeRole.Receiver)
+                const isNonZeroAmount = bc.amount !== 0n // Can either be negative (decreased balance) or positive (increased balance)
+                return isAssetOptIn || isNonZeroAmount
+              })
+              .map((bc) => bc.address)
+              .filter(distinct((x) => x)) ?? []
+          const addressesStaleDueToAppChanges = flattenTransactionResult(t)
+            .filter((t) => {
+              if (t['tx-type'] !== algosdk.TransactionType.appl) {
+                return false
+              }
+              const appCallTransaction = t['application-transaction']!
+              const isAppCreate =
+                appCallTransaction['on-completion'] === ApplicationOnComplete.noop && !appCallTransaction['application-id']
+              const isAppOptIn = appCallTransaction['on-completion'] === ApplicationOnComplete.optin && appCallTransaction['application-id']
+              return isAppCreate || isAppOptIn
+            })
+            .map((t) => t.sender)
+            .filter(distinct((x) => x))
+          const staleAddresses = Array.from(new Set(addressesStaleDueToBalanceChanges.concat(addressesStaleDueToAppChanges)))
+          acc[4].push(...staleAddresses)
         }
         return acc
       },
-      [new Map(), [], new Map(), []] as [Map<Round, string[]>, TransactionResult[], Map<GroupId, GroupResult>, AssetId[]]
+      [new Map(), [], new Map(), [], []] as [Map<Round, string[]>, TransactionResult[], Map<GroupId, GroupResult>, AssetId[], Address[]]
     )
 
     const blockResults = result.blockMetadata.map((b) => {
@@ -161,6 +201,19 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
       })
     }
 
+    if (staleAddresses.length > 0) {
+      const currentAccountResults = get.peek(accountResultsAtom)
+      const addressesToRemove = staleAddresses.filter((staleAddress) => currentAccountResults.has(staleAddress))
+
+      set(accountResultsAtom, (prev) => {
+        const next = new Map(prev)
+        addressesToRemove.forEach((address) => {
+          next.delete(address)
+        })
+        return next
+      })
+    }
+
     set(addStateExtractedFromBlocksAtom, blockResults, transactionResults, Array.from(groupResults.values()))
 
     set(liveTransactionIdsAtom, (prev) => {