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

Merge branch 'wallets'

Browse Source
This commit is contained in:
Ilja 2022-03-04 13:42:40 +02:00
commit a22cd324b1
17 changed files with 324 additions and 484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
wallets/react-wallet-v2/README.md
View File

@ -1,26 +1,26 @@
# WalletConnect React Wallet Example
# Wallet Example (React, Typescript, Ethers, NextJS, Cosmos)
This example aims to demonstrate basic and advanced use cases enabled by WalletConnect. Please only use this for refference and development purposes, otherwise you are at risk of loosing your funds.
# Useful links
⚠️ Wallet should only be used as a refference example & for development purposes <br />
🔗 Live wallet app - https://react-wallet-v2.vercel.app <br />
🔗 Live dapp app - https://react-dapp-v2.vercel.app <br />
🔗 Live dapp - https://react-dapp-v2.vercel.app <br />
📚 WalletConnect docs - https://docs.walletconnect.com/2.0
Example wallet implementation using [WalletConnect](https://walletconnect.com/), [Ethers](https://docs.ethers.io/v5/), [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org)
## Getting started
This example is built atop of [NextJS](https://nextjs.org/) in order to abstract complexity of setting up bundlers, routing etc.. So there are only few steps you need to follow in order to set everything up
Eexample is built atop of [NextJS](https://nextjs.org/) in order to abstract complexity of setting up bundlers, routing etc. So there are few steps you need to follow in order to set everything up
1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) and obtain a project id
2. Add your project details in [WalletConnectUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts) file.
3. [Optional] To use project id as environment variable follow [NextJS environment docs](https://nextjs.org/docs/basic-features/environment-variables)
4. Install dependencies `yarn install` or `npm install`
5. Run `yarn dev` or `npm run dev` to start local development
2. Add your project details in [WalletConnectUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts) file
3. Install dependencies `yarn install` or `npm install`
4. Run `yarn dev` or `npm run dev` to start local development
## Navigating through this example
## Navigating through example
1. Initial setup and initializations happen in [_app.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/pages/_app.tsx) file.
2. WalletConnect client and ethers wallets are initialized in [useInitialization.ts ](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useInitialization.ts) hook
3. Subscription and handling of WalletConnect events happens in [useWalletConnectEventsManager.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts) hook, that oppens related [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) and passes them all necesary data.
4. [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) are responsible for data display and handling approval or rejection actions.
5. Uppon approval or rejection modals pass request data to [RequestHandlerUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts) that performs all necesary ethers work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses.
1. Initial setup and initializations happen in [_app.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/pages/_app.tsx) file
2. WalletConnect client, ethers and cosmos wallets are initialized in [useInitialization.ts ](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useInitialization.ts) hook
3. Subscription and handling of WalletConnect events happens in [useWalletConnectEventsManager.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts) hook, that oppens related [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) and passes them all necesary data
4. [Modal views](https://github.com/WalletConnect/web-examples/tree/main/wallets/react-wallet-v2/src/views) are responsible for data display and handling approval or rejection actions
5. Uppon approval or rejection modals pass request data to [RequestHandlerUtil.ts](https://github.com/WalletConnect/web-examples/blob/main/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts) that performs all necesary work based on request method and returns formated json rpc result data that can be then used for WallteConnect client responses

2
wallets/react-wallet-v2/package.json
View File

@ -31,7 +31,7 @@
"@types/react": "17.0.39",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"eslint-config-prettier": "8.4.0",
"eslint-config-prettier": "8.5.0",
"prettier": "2.5.1",
"typescript": "4.6.2"
}

28
wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Avatar, Col, Link, Row, Text } from '@nextui-org/react'
import { SessionTypes } from '@walletconnect/types'
/**
* Types
*/
interface IProps {
metadata: SessionTypes.Participant['metadata']
}
/**
* Components
*/
export default function ProjectInfoCard({ metadata }: IProps) {
const { icons, name, url } = metadata
return (
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
)
}

28
wallets/react-wallet-v2/src/components/RequestDataCard.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Col, Row, Text } from '@nextui-org/react'
import { CodeBlock, codepen } from 'react-code-blocks'
/**
* Types
*/
interface IProps {
data: Record<string, unknown>
}
/**
* Component
*/
export default function RequestDataCard({ data }: IProps) {
return (
<Row>
<Col>
<Text h5>Data</Text>
<CodeBlock
showLineNumbers={false}
text={JSON.stringify(data, null, 2)}
theme={codepen}
language="json"
/>
</Col>
</Row>
)
}

46
wallets/react-wallet-v2/src/components/RequestDetalilsCard.tsx Normal file
View File

@ -0,0 +1,46 @@
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import { Col, Divider, Row, Text } from '@nextui-org/react'
import { Fragment } from 'react'
/**
* Types
*/
interface IProps {
chains: string[]
protocol: string
}
/**
* Component
*/
export default function RequesDetailsCard({ chains, protocol }: IProps) {
return (
<Fragment>
<Row>
<Col>
<Text h5>Blockchain(s)</Text>
<Text color="$gray400">
{chains
.map(
chain =>
EIP155_CHAINS[chain as TEIP155Chain]?.name ??
COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
chain
)
.join(', ')}
</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
</Fragment>
)
}

22
wallets/react-wallet-v2/src/components/RequestMethodCard.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Col, Row, Text } from '@nextui-org/react'
/**
* Types
*/
interface IProps {
methods: string[]
}
/**
* Component
*/
export default function RequestMethodCard({ methods }: IProps) {
return (
<Row>
<Col>
<Text h5>Methods</Text>
<Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
</Col>
</Row>
)
}

27
wallets/react-wallet-v2/src/components/RequestModalContainer.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Container, Modal, Text } from '@nextui-org/react'
import { Fragment, ReactNode } from 'react'
/**
* Types
*/
interface IProps {
title: string
children: ReactNode | ReactNode[]
}
/**
* Component
*/
export default function RequestModalContainer({ children, title }: IProps) {
return (
<Fragment>
<Modal.Header>
<Text h3>{title}</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>{children}</Container>
</Modal.Body>
</Fragment>
)
}

