diff --git a/package.json b/package.json index 1398ea0..d920101 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.8", + "version": "1.0.9", "name": "@perawallet/connect-beta", "description": "Beta version of Pera Wallet Connect", "main": "dist/index.js", @@ -14,36 +14,36 @@ "author": "Pera Wallet", "license": "ISC", "devDependencies": { - "@hipo/eslint-config-base": "^4.1.1", - "@hipo/eslint-config-typescript": "^1.1.0", - "@rollup/plugin-image": "^2.1.1", - "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-replace": "^5.0.2", - "@typescript-eslint/eslint-plugin": "^5.17.0", - "@typescript-eslint/parser": "^5.17.0", - "eslint": "^8.12.0", - "eslint-config-prettier": "^8.5.0", - "node-sass": "^8.0.0", - "prettier": "^2.6.1", - "rollup": "^2.70.1", - "rollup-plugin-eslint": "^7.0.0", - "rollup-plugin-postcss": "^4.0.2", - "rollup-plugin-sizes": "^1.0.5", - "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-typescript2": "^0.31.2", - "sass": "^1.49.11", - "typescript": "^4.6.3" + "@hipo/eslint-config-base": "4.1.1", + "@hipo/eslint-config-typescript": "1.1.0", + "@rollup/plugin-image": "2.1.1", + "@rollup/plugin-json": "4.1.0", + "@rollup/plugin-replace": "5.0.2", + "@typescript-eslint/eslint-plugin": "6.18.1", + "@typescript-eslint/parser": "6.18.1", + "eslint": "8.12.0", + "eslint-config-prettier": "8.5.0", + "node-sass": "8.0.0", + "prettier": "2.6.1", + "rollup": "2.70.1", + "rollup-plugin-eslint": "7.0.0", + "rollup-plugin-postcss": "4.0.2", + "rollup-plugin-sizes": "1.0.5", + "rollup-plugin-terser": "7.0.2", + "rollup-plugin-typescript2": "0.31.2", + "sass": "1.49.11", + "typescript": "4.6.3" }, "dependencies": { "@evanhahn/lottie-web-light": "5.8.1", - "@walletconnect/client": "^1.8.0", - "@walletconnect/types": "^1.8.0", + "@walletconnect/client": "1.8.0", + "@walletconnect/types": "1.8.0", "bowser": "2.11.0", - "buffer": "^6.0.3", + "buffer": "6.0.3", "qr-code-styling": "1.6.0-rc.1" }, "peerDependencies": { - "algosdk": "^2.1.0" + "algosdk": "2.1.0" }, "types": "./dist/index.d.ts", "repository": { diff --git a/src/App.ts b/src/App.ts index 8333495..bd00af6 100644 --- a/src/App.ts +++ b/src/App.ts @@ -11,25 +11,27 @@ import {PeraWalletSignTxnModal} from "./modal/sign-txn/PeraWalletSignTxnModal"; import "./util/screen/setDynamicVhValue"; -window.customElements.define("pera-wallet-connect-modal", PeraWalletConnectModal); -window.customElements.define( - "pera-wallet-modal-desktop-mode", - PeraWalletModalDesktopMode -); -window.customElements.define("pera-wallet-modal-header", PeraWalletModalHeader); -window.customElements.define( +function defineCustomElement(name: string, element: CustomElementConstructor) { + if (!window.customElements.get(name)) { + window.customElements.define(name, element); + } +} +defineCustomElement("pera-wallet-connect-modal", PeraWalletConnectModal); +defineCustomElement("pera-wallet-modal-desktop-mode", PeraWalletModalDesktopMode); +defineCustomElement("pera-wallet-modal-header", PeraWalletModalHeader); +defineCustomElement( "pera-wallet-modal-touch-screen-mode", PeraWalletModalTouchScreenMode ); -window.customElements.define("pera-wallet-redirect-modal", PeraWalletRedirectModal); -window.customElements.define( +defineCustomElement("pera-wallet-redirect-modal", PeraWalletRedirectModal); +defineCustomElement( "pera-wallet-connect-modal-information-section", PeraWalletConnectModalInformationSection ); -window.customElements.define( +defineCustomElement( "pera-wallet-connect-modal-pending-message-section", PeraWalletConnectModalPendingMessageSection ); -window.customElements.define("pera-wallet-sign-txn-toast", PeraWalletSignTxnToast); -window.customElements.define("pera-wallet-sign-txn-modal", PeraWalletSignTxnModal); -window.customElements.define("pera-wallet-download-qr-code", PeraWalletDownloadQRCode); +defineCustomElement("pera-wallet-sign-txn-toast", PeraWalletSignTxnToast); +defineCustomElement("pera-wallet-sign-txn-modal", PeraWalletSignTxnModal); +defineCustomElement("pera-wallet-download-qr-code", PeraWalletDownloadQRCode); diff --git a/src/util/connect/connectFlowReducers.ts b/src/util/connect/connectFlowReducers.ts index c80f773..b1707fa 100644 --- a/src/util/connect/connectFlowReducers.ts +++ b/src/util/connect/connectFlowReducers.ts @@ -1,175 +1,170 @@ import { - PERA_WALLET_IFRAME_ID, PERA_WALLET_CONNECT_MODAL_ID, - PERA_WALLET_MODAL_CLASSNAME, removeModalWrapperFromDOM } from "../../modal/peraWalletConnectModalUtils"; import PeraWalletConnectError from "../PeraWalletConnectError"; -import {getMetaInfo, waitForTabOpening} from "../dom/domUtils"; -import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; import {saveWalletDetailsToStorage} from "../storage/storageUtils"; import { - EmbeddedConnectFlowTellerReducerParams, NewTabConnectFlowTellerReducerParams } from "./connectFlowModels"; // =========== Embedded Connect Flow =========== -function embeddedConnectFlowTellerReducer({ - event, - peraWalletIframe, - chainId, - isIframeInitializedChecker, - webWalletURLs, - resolve, - reject -}: EmbeddedConnectFlowTellerReducerParams) { - switch (event.data.message.type) { - case "IFRAME_INITIALIZED_RECEIVED": - clearInterval(isIframeInitializedChecker); - - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, - - origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow! - }); - break; - - case "CONNECT_CALLBACK": { - const accounts = event.data.message.data.addresses; - - saveWalletDetailsToStorage(accounts, "pera-wallet-web"); - - resolve(accounts); - - removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); - - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - - break; - } - - case "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.` - ) - ); - - removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); - - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - break; - - case "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" - ) - ); - - removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); - 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); - - removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); - - newPeraWalletTab?.close(); - } - } - }); - }); - - break; - } - - case "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! - }); - - break; - } - - default: - break; - } -} +// function embeddedConnectFlowTellerReducer({ +// event, +// peraWalletIframe, +// chainId, +// isIframeInitializedChecker, +// webWalletURLs, +// resolve, +// reject +// }: EmbeddedConnectFlowTellerReducerParams) { +// switch (event.data.message.type) { +// case "IFRAME_INITIALIZED_RECEIVED": +// clearInterval(isIframeInitializedChecker); + +// appTellerManager.sendMessage({ +// message: { +// type: "CONNECT", +// data: { +// ...getMetaInfo(), +// chainId +// } +// }, + +// origin: webWalletURLs.CONNECT, +// targetWindow: peraWalletIframe.contentWindow! +// }); +// break; + +// case "CONNECT_CALLBACK": { +// const accounts = event.data.message.data.addresses; + +// saveWalletDetailsToStorage(accounts, "pera-wallet-web"); + +// resolve(accounts); + +// removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); + +// document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + +// break; +// } + +// case "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.` +// ) +// ); + +// removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); + +// document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); +// break; + +// case "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" +// ) +// ); + +// removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); +// 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); + +// removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); + +// newPeraWalletTab?.close(); +// } +// } +// }); +// }); + +// break; +// } + +// case "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! +// }); + +// break; +// } + +// default: +// break; +// } +// } // =========== New Tab Connect Flow =========== function newTabConnectFlowTellerReducer({ @@ -206,4 +201,4 @@ function newTabConnectFlowTellerReducer({ } } -export {embeddedConnectFlowTellerReducer, newTabConnectFlowTellerReducer}; +export {newTabConnectFlowTellerReducer}; diff --git a/src/util/sign/signTransactionFlowReducers.ts b/src/util/sign/signTransactionFlowReducers.ts index c3774a6..4ffe02c 100644 --- a/src/util/sign/signTransactionFlowReducers.ts +++ b/src/util/sign/signTransactionFlowReducers.ts @@ -1,129 +1,121 @@ -import { - PERA_WALLET_IFRAME_ID, - closePeraWalletSignTxnModal -} from "../../modal/peraWalletConnectModalUtils"; import PeraWalletConnectError from "../PeraWalletConnectError"; -import {PeraWalletArbitraryData, PeraWalletTransaction} from "../model/peraWalletModels"; -import appTellerManager from "../network/teller/appTellerManager"; -import {generateEmbeddedWalletURL} from "../peraWalletUtils"; import {resetWalletDetailsFromStorage} from "../storage/storageUtils"; import {base64ToUint8Array} from "../transaction/transactionUtils"; import { - EmbeddedSignTransactionFlowTellerReducerParams, NewTabSignTransactionFlowTellerReducerParams } from "./signTransactionFlowModels"; // =========== Embedded Sign Flow =========== -function embeddedSignTransactionFlowTellerReducer({ - event, - peraWalletIframe, - signTxnRequestParams, - isIframeInitializedChecker, - webWalletURLs, - signer, - chainId, - method, - resolve, - reject -}: EmbeddedSignTransactionFlowTellerReducerParams) { - switch (event.data.message.type) { - case "IFRAME_INITIALIZED_RECEIVED": { - clearInterval(isIframeInitializedChecker); - - let message; - - if (method === "SIGN_TXN") { - message = { - type: "SIGN_TXN", - txn: signTxnRequestParams as PeraWalletTransaction[] - } as const; - } else if (method === "SIGN_DATA" && signer && chainId) { - message = { - type: "SIGN_DATA", - data: signTxnRequestParams as PeraWalletArbitraryData[], - - signer, - chainId - } as const; - } - - if (message) { - appTellerManager.sendMessage({ - message, - - origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), - targetWindow: peraWalletIframe.contentWindow! - }); - } - - break; - } - - case "SIGN_TXN_CALLBACK": - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - - resolve( - event.data.message.signedTxns.map((txn) => base64ToUint8Array(txn.signedTxn)) - ); - break; - - case "SIGN_DATA_CALLBACK": - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - - resolve( - event.data.message.signedData.map((data) => base64ToUint8Array(data.signedData)) - ); - break; - - case "SIGN_TXN_NETWORK_MISMATCH" || "SIGN_DATA_NETWORK_MISMATCH": - reject( - new PeraWalletConnectError( - { - type: `${method}_NETWORK_MISMATCH`, - detail: event.data.message.error - }, - event.data.message.error || "Network mismatch" - ) - ); - break; - - case "SIGN_TXN_CALLBACK_ERROR" || "SIGN_DATA_CALLBACK_ERROR": - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - - reject( - new PeraWalletConnectError( - { - type: `${method}_CANCELLED` - }, - event.data.message.error - ) - ); - break; - - case "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 - ) - ); - break; - - default: - break; - } -} +// function embeddedSignTransactionFlowTellerReducer({ +// event, +// peraWalletIframe, +// signTxnRequestParams, +// isIframeInitializedChecker, +// webWalletURLs, +// signer, +// chainId, +// method, +// resolve, +// reject +// }: EmbeddedSignTransactionFlowTellerReducerParams) { +// switch (event.data.message.type) { +// case "IFRAME_INITIALIZED_RECEIVED": { +// clearInterval(isIframeInitializedChecker); + +// let message; + +// if (method === "SIGN_TXN") { +// message = { +// type: "SIGN_TXN", +// txn: signTxnRequestParams as PeraWalletTransaction[] +// } as const; +// } else if (method === "SIGN_DATA" && signer && chainId) { +// message = { +// type: "SIGN_DATA", +// data: signTxnRequestParams as PeraWalletArbitraryData[], + +// signer, +// chainId +// } as const; +// } + +// if (message) { +// appTellerManager.sendMessage({ +// message, + +// origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), +// targetWindow: peraWalletIframe.contentWindow! +// }); +// } + +// break; +// } + +// case "SIGN_TXN_CALLBACK": +// document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); +// closePeraWalletSignTxnModal(); + +// resolve( +// event.data.message.signedTxns.map((txn) => base64ToUint8Array(txn.signedTxn)) +// ); +// break; + +// case "SIGN_DATA_CALLBACK": +// document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); +// closePeraWalletSignTxnModal(); + +// resolve( +// event.data.message.signedData.map((data) => base64ToUint8Array(data.signedData)) +// ); +// break; + +// case "SIGN_TXN_NETWORK_MISMATCH" || "SIGN_DATA_NETWORK_MISMATCH": +// reject( +// new PeraWalletConnectError( +// { +// type: `${method}_NETWORK_MISMATCH`, +// detail: event.data.message.error +// }, +// event.data.message.error || "Network mismatch" +// ) +// ); +// break; + +// case "SIGN_TXN_CALLBACK_ERROR" || "SIGN_DATA_CALLBACK_ERROR": +// document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); +// closePeraWalletSignTxnModal(); + +// reject( +// new PeraWalletConnectError( +// { +// type: `${method}_CANCELLED` +// }, +// event.data.message.error +// ) +// ); +// break; + +// case "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 +// ) +// ); +// break; + +// default: +// break; +// } +// } // =========== New Tab Sign Flow =========== function newTabSignTransactionFlowTellerReducer({ @@ -196,4 +188,4 @@ function newTabSignTransactionFlowTellerReducer({ } } -export {embeddedSignTransactionFlowTellerReducer, newTabSignTransactionFlowTellerReducer}; +export {newTabSignTransactionFlowTellerReducer};