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/package-lock.json b/package-lock.json index 2f68f2a..ecf7b95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@perawallet/connect", - "version": "0.1.1", + "version": "0.1.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@perawallet/connect", - "version": "0.1.1", + "version": "0.1.2", "license": "ISC", "dependencies": { "@json-rpc-tools/utils": "^1.7.6", diff --git a/package.json b/package.json index 9de6698..c9f3ed6 100644 --- a/package.json +++ b/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": { 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/_pera-wallet-modal.scss b/src/modal/_pera-wallet-modal.scss index fcd13a2..2a4024b 100644 --- a/src/modal/_pera-wallet-modal.scss +++ b/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%); 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( - , - 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( + , + wrapper + ); + + function handleClosePeraWalletConnectModal() { + removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); + closeCallback(); + + if (rejectPromise) { + rejectPromise( + new PeraWalletConnectError( + { + type: "SESSION_CONNECT" + }, + "The action canceled by the user." + ) + ); + } + } + }; } /** diff --git a/src/modal/section/information/_pera-wallet-modal-information-section.scss b/src/modal/section/information/_pera-wallet-modal-information-section.scss index f63fb45..ed7a735 100644 --- a/src/modal/section/information/_pera-wallet-modal-information-section.scss +++ b/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; + } }