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

Handle un-supported methods

Browse Source
This commit is contained in:
Ilja 2022-02-18 13:42:13 +02:00
parent 8664c11e4d
commit 287664ac87
4 changed files with 85 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wallets/react-wallet-v2/src/components/Modal.tsx
View File

@ -3,6 +3,7 @@ import SessionProposalModal from '@/views/SessionProposalModal'
import SessionSendTransactionModal from '@/views/SessionSendTransactionModal'
import SessionRequestModal from '@/views/SessionSignModal'
import SessionSignTypedDataModal from '@/views/SessionSignTypedDataModal'
import SessionUnsuportedMethodModal from '@/views/SessionUnsuportedMethodModal'
import { Modal as NextModal } from '@nextui-org/react'
import { useSnapshot } from 'valtio'
@ -15,6 +16,7 @@ export default function Modal() {
{view === 'SessionSignModal' && <SessionRequestModal />}
{view === 'SessionSignTypedDataModal' && <SessionSignTypedDataModal />}
{view === 'SessionSendTransactionModal' && <SessionSendTransactionModal />}
{view === 'SessionUnsuportedMethodModal' && <SessionUnsuportedMethodModal />}
</NextModal>
)
}

27
wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
View File

@ -26,20 +26,21 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
const { method } = request
const requestSession = await walletConnectClient.session.get(topic)
console.log(method)
switch (method) {
case EIP155_SIGNING_METHODS.ETH_SIGN:
case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
return ModalStore.open('SessionSignModal', { requestEvent, requestSession })
if ([EIP155_SIGNING_METHODS.ETH_SIGN, EIP155_SIGNING_METHODS.PERSONAL_SIGN].includes(method)) {
ModalStore.open('SessionSignModal', { requestEvent, requestSession })
} else if (
[
EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA,
EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V3,
EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V4
].includes(method)
) {
ModalStore.open('SessionSignTypedDataModal', { requestEvent, requestSession })
} else if (EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION) {
ModalStore.open('SessionSendTransactionModal', { requestEvent, requestSession })
case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA:
case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V3:
case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V4:
return ModalStore.open('SessionSignTypedDataModal', { requestEvent, requestSession })
case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
return ModalStore.open('SessionSendTransactionModal', { requestEvent, requestSession })
default:
return ModalStore.open('SessionUnsuportedMethodModal', { requestEvent, requestSession })
}
}, [])

1
wallets/react-wallet-v2/src/store/ModalStore.ts
View File

@ -18,6 +18,7 @@ interface State {
| 'SessionSignModal'
| 'SessionSignTypedDataModal'
| 'SessionSendTransactionModal'
| 'SessionUnsuportedMethodModal'
data?: ModalData
}

68
wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx Normal file
View File

@ -0,0 +1,68 @@
import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
import ModalStore from '@/store/ModalStore'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Fragment } from 'react'
export default function SessionUnsuportedMethodModal() {
// Get request and wallet data from store
const requestEvent = ModalStore.state.data?.requestEvent
const requestSession = ModalStore.state.data?.requestSession
// Ensure request and wallet are defined
if (!requestEvent || !requestSession) {
return <Text>Missing request data</Text>
}
// 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>
<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} />
<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>
</Container>
</Modal.Body>
<Modal.Footer>
<Button auto flat color="error" onClick={ModalStore.close}>
Close
</Button>
</Modal.Footer>
</Fragment>
)
}