From eb063aca3a62a05b1d2f5670e221b26bf6cc4438 Mon Sep 17 00:00:00 2001 From: Ilja Date: Fri, 11 Feb 2022 13:48:04 +0200 Subject: [PATCH] session.request modal flow --- wallets/react-wallet-v2/package.json | 6 +- .../react-wallet-v2/src/components/Modal.tsx | 4 +- .../hooks/useWalletConnectEventsManager.ts | 13 ++- .../react-wallet-v2/src/store/ModalStore.ts | 8 +- .../src/views/SessionRequestModal.tsx | 82 ++++++++++++++ wallets/react-wallet-v2/yarn.lock | 107 ++++++++++++++++-- 6 files changed, 196 insertions(+), 24 deletions(-) create mode 100644 wallets/react-wallet-v2/src/views/SessionRequestModal.tsx diff --git a/wallets/react-wallet-v2/package.json b/wallets/react-wallet-v2/package.json index 8568e32..749fdd5 100644 --- a/wallets/react-wallet-v2/package.json +++ b/wallets/react-wallet-v2/package.json @@ -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", diff --git a/wallets/react-wallet-v2/src/components/Modal.tsx b/wallets/react-wallet-v2/src/components/Modal.tsx index 81f489e..52e5239 100644 --- a/wallets/react-wallet-v2/src/components/Modal.tsx +++ b/wallets/react-wallet-v2/src/components/Modal.tsx @@ -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 ( {view === 'SessionProposalModal' && } + {view === 'SessionRequestModal' && } ) } diff --git a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts index 22d720d..8391f77 100644 --- a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts +++ b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts @@ -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]) } diff --git a/wallets/react-wallet-v2/src/store/ModalStore.ts b/wallets/react-wallet-v2/src/store/ModalStore.ts index 2293b49..789269d 100644 --- a/wallets/react-wallet-v2/src/store/ModalStore.ts +++ b/wallets/react-wallet-v2/src/store/ModalStore.ts @@ -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({ - view: undefined, - open: false, - data: undefined + open: false }) /** diff --git a/wallets/react-wallet-v2/src/views/SessionRequestModal.tsx b/wallets/react-wallet-v2/src/views/SessionRequestModal.tsx new file mode 100644 index 0000000..ddf411f --- /dev/null +++ b/wallets/react-wallet-v2/src/views/SessionRequestModal.tsx @@ -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 Missing request data + } + + const { + chainId, + request: { method } + } = request + const { protocol } = requestSession.relay + const { name, icons, url } = requestSession.peer.metadata + + async function onApprove() {} + + async function onReject() {} + + return ( + + + Request + + + + + + + + + + {name} + {url} + + + + + + + + Blockchain + {MAINNET_CHAINS[chainId as CHAIN]?.name ?? chainId} + + + + + + + + Method + {method} + + + + + + + + Relay Protocol + {protocol} + + + + + + + + + + + ) +} diff --git a/wallets/react-wallet-v2/yarn.lock b/wallets/react-wallet-v2/yarn.lock index 454ed1d..48026dc 100644 --- a/wallets/react-wallet-v2/yarn.lock +++ b/wallets/react-wallet-v2/yarn.lock @@ -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"