0
wallets/react-wallet-v2/src/utils/CosmosUtil.ts → wallets/react-wallet-v2/src/lib/Cosmos.ts
View File

22
wallets/react-wallet-v2/src/pages/session.tsx
View File

@ -1,10 +1,11 @@
import AccountSelectCard from '@/components/AccountSelectCard'
import PageHeader from '@/components/PageHeader'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
import { eip155Addresses } from '@/utils/EIP155WalletUtil'
import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil'
import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Button, Col, Divider, Link, Row, Text } from '@nextui-org/react'
import { Button, Col, Divider, Row, Text } from '@nextui-org/react'
import { ERROR } from '@walletconnect/utils'
import { useRouter } from 'next/router'
import { Fragment, useEffect, useState } from 'react'
@ -30,7 +31,6 @@ export default function SessionPage() {
}
// Get necessary data from session
const { name, url, icons } = session.peer.metadata
const expiryDate = new Date(session.expiry * 1000)
const { chains } = session.permissions.blockchain
const { methods } = session.permissions.jsonrpc
@ -72,24 +72,14 @@ export default function SessionPage() {
<Fragment>
<PageHeader title="Session Details" />
<Row align="center">
<Col css={{ flex: 1 }}>
<Avatar size="xl" src={icons[0]} />
</Col>
<Col css={{ marginLeft: '$5' }}>
<Text h5>{name}</Text>
<Link css={{ marginLeft: '$5' }} href={url}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link>
</Col>
</Row>
<ProjectInfoCard metadata={session.peer.metadata} />
<Divider y={2} />
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Fragment key={chain}>
<Divider y={1} />
<Row>
<Col>
<Text h5>EIP155 Accounts</Text>

2
wallets/react-wallet-v2/src/utils/CosmosWalletUtil.ts
View File

@ -1,4 +1,4 @@
import { Cosmos } from '@/utils/CosmosUtil'
import { Cosmos } from '@/lib/Cosmos'
export let wallet1: Cosmos
export let wallet2: Cosmos

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

@ -1,12 +1,14 @@
import AccountSelectCard from '@/components/AccountSelectCard'
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
import { eip155Addresses } from '@/utils/EIP155WalletUtil'
import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react'
export default function SessionProposalModal() {
@ -23,10 +25,8 @@ export default function SessionProposalModal() {
// Get required proposal data
const { proposer, permissions, relay } = proposal
const { icons, name, url } = proposer.metadata
const { chains } = permissions.blockchain
const { methods } = permissions.jsonrpc
const { protocol } = relay
// Add / remove address from EIP155 selection
function onSelectEIP155(address: string) {
@ -84,105 +84,61 @@ export default function SessionProposalModal() {
return (
<Fragment>
<Modal.Header>
<Text h3>Session Proposal</Text>
</Modal.Header>
<RequestModalContainer title="Session Proposal">
<ProjectInfoCard metadata={proposer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard chains={chains} protocol={relay.protocol} />
<Row>
<Col>
<Text h5>Blockchains</Text>
<Text color="$gray400">
{chains
.map(
chain =>
EIP155_CHAINS[chain as TEIP155Chain]?.name ??
COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name ??
chain
)
.join(', ')}
</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequestMethodCard methods={methods} />
<Row>
<Col>
<Text h5>Methods</Text>
<Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Row>
<Col>
<Text h5>Select EIP155 Accounts</Text>
{eip155Addresses.map((address, index) => (
<AccountSelectCard
key={address}
address={address}
index={index}
onSelect={() => onSelectEIP155(address)}
selected={selectedEIP155.includes(address)}
/>
))}
</Col>
</Row>
)
} else if (isCosmosChain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
{chains.map(chain => {
if (isEIP155Chain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row>
<Col>
<Text h5>Select EIP155 Accounts</Text>
{eip155Addresses.map((address, index) => (
<AccountSelectCard
key={address}
address={address}
index={index}
onSelect={() => onSelectEIP155(address)}
selected={selectedEIP155.includes(address)}
/>
))}
</Col>
</Row>
</Fragment>
)
} else if (isCosmosChain(chain)) {
return (
<Fragment>
<Divider y={2} />
<Row>
<Col>
<Text h5>Select Cosmos Accounts</Text>
{cosmosAddresses.map((address, index) => (
<AccountSelectCard
key={address}
address={address}
index={index}
onSelect={() => onSelectCosmos(address)}
selected={selectedCosmos.includes(address)}
/>
))}
</Col>
</Row>
</Fragment>
)
}
})}
</Container>
</Modal.Body>
<Row>
<Col>
<Text h5>Select Cosmos Accounts</Text>
{cosmosAddresses.map((address, index) => (
<AccountSelectCard
key={address}
address={address}
index={index}
onSelect={() => onSelectCosmos(address)}
selected={selectedCosmos.includes(address)}
/>
))}
</Col>
</Row>
</Fragment>
)
}
})}
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>

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

