fixes

src/features/Web3/components/Input/InputGroup.tsx

@@ -19,6 +19,7 @@ export function InputGroup({
   function handleChange(newAmount: string) {
     $amount.set(newAmount)
   }
+
   return (
     <>
       <div className={`${styles.inputGroup} ${isFocus ? styles.focus : ''}`}>

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

@@ -6,7 +6,11 @@ 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 } from '@features/Web3/stores'
+import {
+  $tokens,
+  $selectedToken,
+  $setSelectedToken
+} from '@features/Web3/stores'
 import { Loader } from '@components/Loader'
 import { useAccount } from 'wagmi'
 import { useEffect } from 'react'
@@ -24,17 +28,24 @@ export function TokenSelect() {
   function handleValueChange(value: `0x${string}`) {
     const token = tokens?.find((token) => token.address === value)
     if (!token) return
-    $selectedToken.set(token)
+    $setSelectedToken(token)
   }
 
-  // TODO: reset when no account connected
+  // reset when no account connected
   useEffect(() => {
     if (!address && tokens?.length && selectedToken) {
       $tokens.set(undefined)
-      $selectedToken.set(undefined)
+      $setSelectedToken(undefined)
     }
   }, [address])
 
+  // Auto-select native token
+  useEffect(() => {
+    if (tokens && !selectedToken) {
+      $setSelectedToken(tokens[0])
+    }
+  }, [tokens])
+
   return tokens ? (
     <Select.Root
       defaultValue={selectedToken?.address || tokens[0].address}

src/features/Web3/stores/selectedToken.ts

@@ -1,23 +1,23 @@
-import { atom } from 'nanostores'
-// import { persistentAtom } from '@nanostores/persistent'
+import { action } from 'nanostores'
+import { persistentAtom } from '@nanostores/persistent'
 import type { GetToken } from './tokens'
 
-export const $selectedToken = atom<GetToken | undefined>()
+// export const $selectedToken = atom<GetToken | undefined>()
 
-// export const $selectedToken = persistentAtom<GetToken | undefined>(
-//   '@kremalicious/selectedToken',
-//   undefined,
-//   {
-//     encode: JSON.stringify,
-//     decode: JSON.parse
-//   }
-// )
+export const $selectedToken = persistentAtom<GetToken | undefined>(
+  '@kremalicious/selectedToken',
+  undefined,
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse
+  }
+)
 
-// export const $selectedToken.set = action(
-//   $selectedToken,
-//   'setSelectedToken',
-//   (store, token: GetToken) => {
-//     store.set(token)
-//     return store.get()
-//   }
-// )
+export const $setSelectedToken = action(
+  $selectedToken,
+  'setSelectedToken',
+  (store, token: GetToken | undefined) => {
+    store.set(token)
+    return store.get()
+  }
+)