Skip to content

Commit

Permalink
Merge pull request #13 from perawallet/fix/reject-the-promise-on-moda…
Browse files Browse the repository at this point in the history
…l-close

fix: Reject the promise on modal close
  • Loading branch information
mucahit authored Jul 1, 2022
2 parents 007cd04 + 1cd6654 commit 572859e
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 24 deletions.
18 changes: 12 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
14 changes: 8 additions & 6 deletions src/PeraWalletConnect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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 || [];
Expand Down
39 changes: 27 additions & 12 deletions src/modal/peraWalletConnectModalUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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."
)
);
}
}
};
}

/**
Expand Down

0 comments on commit 572859e

Please sign in to comment.