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;
+ }
}