restore $selectedToken store

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

@@ -53,6 +53,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/features/Web3/components/Conversion/Conversion.tsx

@@ -1,9 +1,10 @@
 import { useEffect, type ReactElement, useState } from 'react'
 import styles from './Conversion.module.css'
-import { useTokens } from '@features/Web3/hooks/useTokens'
+import { useStore } from '@nanostores/react'
+import { $selectedToken } from '@features/Web3/stores/selectedToken'
 
 export function Conversion({ amount }: { amount: string }): ReactElement {
-  const { selectedToken } = useTokens()
+  const selectedToken = useStore($selectedToken)
 
   const [dollar, setDollar] = useState('0.00')
   const [euro, setEuro] = useState('0.00')

src/features/Web3/components/Form/index.tsx

@@ -8,11 +8,12 @@ import styles from './index.module.css'
 import { SendPrepareNative, SendPrepareErc20 } from '../SendPrepare'
 import { useSend } from '../../hooks/useSend'
 import type { SendFormData } from './types'
-import { useTokens } from '@features/Web3/hooks/useTokens'
+import { useStore } from '@nanostores/react'
+import { $selectedToken } from '@features/Web3/stores/selectedToken'
 
 export default function Web3Form(): ReactElement {
   const { address: account } = useAccount()
-  const { selectedToken } = useTokens()
+  const selectedToken = useStore($selectedToken)
 
   const [amount, setAmount] = useState('')
   const [debouncedAmount] = useDebounce(amount, 500)

src/features/Web3/components/SendPrepare/SendErc20.tsx

@@ -3,7 +3,8 @@ import { useContractWrite, useEnsAddress, usePrepareContractWrite } from 'wagmi'
 import siteConfig from '@config/blog.config'
 import { abiErc20Transfer } from './abiErc20Transfer'
 import { useEffect } from 'react'
-import { useTokens } from '@features/Web3/hooks/useTokens'
+import { useStore } from '@nanostores/react'
+import { $selectedToken } from '@features/Web3/stores/selectedToken'
 
 export function SendPrepareErc20({
   amount,
@@ -12,7 +13,7 @@ export function SendPrepareErc20({
   amount: string
   setSendFormData: any
 }) {
-  const { selectedToken } = useTokens()
+  const selectedToken = useStore($selectedToken)
   const { data: to } = useEnsAddress({
     name: siteConfig.author.ether.ens,
     chainId: 1

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

@@ -4,14 +4,15 @@ import { Token } from './Token'
 import { ChevronDown, ChevronsDown, ChevronsUp } from '@images/components/react'
 import { TokenLoading } from './TokenLoading'
 import { useTokens } from '@features/Web3/hooks/useTokens'
+import { useStore } from '@nanostores/react'
+import {
+  $selectedToken,
+  $setSelectedToken
+} from '@features/Web3/stores/selectedToken'
 
 export function TokenSelect() {
-  const {
-    data: tokens,
-    isLoading,
-    selectedToken,
-    setSelectedToken
-  } = useTokens()
+  const { data: tokens, isLoading } = useTokens()
+  const selectedToken = useStore($selectedToken)
 
   const items = tokens?.map((token) => (
     <Token key={token.address} token={token} />
@@ -20,7 +21,7 @@ export function TokenSelect() {
   function handleValueChange(value: `0x${string}`) {
     const token = tokens?.find((token) => token.address === value)
     if (!token) return
-    setSelectedToken(token)
+    $setSelectedToken(token)
   }
 
   return (

src/features/Web3/hooks/useTokens/useTokens.tsx

@@ -3,17 +3,16 @@ import useSWR from 'swr'
 import type { GetToken } from './types'
 import { useNetwork, useAccount } from 'wagmi'
 import { fetcher } from '@stores/fetcher'
+import { $setSelectedToken } from '@features/Web3/stores/selectedToken'
 
 //
-// Wrapper for fetching user tokens with swr,
-// and simple store for selected token.
+// Wrapper for fetching user tokens with swr.
 //
 export function useTokens() {
   const { chain } = useNetwork()
   const { address } = useAccount()
 
   const [url, setUrl] = useState<string | undefined>(undefined)
-  const [selectedToken, setSelectedToken] = useState<GetToken | undefined>()
 
   const fetchResults = useSWR<GetToken[] | undefined>(url, fetcher)
   const { data: tokens } = fetchResults
@@ -32,8 +31,8 @@ export function useTokens() {
   useEffect(() => {
     if (!tokens?.[0]?.chainId) return
 
-    setSelectedToken(tokens?.[0])
+    $setSelectedToken(tokens?.[0])
   }, [tokens?.[0]?.chainId])
 
-  return { ...fetchResults, selectedToken, setSelectedToken }
+  return fetchResults
 }

src/features/Web3/stores/selectedToken.ts

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