From cf7fb2e70370dde88acd9cf6d5dc66b3033799ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Tue, 7 Mar 2023 14:20:03 +0300 Subject: [PATCH 01/15] feat(connect): add option for multiple account select --- src/PeraWalletConnect.ts | 11 +++++++---- .../mode/desktop/PeraWalletConnectModalDesktopMode.ts | 2 +- .../_pera-wallet-connect-modal-desktop-mode.scss | 10 +++------- src/modal/peraWalletConnectModalUtils.ts | 3 ++- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index dc40c9e..9863143 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -48,13 +48,15 @@ interface PeraWalletConnectOptions { function generatePeraWalletConnectModalActions({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + allowToSelectMultipleAccounts }: PeraWalletModalConfig) { return { open: openPeraWalletConnectModal({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + allowToSelectMultipleAccounts }), close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) }; @@ -336,7 +338,7 @@ class PeraWalletConnect { }; } - connect() { + connect(allowToSelectMultipleAccounts?: boolean) { return new Promise(async (resolve, reject) => { try { // check if already connected and kill session first before creating a new one. @@ -375,7 +377,8 @@ class PeraWalletConnect { qrcodeModal: generatePeraWalletConnectModalActions({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound + shouldUseSound, + allowToSelectMultipleAccounts: allowToSelectMultipleAccounts || true }) }); diff --git a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts index d2b4ceb..673a72b 100644 --- a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts +++ b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts @@ -274,7 +274,7 @@ export class PeraWalletModalDesktopMode extends HTMLElement { const isWebWalletAvailable = this.getAttribute("is-web-wallet-avaliable"); // eslint-disable-next-line no-magic-numbers - const size = isWebWalletAvailable === "false" ? 250 : 205; + const size = isWebWalletAvailable === "false" ? 250 : 235; if (URI) { const qrCode = new QRCodeStyling({ diff --git a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss index c4088d4..3a77458 100644 --- a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss +++ b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss @@ -192,8 +192,8 @@ .pera-wallet-connect-qr-code-wrapper { width: fit-content; - margin: 24px auto 0; - padding: 10px; + margin: 16px auto 0; + padding: 7px; box-shadow: 0px 20px 60px rgba(26, 35, 91, 0.15), 0px 4px 12px rgba(26, 35, 91, 0.05), 0px 1px 4px rgba(26, 35, 91, 0.06); @@ -205,7 +205,7 @@ text-align: center; - margin: 32px 0 12px; + margin: 16px 0 12px; font-size: 13px; font-weight: 500; @@ -329,10 +329,6 @@ gap: 24px; } - .pera-wallet-connect-qr-code-wrapper { - margin-top: 16px; - } - .pera-wallet-connect-modal-download-pera-view { padding: 24px; } diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index 1aa63ff..269b82b 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -7,6 +7,7 @@ export interface PeraWalletModalConfig { isWebWalletAvailable: boolean; shouldDisplayNewBadge: boolean; shouldUseSound: boolean; + allowToSelectMultipleAccounts: boolean; } // The ID of the wrapper element for PeraWalletConnectModal @@ -45,7 +46,7 @@ function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { return (uri: string) => { if (!document.getElementById(PERA_WALLET_CONNECT_MODAL_ID)) { const root = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID); - const newURI = `${uri}&algorand=true`; + const newURI = `${uri}&algorand=true&allowToSelectMultipleAccounts=${modalConfig.allowToSelectMultipleAccounts}`; const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound} = modalConfig; root.innerHTML = ``; From e4f89468e99e21a2bae570a65f024915c2207010 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Tue, 7 Mar 2023 15:21:09 +0300 Subject: [PATCH 02/15] feat: update `algosdk` version to `2.1.0` --- package-lock.json | 18 +++++++++--------- package.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb7c7ac..04785ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "typescript": "^4.6.3" }, "peerDependencies": { - "algosdk": "^1.23.2" + "algosdk": "^2.1.0" } }, "node_modules/@babel/code-frame": { @@ -895,13 +895,13 @@ } }, "node_modules/algosdk": { - "version": "1.23.2", - "resolved": "https://registry.npmjs.org/algosdk/-/algosdk-1.23.2.tgz", - "integrity": "sha512-ZDq71Kq+e3bvHxnTi/hWqom2/YHeTrbkxenOOCvPidRQuwkaOQAs92c4fqImdn7+Y+MfLhdtQspBLFR1hQTE4A==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/algosdk/-/algosdk-2.1.0.tgz", + "integrity": "sha512-KogpdRK3u7Efvw0FVduyFQEOwI+uGvMJmXUvzdmQJjK0hWhEYUl13X/X1QqNKwyEZjw2qutf9pf23UbNnBEAwA==", "peer": true, "dependencies": { "algo-msgpack-with-bigint": "^2.1.1", - "buffer": "^6.0.2", + "buffer": "^6.0.3", "cross-fetch": "^3.1.5", "hi-base32": "^0.5.1", "js-sha256": "^0.9.0", @@ -8485,13 +8485,13 @@ "peer": true }, "algosdk": { - "version": "1.23.2", - "resolved": "https://registry.npmjs.org/algosdk/-/algosdk-1.23.2.tgz", - "integrity": "sha512-ZDq71Kq+e3bvHxnTi/hWqom2/YHeTrbkxenOOCvPidRQuwkaOQAs92c4fqImdn7+Y+MfLhdtQspBLFR1hQTE4A==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/algosdk/-/algosdk-2.1.0.tgz", + "integrity": "sha512-KogpdRK3u7Efvw0FVduyFQEOwI+uGvMJmXUvzdmQJjK0hWhEYUl13X/X1QqNKwyEZjw2qutf9pf23UbNnBEAwA==", "peer": true, "requires": { "algo-msgpack-with-bigint": "^2.1.1", - "buffer": "^6.0.2", + "buffer": "^6.0.3", "cross-fetch": "^3.1.5", "hi-base32": "^0.5.1", "js-sha256": "^0.9.0", diff --git a/package.json b/package.json index 1d88a6d..2048de4 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "qr-code-styling": "1.6.0-rc.1" }, "peerDependencies": { - "algosdk": "^1.23.2" + "algosdk": "^2.1.0" }, "types": "./dist/index.d.ts", "repository": { From 02ff07df9b49efd5c30a3baa135ca3382ffb9e4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 8 Mar 2023 15:27:41 +0300 Subject: [PATCH 03/15] feat(signers): add signers field to transaction --- src/util/transaction/transactionUtils.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/util/transaction/transactionUtils.ts b/src/util/transaction/transactionUtils.ts index 4629f6b..f6b08d7 100644 --- a/src/util/transaction/transactionUtils.ts +++ b/src/util/transaction/transactionUtils.ts @@ -16,6 +16,8 @@ function composeTransaction(transaction: SignerTransaction, signerAddress?: stri if (signerAddress && !(transaction.signers || []).includes(signerAddress)) { signers = []; + } else { + signers = transaction.signers; } const txnRequestParams: PeraWalletTransaction = { From b400a16dc462d9c5d2f287edd3eb5ec82f9d1385 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 10 Mar 2023 14:57:20 +0300 Subject: [PATCH 04/15] fix: update option name --- src/PeraWalletConnect.ts | 52 +++++++-------------- src/modal/peraWalletConnectModalUtils.ts | 24 ++++++++-- src/util/network/teller/appTellerManager.ts | 1 + src/util/peraWalletTypes.ts | 19 +++++++- 4 files changed, 58 insertions(+), 38 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 9863143..ea03de9 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -3,7 +3,6 @@ import WalletConnect from "@walletconnect/client"; import PeraWalletConnectError from "./util/PeraWalletConnectError"; import { - openPeraWalletConnectModal, openPeraWalletRedirectModal, removeModalWrapperFromDOM, PERA_WALLET_CONNECT_MODAL_ID, @@ -14,9 +13,9 @@ import { closePeraWalletSignTxnModal, PERA_WALLET_IFRAME_ID, PERA_WALLET_MODAL_CLASSNAME, - PeraWalletModalConfig, PERA_WALLET_SIGN_TXN_MODAL_ID, - setupPeraWalletConnectModalCloseListener + setupPeraWalletConnectModalCloseListener, + generatePeraWalletConnectModalActions } from "./modal/peraWalletConnectModalUtils"; import { getWalletDetailsFromStorage, @@ -33,35 +32,15 @@ import { formatJsonRpcRequest } from "./util/transaction/transactionUtils"; import {detectBrowser, isMobile} from "./util/device/deviceUtils"; -import {AlgorandChainIDs} from "./util/peraWalletTypes"; +import { + PeraWalletConnectMethodOptions, + PeraWalletConnectOptions +} from "./util/peraWalletTypes"; import {generateEmbeddedWalletURL} from "./util/peraWalletUtils"; import appTellerManager, {PeraTeller} from "./util/network/teller/appTellerManager"; import {getPeraWebWalletURL} from "./util/peraWalletConstants"; import {getMetaInfo, waitForTabOpening} from "./util/dom/domUtils"; -interface PeraWalletConnectOptions { - bridge?: string; - shouldShowSignTxnToast?: boolean; - chainId?: AlgorandChainIDs; -} - -function generatePeraWalletConnectModalActions({ - isWebWalletAvailable, - shouldDisplayNewBadge, - shouldUseSound, - allowToSelectMultipleAccounts -}: PeraWalletModalConfig) { - return { - open: openPeraWalletConnectModal({ - isWebWalletAvailable, - shouldDisplayNewBadge, - shouldUseSound, - allowToSelectMultipleAccounts - }), - close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) - }; -} - class PeraWalletConnect { bridge: string; connector: WalletConnect | null; @@ -98,7 +77,8 @@ class PeraWalletConnect { resolve: (accounts: string[]) => void, reject: (reason?: any) => void, webWalletURL: string, - chainId: number | undefined + chainId: number | undefined, + shouldSelectSingleAccount: boolean ) { const browser = detectBrowser(); const webWalletURLs = getPeraWebWalletURL(webWalletURL); @@ -143,7 +123,8 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId + chainId, + shouldSelectSingleAccount } }, @@ -243,7 +224,8 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId + chainId, + shouldSelectSingleAccount } }, @@ -264,7 +246,8 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId + chainId, + shouldSelectSingleAccount } }, @@ -338,7 +321,7 @@ class PeraWalletConnect { }; } - connect(allowToSelectMultipleAccounts?: boolean) { + connect({shouldSelectSingleAccount = false}: PeraWalletConnectMethodOptions = {}) { return new Promise(async (resolve, reject) => { try { // check if already connected and kill session first before creating a new one. @@ -363,7 +346,8 @@ class PeraWalletConnect { resolve, reject, webWalletURL, - this.chainId + this.chainId, + shouldSelectSingleAccount ); if (isWebWalletAvailable) { @@ -378,7 +362,7 @@ class PeraWalletConnect { isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound, - allowToSelectMultipleAccounts: allowToSelectMultipleAccounts || true + shouldSelectSingleAccount }) }); diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index 269b82b..b2a3141 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -7,7 +7,7 @@ export interface PeraWalletModalConfig { isWebWalletAvailable: boolean; shouldDisplayNewBadge: boolean; shouldUseSound: boolean; - allowToSelectMultipleAccounts: boolean; + shouldSelectSingleAccount: boolean; } // The ID of the wrapper element for PeraWalletConnectModal @@ -42,11 +42,28 @@ function createModalWrapperOnDOM(modalId: string) { return wrapper; } +function generatePeraWalletConnectModalActions({ + isWebWalletAvailable, + shouldDisplayNewBadge, + shouldUseSound, + shouldSelectSingleAccount +}: PeraWalletModalConfig) { + return { + open: openPeraWalletConnectModal({ + isWebWalletAvailable, + shouldDisplayNewBadge, + shouldUseSound, + shouldSelectSingleAccount + }), + close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) + }; +} + function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { return (uri: string) => { if (!document.getElementById(PERA_WALLET_CONNECT_MODAL_ID)) { const root = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID); - const newURI = `${uri}&algorand=true&allowToSelectMultipleAccounts=${modalConfig.allowToSelectMultipleAccounts}`; + const newURI = `${uri}&algorand=true&allowToSelectMultipleAccounts=${modalConfig.shouldSelectSingleAccount}`; const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound} = modalConfig; root.innerHTML = ``; @@ -153,5 +170,6 @@ export { closePeraWalletSignTxnToast, removeModalWrapperFromDOM, openPeraWalletSignTxnModal, - closePeraWalletSignTxnModal + closePeraWalletSignTxnModal, + generatePeraWalletConnectModalActions }; diff --git a/src/util/network/teller/appTellerManager.ts b/src/util/network/teller/appTellerManager.ts index 1710127..fd2b50e 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -5,6 +5,7 @@ export type PeraTeller = | { type: "CONNECT"; data: { + shouldSelectSingleAccount: boolean; title: string; url: string; favicon?: string; diff --git a/src/util/peraWalletTypes.ts b/src/util/peraWalletTypes.ts index c30c055..a91f259 100644 --- a/src/util/peraWalletTypes.ts +++ b/src/util/peraWalletTypes.ts @@ -10,4 +10,21 @@ interface PeraWalletDetails { selectedAccount: string; } -export type {PeraWalletType, PeraWalletPlatformType, PeraWalletDetails, AlgorandChainIDs}; +interface PeraWalletConnectMethodOptions { + shouldSelectSingleAccount?: boolean; +} + +interface PeraWalletConnectOptions { + bridge?: string; + shouldShowSignTxnToast?: boolean; + chainId?: AlgorandChainIDs; +} + +export type { + PeraWalletType, + PeraWalletPlatformType, + PeraWalletDetails, + AlgorandChainIDs, + PeraWalletConnectMethodOptions, + PeraWalletConnectOptions +}; From 66a3960cfe4ef9ed3f6f699f34c7b2b444b0cbcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 10 Mar 2023 16:57:14 +0300 Subject: [PATCH 05/15] fix: update tab opening max try count --- src/util/dom/domUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 17f1a95..05c74f4 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -2,7 +2,7 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import PeraWalletConnectError from "../PeraWalletConnectError"; const WAIT_FOR_TAB_TRY_INTERVAL = 300; -const WAIT_FOR_TAB_MAX_TRY_COUNT = 50; +const WAIT_FOR_TAB_MAX_TRY_COUNT = 20; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); From 66e16e2ca804ed47aeff5cf7e543a9f0873e83ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 10 Mar 2023 17:03:24 +0300 Subject: [PATCH 06/15] fix: update to 30 retry --- src/util/dom/domUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 05c74f4..76e2889 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -2,7 +2,7 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import PeraWalletConnectError from "../PeraWalletConnectError"; const WAIT_FOR_TAB_TRY_INTERVAL = 300; -const WAIT_FOR_TAB_MAX_TRY_COUNT = 20; +const WAIT_FOR_TAB_MAX_TRY_COUNT = 30; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); From f63426843531cc6297ee07aa3e7bcc1311f3570b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Tue, 14 Mar 2023 18:00:23 +0300 Subject: [PATCH 07/15] feat: add ping mech for iframe --- src/PeraWalletConnect.ts | 425 +++++++++++--------- src/util/network/teller/appTellerManager.ts | 6 + src/util/peraWalletConstants.ts | 8 +- 3 files changed, 251 insertions(+), 188 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index dc40c9e..e3d6fa0 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -37,7 +37,12 @@ import {AlgorandChainIDs} from "./util/peraWalletTypes"; import {generateEmbeddedWalletURL} from "./util/peraWalletUtils"; import appTellerManager, {PeraTeller} from "./util/network/teller/appTellerManager"; import {getPeraWebWalletURL} from "./util/peraWalletConstants"; -import {getMetaInfo, waitForTabOpening} from "./util/dom/domUtils"; +import { + getMetaInfo, + waitForTabOpening, + WAIT_FOR_TAB_MAX_TRY_COUNT, + WAIT_FOR_TAB_TRY_INTERVAL +} from "./util/dom/domUtils"; interface PeraWalletConnectOptions { bridge?: string; @@ -102,157 +107,182 @@ class PeraWalletConnect { const webWalletURLs = getPeraWebWalletURL(webWalletURL); const peraWalletIframe = document.createElement("iframe"); - function onReceiveMessage(event: MessageEvent>) { - if (resolve && event.data.message.type === "CONNECT_CALLBACK") { - const accounts = event.data.message.data.addresses; + function onWebWalletConnect(peraWalletIframeWrapper: Element) { + if (browser === "Chrome") { + peraWalletIframe.setAttribute("id", PERA_WALLET_IFRAME_ID); + peraWalletIframe.setAttribute( + "src", + generateEmbeddedWalletURL(webWalletURLs.CONNECT) + ); - saveWalletDetailsToStorage(accounts, "pera-wallet-web"); + peraWalletIframeWrapper.appendChild(peraWalletIframe); - resolve(accounts); + if (peraWalletIframe.contentWindow) { + let count = 0; - onClose(); + const checkIframeIsInitialized = setInterval(() => { + count += 1; - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - } else if (event.data.message.type === "CONNECT_NETWORK_MISMATCH") { - reject( - new PeraWalletConnectError( - { - type: "CONNECT_NETWORK_MISMATCH", - detail: event.data.message.error - }, - event.data.message.error || - `Your wallet is connected to a different network to this dApp. Update your wallet to the correct network (MainNet or TestNet) to continue.` - ) - ); + if (count === WAIT_FOR_TAB_MAX_TRY_COUNT) { + clearInterval(checkIframeIsInitialized); - onClose(); + return; + } - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - } else if ( - ["CREATE_PASSCODE_EMBEDDED", "SELECT_ACCOUNT_EMBEDDED"].includes( - event.data.message.type - ) - ) { - if (event.data.message.type === "CREATE_PASSCODE_EMBEDDED") { - waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { - if (newPeraWalletTab) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, + appTellerManager.sendMessage({ + message: { + type: "IFRAME_INITIALIZED" + }, - origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab - }); - } + origin: webWalletURLs.CONNECT, + targetWindow: peraWalletIframe.contentWindow! + }); + }, WAIT_FOR_TAB_TRY_INTERVAL); + + appTellerManager.setupListener({ + onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "IFRAME_INITIALIZED_RECEIVED") { + clearInterval(checkIframeIsInitialized); + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, + + origin: webWalletURLs.CONNECT, + targetWindow: peraWalletIframe.contentWindow! + }); + } else if (resolve && event.data.message.type === "CONNECT_CALLBACK") { + const accounts = event.data.message.data.addresses; + + saveWalletDetailsToStorage(accounts, "pera-wallet-web"); + + resolve(accounts); - const checkTabIsAliveInterval = setInterval(() => { - if (newPeraWalletTab?.closed === true) { + onClose(); + + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + } else if (event.data.message.type === "CONNECT_NETWORK_MISMATCH") { reject( new PeraWalletConnectError( { - type: "CONNECT_CANCELLED" + type: "CONNECT_NETWORK_MISMATCH", + detail: event.data.message.error }, - "Connect is cancelled by user" + event.data.message.error || + `Your wallet is connected to a different network to this dApp. Update your wallet to the correct network (MainNet or TestNet) to continue.` ) ); onClose(); - clearInterval(checkTabIsAliveInterval); - } - - // eslint-disable-next-line no-magic-numbers - }, 2000); - - appTellerManager.setupListener({ - onReceiveMessage: ( - newTabEvent: MessageEvent> - ) => { - if (resolve && newTabEvent.data.message.type === "CONNECT_CALLBACK") { - const accounts = newTabEvent.data.message.data.addresses; - - saveWalletDetailsToStorage(accounts, "pera-wallet-web"); - resolve(accounts); + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + } else if ( + ["CREATE_PASSCODE_EMBEDDED", "SELECT_ACCOUNT_EMBEDDED"].includes( + event.data.message.type + ) + ) { + if (event.data.message.type === "CREATE_PASSCODE_EMBEDDED") { + waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { + if (newPeraWalletTab) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, + + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); + } + + const checkTabIsAliveInterval = setInterval(() => { + if (newPeraWalletTab?.closed === true) { + reject( + new PeraWalletConnectError( + { + type: "CONNECT_CANCELLED" + }, + "Connect is cancelled by user" + ) + ); + + onClose(); + clearInterval(checkTabIsAliveInterval); + } + + // eslint-disable-next-line no-magic-numbers + }, 2000); + + appTellerManager.setupListener({ + onReceiveMessage: ( + newTabEvent: MessageEvent> + ) => { + if ( + resolve && + newTabEvent.data.message.type === "CONNECT_CALLBACK" + ) { + const accounts = newTabEvent.data.message.data.addresses; + + saveWalletDetailsToStorage(accounts, "pera-wallet-web"); + + resolve(accounts); + + onClose(); + + newPeraWalletTab?.close(); + } + } + }); + }); + } else if (event.data.message.type === "SELECT_ACCOUNT_EMBEDDED") { + const peraWalletConnectModalWrapper = document.getElementById( + PERA_WALLET_CONNECT_MODAL_ID + ); - onClose(); + const peraWalletConnectModal = peraWalletConnectModalWrapper + ?.querySelector("pera-wallet-connect-modal") + ?.shadowRoot?.querySelector(`.${PERA_WALLET_MODAL_CLASSNAME}`); + + const peraWalletConnectModalDesktopMode = peraWalletConnectModal + ?.querySelector("pera-wallet-modal-desktop-mode") + ?.shadowRoot?.querySelector( + ".pera-wallet-connect-modal-desktop-mode" + ); + + if (peraWalletConnectModal && peraWalletConnectModalDesktopMode) { + peraWalletConnectModal.classList.add( + `${PERA_WALLET_MODAL_CLASSNAME}--select-account` + ); + peraWalletConnectModal.classList.remove( + `${PERA_WALLET_MODAL_CLASSNAME}--create-passcode` + ); + peraWalletConnectModalDesktopMode.classList.add( + `pera-wallet-connect-modal-desktop-mode--select-account` + ); + peraWalletConnectModalDesktopMode.classList.remove( + `pera-wallet-connect-modal-desktop-mode--create-passcode` + ); + } - newPeraWalletTab?.close(); + appTellerManager.sendMessage({ + message: { + type: "SELECT_ACCOUNT_EMBEDDED_CALLBACK" + }, + origin: webWalletURLs.CONNECT, + targetWindow: peraWalletIframe.contentWindow! + }); } } - }); - }); - } else if (event.data.message.type === "SELECT_ACCOUNT_EMBEDDED") { - const peraWalletConnectModalWrapper = document.getElementById( - PERA_WALLET_CONNECT_MODAL_ID - ); - - const peraWalletConnectModal = peraWalletConnectModalWrapper - ?.querySelector("pera-wallet-connect-modal") - ?.shadowRoot?.querySelector(`.${PERA_WALLET_MODAL_CLASSNAME}`); - - const peraWalletConnectModalDesktopMode = peraWalletConnectModal - ?.querySelector("pera-wallet-modal-desktop-mode") - ?.shadowRoot?.querySelector(".pera-wallet-connect-modal-desktop-mode"); - - if (peraWalletConnectModal && peraWalletConnectModalDesktopMode) { - peraWalletConnectModal.classList.add( - `${PERA_WALLET_MODAL_CLASSNAME}--select-account` - ); - peraWalletConnectModal.classList.remove( - `${PERA_WALLET_MODAL_CLASSNAME}--create-passcode` - ); - peraWalletConnectModalDesktopMode.classList.add( - `pera-wallet-connect-modal-desktop-mode--select-account` - ); - peraWalletConnectModalDesktopMode.classList.remove( - `pera-wallet-connect-modal-desktop-mode--create-passcode` - ); - } - - appTellerManager.sendMessage({ - message: { - type: "SELECT_ACCOUNT_EMBEDDED_CALLBACK" - }, - origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow! - }); - } - } - } - - function onWebWalletConnect(peraWalletIframeWrapper: Element) { - if (browser === "Chrome") { - peraWalletIframe.setAttribute("id", PERA_WALLET_IFRAME_ID); - peraWalletIframe.setAttribute( - "src", - generateEmbeddedWalletURL(webWalletURLs.CONNECT) - ); - - peraWalletIframeWrapper.appendChild(peraWalletIframe); - - if (peraWalletIframe.contentWindow) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, - - origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow + } }); } - - appTellerManager.setupListener({ - onReceiveMessage - }); } else { waitForTabOpening(webWalletURLs.CONNECT) .then((newPeraWalletTab) => { @@ -590,74 +620,99 @@ class PeraWalletConnect { } if (peraWalletIframe.contentWindow) { - appTellerManager.sendMessage({ - message: { - type: "SIGN_TXN", - txn: signTxnRequestParams - }, + let count = 0; - origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), - targetWindow: peraWalletIframe.contentWindow - }); - } + const checkIframeIsInitialized = setInterval(() => { + count += 1; - appTellerManager.setupListener({ - onReceiveMessage: (event: MessageEvent>) => { - if (event.data.message.type === "SIGN_TXN_CALLBACK") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); + if (count === WAIT_FOR_TAB_MAX_TRY_COUNT) { + clearInterval(checkIframeIsInitialized); - resolve( - event.data.message.signedTxns.map((txn) => - base64ToUint8Array(txn.signedTxn) - ) - ); + return; } - if (event.data.message.type === "SIGN_TXN_NETWORK_MISMATCH") { - reject( - new PeraWalletConnectError( - { - type: "SIGN_TXN_NETWORK_MISMATCH", - detail: event.data.message.error + appTellerManager.sendMessage({ + message: { + type: "IFRAME_INITIALIZED" + }, + + origin: webWalletURLs.CONNECT, + targetWindow: peraWalletIframe.contentWindow! + }); + }, WAIT_FOR_TAB_TRY_INTERVAL); + + appTellerManager.setupListener({ + onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "IFRAME_INITIALIZED_RECEIVED") { + clearInterval(checkIframeIsInitialized); + + appTellerManager.sendMessage({ + message: { + type: "SIGN_TXN", + txn: signTxnRequestParams }, - event.data.message.error || "Network mismatch" - ) - ); - } - if (event.data.message.type === "SESSION_DISCONNECTED") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); + origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), + targetWindow: peraWalletIframe.contentWindow! + }); + } - resetWalletDetailsFromStorage(); + if (event.data.message.type === "SIGN_TXN_CALLBACK") { + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + closePeraWalletSignTxnModal(); - reject( - new PeraWalletConnectError( - { - type: "SESSION_DISCONNECTED", - detail: event.data.message.error - }, - event.data.message.error - ) - ); - } + resolve( + event.data.message.signedTxns.map((txn) => + base64ToUint8Array(txn.signedTxn) + ) + ); + } - if (event.data.message.type === "SIGN_TXN_CALLBACK_ERROR") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); + if (event.data.message.type === "SIGN_TXN_NETWORK_MISMATCH") { + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_NETWORK_MISMATCH", + detail: event.data.message.error + }, + event.data.message.error || "Network mismatch" + ) + ); + } - reject( - new PeraWalletConnectError( - { - type: "SIGN_TXN_CANCELLED" - }, - event.data.message.error - ) - ); + if (event.data.message.type === "SESSION_DISCONNECTED") { + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + closePeraWalletSignTxnModal(); + + resetWalletDetailsFromStorage(); + + reject( + new PeraWalletConnectError( + { + type: "SESSION_DISCONNECTED", + detail: event.data.message.error + }, + event.data.message.error + ) + ); + } + + if (event.data.message.type === "SIGN_TXN_CALLBACK_ERROR") { + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + closePeraWalletSignTxnModal(); + + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_CANCELLED" + }, + event.data.message.error + ) + ); + } } - } - }); + }); + } // Returns a promise that waits for the response from the web wallet. // The promise is resolved when the web wallet responds with the signed txn. diff --git a/src/util/network/teller/appTellerManager.ts b/src/util/network/teller/appTellerManager.ts index 1710127..67d8b52 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -62,6 +62,12 @@ export type PeraTeller = } | { type: "TAB_OPEN_RECEIVED"; + } + | { + type: "IFRAME_INITIALIZED"; + } + | { + type: "IFRAME_INITIALIZED_RECEIVED"; }; const appTellerManager = new Teller({ diff --git a/src/util/peraWalletConstants.ts b/src/util/peraWalletConstants.ts index 49d612b..28b8053 100644 --- a/src/util/peraWalletConstants.ts +++ b/src/util/peraWalletConstants.ts @@ -4,10 +4,12 @@ const PERA_WALLET_APP_DEEP_LINK = isAndroid() ? "algorand://" : "algorand-wc://" const PERA_DOWNLOAD_URL = "https://perawallet.app/download/"; function getPeraWebWalletURL(webWalletURL: string) { + console.log("webWalletURL", webWalletURL); + return { - ROOT: `https://${webWalletURL}`, - CONNECT: `https://${webWalletURL}/connect`, - TRANSACTION_SIGN: `https://${webWalletURL}/transaction/sign` + ROOT: `https://dev.web.perawallet.app:3000/`, + CONNECT: `https://dev.web.perawallet.app:3000/connect`, + TRANSACTION_SIGN: `https://dev.web.perawallet.app:3000/transaction/sign` }; } From 03624b8a1f3fc94c2c98b743d4ad3764e6c17373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Tue, 14 Mar 2023 18:01:32 +0300 Subject: [PATCH 08/15] fix: revert contant change --- src/util/dom/domUtils.ts | 4 ++-- src/util/peraWalletConstants.ts | 8 +++----- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 76e2889..38102ce 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,8 +1,8 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import PeraWalletConnectError from "../PeraWalletConnectError"; -const WAIT_FOR_TAB_TRY_INTERVAL = 300; -const WAIT_FOR_TAB_MAX_TRY_COUNT = 30; +export const WAIT_FOR_TAB_TRY_INTERVAL = 300; +export const WAIT_FOR_TAB_MAX_TRY_COUNT = 20; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); diff --git a/src/util/peraWalletConstants.ts b/src/util/peraWalletConstants.ts index 28b8053..49d612b 100644 --- a/src/util/peraWalletConstants.ts +++ b/src/util/peraWalletConstants.ts @@ -4,12 +4,10 @@ const PERA_WALLET_APP_DEEP_LINK = isAndroid() ? "algorand://" : "algorand-wc://" const PERA_DOWNLOAD_URL = "https://perawallet.app/download/"; function getPeraWebWalletURL(webWalletURL: string) { - console.log("webWalletURL", webWalletURL); - return { - ROOT: `https://dev.web.perawallet.app:3000/`, - CONNECT: `https://dev.web.perawallet.app:3000/connect`, - TRANSACTION_SIGN: `https://dev.web.perawallet.app:3000/transaction/sign` + ROOT: `https://${webWalletURL}`, + CONNECT: `https://${webWalletURL}/connect`, + TRANSACTION_SIGN: `https://${webWalletURL}/transaction/sign` }; } From 4a7ed9db331ec42ee41392ae6af779e4dd9f1f20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 15 Mar 2023 13:56:29 +0300 Subject: [PATCH 09/15] chore: code improvements --- src/modal/peraWalletConnectModalUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index b2a3141..ca6b126 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -63,7 +63,7 @@ function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { return (uri: string) => { if (!document.getElementById(PERA_WALLET_CONNECT_MODAL_ID)) { const root = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID); - const newURI = `${uri}&algorand=true&allowToSelectMultipleAccounts=${modalConfig.shouldSelectSingleAccount}`; + const newURI = `${uri}&algorand=true&shouldSelectSingleAccount=${modalConfig.shouldSelectSingleAccount}`; const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound} = modalConfig; root.innerHTML = ``; From 48de54f6470c7872148afd9e05165609d28d87be Mon Sep 17 00:00:00 2001 From: mucahit Date: Wed, 15 Mar 2023 11:47:25 +0000 Subject: [PATCH 10/15] build: Bump up version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb7c7ac..e1994aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@perawallet/connect", - "version": "1.1.1", + "version": "1.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@perawallet/connect", - "version": "1.1.1", + "version": "1.2.0", "license": "ISC", "dependencies": { "@evanhahn/lottie-web-light": "5.8.1", diff --git a/package.json b/package.json index 1d88a6d..24d67e0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.1.1", + "version": "1.2.0", "name": "@perawallet/connect", "description": "JavaScript SDK for integrating Pera Wallet to web applications.", "main": "dist/index.js", From 36bc820355d287652a490ae62ec364d830e1492e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 15 Mar 2023 15:00:07 +0300 Subject: [PATCH 11/15] feat: update readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 27221d6..9e07160 100644 --- a/README.md +++ b/README.md @@ -113,9 +113,9 @@ It's enabled by default but in some cases, you may not need the toast message (e ## Methods -#### `PeraWalletConnect.connect(): Promise` +#### `PeraWalletConnect.connect({shouldSelectSingleAccount = false}: PeraWalletConnectMethodOptions = {}): Promise` -Starts the initial connection flow and returns the array of account addresses. +Starts the initial connection flow and returns the array of account addresses. It can take `shouldSelectSingleAccount` as a parameter. this is optional and false by default. When this parameter is sent as true, only one account is allowed to be selected on the wallet side. #### `PeraWalletConnect.reconnectSession(): Promise` From 76cd05250c2d371354583f10a336b46d11e8aa6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 15 Mar 2023 15:03:15 +0300 Subject: [PATCH 12/15] chore: code improvements --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e07160..a2b71c4 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ It's enabled by default but in some cases, you may not need the toast message (e #### `PeraWalletConnect.connect({shouldSelectSingleAccount = false}: PeraWalletConnectMethodOptions = {}): Promise` -Starts the initial connection flow and returns the array of account addresses. It can take `shouldSelectSingleAccount` as a parameter. this is optional and false by default. When this parameter is sent as true, only one account is allowed to be selected on the wallet side. +Starts the initial connection flow and returns the array of account addresses. It can take `shouldSelectSingleAccount` as a parameter. This is optional and false by default. When this parameter is sent as true, only one account is allowed to be selected on the wallet side. #### `PeraWalletConnect.reconnectSession(): Promise` From ca3dbacd903655c0ca4179951e856524d43e16c4 Mon Sep 17 00:00:00 2001 From: Mucahit Tutuncu Date: Wed, 15 Mar 2023 14:27:04 +0000 Subject: [PATCH 13/15] Revert "feat(connect): add option for multiple account select" --- README.md | 4 +- src/PeraWalletConnect.ts | 51 ++++++++++++------- .../PeraWalletConnectModalDesktopMode.ts | 2 +- ...era-wallet-connect-modal-desktop-mode.scss | 10 ++-- src/modal/peraWalletConnectModalUtils.ts | 23 +-------- src/util/network/teller/appTellerManager.ts | 1 - src/util/peraWalletTypes.ts | 19 +------ 7 files changed, 45 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index a2b71c4..27221d6 100644 --- a/README.md +++ b/README.md @@ -113,9 +113,9 @@ It's enabled by default but in some cases, you may not need the toast message (e ## Methods -#### `PeraWalletConnect.connect({shouldSelectSingleAccount = false}: PeraWalletConnectMethodOptions = {}): Promise` +#### `PeraWalletConnect.connect(): Promise` -Starts the initial connection flow and returns the array of account addresses. It can take `shouldSelectSingleAccount` as a parameter. This is optional and false by default. When this parameter is sent as true, only one account is allowed to be selected on the wallet side. +Starts the initial connection flow and returns the array of account addresses. #### `PeraWalletConnect.reconnectSession(): Promise` diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 4656252..e3d6fa0 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -3,6 +3,7 @@ import WalletConnect from "@walletconnect/client"; import PeraWalletConnectError from "./util/PeraWalletConnectError"; import { + openPeraWalletConnectModal, openPeraWalletRedirectModal, removeModalWrapperFromDOM, PERA_WALLET_CONNECT_MODAL_ID, @@ -13,9 +14,9 @@ import { closePeraWalletSignTxnModal, PERA_WALLET_IFRAME_ID, PERA_WALLET_MODAL_CLASSNAME, + PeraWalletModalConfig, PERA_WALLET_SIGN_TXN_MODAL_ID, - setupPeraWalletConnectModalCloseListener, - generatePeraWalletConnectModalActions + setupPeraWalletConnectModalCloseListener } from "./modal/peraWalletConnectModalUtils"; import { getWalletDetailsFromStorage, @@ -32,10 +33,7 @@ import { formatJsonRpcRequest } from "./util/transaction/transactionUtils"; import {detectBrowser, isMobile} from "./util/device/deviceUtils"; -import { - PeraWalletConnectMethodOptions, - PeraWalletConnectOptions -} from "./util/peraWalletTypes"; +import {AlgorandChainIDs} from "./util/peraWalletTypes"; import {generateEmbeddedWalletURL} from "./util/peraWalletUtils"; import appTellerManager, {PeraTeller} from "./util/network/teller/appTellerManager"; import {getPeraWebWalletURL} from "./util/peraWalletConstants"; @@ -46,6 +44,27 @@ import { WAIT_FOR_TAB_TRY_INTERVAL } from "./util/dom/domUtils"; +interface PeraWalletConnectOptions { + bridge?: string; + shouldShowSignTxnToast?: boolean; + chainId?: AlgorandChainIDs; +} + +function generatePeraWalletConnectModalActions({ + isWebWalletAvailable, + shouldDisplayNewBadge, + shouldUseSound +}: PeraWalletModalConfig) { + return { + open: openPeraWalletConnectModal({ + isWebWalletAvailable, + shouldDisplayNewBadge, + shouldUseSound + }), + close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) + }; +} + class PeraWalletConnect { bridge: string; connector: WalletConnect | null; @@ -82,8 +101,7 @@ class PeraWalletConnect { resolve: (accounts: string[]) => void, reject: (reason?: any) => void, webWalletURL: string, - chainId: number | undefined, - shouldSelectSingleAccount: boolean + chainId: number | undefined ) { const browser = detectBrowser(); const webWalletURLs = getPeraWebWalletURL(webWalletURL); @@ -130,8 +148,7 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId, - shouldSelectSingleAccount + chainId } }, @@ -176,8 +193,7 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId, - shouldSelectSingleAccount + chainId } }, @@ -276,8 +292,7 @@ class PeraWalletConnect { type: "CONNECT", data: { ...getMetaInfo(), - chainId, - shouldSelectSingleAccount + chainId } }, @@ -351,7 +366,7 @@ class PeraWalletConnect { }; } - connect({shouldSelectSingleAccount = false}: PeraWalletConnectMethodOptions = {}) { + connect() { return new Promise(async (resolve, reject) => { try { // check if already connected and kill session first before creating a new one. @@ -376,8 +391,7 @@ class PeraWalletConnect { resolve, reject, webWalletURL, - this.chainId, - shouldSelectSingleAccount + this.chainId ); if (isWebWalletAvailable) { @@ -391,8 +405,7 @@ class PeraWalletConnect { qrcodeModal: generatePeraWalletConnectModalActions({ isWebWalletAvailable, shouldDisplayNewBadge, - shouldUseSound, - shouldSelectSingleAccount + shouldUseSound }) }); diff --git a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts index 673a72b..d2b4ceb 100644 --- a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts +++ b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts @@ -274,7 +274,7 @@ export class PeraWalletModalDesktopMode extends HTMLElement { const isWebWalletAvailable = this.getAttribute("is-web-wallet-avaliable"); // eslint-disable-next-line no-magic-numbers - const size = isWebWalletAvailable === "false" ? 250 : 235; + const size = isWebWalletAvailable === "false" ? 250 : 205; if (URI) { const qrCode = new QRCodeStyling({ diff --git a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss index 3a77458..c4088d4 100644 --- a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss +++ b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss @@ -192,8 +192,8 @@ .pera-wallet-connect-qr-code-wrapper { width: fit-content; - margin: 16px auto 0; - padding: 7px; + margin: 24px auto 0; + padding: 10px; box-shadow: 0px 20px 60px rgba(26, 35, 91, 0.15), 0px 4px 12px rgba(26, 35, 91, 0.05), 0px 1px 4px rgba(26, 35, 91, 0.06); @@ -205,7 +205,7 @@ text-align: center; - margin: 16px 0 12px; + margin: 32px 0 12px; font-size: 13px; font-weight: 500; @@ -329,6 +329,10 @@ gap: 24px; } + .pera-wallet-connect-qr-code-wrapper { + margin-top: 16px; + } + .pera-wallet-connect-modal-download-pera-view { padding: 24px; } diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index ca6b126..1aa63ff 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -7,7 +7,6 @@ export interface PeraWalletModalConfig { isWebWalletAvailable: boolean; shouldDisplayNewBadge: boolean; shouldUseSound: boolean; - shouldSelectSingleAccount: boolean; } // The ID of the wrapper element for PeraWalletConnectModal @@ -42,28 +41,11 @@ function createModalWrapperOnDOM(modalId: string) { return wrapper; } -function generatePeraWalletConnectModalActions({ - isWebWalletAvailable, - shouldDisplayNewBadge, - shouldUseSound, - shouldSelectSingleAccount -}: PeraWalletModalConfig) { - return { - open: openPeraWalletConnectModal({ - isWebWalletAvailable, - shouldDisplayNewBadge, - shouldUseSound, - shouldSelectSingleAccount - }), - close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID) - }; -} - function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { return (uri: string) => { if (!document.getElementById(PERA_WALLET_CONNECT_MODAL_ID)) { const root = createModalWrapperOnDOM(PERA_WALLET_CONNECT_MODAL_ID); - const newURI = `${uri}&algorand=true&shouldSelectSingleAccount=${modalConfig.shouldSelectSingleAccount}`; + const newURI = `${uri}&algorand=true`; const {isWebWalletAvailable, shouldDisplayNewBadge, shouldUseSound} = modalConfig; root.innerHTML = ``; @@ -170,6 +152,5 @@ export { closePeraWalletSignTxnToast, removeModalWrapperFromDOM, openPeraWalletSignTxnModal, - closePeraWalletSignTxnModal, - generatePeraWalletConnectModalActions + closePeraWalletSignTxnModal }; diff --git a/src/util/network/teller/appTellerManager.ts b/src/util/network/teller/appTellerManager.ts index e8e6526..67d8b52 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -5,7 +5,6 @@ export type PeraTeller = | { type: "CONNECT"; data: { - shouldSelectSingleAccount: boolean; title: string; url: string; favicon?: string; diff --git a/src/util/peraWalletTypes.ts b/src/util/peraWalletTypes.ts index a91f259..c30c055 100644 --- a/src/util/peraWalletTypes.ts +++ b/src/util/peraWalletTypes.ts @@ -10,21 +10,4 @@ interface PeraWalletDetails { selectedAccount: string; } -interface PeraWalletConnectMethodOptions { - shouldSelectSingleAccount?: boolean; -} - -interface PeraWalletConnectOptions { - bridge?: string; - shouldShowSignTxnToast?: boolean; - chainId?: AlgorandChainIDs; -} - -export type { - PeraWalletType, - PeraWalletPlatformType, - PeraWalletDetails, - AlgorandChainIDs, - PeraWalletConnectMethodOptions, - PeraWalletConnectOptions -}; +export type {PeraWalletType, PeraWalletPlatformType, PeraWalletDetails, AlgorandChainIDs}; From 4ace45e1c9b9d4e220dc2551870d289169cb7625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 15 Mar 2023 17:45:34 +0300 Subject: [PATCH 14/15] fix: update try count and interval --- src/util/dom/domUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 38102ce..b2cc287 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,8 +1,8 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import PeraWalletConnectError from "../PeraWalletConnectError"; -export const WAIT_FOR_TAB_TRY_INTERVAL = 300; -export const WAIT_FOR_TAB_MAX_TRY_COUNT = 20; +export const WAIT_FOR_TAB_TRY_INTERVAL = 700; +export const WAIT_FOR_TAB_MAX_TRY_COUNT = 25; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); From 82e42c5053030dca9d966b52761aab4b52cfc7f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Wed, 15 Mar 2023 18:20:14 +0300 Subject: [PATCH 15/15] fix: update max try count --- src/util/dom/domUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index b2cc287..be2c92a 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -2,7 +2,7 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import PeraWalletConnectError from "../PeraWalletConnectError"; export const WAIT_FOR_TAB_TRY_INTERVAL = 700; -export const WAIT_FOR_TAB_MAX_TRY_COUNT = 25; +export const WAIT_FOR_TAB_MAX_TRY_COUNT = 50; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]');