From c69121d6733a90189b83cd2d5fece924fe371c89 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Mon, 21 Feb 2022 14:46:45 +0200
Subject: [PATCH] Move account selection to settings store

---
 .../src/components/AccountPicker.tsx             | 16 +++++++++-------
 wallets/react-wallet-v2/src/pages/index.tsx      |  7 +++----
 .../react-wallet-v2/src/store/SettingsStore.ts   |  8 +++++++-
 wallets/react-wallet-v2/src/utils/WalletUtil.ts  |  2 --
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/wallets/react-wallet-v2/src/components/AccountPicker.tsx b/wallets/react-wallet-v2/src/components/AccountPicker.tsx
index 11aa8a9..ac5083e 100644
--- a/wallets/react-wallet-v2/src/components/AccountPicker.tsx
+++ b/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 {
-  value: number
-  onChange: ReactEventHandler<HTMLSelectElement>
-}
+export default function AccountPicker() {
+  const { account } = useSnapshot(SettingsStore.state)
 
-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>
diff --git a/wallets/react-wallet-v2/src/pages/index.tsx b/wallets/react-wallet-v2/src/pages/index.tsx
index 1d53a82..7b677b1 100644
--- a/wallets/react-wallet-v2/src/pages/index.tsx
+++ b/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 } = useSnapshot(SettingsStore.state)
+  const { testNets, account } = 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
diff --git a/wallets/react-wallet-v2/src/store/SettingsStore.ts b/wallets/react-wallet-v2/src/store/SettingsStore.ts
index 6d9d508..23075ef 100644
--- a/wallets/react-wallet-v2/src/store/SettingsStore.ts
+++ b/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) {
diff --git a/wallets/react-wallet-v2/src/utils/WalletUtil.ts b/wallets/react-wallet-v2/src/utils/WalletUtil.ts
index 905c6f7..e5ec22f 100644
--- a/wallets/react-wallet-v2/src/utils/WalletUtil.ts
+++ b/wallets/react-wallet-v2/src/utils/WalletUtil.ts
@@ -21,6 +21,4 @@ export function createOrRestoreWallet() {
     [wallet1.address]: wallet1,
     [wallet2.address]: wallet2
   }
-
-  console.log(wallets)
 }