persist slectedToken

package-lock.json

@@ -14,6 +14,7 @@
         "@astrojs/rss": "^3.0.0",
         "@astrojs/sitemap": "^3.0.2",
         "@coingecko/cryptoformat": "^0.6.0",
+        "@nanostores/persistent": "^0.9.1",
         "@nanostores/query": "^0.2.4",
         "@nanostores/react": "^0.7.1",
         "@radix-ui/react-select": "^2.0.0",
@@ -2016,6 +2017,23 @@
         "tslib": "^2.3.1"
       }
     },
+    "node_modules/@nanostores/persistent": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@nanostores/persistent/-/persistent-0.9.1.tgz",
+      "integrity": "sha512-ow57Hxm5VMaI5GHET/cVk8hX/iKMmbhcGrB9owfN8p8OHiiJgUlYxe1giacwlAALJXAh2t8bxXh42hHb64BCEA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "nanostores": "^0.9.0"
+      }
+    },
     "node_modules/@nanostores/query": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@nanostores/query/-/query-0.2.4.tgz",

package.json

@@ -47,6 +47,7 @@
     "@astrojs/rss": "^3.0.0",
     "@astrojs/sitemap": "^3.0.2",
     "@coingecko/cryptoformat": "^0.6.0",
+    "@nanostores/persistent": "^0.9.1",
     "@nanostores/query": "^0.2.4",
     "@nanostores/react": "^0.7.1",
     "@radix-ui/react-select": "^2.0.0",

src/components/ThemeSwitch/theme.cjs

@@ -1,6 +1,6 @@
 const htmlEl = document.documentElement
 const themeToggle = document.querySelector('#toggle')
-const currentTheme = localStorage.getItem('theme')
+const currentTheme = localStorage.getItem('@kremalicious/theme')
 
 function getPreferTheme() {
   if (currentTheme) return currentTheme
@@ -18,7 +18,7 @@ let themeValue = getPreferTheme()
 let themeColor = getThemeColor(themeValue)
 
 function setPreference() {
-  localStorage.setItem('theme', themeValue)
+  localStorage.setItem('@kremalicious/theme', themeValue)
   reflectPreference()
 }
 

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

@@ -25,11 +25,13 @@ export function TokenSelect() {
     $setSelectedToken(token)
   }
 
-  // Set default token data to native token
+  // Set default token data to first item,
+  // which most of time is native token
   useEffect(() => {
     if (!chain?.id || !address || !tokens) return
 
-    if (!selectedToken || !selectedToken?.address) handleValueChange('0x0')
+    if (!selectedToken || !selectedToken?.address)
+      handleValueChange(tokens[0].address)
   }, [chain?.id, address, tokens, selectedToken])
 
   return (

src/features/Web3/stores/selectedToken.ts

@@ -1,7 +1,15 @@
-import { action, map } from 'nanostores'
+import { action } from 'nanostores'
+import { persistentAtom } from '@nanostores/persistent'
 import type { GetToken } from '../hooks/useTokens'
 
-export const $selectedToken = map<GetToken>()
+export const $selectedToken = persistentAtom<GetToken>(
+  '@kremalicious/selectedToken',
+  { address: '0x0' } as any,
+  {
+    encode: JSON.stringify,
+    decode: JSON.parse
+  }
+)
 
 export const $setSelectedToken = action(
   $selectedToken,