@ -1,20 +1,12 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { truncate } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import {
Avatar,
Button,
Col,
Container,
Divider,
Link,
Loading,
Modal,
Row,
Text
} from '@nextui-org/react'
import { Button, Divider, Loading, Modal, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react'
export default function SessionSendTransactionModal() {
@ -30,10 +22,8 @@ export default function SessionSendTransactionModal() {
}
// Get required proposal data
const { chainId } = requestEvent
const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
const { name, icons, url } = requestSession.peer.metadata
const transaction = params[0]
// Handle approve action
@ -63,105 +53,24 @@ export default function SessionSendTransactionModal() {
return (
<Fragment>
<Modal.Header>
<Text h3>Send / Sign Transaction</Text>
</Modal.Header>
<RequestModalContainer title="Send / Sign Transaction">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequestDataCard data={transaction} />
<Row>
<Col>
<Text h5>From</Text>
<Text color="$gray400">{truncate(transaction.from, 30)}</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row>
<Col>
<Text h5>To</Text>
<Text color="$gray400">{truncate(transaction.to, 30)}</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Value</Text>
<Text color="$gray400">{transaction.value}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Gas Price</Text>
<Text color="$gray400">{transaction.gasPrice}</Text>
</Col>
<Col>
<Text h5>Gas Limit</Text>
<Text color="$gray400">{transaction.gasLimit}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Nonce</Text>
<Text color="$gray400">{transaction.nonce}</Text>
</Col>
<Col>
<Text h5>Data</Text>
<Text color="$gray400">{transaction.data}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Method</Text>
<Text color="$gray400">{method}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
</Container>
</Modal.Body>
<RequestMethodCard methods={[method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject} disabled={loading}>

78
wallets/react-wallet-v2/src/views/SessionSignCosmosModal.tsx
View File

@ -1,10 +1,13 @@
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { approveCosmosRequest, rejectCosmosRequest } from '@/utils/CosmosRequestHandler'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Button, Divider, Modal, Text } from '@nextui-org/react'
import { Fragment } from 'react'
import { CodeBlock, codepen } from 'react-code-blocks'
export default function SessionSignCosmosModal() {
// Get request and wallet data from store
@ -17,10 +20,7 @@ export default function SessionSignCosmosModal() {
}
// Get required request data
const { chainId } = requestEvent
const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
const { name, icons, url } = requestSession.peer.metadata
// Handle approve action (logic varies based on request method)
async function onApprove() {
@ -48,66 +48,24 @@ export default function SessionSignCosmosModal() {
return (
<Fragment>
<Modal.Header>
<Text h3>Sign Message</Text>
</Modal.Header>
<RequestModalContainer title="Sign Message">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row>
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{COSMOS_MAINNET_CHAINS[chainId as TCosmosChain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequestDataCard data={params} />
<Row>
<Col>
<Text h5>Data</Text>
<CodeBlock
showLineNumbers={false}
text={JSON.stringify(params, null, 2)}
theme={codepen}
language="json"
/>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Method</Text>
<Text color="$gray400">{method}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
</Container>
</Modal.Body>
<RequestMethodCard methods={[method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>

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

@ -1,9 +1,12 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { getSignParamsMessage } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
import { Fragment } from 'react'
export default function SessionSignModal() {
@ -17,10 +20,7 @@ export default function SessionSignModal() {
}
// Get required request data
const { chainId } = requestEvent
const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
const { name, icons, url } = requestSession.peer.metadata
// Get message, convert it to UTF8 string if it is valid hex
const message = getSignParamsMessage(params)
@ -51,61 +51,29 @@ export default function SessionSignModal() {
return (
<Fragment>
<Modal.Header>
<Text h3>Sign Message</Text>
</Modal.Header>
<RequestModalContainer title="Sign Message">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row>
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Message</Text>
<Text color="$gray400">{message}</Text>
</Col>
</Row>
<Row>
<Col>
<Text h5>Message</Text>
<Text color="$gray400">{message}</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Method</Text>
<Text color="$gray400">{method}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
</Container>
</Modal.Body>
<RequestMethodCard methods={[method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>

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

@ -1,11 +1,14 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Button, Divider, Modal, Text } from '@nextui-org/react'
import { Fragment } from 'react'
import { CodeBlock, codepen } from 'react-code-blocks'
export default function SessionSignTypedDataModal() {
// Get request and wallet data from store
@ -18,10 +21,7 @@ export default function SessionSignTypedDataModal() {
}
// Get required request data
const { chainId } = requestEvent
const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
const { name, icons, url } = requestSession.peer.metadata
// Get data
const data = getSignTypedDataParamsData(params)
@ -52,94 +52,24 @@ export default function SessionSignTypedDataModal() {
return (
<Fragment>
<Modal.Header>
<Text h3>Sign Typed Data</Text>
</Modal.Header>
<RequestModalContainer title="Sign Typed Data">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row>
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequestDataCard data={data} />
<Row>
<Col className="codeBlock">
<Text h5>Domain</Text>
<CodeBlock
showLineNumbers={false}
text={JSON.stringify(data.domain, null, 2)}
theme={codepen}
language="json"
/>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col className="codeBlock">
<Text h5>Types</Text>
<CodeBlock
showLineNumbers={false}
text={JSON.stringify(data.types, null, 2)}
theme={codepen}
language="json"
/>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col className="codeBlock">
<Text h5>Message</Text>
<CodeBlock
showLineNumbers={false}
text={JSON.stringify(data.message, null, 2)}
theme={codepen}
language="json"
/>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Method</Text>
<Text color="$gray400">{method}</Text>
</Col>
</Row>
<Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
</Container>
</Modal.Body>
<RequestMethodCard methods={[method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>

52
wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx
View File

@ -1,6 +1,9 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Button, Divider, Modal, Text } from '@nextui-org/react'
import { Fragment } from 'react'
export default function SessionUnsuportedMethodModal() {
@ -14,49 +17,24 @@ export default function SessionUnsuportedMethodModal() {
}
// Get required request data
const { chainId } = requestEvent
const { method } = requestEvent.request
const { name, icons, url } = requestSession.peer.metadata
return (
<Fragment>
<Modal.Header>
<Text h3>Unsuported Method</Text>
</Modal.Header>
<RequestModalContainer title="Unsuported Method">
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Modal.Body>
<Container css={{ padding: 0 }}>
<Row align="center">
<Col span={3}>
<Avatar src={icons[0]} />
</Col>
<Col span={14}>
<Text h5>{name}</Text>
<Link href={url}>{url}</Link>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row>
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} />
<Divider y={2} />
<Row>
<Col>
<Text h5>Method</Text>
<Text color="$gray400">{method}</Text>
</Col>
</Row>
</Container>
</Modal.Body>
<RequestMethodCard methods={[method]} />
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={ModalStore.close}>

8
wallets/react-wallet-v2/yarn.lock
View File

@ -1879,10 +1879,10 @@ eslint-config-next@12.1.0:
eslint-plugin-react "^7.27.0"
eslint-plugin-react-hooks "^4.3.0"
eslint-config-prettier@8.4.0:
version "8.4.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
eslint-config-prettier@8.5.0:
version "8.5.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
version "0.3.6"