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

session.request modal flow

Browse Source
This commit is contained in:
Ilja 2022-02-11 13:48:04 +02:00
parent 008fb6cbe2
commit eb063aca3a
6 changed files with 196 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,19 +11,19 @@
"@walletconnect/client": "2.0.0-beta.22",
"@walletconnect/utils": "2.0.0-beta.22",
"@walletconnect/jsonrpc-utils": "1.0.0",
"@nextui-org/react": "1.0.2-beta.3",
"@nextui-org/react": "1.0.2-beta.4",
"next": "12.0.10",
"next-themes": "0.0.15",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-qr-reader-es6": "2.2.1-2",
"framer-motion": "6.2.4",
"framer-motion": "6.2.6",
"ethers": "5.5.4",
"valtio": "1.2.12"
},
"devDependencies": {
"@walletconnect/types": "2.0.0-beta.22",
"@types/node": "17.0.16",
"@types/node": "17.0.17",
"@types/react": "17.0.39",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",

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

@ -1,16 +1,16 @@
import ModalStore from '@/store/ModalStore'
import SessionProposalModal from '@/views/SessionProposalModal'
import SessionRequestModal from '@/views/SessionRequestModal'
import { Modal as NextModal } from '@nextui-org/react'
import { useSnapshot } from 'valtio'
export default function Modal() {
const { open, view } = useSnapshot(ModalStore.state)
console.log(open)
return (
<NextModal blur open={open} style={{ border: '1px solid rgba(139, 139, 139, 0.4)' }}>
{view === 'SessionProposalModal' && <SessionProposalModal />}
{view === 'SessionRequestModal' && <SessionRequestModal />}
</NextModal>
)
}

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

@ -6,12 +6,16 @@ import { useCallback, useEffect } from 'react'
export default function useWalletConnectEventsManager(initialized: boolean) {
const onSessionProposal = useCallback((proposal: SessionTypes.Proposal) => {
console.log(proposal)
ModalStore.open('SessionProposalModal', { proposal })
}, [])
const onSessionCreated = useCallback((created: SessionTypes.Created) => {
// ModalStore.open('SessionCreatedModal', { created })
// TODO show successful feedback here
}, [])
const onSessionRequest = useCallback(async (request: SessionTypes.RequestEvent) => {
const requestSession = await client?.session.get(request.topic)
ModalStore.open('SessionRequestModal', { request, requestSession })
}, [])
useEffect(() => {
@ -21,6 +25,9 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
// 2. Open session created modal to show success feedback
client.on(CLIENT_EVENTS.session.created, onSessionCreated)
// 3. Open rpc request handling modal
client.on(CLIENT_EVENTS.session.request, onSessionRequest)
}
}, [initialized, onSessionProposal, onSessionCreated])
}, [initialized, onSessionProposal, onSessionCreated, onSessionRequest])
}

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

