refactor: account tokens

paradigmxyz · Oct 11, 2023 · 52693ce · 52693ce
1 parent 60acabe
commit 52693ce
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 91 deletions.
diff --git a/src/hooks/useAccountTokens.ts b/src/hooks/useAccountTokens.ts
@@ -7,7 +7,7 @@ import { createQueryKey } from '~/react-query'
 import type { Client } from '~/viem'
 import { useNetworkStore, useTokensStore } from '~/zustand'
 
-import { getTokensKey } from '~/zustand/tokens'
+import { type TokensActions, getTokensKey } from '~/zustand/tokens'
 import { useClient } from './useClient'
 
 type UseAccountTokensParameters = {
@@ -36,60 +36,83 @@ export function useAccountTokensQueryOptions(args: UseAccountTokensParameters) {
         fromBlock: network.forkBlockNumber,
         toBlock: 'latest',
       })
-      syncTokens({
-        accountAddress: address,
-        tokenAddresses: tokens,
-        rpcUrl: network.rpcUrl,
-      })
+      syncTokens(
+        {
+          accountAddress: address,
+          rpcUrl: network.rpcUrl,
+        },
+        {
+          tokenAddresses: tokens,
+        },
+      )
       return tokens
     },
   })
 }
 
-export function useAccountTokens(args: UseAccountTokensParameters) {
-  const queryOptions = useAccountTokensQueryOptions(args)
+export function useAccountTokens({ address }: UseAccountTokensParameters) {
+  const queryOptions = useAccountTokensQueryOptions({ address })
   const tokensStore = useTokensStore()
   const { network } = useNetworkStore()
 
   const addToken = useCallback(
-    (address: Address) =>
-      args.address
-        ? tokensStore.addToken({
-            accountAddress: args.address,
-            rpcUrl: network.rpcUrl,
-            tokenAddress: address,
-          })
+    (args: Parameters<TokensActions['addToken']>[1]) =>
+      address
+        ? tokensStore.addToken(
+            {
+              accountAddress: address,
+              rpcUrl: network.rpcUrl,
+            },
+            args,
+          )
         : undefined,
-    [args.address, network.rpcUrl, tokensStore.addToken],
+    [address, network.rpcUrl, tokensStore.addToken],
   )
+
+  const hideToken = useCallback(
+    (args: Parameters<TokensActions['hideToken']>[1]) =>
+      address
+        ? tokensStore.hideToken(
+            {
+              accountAddress: address,
+              rpcUrl: network.rpcUrl,
+            },
+            args,
+          )
+        : undefined,
+    [address, network.rpcUrl, tokensStore.hideToken],
+  )
+
   const removeToken = useCallback(
-    (address: Address) =>
-      args.address
-        ? tokensStore.removeToken({
-            accountAddress: args.address,
-            rpcUrl: network.rpcUrl,
-            tokenAddress: address,
-          })
+    (args: Parameters<TokensActions['removeToken']>[1]) =>
+      address
+        ? tokensStore.removeToken(
+            {
+              accountAddress: address,
+              rpcUrl: network.rpcUrl,
+            },
+            args,
+          )
         : undefined,
-    [args.address, network.rpcUrl, tokensStore.removeToken],
+    [address, network.rpcUrl, tokensStore.removeToken],
   )
+
   const tokens = useMemo(
     () =>
-      args.address
+      address
         ? tokensStore.tokens[
             getTokensKey({
-              accountAddress: args.address,
+              accountAddress: address,
               rpcUrl: network.rpcUrl,
             })
           ]
-            ?.map((token) => (!token.removed ? token.address : undefined))
-            .filter(Boolean)
         : [],
-    [args.address, network.rpcUrl, tokensStore.tokens],
+    [address, network.rpcUrl, tokensStore.tokens],
   )
 
   return Object.assign(useQuery(queryOptions), {
     addToken,
+    hideToken,
     removeToken,
     tokens,
   })

diff --git a/src/hooks/useSyncExternalStoreWithTracked.ts b/src/hooks/useSyncExternalStoreWithTracked.ts
@@ -20,6 +20,8 @@ export function useSyncExternalStoreWithTracked<Snapshot, Selection = Snapshot>(
   }: UseSyncExternalStoreWithTrackedOptions<Snapshot, Selection> = {},
 ) {
   const trackedKeys = useRef<string[]>([])
+  const tempTrackedKeys = useRef<string[]>([])
+
   const result = useSyncExternalStoreWithSelector<Snapshot, Selection>(
     subscribe,
     getSnapshot,
@@ -44,13 +46,26 @@ export function useSyncExternalStoreWithTracked<Snapshot, Selection = Snapshot>(
         trackedResult,
         Object.entries(trackedResult as { [key: string]: any }).reduce(
           (res, [key, value]) => {
+            if (isPlainObject(value) && Object.keys(value).length === 0) {
+              trackedKeys.current.push(key)
+              tempTrackedKeys.current.push(key)
+            }
+
             return {
               ...res,
               [key]: {
                 configurable: false,
                 enumerable: true,
                 get: () => {
                   const newKey = `${prefix ? `${prefix}.` : ''}${key}`
+
+                  if (tempTrackedKeys.current.length > 0)
+                    tempTrackedKeys.current.forEach(
+                      (key) =>
+                        (tempTrackedKeys.current =
+                          tempTrackedKeys.current.filter((x) => x !== key)),
+                    )
+
                   if (isPlainObject(value)) return track(value, newKey)
 
                   if (trackedKeys.current.includes(newKey)) return value

diff --git a/src/screens/account-details.tsx b/src/screens/account-details.tsx
@@ -117,13 +117,15 @@ function Tokens({ accountAddress }: { accountAddress: Address }) {
         <Separator />
       </Bleed>
       {/* TODO: Handle empty state. */}
-      {tokens?.map((tokenAddress) => (
-        <TokenRow
-          accountAddress={accountAddress}
-          tokenAddress={tokenAddress}
-          key={tokenAddress}
-        />
-      ))}
+      {tokens?.map((token) =>
+        token.visible ? (
+          <TokenRow
+            accountAddress={accountAddress}
+            tokenAddress={token.address}
+            key={token.address}
+          />
+        ) : null,
+      )}
     </Inset>
   )
 }
@@ -145,7 +147,7 @@ function ImportToken({ accountAddress }: { accountAddress: Address }) {
         return
       }
 
-      addToken(address)
+      addToken({ tokenAddress: address })
     } finally {
       reset()
     }
@@ -173,7 +175,9 @@ function TokenRow({
   accountAddress,
   tokenAddress,
 }: { accountAddress: Address; tokenAddress: Address }) {
-  const { removeToken } = useAccountTokens({ address: accountAddress })
+  const { hideToken, removeToken } = useAccountTokens({
+    address: accountAddress,
+  })
 
   const { data: balance, error: balanceError } = useErc20Balance({
     address: accountAddress,
@@ -187,14 +191,14 @@ function TokenRow({
   useEffect(() => {
     if (balanceError) {
       toast.error((balanceError as BaseError).shortMessage)
-      removeToken(tokenAddress)
+      removeToken({ tokenAddress })
     }
   }, [balanceError, tokenAddress, removeToken])
 
   useEffect(() => {
     if (metadataError) {
       toast.error((metadataError as BaseError).shortMessage)
-      removeToken(tokenAddress)
+      removeToken({ tokenAddress })
     }
   }, [metadataError, tokenAddress, removeToken])
 
@@ -269,7 +273,7 @@ function TokenRow({
                 variant="ghost red"
                 onClick={(e) => {
                   e.stopPropagation()
-                  removeToken(tokenAddress)
+                  hideToken({ tokenAddress })
                 }}
               />
             </Column>