feat(react-wallet-v2): adds parallel support for SignClient v1 (#73)

2022-11-07 14:29:17 +01:00 · 2022-11-07 14:29:17 +01:00 · 7721842601
commit 7721842601
parent b94542bee2
14 changed files with 688 additions and 21 deletions
--- a/wallets/react-wallet-v2/package.json
+++ b/wallets/react-wallet-v2/package.json
@ -19,6 +19,8 @@
    "@nextui-org/react": "1.0.8-beta.5",
    "@polkadot/keyring": "^10.1.2",
    "@solana/web3.js": "1.43.0",
+    "@walletconnect/client": "1.8.0",
+    "@walletconnect/legacy-types": "^2.0.0-rc.0",
    "@walletconnect/sign-client": "2.1.0",
    "@walletconnect/utils": "2.1.0",
    "bs58": "5.0.0",
--- a/wallets/react-wallet-v2/src/components/Modal.tsx
+++ b/wallets/react-wallet-v2/src/components/Modal.tsx
@ -9,6 +9,10 @@ import SessionSignSolanaModal from '@/views/SessionSignSolanaModal'
 import SessionSignElrondModal from '@/views/SessionSignElrondModal'
 import SessionSignTypedDataModal from '@/views/SessionSignTypedDataModal'
 import SessionUnsuportedMethodModal from '@/views/SessionUnsuportedMethodModal'
+import LegacySessionProposalModal from '@/views/LegacySessionProposalModal'
+import LegacySessionSignModal from '@/views/LegacySessionSignModal'
+import LegacySessionSignTypedDataModal from '@/views/LegacySessionSignTypedDataModal'
+import LegacySessionSendTransactionModal from '@/views/LegacySessionSendTransactionModal'
 import { Modal as NextModal } from '@nextui-org/react'
 import { useSnapshot } from 'valtio'

@ -27,6 +31,10 @@ export default function Modal() {
      {view === 'SessionSignPolkadotModal' && <SessionSignPolkadotModal />}
      {view === 'SessionSignNearModal' && <SessionSignNearModal />}
      {view === 'SessionSignElrondModal' && <SessionSignElrondModal />}
+      {view === 'LegacySessionProposalModal' && <LegacySessionProposalModal />}
+      {view === 'LegacySessionSignModal' && <LegacySessionSignModal />}
+      {view === 'LegacySessionSignTypedDataModal' && <LegacySessionSignTypedDataModal />}
+      {view === 'LegacySessionSendTransactionModal' && <LegacySessionSendTransactionModal />}
    </NextModal>
  )
 }
