Refactor to support multiple accounts, acc picker component

wallets/react-wallet-v2/public/icons/arrow-down-icon.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M112 184L256 328L400 184" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

wallets/react-wallet-v2/public/main.css

@@ -57,4 +57,25 @@
 
 .navLink:hover {
   opacity: 0.6;
+}
+
+select {
+  background-color: rgba(139, 139, 139, 0.2);
+  background-image: url(/icons/arrow-down-icon.svg);
+  background-size: 15px 15px;
+  background-position: right 10px center;
+  background-repeat: no-repeat;
+  padding: 5px 30px 6px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  border: none;
+  appearance: none;
+  transition: .2s ease-in-out background-color;
+  font-family: var(--nextui-fonts-sans);
+  font-weight: var(--nextui-fontWeights-light);
+  border: 1px solid rgba(139, 139, 139, 0.25);
+}
+
+select:hover {
+  background-color: rgba(139, 139, 139, 0.35);
 }

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

@@ -0,0 +1,8 @@
+export default function AccountPicker() {
+  return (
+    <select value="Account 1">
+      <option value="Account 1">Account 1</option>
+      <option value="Account 2">Account 2</option>
+    </select>
+  )
+}

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

@@ -1,29 +1,35 @@
-import { Divider, Text } from '@nextui-org/react'
+import { Col, Divider, Row, Text } from '@nextui-org/react'
-import { Fragment } from 'react'
+import { Fragment, ReactNode } from 'react'
 
 /**
  * Types
  */
 interface Props {
-  children: string
+  children?: ReactNode | ReactNode[]
+  title: string
 }
 
 /**
  * Component
  */
-export default function PageHeader({ children }: Props) {
+export default function PageHeader({ title, children }: Props) {
   return (
     <Fragment>
-      <Text
+      <Row css={{ marginBottom: '$5', width: '100%' }} justify="space-between" align="center">
-        h3
+        <Col>
-        weight="bold"
+          <Text
-        css={{
+            h3
-          textGradient: '90deg, $secondary, $primary 30%',
+            weight="bold"
-          marginBottom: '$5'
+            css={{
-        }}
+              textGradient: '90deg, $secondary, $primary 30%'
-      >
+            }}
-        {children}
+          >
-      </Text>
+            {title}
+          </Text>
+        </Col>
+        {children ? <Col css={{ flex: 1 }}>{children}</Col> : null}
+      </Row>
+
       <Divider css={{ marginBottom: '$10' }} />
     </Fragment>
   )

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

@@ -1,23 +1,27 @@
 import AccountCard from '@/components/AccountCard'
+import AccountPicker from '@/components/AccountPicker'
 import PageHeader from '@/components/PageHeader'
 import { EIP155_MAINNET_CHAINS, EIP155_TEST_CHAINS } from '@/data/EIP155Data'
 import SettingsStore from '@/store/SettingsStore'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import { Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
   const { testNets } = useSnapshot(SettingsStore.state)
+  const addresses = Object.keys(wallets)
 
   return (
     <Fragment>
-      <PageHeader>Accounts</PageHeader>
+      <PageHeader title="Accounts">
+        <AccountPicker />
+      </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={wallet.address} />
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={addresses[0]} />
       ))}
 
       {testNets ? (
@@ -26,7 +30,7 @@ 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={wallet.address} />
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={addresses[0]} />
           ))}
         </Fragment>
       ) : null}

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

