From 99ab6286f229e55f3b73ce1e79f60aa792887d95 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Mon, 21 Feb 2022 14:22:54 +0200
Subject: [PATCH] Implement account switching logic

---
 .../src/components/AccountPicker.tsx              | 15 +++++++++++----
 wallets/react-wallet-v2/src/pages/index.tsx       | 15 +++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/wallets/react-wallet-v2/src/components/AccountPicker.tsx b/wallets/react-wallet-v2/src/components/AccountPicker.tsx
index ba5cbe9..11aa8a9 100644
--- a/wallets/react-wallet-v2/src/components/AccountPicker.tsx
+++ b/wallets/react-wallet-v2/src/components/AccountPicker.tsx
@@ -1,8 +1,15 @@
-export default function AccountPicker() {
+import { ReactEventHandler } from 'react'
+
+interface IProps {
+  value: number
+  onChange: ReactEventHandler<HTMLSelectElement>
+}
+
+export default function AccountPicker({ value, onChange }: IProps) {
   return (
-    <select value="Account 1">
-      <option value="Account 1">Account 1</option>
-      <option value="Account 2">Account 2</option>
+    <select value={Number(value)} onChange={onChange}>
+      <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 2bfa119..1d53a82 100644
--- a/wallets/react-wallet-v2/src/pages/index.tsx
+++ b/wallets/react-wallet-v2/src/pages/index.tsx
@@ -5,23 +5,24 @@ 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 } from 'react'
+import { Fragment, useState } from 'react'
 import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
+  const [account, setAccount] = useState(0)
   const { testNets } = useSnapshot(SettingsStore.state)
   const addresses = Object.keys(wallets)
 
   return (
     <Fragment>
       <PageHeader title="Accounts">
-        <AccountPicker />
+        <AccountPicker value={account} onChange={e => setAccount(Number(e.currentTarget.value))} />
       </PageHeader>
       <Text h4 css={{ marginBottom: '$5' }}>
         Mainnets
       </Text>
       {Object.values(EIP155_MAINNET_CHAINS).map(({ name, logo, rgb }) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={addresses[0]} />
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={addresses[account]} />
       ))}
 
       {testNets ? (
@@ -30,7 +31,13 @@ export default function HomePage() {
             Testnets
           </Text>
           {Object.values(EIP155_TEST_CHAINS).map(({ name, logo, rgb }) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={addresses[0]} />
+            <AccountCard
+              key={name}
+              name={name}
+              logo={logo}
+              rgb={rgb}
+              address={addresses[account]}
+            />
           ))}
         </Fragment>
       ) : null}