Move account selection to settings store

wallets/react-wallet-v2/src/components/AccountPicker.tsx

@@ -1,13 +1,15 @@
-import { ReactEventHandler } from 'react'
+import SettingsStore from '@/store/SettingsStore'
+import { useSnapshot } from 'valtio'
 
-interface IProps {
+export default function AccountPicker() {
-  value: number
+  const { account } = useSnapshot(SettingsStore.state)
-  onChange: ReactEventHandler<HTMLSelectElement>
-}
 
-export default function AccountPicker({ value, onChange }: IProps) {
   return (
-    <select value={Number(value)} onChange={onChange}>
+    <select
+      value={account}
+      onChange={e => SettingsStore.setAccount(e.currentTarget.value)}
+      aria-label="accounts"
+    >
       <option value={0}>Account 1</option>
       <option value={1}>Account 2</option>
     </select>

wallets/react-wallet-v2/src/pages/index.tsx

@@ -5,18 +5,17 @@ import { EIP155_MAINNET_CHAINS, EIP155_TEST_CHAINS } from '@/data/EIP155Data'
 import SettingsStore from '@/store/SettingsStore'
 import { wallets } from '@/utils/WalletUtil'
 import { Text } from '@nextui-org/react'
-import { Fragment, useState } from 'react'
+import { Fragment } from 'react'
 import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
-  const [account, setAccount] = useState(0)
+  const { testNets, account } = useSnapshot(SettingsStore.state)
-  const { testNets } = useSnapshot(SettingsStore.state)
   const addresses = Object.keys(wallets)
 
   return (
     <Fragment>
       <PageHeader title="Accounts">
-        <AccountPicker value={account} onChange={e => setAccount(Number(e.currentTarget.value))} />
+        <AccountPicker />
       </PageHeader>
       <Text h4 css={{ marginBottom: '$5' }}>
         Mainnets

wallets/react-wallet-v2/src/store/SettingsStore.ts

@@ -5,13 +5,15 @@ import { proxy } from 'valtio'
  */
 interface State {
   testNets: boolean
+  account: number
 }
 
 /**
  * State
  */
 const state = proxy<State>({
-  testNets: typeof localStorage !== 'undefined' ? Boolean(localStorage.getItem('TEST_NETS')) : true
+  testNets: typeof localStorage !== 'undefined' ? Boolean(localStorage.getItem('TEST_NETS')) : true,
+  account: 0
 })
 
 /**
@@ -20,6 +22,10 @@ const state = proxy<State>({
 const SettingsStore = {
   state,
 
+  setAccount(value: number | string) {
+    state.account = Number(value)
+  },
+
   toggleTestNets() {
     state.testNets = !state.testNets
     if (state.testNets) {

wallets/react-wallet-v2/src/utils/WalletUtil.ts

@@ -21,6 +21,4 @@ export function createOrRestoreWallet() {
     [wallet1.address]: wallet1,
     [wallet2.address]: wallet2
   }
-
-  console.log(wallets)
 }