Attempt to run on load and usePendingBlock

src/app.tsx

@@ -25,9 +25,11 @@ import {
   useAccountStore,
   useNetworkStore,
   useSessionsStore,
+  useTokensStore,
 } from '~/zustand'
 
 import { type AppMeta, AppMetaContext } from './contexts'
+import { useImportTransferredTokens } from './hooks/useImportTransferredTokens'
 import Layout from './screens/_layout'
 import AccountDetails from './screens/account-details'
 import BlockConfig from './screens/block-config'
@@ -126,6 +128,7 @@ export function init({ type = 'standalone' }: { type?: AppMeta['type'] } = {}) {
         <AccountsChangedEmitter />
         <NetworkChangedEmitter />
         <SyncBlockNumber />
+        <SyncTransferredTokens />
         <SyncJsonRpcAccounts />
         <SyncNetwork />
         <RouterProvider router={router} />
@@ -197,6 +200,19 @@ function SyncBlockNumber() {
   return null
 }
 
+/** Keeps Transfer event imported tokens in sync. */
+function SyncTransferredTokens() {
+  const { account } = useAccountStore()
+  const { addToken } = useTokensStore()
+  const tokens = useImportTransferredTokens()
+  if (account?.address) {
+    tokens.forEach((addr) => {
+      addToken(addr, account.address)
+    })
+  }
+  return null
+}
+
 /** Keeps accounts in sync with network. */
 function SyncJsonRpcAccounts() {
   const { data: chainId } = useNetworkStatus()

src/hooks/useGetLogs.ts

@@ -32,6 +32,16 @@ export function useGetLogsQueryOptions<
 
   return queryOptions({
     enabled: Boolean(parameters),
+    gcTime:
+      typeof parameters.fromBlock === 'bigint' &&
+      typeof parameters.toBlock === 'bigint'
+        ? Infinity
+        : undefined,
+    staleTime:
+      typeof parameters.fromBlock === 'bigint' &&
+      typeof parameters.toBlock === 'bigint'
+        ? Infinity
+        : undefined,
     queryKey: getLogsQueryKey([client.key, stringify(parameters)]),
     async queryFn() {
       return await client.getLogs(parameters)

src/hooks/useImportTransferredTokens.ts

@@ -0,0 +1,49 @@
+import { parseAbiItem } from 'abitype'
+import type { BlockTag } from 'viem'
+import { useAccountStore, useNetworkStore } from '~/zustand'
+import { useGetLogs } from './useGetLogs'
+
+type UseImportTransferredTokensParameters = {
+  fromBlock?: bigint | BlockTag
+  toBlock?: bigint | BlockTag
+}
+
+export function useImportTransferredTokens({
+  fromBlock,
+  toBlock,
+}: UseImportTransferredTokensParameters = {}) {
+  const { account } = useAccountStore()
+  const { network } = useNetworkStore()
+
+  const { data: transfersFrom } = useGetLogs({
+    event: parseAbiItem(
+      'event Transfer(address indexed from, address indexed to, uint256)',
+    ),
+    args: {
+      from: account?.address,
+    },
+    fromBlock: fromBlock || network.forkBlockNumber,
+    toBlock: toBlock || 'latest',
+  })
+  const { data: transfersTo } = useGetLogs({
+    event: parseAbiItem(
+      'event Transfer(address indexed from, address indexed to, uint256)',
+    ),
+    args: {
+      to: account?.address,
+    },
+    fromBlock: fromBlock || network.forkBlockNumber,
+    toBlock: toBlock || 'latest',
+  })
+
+  if (account?.address) {
+    return [
+      ...new Set([
+        ...(transfersFrom?.map((t) => t.address) || []),
+        ...(transfersTo?.map((t) => t.address) || []),
+      ]),
+    ]
+  }
+
+  return []
+}

src/hooks/usePendingBlock.ts

@@ -1,12 +1,12 @@
 import { type InfiniteData, useQuery } from '@tanstack/react-query'
-import type { Block, Client, Transaction } from 'viem'
+import { type Block, type Client, type Transaction, parseAbiItem } from 'viem'
 
 import {
   createQueryKey,
   queryClient,
   updateInfiniteQueryData,
 } from '~/react-query'
-import { useNetworkStore } from '~/zustand'
+import { useAccountStore, useNetworkStore, useTokensStore } from '~/zustand'
 
 import { getBalanceQueryKey } from './useBalance'
 import { getBlockQueryKey } from './useBlock'
@@ -31,6 +31,8 @@ export function usePendingBlockQueryOptions({
 }: UsePendingBlockParameters = {}) {
   const { network } = useNetworkStore()
   const { data: chainId } = useNetworkStatus()
+  const { addToken } = useTokensStore()
+  const { account } = useAccountStore()
   const client = useClient()
 
   return {
@@ -53,6 +55,39 @@ export function usePendingBlockQueryOptions({
       )
         return prevBlock || null
 
+      // Import any tokens from Transfer event
+      if (account && prevBlock.number) {
+        const transfersFrom = await client.getLogs({
+          event: parseAbiItem(
+            'event Transfer(address indexed from, address indexed to, uint256)',
+          ),
+          args: {
+            from: account.address,
+          },
+          fromBlock: prevBlock.number,
+          toBlock: 'latest',
+        })
+        const transfersTo = await client.getLogs({
+          event: parseAbiItem(
+            'event Transfer(address indexed from, address indexed to, uint256)',
+          ),
+          args: {
+            to: account.address,
+          },
+          fromBlock: prevBlock.number,
+          toBlock: 'latest',
+        })
+        ;[
+          ...new Set([
+            ...(transfersFrom?.map((t) => t.address) || []),
+            ...(transfersTo?.map((t) => t.address) || []),
+          ]),
+        ].forEach((addr) => {
+          console.log(addr)
+          addToken(addr, account.address)
+        })
+      }
+
       queryClient.invalidateQueries({
         queryKey: getBalanceQueryKey([client.key]),
       })

src/screens/account-details.tsx

@@ -8,7 +8,6 @@ import {
   BaseError,
   formatUnits,
   isAddress,
-  parseAbiItem,
   parseUnits,
 } from 'viem'
 
@@ -32,9 +31,7 @@ import {
 } from '~/design-system'
 import { useErc20Balance } from '~/hooks/useErc20Balance'
 import { useErc20Metadata } from '~/hooks/useErc20Metadata'
-import { useGetLogs } from '~/hooks/useGetLogs'
 import { useSetErc20Balance } from '~/hooks/useSetErc20Balance'
-import { useNetworkStore } from '~/zustand'
 import { useTokensStore } from '~/zustand/tokens'
 
 export default function AccountDetails() {
@@ -91,47 +88,8 @@ export default function AccountDetails() {
   )
 }
 
-function useImportTransferredTokens() {
-  const { address: accountAddress } = useParams()
-  const { addToken } = useTokensStore()
-  const { network } = useNetworkStore()
-
-  const { data: transfersFrom } = useGetLogs({
-    event: parseAbiItem(
-      'event Transfer(address indexed from, address indexed to, uint256)',
-    ),
-    args: {
-      from: accountAddress as Address,
-    },
-    fromBlock: network.forkBlockNumber,
-    toBlock: 'latest',
-  })
-  const { data: transfersTo } = useGetLogs({
-    event: parseAbiItem(
-      'event Transfer(address indexed from, address indexed to, uint256)',
-    ),
-    args: {
-      to: accountAddress as Address,
-    },
-    fromBlock: network.forkBlockNumber,
-    toBlock: 'latest',
-  })
-
-  if (accountAddress) {
-    ;[
-      ...new Set([
-        ...(transfersFrom?.map((t) => t.address) || []),
-        ...(transfersTo?.map((t) => t.address) || []),
-      ]),
-    ].forEach((addr) => {
-      addToken(addr, accountAddress as Address)
-    })
-  }
-}
-
 function Tokens({ accountAddress }: { accountAddress: Address }) {
   const { tokens } = useTokensStore()
-  useImportTransferredTokens()
 
   if (!accountAddress) return null
   return (

src/zustand/index.ts

@@ -38,4 +38,12 @@ export {
   useSessionsStore,
 } from './sessions'
 
+export {
+  type TokensActions,
+  type TokensState,
+  type TokensStore,
+  tokensStore,
+  useTokensStore,
+} from './tokens'
+
 export { syncStores } from './utils'