fix: enhance modal session handling to reject on user cancellation

demos/react-dapp/src/App.tsx

@@ -41,8 +41,6 @@ import {
   verifySignerSignature,
   transactionToTransactionBody,
   SignTransactionParams,
-  base64StringToSignatureMap,
-  Uint8ArrayToBase64String,
   extractFirstSignature,
 } from '../../../dist'
 
@@ -210,7 +208,8 @@ const App: React.FC = () => {
         message,
       }
 
-      const { signatureMap } = await dAppConnector!.signMessage(params)
+      const signMessageResult = await dAppConnector!.signMessage(params)
+      const signatureMap = signMessageResult.result.signatureMap
       const accountPublicKey = PublicKey.fromString(publicKey)
       const verified = verifyMessageSignature(message, signatureMap, accountPublicKey)
       console.log('SignatureMap: ', signatureMap)
@@ -261,7 +260,8 @@ const App: React.FC = () => {
         query: queryToBase64String(query),
       }
 
-      const { response } = await dAppConnector!.signAndExecuteQuery(params)
+      const execution = await dAppConnector!.signAndExecuteQuery(params)
+      const response = execution.result.response
       const bytes = Buffer.from(response, 'base64')
       const accountInfo = AccountInfo.fromBytes(bytes)
       console.log('AccountInfo: ', accountInfo)
@@ -586,7 +586,8 @@ const App: React.FC = () => {
       let session: SessionTypes.Struct
       setIsLoading(true)
       if (extensionId) session = await dAppConnector.connectExtension(extensionId)
-      else session = await dAppConnector.openModal()
+      // Open modal with showErrorOnReject set to true
+      else session = await dAppConnector.openModal(undefined, true)
 
       setNewSession(session)
     } finally {

src/lib/dapp/index.ts

@@ -208,14 +208,36 @@ export class DAppConnector {
   /**
    * Initiates the WalletConnect connection flow using a QR code.
    * @param pairingTopic - The pairing topic for the connection (optional).
+   * @param showErrorOnReject - Whether to show an error when the user rejects the pairing (default: false).
    * @returns {Promise<SessionTypes.Struct>} - A Promise that resolves when the connection process is complete.
    */
-  public async openModal(pairingTopic?: string): Promise<SessionTypes.Struct> {
+  public async openModal(
+    pairingTopic?: string,
+    showErrorOnReject: boolean = false,
+  ): Promise<SessionTypes.Struct> {
     try {
       const { uri, approval } = await this.connectURI(pairingTopic)
       this.walletConnectModal.openModal({ uri })
-      const session = await approval()
-      await this.onSessionConnected(session)
+
+      const session = await new Promise<SessionTypes.Struct>(async (resolve, reject) => {
+        if (showErrorOnReject) {
+          this.walletConnectModal.subscribeModal((state: { open: boolean }) => {
+            // the modal was closed so reject the promise
+            if (!state.open) {
+              reject(new Error('User rejected pairing'))
+            }
+          })
+        }
+
+        try {
+          const approvedSession = await approval()
+          await this.onSessionConnected(approvedSession)
+          resolve(approvedSession)
+        } catch (error) {
+          reject(error)
+        }
+      })
+
       return session
     } finally {
       this.walletConnectModal.closeModal()