token selection interaction fixes

src/features/Web3/components/TokenSelect/Token.tsx

@@ -3,7 +3,7 @@ import * as Select from '@radix-ui/react-select'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import './Token.css'
 import { Icon as Check } from '@images/components/react/Check'
-import type { GetToken } from '@features/Web3/stores/tokens'
+import type { GetToken } from '@features/Web3/hooks/useFetchTokens'
 
 interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
   token: GetToken | undefined

src/features/Web3/components/TokenSelect/TokenSelect.tsx

@@ -6,19 +6,14 @@ import { Icon as ChevronsDown } from '@images/components/react/ChevronsDown'
 import { Icon as ChevronsUp } from '@images/components/react/ChevronsUp'
 import { useFetchTokens } from '@features/Web3/hooks/useFetchTokens'
 import { useStore } from '@nanostores/react'
-import {
-  $tokens,
-  $selectedToken,
-  $setSelectedToken
-} from '@features/Web3/stores'
+import { $selectedToken, $setSelectedToken } from '@features/Web3/stores'
 import { Loader } from '@components/Loader'
 import { useAccount } from 'wagmi'
 import { useEffect } from 'react'
 
 export function TokenSelect() {
   const { address } = useAccount()
-  const { isLoading } = useFetchTokens()
-  const tokens = useStore($tokens)
+  const { data: tokens, isLoading } = useFetchTokens()
   const selectedToken = useStore($selectedToken)
 
   const items = tokens?.map((token) => (
@@ -31,24 +26,20 @@ export function TokenSelect() {
     $setSelectedToken(token)
   }
 
-  // reset when no account connected
-  useEffect(() => {
-    if (!address && tokens?.length && selectedToken) {
-      $tokens.set(undefined)
-      $setSelectedToken(undefined)
-    }
-  }, [address])
-
   // Auto-select native token
+  // when no selection was made yet
   useEffect(() => {
-    if (isLoading || !tokens || selectedToken) return
+    if (selectedToken?.address || !tokens || !tokens?.length) return
 
+    console.log(tokens)
     handleValueChange('0x0')
+    console.log('auto-select 0x0')
   }, [tokens, selectedToken])
 
-  return tokens ? (
+  return tokens && address ? (
     <Select.Root
-      // defaultValue={selectedToken?.address || tokens[0].address}
+      defaultValue={selectedToken?.address || tokens[0].address}
+      value={selectedToken?.address}
       onValueChange={(value: `0x${string}`) => handleValueChange(value)}
       disabled={isLoading}
     >

src/features/Web3/hooks/useFetchTokens/index.ts

@@ -1 +1,2 @@
 export * from './useFetchTokens'
+export * from './types'

src/features/Web3/hooks/useFetchTokens/useFetchTokens.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useState } from 'react'
 import useSWR from 'swr'
-import type { GetToken } from '@features/Web3/stores/tokens'
 import { useNetwork, useAccount } from 'wagmi'
-import { $tokens } from '@features/Web3/stores'
-import { useStore } from '@nanostores/react'
+import type { GetToken } from './types'
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL
@@ -14,30 +12,22 @@ const apiUrl = import.meta.env.PUBLIC_WEB3_API_URL
 export function useFetchTokens() {
   const { chain } = useNetwork()
   const { address } = useAccount()
-  const tokens = useStore($tokens)
 
   const [url, setUrl] = useState<string | undefined>()
 
   const fetchResults = useSWR<GetToken[] | undefined>(url, fetcher)
-  const { data } = fetchResults
 
   // Set url only after we have all data loaded on client,
   // preventing initial fetch.
   useEffect(() => {
-    if (!address || !chain?.id) return
+    if (!address || !chain?.id) {
+      setUrl(undefined)
+      return
+    }
 
     const url = `${apiUrl}/balance?address=${address}&chainId=${chain?.id}`
     setUrl(url)
   }, [address, chain?.id])
 
-  // Sync with $tokens store
-  useEffect(() => {
-    if (!data) return
-
-    if (data !== tokens) {
-      $tokens.set(data)
-    }
-  }, [data])
-
   return fetchResults
 }

src/features/Web3/stores/index.ts

@@ -1,3 +1,2 @@
-export * from './tokens'
 export * from './selectedToken'
 export * from './send'

src/features/Web3/stores/selectedToken.ts

@@ -1,6 +1,6 @@
 import { action } from 'nanostores'
 import { persistentAtom } from '@nanostores/persistent'
-import type { GetToken } from './tokens'
+import type { GetToken } from '../hooks/useFetchTokens'
 
 // export const $selectedToken = atom<GetToken | undefined>()
 

src/features/Web3/stores/tokens/index.ts

@@ -1,2 +0,0 @@
-export * from './tokens'
-export * from './types'

src/features/Web3/stores/tokens/tokens.ts

@@ -1,13 +0,0 @@
-import { atom } from 'nanostores'
-import type { GetToken } from './types'
-
-export const $tokens = atom<GetToken[] | undefined>()
-
-// export const $setTokens = action(
-//   $tokens,
-//   'setTokens',
-//   (store, tokens: GetToken[] | undefined) => {
-//     store.set(tokens)
-//     return store.get()
-//   }
-// )