fix: expire old latest transaction ids (#89)

Author: neilcampbell

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

@@ -23,6 +23,7 @@ import { ApplicationId } from '@/features/applications/data/types'
 import { applicationResultsAtom } from '@/features/applications/data'
 import { syncedRoundAtom } from './synced-round'
 import { algod } from '@/features/common/data/algo-client'
+import { createTimestamp } from '@/features/common/data'
 
 const maxBlocksToDisplay = 10
 
@@ -94,6 +95,8 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
       return
     }
 
+    const timestamp = createTimestamp()
+
     const [blockTransactionIds, transactionResults, groupResults, staleAssetIds, staleAddresses, staleApplicationIds] =
       result.subscribedTransactions.reduce(
         (acc, t) => {
@@ -235,9 +238,9 @@ const subscribeToBlocksEffect = atomEffect((get, set) => {
     set(latestTransactionIdsAtom, (prev) => {
       return transactionResults
         .reverse()
-        .map((txn) => txn.id)
+        .map((txn) => [txn.id, timestamp] as const) // This timestamp will always be earlier than the corresponding transaction timestamp, so it always expires before the transaction.
         .concat(prev)
-        .slice(0, 10_000)
+        .slice(0, 50_000)
     })
   })
 

src/features/common/data/atoms-in-atom.ts

@@ -3,7 +3,7 @@ import { dataStore } from './data-store'
 
 const defaultCreateInitialValueAtom = <T>(value: T) => atom(() => value)
 
-const createTimestamp = () => Date.now()
+export const createTimestamp = (): number => Date.now()
 
 export const createAtomAndTimestamp = <T>(value: T) => {
   return [defaultCreateInitialValueAtom(value), createTimestamp()] as const

src/features/common/data/state-cleanup.ts

@@ -1,31 +1,37 @@
 import { blockResultsAtom } from '@/features/blocks/data'
 import { groupResultsAtom } from '@/features/groups/data'
-import { transactionResultsAtom } from '@/features/transactions/data'
+import { latestTransactionIdsAtom, transactionResultsAtom } from '@/features/transactions/data'
 import { Atom, Getter, PrimitiveAtom, Setter, useAtom } from 'jotai'
 import { atomEffect } from 'jotai-effect'
 import { accountResultsAtom } from '@/features/accounts/data'
 import { applicationMetadataResultsAtom } from '@/features/applications/data/application-metadata'
 import { applicationResultsAtom } from '@/features/applications/data'
 import { assetMetadataResultsAtom, assetResultsAtom } from '@/features/assets/data'
 
-const cleanUpIntervalMillis = 60_000 // 10 minutes
-const expirationMillis = 3600000 // 1 hour
+const cleanUpIntervalMillis = 600_000 // 10 minutes
+const expirationMillis = 3_600_000 // 1 hour
 // Run every 10 minutes and cleanup data that hasn't been accessed in the last 1 hour
 
 const stateCleanupEffect = atomEffect((get, set) => {
   const cleanup = setInterval(() => {
-    ;(async () => {
-      const expiredTimestamp = Date.now() - expirationMillis
-      const removeExpired = createExpiredDataRemover(get, set, expiredTimestamp)
-      removeExpired(blockResultsAtom)
-      removeExpired(groupResultsAtom)
-      removeExpired(transactionResultsAtom)
-      removeExpired(accountResultsAtom)
-      removeExpired(applicationMetadataResultsAtom)
-      removeExpired(applicationResultsAtom)
-      removeExpired(assetMetadataResultsAtom)
-      removeExpired(assetResultsAtom)
-    })()
+    const expiredTimestamp = Date.now() - expirationMillis
+
+    const removeExpired = createExpiredDataRemover(get, set, expiredTimestamp)
+    set(latestTransactionIdsAtom, (prev) => {
+      const next = prev.filter(([_, timestamp]) => timestamp > expiredTimestamp)
+      if (prev.length !== next.length) {
+        return next
+      }
+      return prev
+    })
+    removeExpired(blockResultsAtom)
+    removeExpired(groupResultsAtom)
+    removeExpired(transactionResultsAtom)
+    removeExpired(accountResultsAtom)
+    removeExpired(applicationMetadataResultsAtom)
+    removeExpired(applicationResultsAtom)
+    removeExpired(assetMetadataResultsAtom)
+    removeExpired(assetResultsAtom)
   }, cleanUpIntervalMillis)
 
   return () => clearInterval(cleanup)

src/features/transactions/data/latest-transaction-ids.ts

@@ -1,4 +1,4 @@
 import { atom } from 'jotai'
 import { TransactionId } from './types'
 
-export const latestTransactionIdsAtom = atom<TransactionId[]>([])
+export const latestTransactionIdsAtom = atom<(readonly [TransactionId, number])[]>([])

src/features/transactions/data/live-transaction.ts

@@ -12,11 +12,10 @@ export const useLiveTransactions = (filter: (transactionResult: TransactionResul
     const liveTransactionsAtom = atom<(Transaction | InnerTransaction)[]>([])
 
     const liveTransactionsAtomEffect = atomEffect((get, set) => {
+      const latestTransactionIds = get(latestTransactionIdsAtom)
       ;(async () => {
-        const latestTransactionIds = get(latestTransactionIdsAtom)
-
         const newTransactions: Transaction[] = []
-        for (const transactionId of latestTransactionIds) {
+        for (const [transactionId] of latestTransactionIds) {
           if (transactionId === syncedTransactionId) {
             break
           }
@@ -32,7 +31,8 @@ export const useLiveTransactions = (filter: (transactionResult: TransactionResul
           }
         }
 
-        syncedTransactionId = latestTransactionIds[0]
+        const [latestTransactionId] = latestTransactionIds.length > 0 ? latestTransactionIds[0] : ([undefined] as const)
+        syncedTransactionId = latestTransactionId
 
         if (newTransactions.length > 0) {
           set(liveTransactionsAtom, (prev) => {