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

52
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,56 +84,22 @@ export default function SessionProposalModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Session Proposal">
<Text h3>Session Proposal</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={proposer.metadata} /> <ProjectInfoCard metadata={proposer.metadata} />
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard chains={chains} protocol={relay.protocol} />
<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} />
<Row> <RequestMethodCard methods={methods} />
<Col>
<Text h5>Methods</Text>
<Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
</Col>
</Row>
{chains.map(chain => { {chains.map(chain => {
if (isEIP155Chain(chain)) { if (isEIP155Chain(chain)) {
return ( return (
<Fragment>
<Divider y={2} />
<Row> <Row>
<Col> <Col>
<Text h5>Select EIP155 Accounts</Text> <Text h5>Select EIP155 Accounts</Text>
@ -148,7 +114,6 @@ export default function SessionProposalModal() {
))} ))}
</Col> </Col>
</Row> </Row>
</Fragment>
) )
} else if (isCosmosChain(chain)) { } else if (isCosmosChain(chain)) {
return ( return (
@ -173,8 +138,7 @@ export default function SessionProposalModal() {
) )
} }
})} })}
</Container> </RequestModalContainer>
</Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button auto flat color="error" onClick={onReject}> <Button auto flat color="error" onClick={onReject}>

47
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,12 +53,7 @@ export default function SessionSendTransactionModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Send / Sign Transaction">
<Text h3>Send / Sign Transaction</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} /> <ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <Divider y={2} />
@ -66,34 +62,15 @@ export default function SessionSendTransactionModal() {
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard
<Col> chains={[requestEvent.chainId ?? '']}
<Text h5>Blockchain</Text> protocol={requestSession.relay.protocol}
<Text color="$gray400"> />
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
<Row> <RequestMethodCard methods={[method]} />
<Col> </RequestModalContainer>
<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}>

46
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,24 +48,15 @@ export default function SessionSignCosmosModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Sign Message">
<Text h3>Sign Message</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} /> <ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard
<Col> chains={[requestEvent.chainId ?? '']}
<Text h5>Blockchain</Text> protocol={requestSession.relay.protocol}
<Text color="$gray400"> />
{COSMOS_MAINNET_CHAINS[chainId as TCosmosChain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
@ -73,23 +64,8 @@ export default function SessionSignCosmosModal() {
<Divider y={2} /> <Divider y={2} />
<Row> <RequestMethodCard methods={[method]} />
<Col> </RequestModalContainer>
<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}>

46
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,24 +51,15 @@ export default function SessionSignModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Sign Message">
<Text h3>Sign Message</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} /> <ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard
<Col> chains={[requestEvent.chainId ?? '']}
<Text h5>Blockchain</Text> protocol={requestSession.relay.protocol}
<Text color="$gray400"> />
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
@ -81,23 +72,8 @@ export default function SessionSignModal() {
<Divider y={2} /> <Divider y={2} />
<Row> <RequestMethodCard methods={[method]} />
<Col> </RequestModalContainer>
<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}>

46
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,24 +52,15 @@ export default function SessionSignTypedDataModal() {
return ( return (
<Fragment> <Fragment>
<Modal.Header> <RequestModalContainer title="Sign Typed Data">
<Text h3>Sign Typed Data</Text>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} /> <ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard
<Col> chains={[requestEvent.chainId ?? '']}
<Text h5>Blockchain</Text> protocol={requestSession.relay.protocol}
<Text color="$gray400"> />
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
@ -77,23 +68,8 @@ export default function SessionSignTypedDataModal() {
<Divider y={2} /> <Divider y={2} />
<Row> <RequestMethodCard methods={[method]} />
<Col> </RequestModalContainer>
<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}>

36
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>
</Modal.Header>
<Modal.Body>
<Container css={{ padding: 0 }}>
<ProjectInfoCard metadata={requestSession.peer.metadata} /> <ProjectInfoCard metadata={requestSession.peer.metadata} />
<Divider y={2} /> <Divider y={2} />
<Row> <RequesDetailsCard
<Col> chains={[requestEvent.chainId ?? '']}
<Text h5>Blockchain</Text> protocol={requestSession.relay.protocol}
<Text color="$gray400"> />
{EIP155_CHAINS[chainId as TEIP155Chain]?.name ?? chainId}
</Text>
</Col>
</Row>
<Divider y={2} /> <Divider y={2} />
<Row> <RequestMethodCard methods={[method]} />
<Col> </RequestModalContainer>
<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}>