Handle un-supported methods

wallets/react-wallet-v2/src/components/Modal.tsx

@@ -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>
   )
 }

wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts

@@ -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)) {
+      case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA:
-      ModalStore.open('SessionSignModal', { requestEvent, requestSession })
+      case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V3:
-    } else if (
+      case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V4:
-      [
+        return ModalStore.open('SessionSignTypedDataModal', { requestEvent, requestSession })
-        EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA,
+
-        EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V3,
+      case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
-        EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V4
+        return ModalStore.open('SessionSendTransactionModal', { requestEvent, requestSession })
-      ].includes(method)
+
-    ) {
+      default:
-      ModalStore.open('SessionSignTypedDataModal', { requestEvent, requestSession })
+        return ModalStore.open('SessionUnsuportedMethodModal', { requestEvent, requestSession })
-    } else if (EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION) {
-      ModalStore.open('SessionSendTransactionModal', { requestEvent, requestSession })
     }
   }, [])
 

wallets/react-wallet-v2/src/store/ModalStore.ts

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

wallets/react-wallet-v2/src/views/SessionUnsuportedMethodModal.tsx

@@ -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>
+  )
+}