feat: detect and allow refreshing of stale mutable entities (#73)

* feat: detect and allow refreshing of stale mutable entities

Author: neilcampbell

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

@@ -18,7 +18,11 @@ import {
   accountRekeyedToLabel,
 } from './labels'
 
-export function AccountInfo({ account }: { account: Account }) {
+type Props = {
+  account: Account
+}
+
+export function AccountInfo({ account }: Props) {
   const totalAssetsHeld = account.assetsHeld.length
   const totalAssetsCreated = account.assetsCreated.length
   const totalAssetsOptedIn = account.assetsHeld.length + account.assetsOpted.length

src/features/accounts/data/account.ts

@@ -1,24 +1,37 @@
-import { atom, useAtomValue } from 'jotai'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
 import { Address } from './types'
-import { loadable } from 'jotai/utils'
+import { atomWithRefresh, loadable } from 'jotai/utils'
 import { useMemo } from 'react'
 import { asAccount } from '../mappers'
-import { getAccountResultAtom } from './account-result'
+import { accountResultsAtom, getAccountResultAtom } from './account-result'
 import { assetSummaryResolver } from '@/features/assets/data'
+import { atomEffect } from 'jotai-effect'
 
-const createAccountAtom = (address: Address) => {
-  return atom(async (get) => {
-    const accountResult = await get(getAccountResultAtom(address))
-    return asAccount(accountResult, assetSummaryResolver)
+const createAccountAtoms = (address: Address) => {
+  const isStaleAtom = atom(false)
+  const detectIsStaleEffect = atomEffect((get, set) => {
+    const accountResults = get(accountResultsAtom)
+    const isStale = accountResults.get(address) === undefined ? true : false
+    set(isStaleAtom, isStale)
   })
+
+  return [
+    atomWithRefresh(async (get) => {
+      const accountResult = await get(getAccountResultAtom(address))
+      get(detectIsStaleEffect)
+      return asAccount(accountResult, assetSummaryResolver)
+    }),
+    isStaleAtom,
+  ] as const
 }
 
-const useAccountAtom = (address: Address) => {
+const useAccountAtoms = (address: Address) => {
   return useMemo(() => {
-    return createAccountAtom(address)
+    return createAccountAtoms(address)
   }, [address])
 }
 
-export const useLoadableAccountAtom = (address: Address) => {
-  return useAtomValue(loadable(useAccountAtom(address)))
+export const useLoadableAccount = (address: Address) => {
+  const [accountAtom, isStaleAtom] = useAccountAtoms(address)
+  return [useAtomValue(loadable(accountAtom)), useSetAtom(accountAtom), useAtomValue(isStaleAtom)] as const
 }

src/features/accounts/pages/account-page.test.tsx

@@ -23,6 +23,7 @@ import {
 } from '../components/labels'
 import { assetResultsAtom } from '@/features/assets/data'
 import { assetResultMother } from '@/tests/object-mother/asset-result'
+import { refreshButtonLabel } from '@/features/common/components/refresh-button'
 
 describe('account-page', () => {
   describe('when rendering an account using a invalid address', () => {
@@ -140,6 +141,7 @@ describe('account-page', () => {
       )
     })
   })
+
   describe('when rendering an account with rekey', () => {
     const accountResult = accountResultMother['mainnet-DGOANM6JL4VNSBJW737T24V4WVQINFWELRE3OKHQQFZ2JFMVKUF52D4AY4']().build()
 
@@ -176,4 +178,51 @@ describe('account-page', () => {
       )
     })
   })
+
+  describe('when rendering an account that becomes stale', () => {
+    const accountResult = accountResultMother['mainnet-BIQXAK67KSCKN3EJXT4S3RVXUBFOLZ45IQOBTSOQWOSR4LLULBTD54S5IA']().build()
+    const assetResults = new Map([
+      [924268058, atom(assetResultMother['mainnet-924268058']().build())],
+      [1010208883, atom(assetResultMother['mainnet-1010208883']().build())],
+      [1096015467, atom(assetResultMother['mainnet-1096015467']().build())],
+    ])
+
+    it('should be rendered with the refresh button', () => {
+      const myStore = createStore()
+      myStore.set(accountResultsAtom, new Map([[accountResult.address, atom(accountResult)]]))
+      myStore.set(assetResultsAtom, assetResults)
+
+      vi.mocked(useParams).mockImplementation(() => ({ address: accountResult.address }))
+
+      return executeComponentTest(
+        () => render(<AccountPage />, undefined, myStore),
+        async (component) => {
+          await waitFor(() => {
+            const informationCard = component.getByLabelText(accountInformationLabel)
+            descriptionListAssertion({
+              container: informationCard,
+              items: [{ term: accountAddressLabel, description: 'BIQXAK67KSCKN3EJXT4S3RVXUBFOLZ45IQOBTSOQWOSR4LLULBTD54S5IA' }],
+            })
+
+            const refreshButton = component.queryByLabelText(refreshButtonLabel)
+            expect(refreshButton).toBeFalsy()
+          })
+
+          // Simulate the account being evicted from the store, due to staleness
+          myStore.set(accountResultsAtom, new Map())
+
+          await waitFor(() => {
+            const informationCard = component.getByLabelText(accountInformationLabel)
+            descriptionListAssertion({
+              container: informationCard,
+              items: [{ term: accountAddressLabel, description: 'BIQXAK67KSCKN3EJXT4S3RVXUBFOLZ45IQOBTSOQWOSR4LLULBTD54S5IA' }],
+            })
+
+            const refreshButton = component.getByLabelText(refreshButtonLabel)
+            expect(refreshButton).toBeTruthy()
+          })
+        }
+      )
+    })
+  })
 })

src/features/accounts/pages/account-page.tsx

@@ -6,8 +6,10 @@ import { isAddress } from '@/utils/is-address'
 import { is404 } from '@/utils/error'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { Account } from '../models'
-import { useLoadableAccountAtom } from '../data'
+import { useLoadableAccount } from '../data'
 import { AccountDetails } from '../components/account-details'
+import { useCallback } from 'react'
+import { RefreshButton } from '@/features/common/components/refresh-button'
 
 export const accountPageTitle = 'Account'
 export const accountInvalidAddressMessage = 'Address is invalid'
@@ -26,11 +28,18 @@ const transformError = (e: Error) => {
 export function AccountPage() {
   const { address } = useRequiredParam(UrlParams.Address)
   invariant(isAddress(address), accountInvalidAddressMessage)
-  const loadableAccount = useLoadableAccountAtom(address)
+  const [loadableAccount, refreshAccount, isStale] = useLoadableAccount(address)
+
+  const refresh = useCallback(() => {
+    refreshAccount()
+  }, [refreshAccount])
 
   return (
     <div>
-      <h1 className={cn('text-2xl text-primary font-bold')}>{accountPageTitle}</h1>
+      <div className="flex">
+        <h1 className={cn('text-2xl text-primary font-bold')}>{accountPageTitle}</h1>
+        {isStale && <RefreshButton onClick={refresh} />}
+      </div>
       <RenderLoadable loadable={loadableAccount} transformError={transformError}>
         {(account: Account) => <AccountDetails account={account} />}
       </RenderLoadable>

src/features/applications/components/application-details.tsx

@@ -34,6 +34,7 @@ import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features
 import { ApplicationLiveTransactions } from './application-live-transactions'
 import { ApplicationTransactionHistory } from './application-transaction-history'
 import { JsonView } from '@/features/common/components/json-view'
+import { AccountLink } from '@/features/accounts/components/account-link'
 
 type Props = {
   application: Application
@@ -54,11 +55,11 @@ export function ApplicationDetails({ application }: Props) {
         : undefined,
       {
         dt: applicationCreatorAccountLabel,
-        dd: application.creator,
+        dd: <AccountLink address={application.creator}></AccountLink>,
       },
       {
         dt: applicationAccountLabel,
-        dd: application.account,
+        dd: <AccountLink address={application.account}></AccountLink>,
       },
       application.globalStateSchema
         ? {
@@ -99,7 +100,6 @@ export function ApplicationDetails({ application }: Props) {
     <div className={cn('space-y-6 pt-7')}>
       <Card aria-label={applicationDetailsLabel} className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
-          <h1 className={cn('text-2xl text-primary font-bold')}>{applicationDetailsLabel}</h1>
           <DescriptionList items={applicationItems} />
         </CardContent>
       </Card>

src/features/applications/data/application.ts

@@ -1,25 +1,38 @@
-import { atom, useAtomValue } from 'jotai'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
 import { asApplication } from '../mappers'
 import { useMemo } from 'react'
-import { loadable } from 'jotai/utils'
+import { atomWithRefresh, loadable } from 'jotai/utils'
 import { ApplicationId } from './types'
-import { getApplicationResultAtom } from './application-result'
+import { applicationResultsAtom, getApplicationResultAtom } from './application-result'
 import { getApplicationMetadataResultAtom } from './application-metadata'
+import { atomEffect } from 'jotai-effect'
 
-export const createApplicationAtom = (applicationId: ApplicationId) => {
-  return atom(async (get) => {
-    const applicationResult = await get(getApplicationResultAtom(applicationId))
-    const applicationMetadata = await get(getApplicationMetadataResultAtom(applicationResult))
-    return asApplication(applicationResult, applicationMetadata)
+const createApplicationAtoms = (applicationId: ApplicationId) => {
+  const isStaleAtom = atom(false)
+  const detectIsStaleEffect = atomEffect((get, set) => {
+    const applicationResults = get(applicationResultsAtom)
+    const isStale = applicationResults.get(applicationId) === undefined ? true : false
+    set(isStaleAtom, isStale)
   })
+
+  return [
+    atomWithRefresh(async (get) => {
+      const applicationResult = await get(getApplicationResultAtom(applicationId))
+      const applicationMetadata = await get(getApplicationMetadataResultAtom(applicationResult))
+      get(detectIsStaleEffect)
+      return asApplication(applicationResult, applicationMetadata)
+    }),
+    isStaleAtom,
+  ] as const
 }
 
-const useApplicationAtom = (applicationId: ApplicationId) => {
+const useApplicationAtoms = (applicationId: ApplicationId) => {
   return useMemo(() => {
-    return createApplicationAtom(applicationId)
+    return createApplicationAtoms(applicationId)
   }, [applicationId])
 }
 
 export const useLoadableApplication = (applicationId: ApplicationId) => {
-  return useAtomValue(loadable(useApplicationAtom(applicationId)))
+  const [applicationAtom, isStaleAtom] = useApplicationAtoms(applicationId)
+  return [useAtomValue(loadable(applicationAtom)), useSetAtom(applicationAtom), useAtomValue(isStaleAtom)] as const
 }

src/features/applications/pages/application-page.test.tsx

@@ -30,6 +30,7 @@ import { descriptionListAssertion } from '@/tests/assertions/description-list-as
 import { tableAssertion } from '@/tests/assertions/table-assertion'
 import { modelsv2, indexerModels } from 'algosdk'
 import { transactionResultMother } from '@/tests/object-mother/transaction-result'
+import { refreshButtonLabel } from '@/features/common/components/refresh-button'
 
 describe('application-page', () => {
   describe('when rendering an application using an invalid application Id', () => {
@@ -218,4 +219,90 @@ describe('application-page', () => {
       )
     })
   })
+
+  describe('when rendering an application that becomes stale', () => {
+    const applicationResult = applicationResultMother['mainnet-80441968']().build()
+
+    it('should be rendered with the refresh button', () => {
+      const myStore = createStore()
+      myStore.set(applicationResultsAtom, new Map([[applicationResult.id, atom(applicationResult)]]))
+
+      vi.mocked(useParams).mockImplementation(() => ({ applicationId: applicationResult.id.toString() }))
+      vi.mocked(indexer.searchForApplicationBoxes(0).nextToken('').limit(10).do).mockImplementation(() =>
+        Promise.resolve(
+          new indexerModels.BoxesResponse({
+            applicationId: 80441968,
+            boxes: [
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAABhjNpJEU5krRanhldfCDWa2Rs8=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAB3fFPhSWjPaBhjzsx3NbXvlBK4=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAACctz98iaZ1MeSEbj+XCnD5CCwQ=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAACh7tCy49kQrUL7ykRWDmayeLKk=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAECfyDmi7C5tEjBUI9N80BEnnAk=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAEKTl0iZ2Q9UxPJphTgwplTfk6U=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAEO4cIhnhmQ0qdQDLoXi7q0+G7o=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAEVLZkp/l5eUQJZ/QEYYy9yNtuc=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAEkbM2/K1+8IrJ/jdkgEoF/O5k0=',
+              }),
+              new modelsv2.BoxDescriptor({
+                name: 'AAAAAAAAAAAAAAAAAFwILIUnvVR4R/Xe9jTEV2SzTck=',
+              }),
+            ],
+            nextToken: 'b64:AAAAAAAAAAAAAAAAAFwILIUnvVR4R/Xe9jTEV2SzTck=',
+          })
+        )
+      )
+      vi.mocked(indexer.searchForTransactions().applicationID(applicationResult.id).limit(3).do).mockImplementation(() =>
+        Promise.resolve({ currentRound: 123, transactions: [], nextToken: '' })
+      )
+
+      return executeComponentTest(
+        () => {
+          return render(<ApplicationPage />, undefined, myStore)
+        },
+        async (component) => {
+          await waitFor(async () => {
+            const detailsCard = component.getByLabelText(applicationDetailsLabel)
+            descriptionListAssertion({
+              container: detailsCard,
+              items: [{ term: applicationIdLabel, description: '80441968' }],
+            })
+
+            const refreshButton = component.queryByLabelText(refreshButtonLabel)
+            expect(refreshButton).toBeFalsy()
+          })
+
+          // Simulate the application being evicted from the store, due to staleness
+          myStore.set(applicationResultsAtom, new Map())
+
+          await waitFor(async () => {
+            const detailsCard = component.getByLabelText(applicationDetailsLabel)
+            descriptionListAssertion({
+              container: detailsCard,
+              items: [{ term: applicationIdLabel, description: '80441968' }],
+            })
+
+            const refreshButton = component.getByLabelText(refreshButtonLabel)
+            expect(refreshButton).toBeTruthy()
+          })
+        }
+      )
+    })
+  })
 })

src/features/applications/pages/application-page.tsx

@@ -7,6 +7,8 @@ import { useLoadableApplication } from '../data'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { ApplicationDetails } from '../components/application-details'
 import { is404 } from '@/utils/error'
+import { RefreshButton } from '@/features/common/components/refresh-button'
+import { useCallback } from 'react'
 
 const transformError = (e: Error) => {
   if (is404(e)) {
@@ -28,11 +30,18 @@ export function ApplicationPage() {
   invariant(isInteger(_applicationId), applicationInvalidIdMessage)
 
   const applicationId = parseInt(_applicationId, 10)
-  const loadableApplication = useLoadableApplication(applicationId)
+  const [loadableApplication, refreshApplication, isStale] = useLoadableApplication(applicationId)
+
+  const refresh = useCallback(() => {
+    refreshApplication()
+  }, [refreshApplication])
 
   return (
     <div>
-      <h1 className={cn('text-2xl text-primary font-bold')}>{applicationPageTitle}</h1>
+      <div className="flex">
+        <h1 className={cn('text-2xl text-primary font-bold')}>{applicationPageTitle}</h1>
+        {isStale && <RefreshButton onClick={refresh} />}
+      </div>
       <RenderLoadable loadable={loadableApplication} transformError={transformError}>
         {(application) => <ApplicationDetails application={application} />}
       </RenderLoadable>