deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor to support multiple accounts, acc picker component

Browse Source
This commit is contained in:
Ilja 2022-02-21 13:55:35 +02:00
parent c6365f206f
commit 26c57c1da6
14 changed files with 100 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
wallets/react-wallet-v2/public/icons/arrow-down-icon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

21
wallets/react-wallet-v2/public/main.css
View File

@ -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);
}

8
wallets/react-wallet-v2/src/components/AccountPicker.tsx Normal file
View File

@ -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>
)
}

34
wallets/react-wallet-v2/src/components/PageHeader.tsx
View File

@ -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 (
<Fragment>
<Text
h3
weight="bold"
css={{
textGradient: '90deg, $secondary, $primary 30%',
marginBottom: '$5'
}}
>
{children}
</Text>
<Row css={{ marginBottom: '$5', width: '100%' }} justify="space-between" align="center">
<Col>
<Text
h3
weight="bold"
css={{
textGradient: '90deg, $secondary, $primary 30%'
}}
>
{title}
</Text>
</Col>
{children ? <Col css={{ flex: 1 }}>{children}</Col> : null}
</Row>
<Divider css={{ marginBottom: '$10' }} />
</Fragment>
)

12
wallets/react-wallet-v2/src/pages/index.tsx
View File

@ -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}

2
wallets/react-wallet-v2/src/pages/pairings.tsx
View File

@ -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

2
wallets/react-wallet-v2/src/pages/sessions.tsx
View File

@ -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

8
wallets/react-wallet-v2/src/pages/settings.tsx
View File

@ -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' }}>

2
wallets/react-wallet-v2/src/pages/walletconnect.tsx
View File

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

19
wallets/react-wallet-v2/src/utils/WalletUtil.ts
View File

@ -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)
}

6
wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
View File

@ -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 })

5
wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
View File

@ -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,

7
wallets/react-wallet-v2/src/views/SessionSignModal.tsx
View File

@ -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

7
wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
View File

@ -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