@@ -19,7 +19,7 @@ export default function PairingsPage() {
 
   return (
     <Fragment>
-      <PageHeader>Pairings</PageHeader>
+      <PageHeader title="Pairings" />
       {pairings.length ? (
         pairings.map(pairing => {
           const { metadata } = pairing.state

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

@@ -19,7 +19,7 @@ export default function SessionsPage() {
 
   return (
     <Fragment>
-      <PageHeader>Sessions</PageHeader>
+      <PageHeader title="Sessions" />
       {sessions.length ? (
         sessions.map(session => {
           const { name, icons, url } = session.peer.metadata

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

@@ -1,6 +1,6 @@
 import PageHeader from '@/components/PageHeader'
 import SettingsStore from '@/store/SettingsStore'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import { Card, Divider, Row, Switch, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 import { useSnapshot } from 'valtio'
@@ -10,12 +10,14 @@ export default function SettingsPage() {
 
   return (
     <Fragment>
-      <PageHeader>Settings</PageHeader>
+      <PageHeader title="Settings" />
       <Text h4 css={{ marginBottom: '$5' }}>
         Mnemonic
       </Text>
       <Card bordered borderWeight="light" css={{ minHeight: '75px' }}>
-        <Text css={{ fontFamily: '$mono' }}>{wallet.mnemonic.phrase}</Text>
+        <Text css={{ fontFamily: '$mono' }}>
+          {wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088'].mnemonic.phrase}
+        </Text>
       </Card>
 
       <Text css={{ color: '$yellow500', marginTop: '$5', textAlign: 'center' }}>

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

@@ -22,7 +22,7 @@ export default function WalletConnectPage() {
 
   return (
     <Fragment>
-      <PageHeader>WalletConnect</PageHeader>
+      <PageHeader title="WalletConnect" />
 
       <QrReader onConnect={onConnect} />
 

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

@@ -1,15 +1,26 @@
 import { Wallet } from 'ethers'
 
-export let wallet: Wallet
+export let wallets: Record<string, Wallet>
+export let wallet1: Wallet
+export let wallet2: Wallet
 
 export function createOrRestoreWallet() {
   const mnemonic = localStorage.getItem('WALLET_MNEMONIC')
 
   if (mnemonic) {
-    wallet = Wallet.fromMnemonic(mnemonic)
+    wallet1 = Wallet.fromMnemonic(mnemonic, "m/44'/60'/0'/0/0")
+    wallet2 = Wallet.fromMnemonic(mnemonic, "m/44'/60'/0'/0/1")
   } else {
-    wallet = Wallet.createRandom()
+    wallet1 = Wallet.createRandom()
+    wallet2 = Wallet.fromMnemonic(wallet1.mnemonic.phrase, "m/44'/60'/0'/0/1")
     // Don't store mnemonic in local storage in a production project!
-    localStorage.setItem('WALLET_MNEMONIC', wallet.mnemonic.phrase)
+    localStorage.setItem('WALLET_MNEMONIC', wallet1.mnemonic.phrase)
   }
+
+  wallets = {
+    [wallet1.address]: wallet1,
+    [wallet2.address]: wallet2
+  }
+
+  console.log(wallets)
 }

wallets/react-wallet-v2/src/views/SessionProposalModal.tsx

@@ -1,7 +1,7 @@
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
@@ -26,7 +26,9 @@ export default function SessionProposalModal() {
     if (proposal) {
       const response = {
         state: {
-          accounts: chains.map(chain => `${chain}:${wallet.address}`)
+          accounts: chains.map(
+            chain => `${chain}:${wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088'].address}`
+          )
         }
       }
       await walletConnectClient.approve({ proposal, response })

wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx

@@ -3,7 +3,7 @@ import ModalStore from '@/store/ModalStore'
 import { truncate } from '@/utils/HelperUtil'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/RequestHandlerUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import {
   Avatar,
   Button,
@@ -43,7 +43,8 @@ export default function SessionSendTransactionModal() {
     if (requestEvent) {
       setLoading(true)
       const provider = new providers.JsonRpcProvider(EIP155_CHAINS[chainId as TEIP155Chain].rpc)
-      const connectedWallet = wallet.connect(provider)
+      const connectedWallet =
+        wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088'].connect(provider)
       const response = await approveEIP155Request(requestEvent.request, connectedWallet)
       await walletConnectClient.respond({
         topic: requestEvent.topic,

wallets/react-wallet-v2/src/views/SessionSignModal.tsx

@@ -3,7 +3,7 @@ import ModalStore from '@/store/ModalStore'
 import { getSignParamsMessage } from '@/utils/HelperUtil'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/RequestHandlerUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 
@@ -29,7 +29,10 @@ export default function SessionSignModal() {
   // Handle approve action (logic varies based on request method)
   async function onApprove() {
     if (requestEvent) {
-      const response = await approveEIP155Request(requestEvent.request, wallet)
+      const response = await approveEIP155Request(
+        requestEvent.request,
+        wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088']
+      )
       await walletConnectClient.respond({
         topic: requestEvent.topic,
         response

wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx

@@ -3,7 +3,7 @@ import ModalStore from '@/store/ModalStore'
 import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
 import { approveEIP155Request, rejectEIP155Request } from '@/utils/RequestHandlerUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { wallet } from '@/utils/WalletUtil'
+import { wallets } from '@/utils/WalletUtil'
 import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
 import { Fragment } from 'react'
 import { CodeBlock, codepen } from 'react-code-blocks'
@@ -30,7 +30,10 @@ export default function SessionSignTypedDataModal() {
   // Handle approve action (logic varies based on request method)
   async function onApprove() {
     if (requestEvent) {
-      const response = await approveEIP155Request(requestEvent.request, wallet)
+      const response = await approveEIP155Request(
+        requestEvent.request,
+        wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088']
+      )
       await walletConnectClient.respond({
         topic: requestEvent.topic,
         response