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

Create request modal components to cleanup the views

Browse Source
This commit is contained in:
Ilja 2022-03-04 13:10:05 +02:00
parent ae1a9f8f7c
commit 02bf3b642d
9 changed files with 231 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -1,13 +1,14 @@
import AccountSelectCard from '@/components/AccountSelectCard' import AccountSelectCard from '@/components/AccountSelectCard'
import ProjectInfoCard from '@/components/ProjectInfoCard' import ProjectInfoCard from '@/components/ProjectInfoCard'
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData' import RequesDetailsCard from '@/components/RequestDetalilsCard'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data' import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore' import ModalStore from '@/store/ModalStore'
import { cosmosAddresses } from '@/utils/CosmosWalletUtil' import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
import { eip155Addresses } from '@/utils/EIP155WalletUtil' import { eip155Addresses } from '@/utils/EIP155WalletUtil'
import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil' import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react' import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react' import { Fragment, useState } from 'react'
export default function SessionProposalModal() { export default function SessionProposalModal() {
@ -26,7 +27,6 @@ export default function SessionProposalModal() {
const { proposer, permissions, relay } = proposal const { proposer, permissions, relay } = proposal
const { chains } = permissions.blockchain const { chains } = permissions.blockchain
const { methods } = permissions.jsonrpc const { methods } = permissions.jsonrpc
const { protocol } = relay
// Add / remove address from EIP155 selection // Add / remove address from EIP155 selection
function onSelectEIP155(address: string) { function onSelectEIP155(address: string) {
@ -84,97 +84,61 @@ export default function SessionProposalModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Session Proposal">
<Text h3>Session Proposal</Text> <ProjectInfoCard metadata={proposer.metadata} />
</Modal.Header>
<Modal.Body> <Divider y={2} />
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={proposer.metadata} />
<Divider y={2} /> <RequesDetailsCard chains={chains} protocol={relay.protocol} />
<Row> <Divider y={2} />
<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} /> <RequestMethodCard methods={methods} />
<Row> <Divider y={2} />
<Col>
<Text h5>Methods</Text>
<Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
</Col>
</Row>
<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> <Row>
<Col> <Col>
<Text h5>Relay Protocol</Text> <Text h5>Select Cosmos Accounts</Text>
<Text color="$gray400">{protocol}</Text> {cosmosAddresses.map((address, index) => (
</Col> <AccountSelectCard
</Row> key={address}
address={address}
{chains.map(chain => { index={index}
if (isEIP155Chain(chain)) { onSelect={() => onSelectCosmos(address)}
return ( selected={selectedCosmos.includes(address)}
<Fragment> />
<Divider y={2} /> ))}
</Col>
<Row> </Row>
<Col> </Fragment>
<Text h5>Select EIP155 Accounts</Text> )
{eip155Addresses.map((address, index) => ( }
<AccountSelectCard })}
key={address} </RequestModalContainer>
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>
<Modal.Footer> <Modal.Footer>
<Button auto flat color="error" onClick={onReject}> <Button auto flat color="error" onClick={onReject}>

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

@ -1,10 +1,12 @@
import ProjectInfoCard from '@/components/ProjectInfoCard' import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard' import RequestDataCard from '@/components/RequestDataCard'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data' import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore' import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil' import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Button, Col, Container, Divider, Loading, Modal, Row, Text } from '@nextui-org/react' import { Button, Divider, Loading, Modal, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react' import { Fragment, useState } from 'react'
export default function SessionSendTransactionModal() { export default function SessionSendTransactionModal() {
@ -20,9 +22,8 @@ export default function SessionSendTransactionModal() {
} }
// Get required proposal data // Get required proposal data
const { chainId } = requestEvent
const { method, params } = requestEvent.request const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
const transaction = params[0] const transaction = params[0]
// Handle approve action // Handle approve action
@ -52,48 +53,24 @@ export default function SessionSendTransactionModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Send / Sign Transaction">
<Text h3>Send / Sign Transaction</Text> <ProjectInfoCard metadata={requestSession.peer.metadata} />
</Modal.Header>
<Modal.Body> <Divider y={2} />
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <RequestDataCard data={transaction} />
<RequestDataCard data={transaction} /> <Divider y={2} />
<Divider y={2} /> <RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row> <Divider y={2} />
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <RequestMethodCard methods={[method]} />
</RequestModalContainer>
<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>
<Modal.Footer> <Modal.Footer>
<Button auto flat color="error" onClick={onReject} disabled={loading}> <Button auto flat color="error" onClick={onReject} disabled={loading}>

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

@ -1,10 +1,12 @@
import ProjectInfoCard from '@/components/ProjectInfoCard' import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard' import RequestDataCard from '@/components/RequestDataCard'
import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData' import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore' import ModalStore from '@/store/ModalStore'
import { approveCosmosRequest, rejectCosmosRequest } from '@/utils/CosmosRequestHandler' import { approveCosmosRequest, rejectCosmosRequest } from '@/utils/CosmosRequestHandler'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react' import { Button, Divider, Modal, Text } from '@nextui-org/react'
import { Fragment } from 'react' import { Fragment } from 'react'
export default function SessionSignCosmosModal() { export default function SessionSignCosmosModal() {
@ -18,9 +20,7 @@ export default function SessionSignCosmosModal() {
} }
// Get required request data // Get required request data
const { chainId } = requestEvent
const { method, params } = requestEvent.request const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
// Handle approve action (logic varies based on request method) // Handle approve action (logic varies based on request method)
async function onApprove() { async function onApprove() {
@ -48,48 +48,24 @@ export default function SessionSignCosmosModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Sign Message">
<Text h3>Sign Message</Text> <ProjectInfoCard metadata={requestSession.peer.metadata} />
</Modal.Header>
<Modal.Body> <Divider y={2} />
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row> <Divider y={2} />
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{COSMOS_MAINNET_CHAINS[chainId as TCosmosChain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <RequestDataCard data={params} />
<RequestDataCard data={params} /> <Divider y={2} />
<Divider y={2} /> <RequestMethodCard methods={[method]} />
</RequestModalContainer>
<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>
<Modal.Footer> <Modal.Footer>
<Button auto flat color="error" onClick={onReject}> <Button auto flat color="error" onClick={onReject}>

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

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

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

@ -1,11 +1,13 @@
import ProjectInfoCard from '@/components/ProjectInfoCard' import ProjectInfoCard from '@/components/ProjectInfoCard'
import RequestDataCard from '@/components/RequestDataCard' import RequestDataCard from '@/components/RequestDataCard'
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data' import RequesDetailsCard from '@/components/RequestDetalilsCard'
import RequestMethodCard from '@/components/RequestMethodCard'
import RequestModalContainer from '@/components/RequestModalContainer'
import ModalStore from '@/store/ModalStore' import ModalStore from '@/store/ModalStore'
import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil' import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
import { getSignTypedDataParamsData } from '@/utils/HelperUtil' import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Button, Col, Container, Divider, Modal, Row, Text } from '@nextui-org/react' import { Button, Divider, Modal, Text } from '@nextui-org/react'
import { Fragment } from 'react' import { Fragment } from 'react'
export default function SessionSignTypedDataModal() { export default function SessionSignTypedDataModal() {
@ -19,9 +21,7 @@ export default function SessionSignTypedDataModal() {
} }
// Get required request data // Get required request data
const { chainId } = requestEvent
const { method, params } = requestEvent.request const { method, params } = requestEvent.request
const { protocol } = requestSession.relay
// Get data // Get data
const data = getSignTypedDataParamsData(params) const data = getSignTypedDataParamsData(params)
@ -52,48 +52,24 @@ export default function SessionSignTypedDataModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Sign Typed Data">
<Text h3>Sign Typed Data</Text> <ProjectInfoCard metadata={requestSession.peer.metadata} />
</Modal.Header>
<Modal.Body> <Divider y={2} />
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <RequesDetailsCard
chains={[requestEvent.chainId ?? '']}
protocol={requestSession.relay.protocol}
/>
<Row> <Divider y={2} />
<Col>
<Text h5>Blockchain</Text>
<Text color="$gray400">
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <RequestDataCard data={data} />
<RequestDataCard data={data} /> <Divider y={2} />
<Divider y={2} /> <RequestMethodCard methods={[method]} />
</RequestModalContainer>
<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>
<Modal.Footer> <Modal.Footer>
<Button auto flat color="error" onClick={onReject}> <Button auto flat color="error" onClick={onReject}>

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

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