Implement account switching logic

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">
+    <select value={Number(value)} onChange={onChange}>
-      <option value="Account 1">Account 1</option>
+      <option value={0}>Account 1</option>
-      <option value="Account 2">Account 2</option>
+      <option value={1}>Account 2</option>
     </select>
   )
 }

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}