--- a/wallets/react-wallet-v2/src/components/SessionCard.tsx
+++ b/wallets/react-wallet-v2/src/components/SessionCard.tsx
@ -18,7 +18,7 @@ interface IProps {
 */
 export default function SessionCard({ logo, name, url, topic }: IProps) {
  return (
-    <NextLink href={`/session?topic=${topic}`} passHref>
+    <NextLink href={topic ? `/session?topic=${topic}` : '#'} passHref>
      <Card
        clickable
        bordered
--- a/wallets/react-wallet-v2/src/pages/_app.tsx
+++ b/wallets/react-wallet-v2/src/pages/_app.tsx
@ -2,6 +2,7 @@ import Layout from '@/components/Layout'
 import Modal from '@/components/Modal'
 import useInitialization from '@/hooks/useInitialization'
 import useWalletConnectEventsManager from '@/hooks/useWalletConnectEventsManager'
+import { createLegacySignClient } from '@/utils/LegacyWalletConnectUtil'
 import { createTheme, NextUIProvider } from '@nextui-org/react'
 import { AppProps } from 'next/app'
 import '../../public/main.css'
@ -13,6 +14,9 @@ export default function App({ Component, pageProps }: AppProps) {
  // Step 2 - Once initialized, set up wallet connect event manager
  useWalletConnectEventsManager(initialized)

+  // Backwards compatibility only - create a legacy v1 SignClient instance.
+  createLegacySignClient()
+
  return (
    <NextUIProvider theme={createTheme({ type: 'dark' })}>
      <Layout initialized={initialized}>
--- a/wallets/react-wallet-v2/src/pages/sessions.tsx
+++ b/wallets/react-wallet-v2/src/pages/sessions.tsx
@ -1,32 +1,48 @@
 import PageHeader from '@/components/PageHeader'
 import SessionCard from '@/components/SessionCard'
+import { legacySignClient } from '@/utils/LegacyWalletConnectUtil'
 import { signClient } from '@/utils/WalletConnectUtil'
 import { Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'

 export default function SessionsPage() {
  const [sessions, setSessions] = useState(signClient.session.values)
+  const [legacySession, setLegacySession] = useState(legacySignClient?.session)
+
+  if (!legacySession && !sessions.length) {
+    return (
+      <Fragment>
+        <PageHeader title="Sessions" />
+        <Text css={{ opacity: '0.5', textAlign: 'center', marginTop: '$20' }}>No sessions</Text>
+      </Fragment>
+    )
+  }

  return (
    <Fragment>
      <PageHeader title="Sessions" />
-      {sessions.length ? (
-        sessions.map(session => {
-          const { name, icons, url } = session.peer.metadata
+      {legacySession ? (
+        <SessionCard
+          name={legacySession.peerMeta?.name + ' (v1/legacy)'}
+          url={legacySession.peerMeta?.url}
+          logo={legacySession.peerMeta?.icons[0]}
+        />
+      ) : null}
+      {sessions.length
+        ? sessions.map(session => {
+            const { name, icons, url } = session.peer.metadata

-          return (
-            <SessionCard
-              key={session.topic}
-              topic={session.topic}
-              name={name}
-              logo={icons[0]}
-              url={url}
-            />
-          )
-        })
-      ) : (
-        <Text css={{ opacity: '0.5', textAlign: 'center', marginTop: '$20' }}>No sessions</Text>
-      )}
+            return (
+              <SessionCard
+                key={session.topic}
+                topic={session.topic}
+                name={name}
+                logo={icons[0]}
+                url={url}
+              />
+            )
+          })
+        : null}
    </Fragment>
  )
 }
--- a/wallets/react-wallet-v2/src/pages/walletconnect.tsx
+++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx
@ -1,6 +1,8 @@
+import { parseUri } from '@walletconnect/utils'
 import PageHeader from '@/components/PageHeader'
 import QrReader from '@/components/QrReader'
 import { signClient } from '@/utils/WalletConnectUtil'
+import { createLegacySignClient } from '@/utils/LegacyWalletConnectUtil'
 import { Button, Input, Loading, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'

@ -11,7 +13,14 @@ export default function WalletConnectPage() {
  async function onConnect(uri: string) {
    try {
      setLoading(true)
-      await signClient.pair({ uri })
+      const { version } = parseUri(uri)
+
+      // Route the provided URI to the v1 SignClient if URI version indicates it, else use v2.
+      if (version === 1) {
+        createLegacySignClient({ uri })
+      } else {
+        await signClient.pair({ uri })
+      }
    } catch (err: unknown) {
      alert(err)
    } finally {
--- a/wallets/react-wallet-v2/src/store/ModalStore.ts
+++ b/wallets/react-wallet-v2/src/store/ModalStore.ts
@ -1,4 +1,5 @@
 import { SessionTypes, SignClientTypes } from '@walletconnect/types'
+import { IClientMeta, IWalletConnectSession } from '@walletconnect/legacy-types'
 import { proxy } from 'valtio'

 /**
@ -8,6 +9,12 @@ interface ModalData {
  proposal?: SignClientTypes.EventArguments['session_proposal']
  requestEvent?: SignClientTypes.EventArguments['session_request']
  requestSession?: SessionTypes.Struct
+  legacyProposal?: {
+    id: number
+    params: [{ chainId: number; peerId: string; peerMeta: IClientMeta }]
+  }
+  legacyCallRequestEvent?: { id: number; method: string; params: any[] }
+  legacyRequestSession?: IWalletConnectSession
 }

 interface State {
@ -23,6 +30,10 @@ interface State {
    | 'SessionSignPolkadotModal'
    | 'SessionSignNearModal'
    | 'SessionSignElrondModal'
+    | 'LegacySessionProposalModal'
+    | 'LegacySessionSignModal'
+    | 'LegacySessionSignTypedDataModal'
+    | 'LegacySessionSendTransactionModal'
  data?: ModalData
 }

--- a/wallets/react-wallet-v2/src/utils/HelperUtil.ts
+++ b/wallets/react-wallet-v2/src/utils/HelperUtil.ts
@ -67,7 +67,7 @@ export function getWalletAddressFromParams(addresses: string[], params: any) {
  let address = ''

  addresses.forEach(addr => {
-    if (paramsString.includes(addr)) {
+    if (paramsString.toLowerCase().includes(addr.toLowerCase())) {
      address = addr
    }
  })
--- a/wallets/react-wallet-v2/src/utils/LegacyWalletConnectUtil.ts
+++ b/wallets/react-wallet-v2/src/utils/LegacyWalletConnectUtil.ts
@ -0,0 +1,96 @@
+import { IWalletConnectSession } from '@walletconnect/legacy-types'
+import LegacySignClient from '@walletconnect/client'
+import ModalStore from '@/store/ModalStore'
+import { EIP155_SIGNING_METHODS } from '@/data/EIP155Data'
+
+export let legacySignClient: LegacySignClient
+
+export function createLegacySignClient({ uri }: { uri?: string } = {}) {
+  // If URI is passed always create a new session,
+  // otherwise fall back to cached session if client isn't already instantiated.
+  if (uri) {
+    deleteCachedLegacySession()
+    legacySignClient = new LegacySignClient({ uri })
+  } else if (!legacySignClient && getCachedLegacySession()) {
+    const session = getCachedLegacySession()
+    legacySignClient = new LegacySignClient({ session })
+  } else {
+    return
+  }
+
+  legacySignClient.on('session_request', (error, payload) => {
+    if (error) {
+      throw new Error(`legacySignClient > session_request failed: ${error}`)
+    }
+    ModalStore.open('LegacySessionProposalModal', { legacyProposal: payload })
+  })
+
+  legacySignClient.on('connect', () => {
+    console.log('legacySignClient > connect')
+  })
+
+  legacySignClient.on('error', error => {
+    throw new Error(`legacySignClient > on error: ${error}`)
+  })
+
+  legacySignClient.on('call_request', (error, payload) => {
+    if (error) {
+      throw new Error(`legacySignClient > call_request failed: ${error}`)
+    }
+    onCallRequest(payload)
+  })
+
+  legacySignClient.on('disconnect', async () => {
+    deleteCachedLegacySession()
+  })
+}
+
+const onCallRequest = async (payload: { id: number; method: string; params: any[] }) => {
+  switch (payload.method) {
+    case EIP155_SIGNING_METHODS.ETH_SIGN:
+    case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
+      return ModalStore.open('LegacySessionSignModal', {
+        legacyCallRequestEvent: payload,
+        legacyRequestSession: legacySignClient.session
+      })
+
+    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('LegacySessionSignTypedDataModal', {
+        legacyCallRequestEvent: payload,
+        legacyRequestSession: legacySignClient.session
+      })
+
+    case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
+    case EIP155_SIGNING_METHODS.ETH_SIGN_TRANSACTION:
+      return ModalStore.open('LegacySessionSendTransactionModal', {
+        legacyCallRequestEvent: payload,
+        legacyRequestSession: legacySignClient.session
+      })
+
+    default:
+      alert(`${payload.method} is not supported for WalletConnect v1`)
+  }
+}
+
+function getCachedLegacySession(): IWalletConnectSession | undefined {
+  if (typeof window === 'undefined') return
+
+  const local = window.localStorage ? window.localStorage.getItem('walletconnect') : null
+
+  let session = null
+  if (local) {
+    try {
+      session = JSON.parse(local)
+    } catch (error) {
+      throw error
+    }
+  }
+  return session
+}
+
+function deleteCachedLegacySession(): void {
+  if (typeof window === 'undefined') return
+  window.localStorage.removeItem('walletconnect')
+}
--- a/wallets/react-wallet-v2/src/views/LegacySessionProposalModal.tsx
+++ b/wallets/react-wallet-v2/src/views/LegacySessionProposalModal.tsx
@ -0,0 +1,105 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
+import ProposalSelectSection from '@/components/ProposalSelectSection'
+import RequestModalContainer from '@/components/RequestModalContainer'
+import ModalStore from '@/store/ModalStore'
+import { eip155Addresses } from '@/utils/EIP155WalletUtil'
+import { isEIP155Chain } from '@/utils/HelperUtil'
+import { legacySignClient } from '@/utils/LegacyWalletConnectUtil'
+import { Button, Divider, Modal, Text } from '@nextui-org/react'
+import { getSdkError } from '@walletconnect/utils'
+import { Fragment, useState } from 'react'
+
+export default function LegacySessionProposalModal() {
+  const [selectedAccounts, setSelectedAccounts] = useState<Record<string, string[]>>({})
+  const hasSelected = Object.keys(selectedAccounts).length
+
+  // Get proposal data and wallet address from store
+  const proposal = ModalStore.state.data?.legacyProposal
+
+  // Ensure proposal is defined
+  if (!proposal) {
+    return <Text>Missing proposal data</Text>
+  }
+
+  // Get required proposal data
+  const { id, params } = proposal
+  const [{ chainId, peerMeta }] = params
+
+  // Add / remove address from EIP155 selection
+  function onSelectAccount(chain: string, account: string) {
+    if (selectedAccounts[chain]?.includes(account)) {
+      const newSelectedAccounts = selectedAccounts[chain]?.filter(a => a !== account)
+      setSelectedAccounts(prev => ({
+        ...prev,
+        [chain]: newSelectedAccounts
+      }))
+    } else {
+      const prevChainAddresses = selectedAccounts[chain] ?? []
+      setSelectedAccounts(prev => ({
+        ...prev,
+        [chain]: [...prevChainAddresses, account]
+      }))
+    }
+  }
+
+  // Hanlde approve action, construct session namespace
+  async function onApprove() {
+    if (proposal) {
+      legacySignClient.approveSession({
+        accounts: selectedAccounts['eip155'],
+        chainId: chainId ?? 1
+      })
+    }
+    ModalStore.close()
+  }
+
+  // Handle reject action
+  function onReject() {
+    if (proposal) {
+      legacySignClient.rejectSession(getSdkError('USER_REJECTED_METHODS'))
+    }
+    ModalStore.close()
+  }
+
+  // Render account selection checkboxes based on chain
+  function renderAccountSelection(chain: string) {
+    if (isEIP155Chain(chain)) {
+      return (
+        <ProposalSelectSection
+          addresses={eip155Addresses}
+          selectedAddresses={selectedAccounts[chain]}
+          onSelect={onSelectAccount}
+          chain={chain}
+        />
+      )
+    }
+  }
+
+  return (
+    <Fragment>
+      <RequestModalContainer title="Session Proposal">
+        <ProjectInfoCard metadata={peerMeta} />
+        <Divider y={2} />
+        {renderAccountSelection('eip155')}
+        <Divider y={2} />
+      </RequestModalContainer>
+
+      <Modal.Footer>
+        <Button auto flat color="error" onClick={onReject}>
+          Reject
+        </Button>
+
+        <Button
+          auto
+          flat
+          color="success"
+          onClick={onApprove}
+          disabled={!hasSelected}
+          css={{ opacity: hasSelected ? 1 : 0.4 }}
+        >
+          Approve
+        </Button>
+      </Modal.Footer>
+    </Fragment>
+  )
+}
--- a/wallets/react-wallet-v2/src/views/LegacySessionSendTransactionModal.tsx
+++ b/wallets/react-wallet-v2/src/views/LegacySessionSendTransactionModal.tsx
@ -0,0 +1,96 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequestDataCard from '@/components/RequestDataCard'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
+import ModalStore from '@/store/ModalStore'
+import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
+import { legacySignClient } from '@/utils/LegacyWalletConnectUtil'
+import { Button, Divider, Loading, Modal, Text } from '@nextui-org/react'
+import { Fragment, useState } from 'react'
+
+export default function LegacySessionSendTransactionModal() {
+  const [loading, setLoading] = useState(false)
+
+  // Get request and wallet data from store
+  const requestEvent = ModalStore.state.data?.legacyCallRequestEvent
+  const requestSession = ModalStore.state.data?.legacyRequestSession
+
+  // Ensure request and wallet are defined
+  if (!requestEvent || !requestSession) {
+    return <Text>Missing request data</Text>
+  }
+
+  // Get required proposal data
+
+  const { id, method, params } = requestEvent
+  const transaction = params[0]
+
+  // // Remove unneeded key coming from v1 sample dapp that throws Ethers.
+  if (transaction['gas']) delete transaction['gas']
+
+  // Handle approve action
+  async function onApprove() {
+    if (requestEvent) {
+      const { result } = await approveEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+
+      legacySignClient.approveRequest({
+        id,
+        result
+      })
+      ModalStore.close()
+    }
+  }
+
+  // Handle reject action
+  async function onReject() {
+    if (requestEvent) {
+      const { error } = rejectEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+      legacySignClient.rejectRequest({
+        id,
+        error
+      })
+      ModalStore.close()
+    }
+  }
+
+  return (
+    <Fragment>
+      <RequestModalContainer title="Send / Sign Transaction">
+        <ProjectInfoCard metadata={requestSession.peerMeta!} />
+
+        <Divider y={2} />
+
+        <RequestDataCard data={transaction} />
+
+        <Divider y={2} />
+
+        <RequesDetailsCard
+          chains={['eip155:' + legacySignClient.chainId]}
+          protocol={legacySignClient.protocol}
+        />
+
+        <Divider y={2} />
+
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
+
+      <Modal.Footer>
+        <Button auto flat color="error" onClick={onReject} disabled={loading}>
+          Reject
+        </Button>
+        <Button auto flat color="success" onClick={onApprove} disabled={loading}>
+          {loading ? <Loading size="sm" color="success" /> : 'Approve'}
+        </Button>
+      </Modal.Footer>
+    </Fragment>
+  )
+}
--- a/wallets/react-wallet-v2/src/views/LegacySessionSignModal.tsx
+++ b/wallets/react-wallet-v2/src/views/LegacySessionSignModal.tsx
@ -0,0 +1,97 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
+import ModalStore from '@/store/ModalStore'
+import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
+import { getSignParamsMessage } from '@/utils/HelperUtil'
+import { legacySignClient } from '@/utils/LegacyWalletConnectUtil'
+import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Fragment } from 'react'
+
+export default function LegacySessionSignModal() {
+  // Get request and wallet data from store
+  const requestEvent = ModalStore.state.data?.legacyCallRequestEvent
+  const requestSession = ModalStore.state.data?.legacyRequestSession
+
+  // Ensure request and wallet are defined
+  if (!requestEvent || !requestSession) {
+    return <Text>Missing request data</Text>
+  }
+
+  // Get required request data
+  const { id, method, params } = requestEvent
+
+  // Get message, convert it to UTF8 string if it is valid hex
+  const message = getSignParamsMessage(params)
+
+  // Handle approve action (logic varies based on request method)
+  async function onApprove() {
+    if (requestEvent) {
+      const { result } = await approveEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+
+      legacySignClient.approveRequest({
+        id,
+        result
+      })
+      ModalStore.close()
+    }
+  }
+
+  // Handle reject action
+  async function onReject() {
+    if (requestEvent) {
+      const { error } = rejectEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+      legacySignClient.rejectRequest({
+        id,
+        error
+      })
+      ModalStore.close()
+    }
+  }
+
+  return (
+    <Fragment>
+      <RequestModalContainer title="Sign Message">
+        <ProjectInfoCard metadata={requestSession.peerMeta!} />
+
+        <Divider y={2} />
+
+        <RequesDetailsCard
+          chains={['eip155:' + legacySignClient.chainId]}
+          protocol={legacySignClient.protocol}
+        />
+
+        <Divider y={2} />
+
+        <Row>
+          <Col>
+            <Text h5>Message</Text>
+            <Text color="$gray400">{message}</Text>
+          </Col>
+        </Row>
+
+        <Divider y={2} />
+
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
+
+      <Modal.Footer>
+        <Button auto flat color="error" onClick={onReject}>
+          Reject
+        </Button>
+        <Button auto flat color="success" onClick={onApprove}>
+          Approve
+        </Button>
+      </Modal.Footer>
+    </Fragment>
+  )
+}
--- a/wallets/react-wallet-v2/src/views/LegacySessionSignTypedDataModal.tsx
+++ b/wallets/react-wallet-v2/src/views/LegacySessionSignTypedDataModal.tsx
@ -0,0 +1,93 @@
+import ProjectInfoCard from '@/components/ProjectInfoCard'
+import RequestDataCard from '@/components/RequestDataCard'
+import RequesDetailsCard from '@/components/RequestDetalilsCard'
+import RequestMethodCard from '@/components/RequestMethodCard'
+import RequestModalContainer from '@/components/RequestModalContainer'
+import ModalStore from '@/store/ModalStore'
+import { approveEIP155Request, rejectEIP155Request } from '@/utils/EIP155RequestHandlerUtil'
+import { getSignTypedDataParamsData } from '@/utils/HelperUtil'
+import { legacySignClient } from '@/utils/LegacyWalletConnectUtil'
+import { Button, Divider, Modal, Text } from '@nextui-org/react'
+import { Fragment } from 'react'
+
+export default function LegacySessionSignTypedDataModal() {
+  // Get request and wallet data from store
+  const requestEvent = ModalStore.state.data?.legacyCallRequestEvent
+  const requestSession = ModalStore.state.data?.legacyRequestSession
+
+  // Ensure request and wallet are defined
+  if (!requestEvent || !requestSession) {
+    return <Text>Missing request data</Text>
+  }
+
+  // Get required request data
+  const { id, method, params } = requestEvent
+
+  // Get data
+  const data = getSignTypedDataParamsData(params)
+
+  // Handle approve action (logic varies based on request method)
+  async function onApprove() {
+    if (requestEvent) {
+      const { result } = await approveEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+
+      legacySignClient.approveRequest({
+        id,
+        result
+      })
+      ModalStore.close()
+    }
+  }
+
+  // Handle reject action
+  async function onReject() {
+    if (requestEvent) {
+      const { error } = rejectEIP155Request({
+        id,
+        topic: '',
+        params: { request: { method, params }, chainId: '1' }
+      })
+      legacySignClient.rejectRequest({
+        id,
+        error
+      })
+      ModalStore.close()
+    }
+  }
+
+  return (
+    <Fragment>
+      <RequestModalContainer title="Sign Typed Data">
+        <ProjectInfoCard metadata={requestSession.peerMeta!} />
+
+        <Divider y={2} />
+
+        <RequesDetailsCard
+          chains={['eip155:' + legacySignClient.chainId]}
+          protocol={legacySignClient.protocol}
+        />
+
+        <Divider y={2} />
+
+        <RequestDataCard data={data} />
+
+        <Divider y={2} />
+
+        <RequestMethodCard methods={[method]} />
+      </RequestModalContainer>
+
+      <Modal.Footer>
+        <Button auto flat color="error" onClick={onReject}>
+          Reject
+        </Button>
+        <Button auto flat color="success" onClick={onApprove}>
+          Approve
+        </Button>
+      </Modal.Footer>
+    </Fragment>
+  )
+}
--- a/wallets/react-wallet-v2/yarn.lock
+++ b/wallets/react-wallet-v2/yarn.lock
@ -2214,6 +2214,27 @@
    "@typescript-eslint/types" "5.40.1"
    eslint-visitor-keys "^3.3.0"

+"@walletconnect/browser-utils@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/browser-utils/-/browser-utils-1.8.0.tgz#33c10e777aa6be86c713095b5206d63d32df0951"
+  integrity sha512-Wcqqx+wjxIo9fv6eBUFHPsW1y/bGWWRboni5dfD8PtOmrihrEpOCmvRJe4rfl7xgJW8Ea9UqKEaq0bIRLHlK4A==
+  dependencies:
+    "@walletconnect/safe-json" "1.0.0"
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/window-getters" "1.0.0"
+    "@walletconnect/window-metadata" "1.0.0"
+    detect-browser "5.2.0"
+
+"@walletconnect/client@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.8.0.tgz#6f46b5499c7c861c651ff1ebe5da5b66225ca696"
+  integrity sha512-svyBQ14NHx6Cs2j4TpkQaBI/2AF4+LXz64FojTjMtV4VMMhl81jSO1vNeg+yYhQzvjcGH/GpSwixjyCW0xFBOQ==
+  dependencies:
+    "@walletconnect/core" "^1.8.0"
+    "@walletconnect/iso-crypto" "^1.8.0"
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/utils" "^1.8.0"
+
 "@walletconnect/core@2.1.0":
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.1.0.tgz#64a86b171a7b0999243043e9201b3c6e4d802bc0"
@ -2236,6 +2257,34 @@
    pino-pretty "4.3.0"
    uint8arrays "3.1.0"

+"@walletconnect/core@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-1.8.0.tgz#6b2748b90c999d9d6a70e52e26a8d5e8bfeaa81e"
+  integrity sha512-aFTHvEEbXcZ8XdWBw6rpQDte41Rxwnuk3SgTD8/iKGSRTni50gI9S3YEzMj05jozSiOBxQci4pJDMVhIUMtarw==
+  dependencies:
+    "@walletconnect/socket-transport" "^1.8.0"
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/utils" "^1.8.0"
+
+"@walletconnect/crypto@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/crypto/-/crypto-1.0.2.tgz#3fcc2b2cde6f529a19eadd883dc555cd0e861992"
+  integrity sha512-+OlNtwieUqVcOpFTvLBvH+9J9pntEqH5evpINHfVxff1XIgwV55PpbdvkHu6r9Ib4WQDOFiD8OeeXs1vHw7xKQ==
+  dependencies:
+    "@walletconnect/encoding" "^1.0.1"
+    "@walletconnect/environment" "^1.0.0"
+    "@walletconnect/randombytes" "^1.0.2"
+    aes-js "^3.1.2"
+    hash.js "^1.1.7"
+
+"@walletconnect/encoding@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/encoding/-/encoding-1.0.1.tgz#93c18ce9478c3d5283dbb88c41eb2864b575269a"
+  integrity sha512-8opL2rs6N6E3tJfsqwS82aZQDL3gmupWUgmvuZ3CGU7z/InZs3R9jkzH8wmYtpbq0sFK3WkJkQRZFFk4BkrmFA==
+  dependencies:
+    is-typedarray "1.0.0"
+    typedarray-to-buffer "3.1.5"
+
 "@walletconnect/environment@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.0.tgz#c4545869fa9c389ec88c364e1a5f8178e8ab5034"
@ -2256,6 +2305,15 @@
    "@walletconnect/events" "^1.0.0"
    "@walletconnect/time" "^1.0.1"

+"@walletconnect/iso-crypto@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/iso-crypto/-/iso-crypto-1.8.0.tgz#44ddf337c4f02837c062dbe33fa7ab36789df451"
+  integrity sha512-pWy19KCyitpfXb70hA73r9FcvklS+FvO9QUIttp3c2mfW8frxgYeRXfxLRCIQTkaYueRKvdqPjbyhPLam508XQ==
+  dependencies:
+    "@walletconnect/crypto" "^1.0.2"
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/utils" "^1.8.0"
+
 "@walletconnect/jsonrpc-provider@1.0.5":
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.5.tgz#1a66053b6f083a9885a32b7c2c8f6a376f1a4458"
@ -2264,7 +2322,7 @@
    "@walletconnect/jsonrpc-utils" "^1.0.3"
    "@walletconnect/safe-json" "^1.0.0"

-"@walletconnect/jsonrpc-types@1.0.1", "@walletconnect/jsonrpc-types@^1.0.1":
+"@walletconnect/jsonrpc-types@1.0.1", "@walletconnect/jsonrpc-types@^1.0.0", "@walletconnect/jsonrpc-types@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.1.tgz#a96b4bb2bcc8838a70e06f15c1b5ab11c47d8e95"
  integrity sha512-+6coTtOuChCqM+AoYyi4Q83p9l/laI6NvuM2/AHaZFuf0gT0NjW7IX2+86qGyizn7Ptq4AYZmfxurAxTnhefuw==
@ -2296,6 +2354,13 @@
    localStorage "^1.0.4"
    safe-json-utils "^1.1.1"

+"@walletconnect/legacy-types@^2.0.0-rc.0":
+  version "2.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/legacy-types/-/legacy-types-2.0.0-rc.0.tgz#a4ee908501b943f5ceae19b3ed13e400c3a09aa0"
+  integrity sha512-9dDfZ+jTOycOSm4+HmcDj5T8qotqY96BaEU/LdQ6H2M/mBoYLkPLMlaNLoqIpSm+ebOj9CF0T6B251ZAZoo7/Q==
+  dependencies:
+    "@walletconnect/jsonrpc-types" "^1.0.0"
+
 "@walletconnect/logger@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-1.0.1.tgz#680e45099b62ec20262a7f87ff374f73d08109be"
@ -2303,6 +2368,15 @@
  dependencies:
    pino "^6.7.0"

+"@walletconnect/randombytes@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/randombytes/-/randombytes-1.0.2.tgz#95c644251a15e6675f58fbffc9513a01486da49c"
+  integrity sha512-ivgOtAyqQnN0rLQmOFPemsgYGysd/ooLfaDA/ACQ3cyqlca56t3rZc7pXfqJOIETx/wSyoF5XbwL+BqYodw27A==
+  dependencies:
+    "@walletconnect/encoding" "^1.0.1"
+    "@walletconnect/environment" "^1.0.0"
+    randombytes "^2.1.0"
+
 "@walletconnect/relay-api@1.0.6":
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.6.tgz#6972b20a0fceee68f164a2d65064eaf458d4d27d"
@ -2343,6 +2417,15 @@
    pino "6.7.0"
    pino-pretty "4.3.0"

+"@walletconnect/socket-transport@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/socket-transport/-/socket-transport-1.8.0.tgz#9a1128a249628a0be11a0979b522fe82b44afa1b"
+  integrity sha512-5DyIyWrzHXTcVp0Vd93zJ5XMW61iDM6bcWT4p8DTRfFsOtW46JquruMhxOLeCOieM4D73kcr3U7WtyR4JUsGuQ==
+  dependencies:
+    "@walletconnect/types" "^1.8.0"
+    "@walletconnect/utils" "^1.8.0"
+    ws "7.5.3"
+
 "@walletconnect/time@1.0.1", "@walletconnect/time@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.1.tgz#645f596887e67c56522edbc2b170d46a97c87ce0"
@ -2358,6 +2441,11 @@
    "@walletconnect/jsonrpc-types" "1.0.1"
    "@walletconnect/keyvaluestorage" "1.0.1-rc.2"

+"@walletconnect/types@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.8.0.tgz#3f5e85b2d6b149337f727ab8a71b8471d8d9a195"
+  integrity sha512-Cn+3I0V0vT9ghMuzh1KzZvCkiAxTq+1TR2eSqw5E5AVWfmCtECFkVZBP6uUJZ8YjwLqXheI+rnjqPy7sVM4Fyg==
+
 "@walletconnect/utils@2.1.0":
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.1.0.tgz#cb771e1083c4d63056ffc123fc23cb37e054dc04"
@ -2379,6 +2467,19 @@
    query-string "7.1.1"
    uint8arrays "3.1.0"

+"@walletconnect/utils@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-1.8.0.tgz#2591a197c1fa7429941fe428876088fda6632060"
+  integrity sha512-zExzp8Mj1YiAIBfKNm5u622oNw44WOESzo6hj+Q3apSMIb0Jph9X3GDIdbZmvVZsNPxWDL7uodKgZcCInZv2vA==
+  dependencies:
+    "@walletconnect/browser-utils" "^1.8.0"
+    "@walletconnect/encoding" "^1.0.1"
+    "@walletconnect/jsonrpc-utils" "^1.0.3"
+    "@walletconnect/types" "^1.8.0"
+    bn.js "4.11.8"
+    js-sha3 "0.8.0"
+    query-string "6.13.5"
+
 "@walletconnect/window-getters@1.0.0", "@walletconnect/window-getters@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.0.tgz#1053224f77e725dfd611c83931b5f6c98c32bfc8"
@ -2414,6 +2515,11 @@ aes-js@3.0.0:
  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==

+aes-js@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
+  integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==
+
 ajv@^6.10.0, ajv@^6.12.4:
  version "6.12.6"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@ -2687,6 +2793,11 @@ blake2b@2.1.3:
    blake2b-wasm "^1.1.0"
    nanoassert "^1.0.0"

+bn.js@4.11.8:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+
 bn.js@5.2.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
@ -3090,6 +3201,11 @@ depd@~1.1.2:
  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==

+detect-browser@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.2.0.tgz#c9cd5afa96a6a19fda0bbe9e9be48a6b6e1e9c97"
+  integrity sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA==
+
 detect-browser@5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
@ -3816,7 +3932,7 @@ hash-base@^3.0.0:
    readable-stream "^3.6.0"
    safe-buffer "^5.2.0"

-hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7:
  version "1.1.7"
  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@ -4867,6 +4983,15 @@ punycode@^2.1.0:
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

+query-string@6.13.5:
+  version "6.13.5"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.5.tgz#99e95e2fb7021db90a6f373f990c0c814b3812d8"
+  integrity sha512-svk3xg9qHR39P3JlHuD7g3nRnyay5mHbrPctEBDUxUkHRifPHXJDhBUycdCC0NBjXoDf44Gb+IsOZL1Uwn8M/Q==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 query-string@7.1.1:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1"
@ -5640,6 +5765,11 @@ ws@7.4.6:
  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==

+ws@7.5.3:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
+  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
+
 ws@^7.4.5, ws@^7.5.1:
  version "7.5.9"
  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"