Merge branch 'wallets'

2022-02-16 15:46:56 +02:00 · 2022-02-16 15:46:56 +02:00 · 9519593efe
commit 9519593efe
parent 033cf6a585 c94076a35c
15 changed files with 372 additions and 97 deletions
--- a/wallets/react-wallet-v2/package.json
+++ b/wallets/react-wallet-v2/package.json
@ -25,7 +25,7 @@
  },
  "devDependencies": {
    "@walletconnect/types": "2.0.0-beta.22",
-    "@types/node": "17.0.17",
+    "@types/node": "17.0.18",
    "@types/react": "17.0.39",
    "eslint": "8.9.0",
    "eslint-config-next": "12.0.10",
--- a/wallets/react-wallet-v2/public/main.css
+++ b/wallets/react-wallet-v2/public/main.css
@ -49,4 +49,12 @@
 .codeBlock span {
  background-color: transparent !important;
  overflow: scroll;
+}
+
+.navLink {
+  transition: ease-in-out .2s opacity;
+}
+
+.navLink:hover {
+  opacity: 0.6;
 }
--- a/wallets/react-wallet-v2/public/pairings-icon.svg
+++ b/wallets/react-wallet-v2/public/pairings-icon.svg
@ -0,0 +1,59 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M408 336H344C339.582 336 336 339.582 336 344V408C336 412.418 339.582 416 344 416H408C412.418 416 416 412.418 416 408V344C416 339.582 412.418 336 408 336Z" fill="url(#paint0_linear_101_5)"/>
+<path d="M328 272H280C275.582 272 272 275.582 272 280V328C272 332.418 275.582 336 280 336H328C332.418 336 336 332.418 336 328V280C336 275.582 332.418 272 328 272Z" fill="url(#paint1_linear_101_5)"/>
+<path d="M472 416H424C419.582 416 416 419.582 416 424V472C416 476.418 419.582 480 424 480H472C476.418 480 480 476.418 480 472V424C480 419.582 476.418 416 472 416Z" fill="url(#paint2_linear_101_5)"/>
+<path d="M472 272H440C435.582 272 432 275.582 432 280V312C432 316.418 435.582 320 440 320H472C476.418 320 480 316.418 480 312V280C480 275.582 476.418 272 472 272Z" fill="url(#paint3_linear_101_5)"/>
+<path d="M312 432H280C275.582 432 272 435.582 272 440V472C272 476.418 275.582 480 280 480H312C316.418 480 320 476.418 320 472V440C320 435.582 316.418 432 312 432Z" fill="url(#paint4_linear_101_5)"/>
+<path d="M408 96H344C339.582 96 336 99.5817 336 104V168C336 172.418 339.582 176 344 176H408C412.418 176 416 172.418 416 168V104C416 99.5817 412.418 96 408 96Z" fill="url(#paint5_linear_101_5)"/>
+<path d="M448 48H304C295.163 48 288 55.1634 288 64V208C288 216.837 295.163 224 304 224H448C456.837 224 464 216.837 464 208V64C464 55.1634 456.837 48 448 48Z" stroke="url(#paint6_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168 96H104C99.5817 96 96 99.5817 96 104V168C96 172.418 99.5817 176 104 176H168C172.418 176 176 172.418 176 168V104C176 99.5817 172.418 96 168 96Z" fill="url(#paint7_linear_101_5)"/>
+<path d="M208 48H64C55.1634 48 48 55.1634 48 64V208C48 216.837 55.1634 224 64 224H208C216.837 224 224 216.837 224 208V64C224 55.1634 216.837 48 208 48Z" stroke="url(#paint8_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168 336H104C99.5817 336 96 339.582 96 344V408C96 412.418 99.5817 416 104 416H168C172.418 416 176 412.418 176 408V344C176 339.582 172.418 336 168 336Z" fill="url(#paint9_linear_101_5)"/>
+<path d="M208 288H64C55.1634 288 48 295.163 48 304V448C48 456.837 55.1634 464 64 464H208C216.837 464 224 456.837 224 448V304C224 295.163 216.837 288 208 288Z" stroke="url(#paint10_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_101_5" x1="336" y1="336.006" x2="416.753" y2="415.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_101_5" x1="272" y1="272.005" x2="336.603" y2="335.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_101_5" x1="416" y1="416.005" x2="480.603" y2="479.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_101_5" x1="432" y1="272.004" x2="480.452" y2="319.536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint4_linear_101_5" x1="272" y1="432.004" x2="320.452" y2="479.536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint5_linear_101_5" x1="336" y1="96.0063" x2="416.753" y2="175.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint6_linear_101_5" x1="288" y1="48.0139" x2="465.657" y2="222.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint7_linear_101_5" x1="96" y1="96.0063" x2="176.753" y2="175.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint8_linear_101_5" x1="48" y1="48.0139" x2="225.657" y2="222.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint9_linear_101_5" x1="96" y1="336.006" x2="176.753" y2="415.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint10_linear_101_5" x1="48" y1="288.014" x2="225.657" y2="462.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>
--- a/wallets/react-wallet-v2/public/sessions-icon.svg
+++ b/wallets/react-wallet-v2/public/sessions-icon.svg
@ -0,0 +1,19 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M320 120L368 168L320 216" stroke="url(#paint0_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M352 168H144C122.802 168.063 102.491 176.512 87.5014 191.501C72.5122 206.491 64.0633 226.802 64 248V264M192 392L144 344L192 296" stroke="url(#paint1_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160 344H368C389.198 343.937 409.509 335.488 424.499 320.499C439.488 305.509 447.937 285.198 448 264V248" stroke="url(#paint2_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_101_17" x1="320" y1="120.008" x2="396.642" y2="157.601" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_101_17" x1="64.0001" y1="168.018" x2="284.191" y2="445.745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_101_17" x1="160" y1="248.008" x2="219.048" y2="421.788" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>
--- a/wallets/react-wallet-v2/src/components/AccountCard.tsx
+++ b/wallets/react-wallet-v2/src/components/AccountCard.tsx
@ -1,6 +1,5 @@
 import { truncate } from '@/utils/HelperUtil'
 import { Avatar, Card, Text } from '@nextui-org/react'
-import Link from 'next/link'

 interface Props {
  name: string
@ -11,38 +10,35 @@ interface Props {

 export default function AccountCard({ name, logo, rgb, address }: Props) {
  return (
-    <Link href={`/sessions?address=${address}`} passHref>
-      <Card
-        bordered
-        clickable
-        borderWeight="light"
+    <Card
+      bordered
+      borderWeight="light"
+      css={{
+        borderColor: `rgba(${rgb}, 0.4)`,
+        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
+        backgroundColor: `rgba(${rgb}, 0.25)`,
+        marginBottom: '$6',
+        minHeight: '70px'
+      }}
+    >
+      <Card.Body
        css={{
-          borderColor: `rgba(${rgb}, 0.4)`,
-          boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
-          backgroundColor: `rgba(${rgb}, 0.25)`,
-          marginBottom: '$6',
-          minHeight: '70px'
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          overflow: 'hidden'
        }}
      >
-        <Card.Body
-          css={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            overflow: 'hidden'
-          }}
-        >
-          <Avatar src={logo} />
-          <div style={{ flex: 1 }}>
-            <Text h5 css={{ marginLeft: '$9' }}>
-              {name}
-            </Text>
-            <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
-              {truncate(address, 19)}
-            </Text>
-          </div>
-        </Card.Body>
-      </Card>
-    </Link>
+        <Avatar src={logo} />
+        <div style={{ flex: 1 }}>
+          <Text h5 css={{ marginLeft: '$9' }}>
+            {name}
+          </Text>
+          <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
+            {truncate(address, 19)}
+          </Text>
+        </div>
+      </Card.Body>
+    </Card>
  )
 }
--- a/wallets/react-wallet-v2/src/components/Modal.tsx
+++ b/wallets/react-wallet-v2/src/components/Modal.tsx
@ -1,5 +1,6 @@
 import ModalStore from '@/store/ModalStore'
 import SessionProposalModal from '@/views/SessionProposalModal'
+import SessionSendTransactionModal from '@/views/SessionSendTransactionModal'
 import SessionRequestModal from '@/views/SessionSignModal'
 import SessionSignTypedDataModal from '@/views/SessionSignTypedDataModal'
 import { Modal as NextModal } from '@nextui-org/react'
@ -13,6 +14,7 @@ export default function Modal() {
      {view === 'SessionProposalModal' && <SessionProposalModal />}
      {view === 'SessionSignModal' && <SessionRequestModal />}
      {view === 'SessionSignTypedDataModal' && <SessionSignTypedDataModal />}
+      {view === 'SessionSendTransactionModal' && <SessionSendTransactionModal />}
    </NextModal>
  )
 }
--- a/wallets/react-wallet-v2/src/components/Navigation.tsx
+++ b/wallets/react-wallet-v2/src/components/Navigation.tsx
@ -4,15 +4,21 @@ import Link from 'next/link'

 export default function Navigation() {
  return (
-    <Row justify="space-between" align="center" css={{ width: '80%', margin: '0 auto' }}>
+    <Row justify="space-between" align="center">
      <Link href="/" passHref>
-        <a>
-          <Image alt="accounts icon" src="/accounts-icon.svg" width={30} height={30} />
+        <a className="navLink">
+          <Image alt="accounts icon" src="/accounts-icon.svg" width={27} height={27} />
+        </a>
+      </Link>
+
+      <Link href="/sessions" passHref>
+        <a className="navLink">
+          <Image alt="sessions icon" src="/sessions-icon.svg" width={27} height={27} />
        </a>
      </Link>

      <Link href="/walletconnect" passHref>
-        <a>
+        <a className="navLink">
          <Avatar
            size="lg"
            css={{ cursor: 'pointer' }}
@ -29,9 +35,15 @@ export default function Navigation() {
        </a>
      </Link>

+      <Link href="/pairings" passHref>
+        <a className="navLink">
+          <Image alt="pairings icon" src="/pairings-icon.svg" width={25} height={25} />
+        </a>
+      </Link>
+
      <Link href="/settings" passHref>
-        <a>
-          <Image alt="settings icon" src="/settings-icon.svg" width={35} height={35} />
+        <a className="navLink">
+          <Image alt="settings icon" src="/settings-icon.svg" width={27} height={27} />
        </a>
      </Link>
    </Row>
--- a/wallets/react-wallet-v2/src/data/EIP155Data.ts
+++ b/wallets/react-wallet-v2/src/data/EIP155Data.ts
@ -21,52 +21,32 @@ export const EIP155_MAINNET_CHAINS = {
    chainId: 1,
    name: 'Ethereum',
    logo: LOGO_BASE_URL + 'eip155:1.png',
-    rgb: '99, 125, 234'
-  },
-  'eip155:10': {
-    chainId: 10,
-    name: 'Optimism',
-    logo: LOGO_BASE_URL + 'eip155:10.png',
-    rgb: '233, 1, 1'
+    rgb: '99, 125, 234',
+    rpc: 'https://cloudflare-eth.com/'
  },
  'eip155:137': {
    chainId: 137,
    name: 'Polygon',
    logo: LOGO_BASE_URL + 'eip155:137.png',
-    rgb: '130, 71, 229'
+    rgb: '130, 71, 229',
+    rpc: 'https://polygon-rpc.com/'
  },
  'eip155:42161': {
    chainId: 42161,
    name: 'Arbitrum',
    logo: LOGO_BASE_URL + 'eip155:42161.png',
-    rgb: '44, 55, 75'
+    rgb: '44, 55, 75',
+    rpc: 'https://arb1.arbitrum.io/rpc/'
  }
 }

 export const EIP155_TEST_CHAINS = {
-  'eip155:4': {
-    chainId: 4,
-    name: 'Ethereum Rinkeby',
-    logo: LOGO_BASE_URL + 'eip155:1.png',
-    rgb: '99, 125, 234'
-  },
-  'eip155:69': {
-    chainId: 69,
-    name: 'Optimism Kovan',
-    logo: LOGO_BASE_URL + 'eip155:10.png',
-    rgb: '233, 1, 1'
-  },
  'eip155:80001': {
    chainId: 80001,
    name: 'Polygon Mumbai',
    logo: LOGO_BASE_URL + 'eip155:137.png',
-    rgb: '130, 71, 229'
-  },
-  'eip155:421611': {
-    chainId: 421611,
-    name: 'Arbitrum Rinkeby',
-    logo: LOGO_BASE_URL + 'eip155:42161.png',
-    rgb: '44, 55, 75'
+    rgb: '130, 71, 229',
+    rpc: 'https://rpc-mumbai.maticvigil.com/'
  }
 }

--- a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
+++ b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
@ -6,26 +6,30 @@ import { SessionTypes } from '@walletconnect/types'
 import { useCallback, useEffect } from 'react'

 export default function useWalletConnectEventsManager(initialized: boolean) {
-  // 1. Open session proposal modal for confirmation / rejection
+  /******************************************************************************
+   * 1. Open session proposal modal for confirmation / rejection
+   *****************************************************************************/
  const onSessionProposal = useCallback((proposal: SessionTypes.Proposal) => {
    ModalStore.open('SessionProposalModal', { proposal })
  }, [])

-  // 2. Open session created modal to show success feedback
+  /******************************************************************************
+   * 2. Open session created modal to show success feedback
+   *****************************************************************************/
  const onSessionCreated = useCallback((created: SessionTypes.Created) => {}, [])

-  // 3. Open request handling modal based on method that was used
+  /******************************************************************************
+   * 3. Open request handling modal based on method that was used
+   *****************************************************************************/
  const onSessionRequest = useCallback(async (requestEvent: SessionTypes.RequestEvent) => {
    const { topic, request } = requestEvent
    const { method } = request
    const requestSession = await walletConnectClient.session.get(topic)

-    // Hanle message signing requests of various formats
    if ([EIP155_SIGNING_METHODS.ETH_SIGN, EIP155_SIGNING_METHODS.PERSONAL_SIGN].includes(method)) {
      ModalStore.open('SessionSignModal', { requestEvent, requestSession })
    }

-    // Hanle data signing requests of various formats
    if (
      [
        EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA,
@ -35,8 +39,15 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
    ) {
      ModalStore.open('SessionSignTypedDataModal', { requestEvent, requestSession })
    }
+
+    if (EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION) {
+      ModalStore.open('SessionSendTransactionModal', { requestEvent, requestSession })
+    }
  }, [])

+  /******************************************************************************
+   * Set up WalletConnect event listeners
+   *****************************************************************************/
  useEffect(() => {
    if (initialized) {
      walletConnectClient.on(CLIENT_EVENTS.session.proposal, onSessionProposal)
--- a/wallets/react-wallet-v2/src/pages/pairings.tsx
+++ b/wallets/react-wallet-v2/src/pages/pairings.tsx
@ -0,0 +1,14 @@
+import PageHeader from '@/components/PageHeader'
+import { walletConnectClient } from '@/utils/WalletConnectUtil'
+import { Fragment } from 'react'
+
+export default function PairingsPage() {
+  console.log(walletConnectClient.session.values)
+  console.log(walletConnectClient.session.history.pending)
+
+  return (
+    <Fragment>
+      <PageHeader>Pairings</PageHeader>
+    </Fragment>
+  )
+}
--- a/wallets/react-wallet-v2/src/pages/sessions.tsx
+++ b/wallets/react-wallet-v2/src/pages/sessions.tsx
@ -1,20 +1,14 @@
 import PageHeader from '@/components/PageHeader'
-import { truncate } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { useRouter } from 'next/router'
-import { Fragment, useEffect } from 'react'
+import { Fragment } from 'react'

 export default function SessionsPage() {
-  const { query } = useRouter()
-  const address = (query?.address as string) ?? 'Unknown'
-
-  useEffect(() => {
-    console.log(walletConnectClient.session.values)
-  }, [])
+  console.log(walletConnectClient.session.values)
+  console.log(walletConnectClient.session.history.pending)

  return (
    <Fragment>
-      <PageHeader>{truncate(address, 15)}</PageHeader>
+      <PageHeader>Sessions</PageHeader>
    </Fragment>
  )
 }
--- a/wallets/react-wallet-v2/src/store/ModalStore.ts
+++ b/wallets/react-wallet-v2/src/store/ModalStore.ts
@ -13,7 +13,11 @@ interface ModalData {

 interface State {
  open: boolean
-  view?: 'SessionProposalModal' | 'SessionSignModal' | 'SessionSignTypedDataModal'
+  view?:
+    | 'SessionProposalModal'
+    | 'SessionSignModal'
+    | 'SessionSignTypedDataModal'
+    | 'SessionSendTransactionModal'
  data?: ModalData
 }

--- a/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts
+++ b/wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts
@ -9,32 +9,26 @@ export async function approveEIP155Request(request: RequestEvent['request'], wal
  const { method, params, id } = request

  switch (method) {
-    /**
-     * Handle message signing requests
-     */
    case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
    case EIP155_SIGNING_METHODS.ETH_SIGN:
      const message = getSignParamsMessage(params)
      const signedMessage = await wallet.signMessage(message)
      return formatJsonRpcResult(id, signedMessage)

-    /**
-     * Handle data signing requests
-     */
    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:
      const { domain, types, message: data } = getSignTypedDataParamsData(params)
-
      // https://github.com/ethers-io/ethers.js/issues/687#issuecomment-714069471
      delete types.EIP712Domain
-
      const signedData = await wallet._signTypedData(domain, types, data)
      return formatJsonRpcResult(id, signedData)

-    /**
-     * Handle unsuported methods
-     */
+    case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
+      const transaction = params[0]
+      const { hash } = await wallet.sendTransaction(transaction)
+      return formatJsonRpcError(id, hash)
+
    default:
      throw new Error(ERROR.UNKNOWN_JSONRPC_METHOD.format().message)
  }
--- a/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
+++ b/wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx
@ -0,0 +1,182 @@
+import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import ModalStore from '@/store/ModalStore'
+import { truncate } from '@/utils/HelperUtil'
+import { approveEIP155Request, rejectEIP155Request } from '@/utils/RequestHandlerUtil'
+import { walletConnectClient } from '@/utils/WalletConnectUtil'
+import { wallet } from '@/utils/WalletUtil'
+import {
+  Avatar,
+  Button,
+  Col,
+  Container,
+  Divider,
+  Link,
+  Loading,
+  Modal,
+  Row,
+  Text
+} from '@nextui-org/react'
+import { providers } from 'ethers'
+import { Fragment, useState } from 'react'
+
+export default function SessionSendTransactionModal() {
+  const [loading, setLoading] = useState(false)
+
+  // 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 proposal data
+  const { chainId } = requestEvent
+  const { method, params } = requestEvent.request
+  const { protocol } = requestSession.relay
+  const { name, icons, url } = requestSession.peer.metadata
+  const transaction = params[0]
+
+  console.log(transaction)
+
+  // Handle approve action
+  async function onApprove() {
+    if (requestEvent) {
+      setLoading(true)
+      const provider = new providers.JsonRpcProvider(EIP155_CHAINS[chainId as TEIP155Chain].rpc)
+      const connectedWallet = wallet.connect(provider)
+      const response = await approveEIP155Request(requestEvent.request, connectedWallet)
+      await walletConnectClient.respond({
+        topic: requestEvent.topic,
+        response
+      })
+      ModalStore.close()
+    }
+  }
+
+  // Handle reject action
+  async function onReject() {
+    if (requestEvent) {
+      const response = rejectEIP155Request(requestEvent.request)
+      await walletConnectClient.respond({
+        topic: requestEvent.topic,
+        response
+      })
+      ModalStore.close()
+    }
+  }
+
+  return (
+    <Fragment>
+      <Modal.Header>
+        <Text h3>Send Transaction</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>From</Text>
+              <Text color="$gray400">{truncate(transaction.from, 30)}</Text>
+            </Col>
+          </Row>
+
+          <Divider y={2} />
+
+          <Row>
+            <Col>
+              <Text h5>To</Text>
+              <Text color="$gray400">{truncate(transaction.to, 30)}</Text>
+            </Col>
+          </Row>
+
+          <Divider y={2} />
+
+          <Row>
+            <Col>
+              <Text h5>Value</Text>
+              <Text color="$gray400">{transaction.value}</Text>
+            </Col>
+          </Row>
+
+          <Divider y={2} />
+
+          <Row>
+            <Col>
+              <Text h5>Gas Price</Text>
+              <Text color="$gray400">{transaction.gasPrice}</Text>
+            </Col>
+            <Col>
+              <Text h5>Gas Limit</Text>
+              <Text color="$gray400">{transaction.gasLimit}</Text>
+            </Col>
+          </Row>
+
+          <Divider y={2} />
+
+          <Row>
+            <Col>
+              <Text h5>Nonce</Text>
+              <Text color="$gray400">{transaction.nonce}</Text>
+            </Col>
+            <Col>
+              <Text h5>Data</Text>
+              <Text color="$gray400">{transaction.data}</Text>
+            </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>
+
+          <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} 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/yarn.lock
+++ b/wallets/react-wallet-v2/yarn.lock
@ -794,10 +794,10 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=

-"@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/node@17.0.18":
+  version "17.0.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.18.tgz#3b4fed5cfb58010e3a2be4b6e74615e4847f1074"
+  integrity sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==

 "@types/prop-types@*":
  version "15.7.4"