Merge pull request #14 from perawallet/next-release

perawallet/[email protected]

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() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perawallet/connect",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "JavaScript SDK for integrating Pera Wallet to web applications.",
   "main": "dist/index.js",
   "scripts": {

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 || [];

src/modal/_pera-wallet-modal.scss

@@ -92,6 +92,8 @@
 
   border-radius: 24px;
 
+  overflow-y: auto;
+
   animation: 0.3s PeraWalletConnectSlideIn ease-out;
 
   transform: translate(-50%, -50%);

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."
+          )
+        );
+      }
+    }
+  };
 }
 
 /**

src/modal/section/information/_pera-wallet-modal-information-section.scss

@@ -99,4 +99,8 @@
   .pera-wallet-connect-modal-information-section__features-item__icon-wrapper {
     background-color: #f2f3f8;
   }
+
+  .pera-wallet-connect-modal-information-section__features-item__description {
+    color: #69708d;
+  }
 }