diff --git a/wallets/react-wallet-v2/public/icons/arrow-down-icon.svg b/wallets/react-wallet-v2/public/icons/arrow-down-icon.svg new file mode 100644 index 0000000..362c3cb --- /dev/null +++ b/wallets/react-wallet-v2/public/icons/arrow-down-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/wallets/react-wallet-v2/public/main.css b/wallets/react-wallet-v2/public/main.css index 530451c..290a260 100644 --- a/wallets/react-wallet-v2/public/main.css +++ b/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); } \ No newline at end of file diff --git a/wallets/react-wallet-v2/src/components/AccountPicker.tsx b/wallets/react-wallet-v2/src/components/AccountPicker.tsx new file mode 100644 index 0000000..ba5cbe9 --- /dev/null +++ b/wallets/react-wallet-v2/src/components/AccountPicker.tsx @@ -0,0 +1,8 @@ +export default function AccountPicker() { + return ( + + ) +} diff --git a/wallets/react-wallet-v2/src/components/PageHeader.tsx b/wallets/react-wallet-v2/src/components/PageHeader.tsx index f05420a..e365d76 100644 --- a/wallets/react-wallet-v2/src/components/PageHeader.tsx +++ b/wallets/react-wallet-v2/src/components/PageHeader.tsx @@ -1,29 +1,35 @@ -import { Divider, Text } from '@nextui-org/react' -import { Fragment } from 'react' +import { Col, Divider, Row, Text } from '@nextui-org/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 ( - - {children} - + + + + {title} + + + {children ? {children} : null} + + ) diff --git a/wallets/react-wallet-v2/src/pages/index.tsx b/wallets/react-wallet-v2/src/pages/index.tsx index 5946476..2bfa119 100644 --- a/wallets/react-wallet-v2/src/pages/index.tsx +++ b/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 ( - Accounts + + + Mainnets {Object.values(EIP155_MAINNET_CHAINS).map(({ name, logo, rgb }) => ( - + ))} {testNets ? ( @@ -26,7 +30,7 @@ export default function HomePage() { Testnets {Object.values(EIP155_TEST_CHAINS).map(({ name, logo, rgb }) => ( - + ))} ) : null} diff --git a/wallets/react-wallet-v2/src/pages/pairings.tsx b/wallets/react-wallet-v2/src/pages/pairings.tsx index 5e2e2ad..b6439dc 100644 --- a/wallets/react-wallet-v2/src/pages/pairings.tsx +++ b/wallets/react-wallet-v2/src/pages/pairings.tsx @@ -19,7 +19,7 @@ export default function PairingsPage() { return ( - Pairings + {pairings.length ? ( pairings.map(pairing => { const { metadata } = pairing.state diff --git a/wallets/react-wallet-v2/src/pages/sessions.tsx b/wallets/react-wallet-v2/src/pages/sessions.tsx index e240884..951a107 100644 --- a/wallets/react-wallet-v2/src/pages/sessions.tsx +++ b/wallets/react-wallet-v2/src/pages/sessions.tsx @@ -19,7 +19,7 @@ export default function SessionsPage() { return ( - Sessions + {sessions.length ? ( sessions.map(session => { const { name, icons, url } = session.peer.metadata diff --git a/wallets/react-wallet-v2/src/pages/settings.tsx b/wallets/react-wallet-v2/src/pages/settings.tsx index 0c170a5..a30cb3a 100644 --- a/wallets/react-wallet-v2/src/pages/settings.tsx +++ b/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 ( - Settings + Mnemonic - {wallet.mnemonic.phrase} + + {wallets['0xD0712a5018b6F3401b90Cd75C15d95B3353a4088'].mnemonic.phrase} + diff --git a/wallets/react-wallet-v2/src/pages/walletconnect.tsx b/wallets/react-wallet-v2/src/pages/walletconnect.tsx index 8486c3c..5585960 100644 --- a/wallets/react-wallet-v2/src/pages/walletconnect.tsx +++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx @@ -22,7 +22,7 @@ export default function WalletConnectPage() { return ( - WalletConnect + diff --git a/wallets/react-wallet-v2/src/utils/WalletUtil.ts b/wallets/react-wallet-v2/src/utils/WalletUtil.ts index be73ad6..905c6f7 100644 --- a/wallets/react-wallet-v2/src/utils/WalletUtil.ts +++ b/wallets/react-wallet-v2/src/utils/WalletUtil.ts @@ -1,15 +1,26 @@ import { Wallet } from 'ethers' -export let wallet: Wallet +export let wallets: Record +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) } diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx index 2f9e13e..d57809d 100644 --- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx +++ b/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 }) diff --git a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx index 42e736f..507af48 100644 --- a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx +++ b/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, diff --git a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignModal.tsx index 5c8a6d2..9aa1d91 100644 --- a/wallets/react-wallet-v2/src/views/SessionSignModal.tsx +++ b/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 diff --git a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx b/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx index ad70ab1..287f038 100644 --- a/wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx +++ b/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