From 1cd6654716d04abb42a81b7a91770e1c398d6304 Mon Sep 17 00:00:00 2001
From: mucahit <tutuncumucahit@gmail.com>
Date: Fri, 1 Jul 2022 14:47:27 +0100
Subject: [PATCH] fix: Reject the promise on modal close

---
 README.md                                 | 18 +++++++----
 src/PeraWalletConnect.ts                  | 14 ++++----
 src/modal/peraWalletConnectModalUtils.tsx | 39 ++++++++++++++++-------
 3 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 96f96fd..129b144 100644
--- a/README.md
+++ b/README.md
@@ -62,12 +62,18 @@ function App() {
   );
 
   function handleConnectWalletClick() {
-    peraWallet.connect().then((newAccounts) => {
-      // Setup the disconnect event listener
-      peraWallet.connector?.on("disconnect", handleDisconnectWalletClick);
-
-      setAccountAddress(newAccounts[0]);
-    });
+    peraWallet
+      .connect()
+      .then((newAccounts) => {
+        // Setup the disconnect event listener
+        peraWallet.connector?.on("disconnect", handleDisconnectWalletClick);
+
+        setAccountAddress(newAccounts[0]);
+      })
+      .reject((error) => {
+        // You MUST handle the reject because once the user closes the modal, peraWallet.connect() promise will be rejected.
+        // For the async/await syntax you MUST use try/catch
+      });
   }
 
   function handleDisconnectWalletClick() {
diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts
index 204838a..5ec96cc 100644
--- a/src/PeraWalletConnect.ts
+++ b/src/PeraWalletConnect.ts
@@ -30,10 +30,12 @@ interface PeraWalletConnectOptions {
   app_meta?: AppMeta;
 }
 
-const peraWalletConnectModalActions = {
-  open: openPeraWalletConnectModal,
-  close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID)
-};
+function generatePeraWalletConnectModalActions(rejectPromise?: (error: any) => void) {
+  return {
+    open: openPeraWalletConnectModal(rejectPromise),
+    close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID)
+  };
+}
 
 class PeraWalletConnect {
   bridge: string;
@@ -77,7 +79,7 @@ class PeraWalletConnect {
         // Create Connector instance
         this.connector = new WalletConnect({
           bridge: this.bridge || bridgeURL,
-          qrcodeModal: peraWalletConnectModalActions
+          qrcodeModal: generatePeraWalletConnectModalActions(reject)
         });
 
         await this.connector.createSession({
@@ -123,7 +125,7 @@ class PeraWalletConnect {
       if (response.servers.includes(this.bridge)) {
         this.connector = new WalletConnect({
           bridge: this.bridge,
-          qrcodeModal: peraWalletConnectModalActions
+          qrcodeModal: generatePeraWalletConnectModalActions()
         });
 
         return this.connector?.accounts || [];
diff --git a/src/modal/peraWalletConnectModalUtils.tsx b/src/modal/peraWalletConnectModalUtils.tsx
index 77fc587..64395d4 100644
--- a/src/modal/peraWalletConnectModalUtils.tsx
+++ b/src/modal/peraWalletConnectModalUtils.tsx
@@ -8,6 +8,7 @@ import {QRCode} from "react-qrcode-logo";
 import PeraWalletConnectModal from "./PeraWalletConnectModal";
 import PeraWalletRedirectModal from "./redirect/PeraWalletRedirectModal";
 import {AccordionData} from "./component/accordion/util/accordionTypes";
+import PeraWalletConnectError from "../util/PeraWalletConnectError";
 
 // The ID of the wrapper element for PeraWalletConnectModal
 const PERA_WALLET_CONNECT_MODAL_ID = "pera-wallet-connect-modal-wrapper";
@@ -31,22 +32,36 @@ function createModalWrapperOnDOM(modalId: string) {
 /**
  * Creates a PeraWalletConnectModal instance and renders it on the DOM.
  *
+ * @param {rejectPromise} rejectPromise - the reject callback of the PeraWalletConnect.connect method
  * @param {string} uri - uri to be passed to Pera Wallet via deeplink
  * @param {VoidFunction} closeCallback - callback to be called when user closes the modal
  * @returns {void}
  */
-function openPeraWalletConnectModal(uri: string, closeCallback: VoidFunction) {
-  const wrapper = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID);
-
-  ReactDOM.render(
-    <PeraWalletConnectModal onClose={handleClosePeraWalletConnectModal} uri={uri} />,
-    wrapper
-  );
-
-  function handleClosePeraWalletConnectModal() {
-    removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID);
-    closeCallback();
-  }
+function openPeraWalletConnectModal(rejectPromise?: (error: any) => void) {
+  return (uri: string, closeCallback: VoidFunction) => {
+    const wrapper = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID);
+
+    ReactDOM.render(
+      <PeraWalletConnectModal onClose={handleClosePeraWalletConnectModal} uri={uri} />,
+      wrapper
+    );
+
+    function handleClosePeraWalletConnectModal() {
+      removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID);
+      closeCallback();
+
+      if (rejectPromise) {
+        rejectPromise(
+          new PeraWalletConnectError(
+            {
+              type: "SESSION_CONNECT"
+            },
+            "The action canceled by the user."
+          )
+        );
+      }
+    }
+  };
 }
 
 /**