@ -7,11 +7,13 @@ import { proxy } from 'valtio'
interface ModalData {
proposal?: SessionTypes.Proposal
created?: SessionTypes.Created
request?: SessionTypes.RequestEvent
requestSession?: SessionTypes.Settled
}
interface State {
open: boolean
view?: 'SessionProposalModal' | 'SessionCreatedModal'
view?: 'SessionProposalModal' | 'SessionRequestModal'
data?: ModalData
}
@ -19,9 +21,7 @@ interface State {
* State
*/
const state = proxy<State>({
view: undefined,
open: false,
data: undefined
open: false
})
/**

82
wallets/react-wallet-v2/src/views/SessionRequestModal.tsx Normal file
View File

@ -0,0 +1,82 @@
import ModalStore from '@/store/ModalStore'
import { CHAIN, MAINNET_CHAINS } from '@/utils/EIP155ChainsUtil'
import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Fragment } from 'react'
export default function SessionRequestModal() {
const request = ModalStore.state.data?.request
const requestSession = ModalStore.state.data?.requestSession
if (!request || !requestSession) {
return <Text>Missing request data</Text>
}
const {
chainId,
request: { method }
} = request
const { protocol } = requestSession.relay
const { name, icons, url } = requestSession.peer.metadata
async function onApprove() {}
async function onReject() {}
return (
<Fragment>
<Modal.Header>
<Text h3>Request</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">{MAINNET_CHAINS[chainId as CHAIN]?.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>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>
Reject
</Button>
<Button auto flat color="success" onClick={onApprove}>
Approve
</Button>
</Modal.Footer>
</Fragment>
)
}

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

@ -24,6 +24,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.6.2":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
dependencies:
regenerator-runtime "^0.13.4"
"@emotion/is-prop-valid@^0.8.2":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@ -477,12 +484,16 @@
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.10.tgz#5c0ba98b695c4be44d8793aff42971a0dac65c2d"
integrity sha512-oUIWRKd24jFLRWUYO1CZmML5+32BcpVfqhimGaaZIXcOkfQW+iqiAzdqsv688zaGtyKGeB9ZtiK3NDf+Q0v+Vw==
"@nextui-org/react@1.0.2-beta.3":
version "1.0.2-beta.3"
resolved "https://registry.yarnpkg.com/@nextui-org/react/-/react-1.0.2-beta.3.tgz#d224654aa54a9b316922fdfacdd79d8ffa1d9797"
integrity sha512-YkAXBc4f3Qfzf409BFZi9MAKj0lWArTb1L2ZASAKoBQKsxtRbVTko18Losjsjun/WwK4X8RiR9e8XlzYPm2RZA==
"@nextui-org/react@1.0.2-beta.4":
version "1.0.2-beta.4"
resolved "https://registry.yarnpkg.com/@nextui-org/react/-/react-1.0.2-beta.4.tgz#fe88e4ed2335e0bf10dfb065474a5d1f66ba6766"
integrity sha512-14QFPOJwVn6c6WWmLyud/458DoVolWDBhq1wpMCe3o0dWdtNoOr/YwxiuZjSNwtypeDrroMbXcEIY4AoGzLV1w==
dependencies:
"@babel/runtime" "7.9.6"
"@react-aria/focus" "3.5.0"
"@react-aria/label" "3.2.1"
"@react-aria/ssr" "3.1.0"
"@react-aria/utils" "3.11.0"
"@stitches/react" "1.2.6"
"@nodelib/fs.scandir@2.1.5":
@ -506,6 +517,73 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@react-aria/focus@3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.0.tgz#02b85f97d6114af1eccc0902ce40723b626cb7f9"
integrity sha512-Eib75Q6QgQdn8VVVByg5Vipaaj/C//8Bs++sQY7nkomRx4sdArOnXbDppul3YHP6mRfU9VRLvAigEUlReQF/Xw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/interactions" "^3.6.0"
"@react-aria/utils" "^3.9.0"
"@react-types/shared" "^3.9.0"
clsx "^1.1.1"
"@react-aria/interactions@^3.6.0":
version "3.7.0"
resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.7.0.tgz#eb19c1068b557a6b6df1e1c4abef07de719e9f25"
integrity sha512-Xomchjb9bqvh3ocil+QCEYFSxsTy8PHEz43mNP6z2yuu3UqTpl2FsWfyKgF/Yy0WKVkyV2dO2uz758KJTCLZhw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/utils" "^3.10.0"
"@react-types/shared" "^3.10.0"
"@react-aria/label@3.2.1":
version "3.2.1"
resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.2.1.tgz#e6562259e6b17e3856c4c3e0060903cf705d094b"
integrity sha512-QZ5/dpJKRjB1JtFZfOVd5GUiCpA2yMgmNA6ky6jT5XNAo7H14QqGRFUGDTLAQYGd+Bc3s+NayOT3NKUYur/3Xw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/utils" "^3.10.0"
"@react-types/label" "^3.5.0"
"@react-types/shared" "^3.10.0"
"@react-aria/ssr@3.1.0", "@react-aria/ssr@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22"
integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/utils@3.11.0", "@react-aria/utils@^3.10.0", "@react-aria/utils@^3.9.0":
version "3.11.0"
resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.11.0.tgz#215ea23a5435672a822cd713bdb8217972c5c80b"
integrity sha512-4yFA8E9xqDCUlolYSsoyp/qxrkiQrnEqx1BQOrKDuicpW7MBJ39pJC23YFMpyK2a6xEptc6xJEeIEFJXp57jJw==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-aria/ssr" "^3.1.0"
"@react-stately/utils" "^3.3.0"
"@react-types/shared" "^3.10.1"
clsx "^1.1.1"
"@react-stately/utils@^3.3.0":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.3.0.tgz#99866c5788539268a06035acd5925b25bb4cedde"
integrity sha512-f//Y8q0+FFcS04xvCNvbba7WWRLHzj2AegLgdgwTxsnk9Gb+AyuasdRrRY7bGQhdHuEJ7OIiQZ9EQWndDbrTcg==
dependencies:
"@babel/runtime" "^7.6.2"
"@react-types/label@^3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.5.0.tgz#c7093871f42c62e1b5523f61a0856a2f58d4cf2a"
integrity sha512-a9lpQUyV4XwsZv0gV1jPjPWicSSa+DRliuXLTwORirxNLF0kMk89DLYf0a9CZhiEniJYqoqR3laJDvLAFW1x/Q==
dependencies:
"@react-types/shared" "^3.9.0"
"@react-types/shared@^3.10.0", "@react-types/shared@^3.10.1", "@react-types/shared@^3.9.0":
version "3.10.1"
resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.10.1.tgz#16cd3038361dee63f351fa4d0fd25d90480a149b"
integrity sha512-U3dLJtstvOiZ8XLrWdNv9WXuruoDyfIfSXguTs9N0naDdO+M0MIbt/1Hg7Toe43ueAe56GM14IFL+S0/jhv8ow==
"@rushstack/eslint-patch@^1.0.8":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
@ -567,10 +645,10 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
"@types/node@17.0.16":
version "17.0.16"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.16.tgz#e3733f46797b9df9e853ca9f719c8a6f7b84cd26"
integrity sha512-ydLaGVfQOQ6hI1xK2A5nVh8bl0OGoIfYMxPWHqqYe9bTkWCfqiVvZoh2I/QF2sNSkZzZyROBoTefIEI+PB6iIA==
"@types/node@17.0.17":
version "17.0.17"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.17.tgz#a8ddf6e0c2341718d74ee3dc413a13a042c45a0c"
integrity sha512-e8PUNQy1HgJGV3iU/Bp2+D/DXh3PYeyli8LgIwsQcs1Ar1LoaWHSIT6Rw+H2rNJmiq6SNWiDytfx8+gYj7wDHw==
"@types/prop-types@*":
version "15.7.4"
@ -1044,6 +1122,11 @@ chownr@^1.1.1:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
clsx@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
code-point-at@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@ -1614,10 +1697,10 @@ flatted@^3.1.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
framer-motion@6.2.4:
version "6.2.4"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.4.tgz#3d9c61be3fb8381a770efccdb56cc421de662979"
integrity sha512-1UfnSG4c4CefKft6QMYGx8AWt3TtaFoR/Ax4dkuDDD5BDDeIuUm7gesmJrF8GzxeX/i6fMm8+MEdPngUyPVdLA==
framer-motion@6.2.6:
version "6.2.6"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.6.tgz#75277b4944a1234beaf7453da19028bbf4f75cce"
integrity sha512-7eGav5MxEEzDHozQTDY6+psTIOw2i2kM1QVoJOC3bCp9VOKoo+mKR5n7aT5JPh7ksEKFYJYz0GJDils/9S+oLA==
dependencies:
framesync "6.0.1"
hey-listen "^1.0.8"