From a383bdc0e2788fa7bd6302a6286594f32c7c97be Mon Sep 17 00:00:00 2001 From: mucahit Date: Fri, 9 Dec 2022 10:34:06 +0000 Subject: [PATCH 01/19] fix: Remove staging config & network param --- README.md | 23 +--- src/PeraWalletConnect.ts | 114 ++++-------------- .../PeraWalletModalTouchScreenMode.ts | 10 +- src/modal/peraWalletConnectModalUtils.ts | 21 ++++ ...eraWalletConnectModalInformationSection.ts | 8 +- .../PeraWalletConnectModalPendingMessage.ts | 5 +- src/util/api/peraWalletConnectApi.ts | 11 +- src/util/peraWalletConstants.ts | 11 +- src/util/peraWalletTypes.ts | 16 +-- src/util/peraWalletUtils.ts | 20 --- src/util/storage/storageConstants.ts | 4 +- src/util/storage/storageUtils.ts | 16 +-- src/util/transaction/transactionUtils.ts | 34 +++++- 13 files changed, 99 insertions(+), 194 deletions(-) diff --git a/README.md b/README.md index 5e29bba..cf0e8c0 100644 --- a/README.md +++ b/README.md @@ -88,15 +88,10 @@ try { ## Options -| option | default | value | | -| ------------------------ | --------- | ------------------------------------- | -------- | -| `network` | `mainnet` | `dev`, `testnet`, `mainnet` | optional | -| `chainId` | `4160` | `416001`, `416002`, `416003` , `4160` | optional | -| `shouldShowSignTxnToast` | `true` | `boolean` | optional | - -#### **`network`** - -Determines which Web Wallet URL is to be used. Most of the time, you don't need to provide it. If you specifically want to use the Testnet version of Web Wallet for development purposes, simply provide `network: testnet` to the `PeraWalletConnect` constructor. +| option | default | value | | +| ------------------------ | ------- | ------------------------------------- | -------- | +| `chainId` | `4160` | `416001`, `416002`, `416003` , `4160` | optional | +| `shouldShowSignTxnToast` | `true` | `boolean` | optional | #### **`chainId`** @@ -120,18 +115,8 @@ It's enabled by default but in some cases, you may not need the toast message (e #### `PeraWalletConnect.connect(): Promise` -| option | default | value | | -| --------- | --------- | --------------------------- | -------- | -| `network` | `mainnet` | `dev`, `testnet`, `mainnet` | optional | - Starts the initial connection flow and returns the array of account addresses. -`network` param of the `connect` method overrides the initial `network` on the constructor. - -```javascript -PeraWalletConnect.connect({network: "testnet"}); //optional -``` - #### `PeraWalletConnect.reconnectSession(): Promise` Reconnects to the wallet if there is any active connection and returns the array of account addresses. diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 84cf12b..1c517f9 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -16,14 +16,14 @@ import { PERA_WALLET_IFRAME_ID, PERA_WALLET_MODAL_CLASSNAME, PeraWalletModalConfig, - PERA_WALLET_SIGN_TXN_MODAL_ID + PERA_WALLET_SIGN_TXN_MODAL_ID, + setupPeraWalletConnectModalCloseListener } from "./modal/peraWalletConnectModalUtils"; import { getWalletDetailsFromStorage, getLocalStorage, resetWalletDetailsFromStorage, saveWalletDetailsToStorage, - getNetworkFromStorage, getWalletConnectObjectFromStorage, getWalletPlatformFromStorage } from "./util/storage/storageUtils"; @@ -32,11 +32,11 @@ import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./util/storage/storageConstants"; import {PeraWalletTransaction, SignerTransaction} from "./util/model/peraWalletModels"; import { base64ToUint8Array, - encodeUnsignedTransactionInBase64 + composeTransaction } from "./util/transaction/transactionUtils"; import {detectBrowser, isMobile} from "./util/device/deviceUtils"; -import {AlgorandChainIDs, AppMeta, PeraWalletNetwork} from "./util/peraWalletTypes"; -import {generateEmbeddedWalletURL, getPeraWalletAppMeta} from "./util/peraWalletUtils"; +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"; @@ -44,9 +44,7 @@ import {getMetaInfo, waitForTabOpening} from "./util/dom/domUtils"; interface PeraWalletConnectOptions { bridge?: string; deep_link?: string; - app_meta?: AppMeta; shouldShowSignTxnToast?: boolean; - network?: PeraWalletNetwork; chainId?: AlgorandChainIDs; } @@ -69,7 +67,6 @@ class PeraWalletConnect { bridge: string; connector: WalletConnect | null; shouldShowSignTxnToast: boolean; - network = getNetworkFromStorage(); chainId?: number; constructor(options?: PeraWalletConnectOptions) { @@ -82,22 +79,6 @@ class PeraWalletConnect { ); } - if (options?.app_meta) { - getLocalStorage()?.setItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.APP_META, - JSON.stringify(options.app_meta) - ); - } - - if (options?.network) { - this.network = options.network; - } - - getLocalStorage()?.setItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.NETWORK, - options?.network || "mainnet" - ); - this.connector = null; this.shouldShowSignTxnToast = typeof options?.shouldShowSignTxnToast === "undefined" @@ -128,7 +109,7 @@ class PeraWalletConnect { chainId: number | undefined ) { const browser = detectBrowser(); - const webWalletURLs = getPeraWebWalletURL(webWalletURL, this.network); + const webWalletURLs = getPeraWebWalletURL(webWalletURL); const peraWalletIframe = document.createElement("iframe"); @@ -361,18 +342,17 @@ class PeraWalletConnect { }; } - connect({network}: {network?: PeraWalletNetwork} = {}) { + connect() { return new Promise(async (resolve, reject) => { try { // check if already connected and kill session first before creating a new one. // This is to kill the last session and make sure user start from scratch whenever `.connect()` method is called. if (this.connector?.connected) { - await this.connector.killSession(); - } - - if (network) { - // override network if provided - getLocalStorage()?.setItem(PERA_WALLET_LOCAL_STORAGE_KEYS.NETWORK, network); + try { + await this.connector.killSession(); + } catch (_error) { + // No need to handle + } } const { @@ -381,7 +361,7 @@ class PeraWalletConnect { webWalletURL, shouldDisplayNewBadge, shouldUseSound - } = await getPeraConnectConfig(network || this.network); + } = await getPeraConnectConfig(); const {onWebWalletConnect} = this.connectWithWebWallet( resolve, @@ -410,19 +390,7 @@ class PeraWalletConnect { chainId: this.chainId || 4160 }); - const peraWalletConnectModalWrapper = document.getElementById( - PERA_WALLET_CONNECT_MODAL_ID - ); - - const peraWalletConnectModal = peraWalletConnectModalWrapper - ?.querySelector("pera-wallet-connect-modal") - ?.shadowRoot?.querySelector(`.${PERA_WALLET_MODAL_CLASSNAME}`); - - const closeButton = peraWalletConnectModal - ?.querySelector("pera-wallet-modal-header") - ?.shadowRoot?.getElementById("pera-wallet-modal-header-close-button"); - - closeButton?.addEventListener("click", () => { + setupPeraWalletConnectModalCloseListener(() => reject( new PeraWalletConnectError( { @@ -430,10 +398,8 @@ class PeraWalletConnect { }, "Connect modal is closed by user" ) - ); - - removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); - }); + ) + ); this.connector.on("connect", (error, _payload) => { if (error) { @@ -447,15 +413,13 @@ class PeraWalletConnect { } catch (error: any) { console.log(error); - const {name} = getPeraWalletAppMeta(); - reject( new PeraWalletConnectError( { type: "SESSION_CONNECT", detail: error }, - error.message || `There was an error while connecting to ${name}` + error.message || `There was an error while connecting to Pera Wallet` ) ); } @@ -470,7 +434,7 @@ class PeraWalletConnect { // ================================================= // // Pera Wallet Web flow if (walletDetails?.type === "pera-wallet-web") { - const {isWebWalletAvailable} = await getPeraConnectConfig(this.network); + const {isWebWalletAvailable} = await getPeraConnectConfig(); if (isWebWalletAvailable) { resolve(walletDetails.accounts || []); @@ -513,15 +477,13 @@ class PeraWalletConnect { // If the bridge is not active, then disconnect await this.disconnect(); - const {name} = getPeraWalletAppMeta(); - reject( new PeraWalletConnectError( { type: "SESSION_RECONNECT", detail: error }, - error.message || `There was an error while reconnecting to ${name}` + error.message || `There was an error while reconnecting to Pera Wallet` ) ); } @@ -547,7 +509,7 @@ class PeraWalletConnect { try { try { - const {silent} = await getPeraConnectConfig(this.network); + const {silent} = await getPeraConnectConfig(); const response = await this.connector!.sendCustomRequest( formattedSignTxnRequest, @@ -586,7 +548,7 @@ class PeraWalletConnect { webWalletURL: string ) { return new Promise((resolve, reject) => { - const webWalletURLs = getPeraWebWalletURL(webWalletURL, this.network); + const webWalletURLs = getPeraWebWalletURL(webWalletURL); const browser = detectBrowser(); let newPeraWalletTab: Window | null; @@ -784,41 +746,15 @@ class PeraWalletConnect { // Prepare transactions to be sent to wallet const signTxnRequestParams = txGroups.flatMap((txGroup) => - txGroup.map((txGroupDetail) => { - let signers: PeraWalletTransaction["signers"]; - - if (signerAddress && !(txGroupDetail.signers || []).includes(signerAddress)) { - signers = []; - } - - const txnRequestParams: PeraWalletTransaction = { - txn: encodeUnsignedTransactionInBase64(txGroupDetail.txn) - }; - - if (Array.isArray(signers)) { - txnRequestParams.signers = signers; - } - - if (txGroupDetail.authAddr) { - txnRequestParams.authAddr = txGroupDetail.authAddr; - } - - if (txGroupDetail.message) { - txnRequestParams.message = txGroupDetail.message; - } - - if (txGroupDetail.msig) { - txnRequestParams.msig = txGroupDetail.msig; - } - - return txnRequestParams; - }) + txGroup.map((txGroupDetail) => + composeTransaction(txGroupDetail, signerAddress) + ) ); // ================================================= // // Pera Wallet Web flow if (walletDetails?.type === "pera-wallet-web") { - const {webWalletURL} = await getPeraConnectConfig(this.network); + const {webWalletURL} = await getPeraConnectConfig(); return this.signTransactionWithWeb(signTxnRequestParams, webWalletURL); } diff --git a/src/modal/mode/touch-screen/PeraWalletModalTouchScreenMode.ts b/src/modal/mode/touch-screen/PeraWalletModalTouchScreenMode.ts index c86131b..56aa2e2 100644 --- a/src/modal/mode/touch-screen/PeraWalletModalTouchScreenMode.ts +++ b/src/modal/mode/touch-screen/PeraWalletModalTouchScreenMode.ts @@ -1,11 +1,7 @@ -import { - generatePeraWalletConnectDeepLink, - getPeraWalletAppMeta -} from "../../../util/peraWalletUtils"; +import {generatePeraWalletConnectDeepLink} from "../../../util/peraWalletUtils"; import styles from "./_pera-wallet-modal-touch-screen-mode.scss"; const peraWalletModalTouchScreenMode = document.createElement("template"); -const {name} = getPeraWalletAppMeta(); const touchScreenDefaultMode = `
@@ -17,7 +13,7 @@ const touchScreenDefaultMode = ` class="pera-wallet-connect-modal-touch-screen-mode__launch-pera-wallet-button" rel="noopener noreferrer" target="_blank"> - Launch ${name} + Launch Pera Wallet
- Install ${name} + Install Pera Wallet
diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts index c0440d8..1aa63ff 100644 --- a/src/modal/peraWalletConnectModalUtils.ts +++ b/src/modal/peraWalletConnectModalUtils.ts @@ -53,6 +53,26 @@ function openPeraWalletConnectModal(modalConfig: PeraWalletModalConfig) { }; } +function setupPeraWalletConnectModalCloseListener(onClose: VoidFunction) { + const peraWalletConnectModalWrapper = document.getElementById( + PERA_WALLET_CONNECT_MODAL_ID + ); + + const peraWalletConnectModal = peraWalletConnectModalWrapper + ?.querySelector("pera-wallet-connect-modal") + ?.shadowRoot?.querySelector(`.${PERA_WALLET_MODAL_CLASSNAME}`); + + const closeButton = peraWalletConnectModal + ?.querySelector("pera-wallet-modal-header") + ?.shadowRoot?.getElementById("pera-wallet-modal-header-close-button"); + + closeButton?.addEventListener("click", () => { + onClose(); + + removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID); + }); +} + /** * Creates a PeraWalletRedirectModal instance and renders it on the DOM. * @@ -126,6 +146,7 @@ export { PERA_WALLET_WEB_WALLET_IFRAME_CLASSNAME, PERA_WALLET_IFRAME_ID, openPeraWalletConnectModal, + setupPeraWalletConnectModalCloseListener, openPeraWalletRedirectModal, openPeraWalletSignTxnToast, closePeraWalletSignTxnToast, diff --git a/src/modal/section/information/PeraWalletConnectModalInformationSection.ts b/src/modal/section/information/PeraWalletConnectModalInformationSection.ts index 6c3e1e5..94d1427 100644 --- a/src/modal/section/information/PeraWalletConnectModalInformationSection.ts +++ b/src/modal/section/information/PeraWalletConnectModalInformationSection.ts @@ -2,14 +2,12 @@ import ShieldTickIcon from "../../../asset/icon/ShieldTick.svg"; import LayerIcon from "../../../asset/icon/Layer.svg"; import NoteIcon from "../../../asset/icon/Note.svg"; import PeraWalletWithText from "../../../asset/icon/PeraWallet--with-text.svg"; +import PeraWalletLogo from "../../../asset/icon/PeraWallet.svg"; import {isSmallScreen} from "../../../util/screen/screenSizeUtils"; -import {getPeraWalletAppMeta} from "../../../util/peraWalletUtils"; import styles from "./_pera-wallet-connect-modal-information-section.scss"; import {isMobile} from "../../../util/device/deviceUtils"; -const {logo, name} = getPeraWalletAppMeta(); - const peraWalletConnectModalInformationSectionTemplate = document.createElement("template"); const informationSectionClassNames = isMobile() @@ -20,13 +18,13 @@ peraWalletConnectModalInformationSectionTemplate.innerHTML = `
Pera Wallet Logo

- Connect to ${name} + Connect to Pera Wallet

diff --git a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts index fff608f..df6d5c7 100644 --- a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts +++ b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts @@ -1,10 +1,10 @@ +import PeraWalletLogo from "../../../asset/icon/PeraWallet.svg"; import HelpIcon from "../../../asset/icon/Help.svg"; import SendIcon from "../../../asset/icon/Send.svg"; import animationData from "./lotties/PeraLoaderAnimationLottie.json"; import lottie from "lottie-web"; -import {getPeraWalletAppMeta} from "../../../util/peraWalletUtils"; import { PERA_WALLET_CONNECT_MODAL_ID, removeModalWrapperFromDOM @@ -16,7 +16,6 @@ import { CONNECT_TIMEOUT_INTERVAL } from "./util/peraWalletConnectModalPendingMessageConstants"; -const {logo} = getPeraWalletAppMeta(); const peraWalletConnectModalPendingMessageTemplate = document.createElement("template"); peraWalletConnectModalPendingMessageTemplate.innerHTML = ` @@ -42,7 +41,7 @@ peraWalletConnectModalPendingMessageTemplate.innerHTML = ` const peraWalletConnectTryAgainView = `
- Pera Wallet Logo + Pera Wallet Logo

Couldn’t establish connection diff --git a/src/util/api/peraWalletConnectApi.ts b/src/util/api/peraWalletConnectApi.ts index 2814f59..88d8bb5 100644 --- a/src/util/api/peraWalletConnectApi.ts +++ b/src/util/api/peraWalletConnectApi.ts @@ -1,17 +1,14 @@ import {shuffleArray} from "../array/arrayUtils"; -import {PeraWalletNetwork} from "../peraWalletTypes"; import fetcher from "./fetcher"; import {PeraWalletConfig} from "./peraWalletConnectApiTypes"; const PERA_CONNECT_CONFIG_URL = "https://wc.perawallet.app/config.json"; -const PERA_CONNECT_CONFIG_STAGING_URL = "https://wc.perawallet.app/config-staging.json"; /** * @returns {object} {web_wallet: boolean, web_wallet_url: string, use_sound: boolean, display_new_badge: boolean, servers: string[]} */ -function fetchPeraConnectConfig(network: PeraWalletNetwork) { - const configURL = - network === "mainnet" ? PERA_CONNECT_CONFIG_URL : PERA_CONNECT_CONFIG_STAGING_URL; +function fetchPeraConnectConfig() { + const configURL = PERA_CONNECT_CONFIG_URL; return fetcher<{ web_wallet: boolean | undefined; @@ -26,7 +23,7 @@ function fetchPeraConnectConfig(network: PeraWalletNetwork) { /** * @returns {object} {bridgeURL: string, webWalletURL: string, isWebWalletAvailable: boolean, shouldDisplayNewBadge: boolean, shouldUseSound: boolean} */ -async function getPeraConnectConfig(network: PeraWalletNetwork) { +async function getPeraConnectConfig() { let peraWalletConfig: PeraWalletConfig = { bridgeURL: "", webWalletURL: "", @@ -37,7 +34,7 @@ async function getPeraConnectConfig(network: PeraWalletNetwork) { }; try { - const response = await fetchPeraConnectConfig(network); + const response = await fetchPeraConnectConfig(); if (typeof response.web_wallet !== "undefined" && response.web_wallet_url) { peraWalletConfig.isWebWalletAvailable = response.web_wallet!; diff --git a/src/util/peraWalletConstants.ts b/src/util/peraWalletConstants.ts index b38de14..49d612b 100644 --- a/src/util/peraWalletConstants.ts +++ b/src/util/peraWalletConstants.ts @@ -1,18 +1,9 @@ import {isAndroid} from "./device/deviceUtils"; -import {PeraWalletNetwork} from "./peraWalletTypes"; const PERA_WALLET_APP_DEEP_LINK = isAndroid() ? "algorand://" : "algorand-wc://"; const PERA_DOWNLOAD_URL = "https://perawallet.app/download/"; -function getPeraWebWalletURL(webWalletURL: string, network: PeraWalletNetwork) { - if (network === "dev") { - return { - ROOT: "https://localhost:3001", - CONNECT: "https://localhost:3001/connect", - TRANSACTION_SIGN: "https://localhost:3001/transaction/sign" - }; - } - +function getPeraWebWalletURL(webWalletURL: string) { return { ROOT: `https://${webWalletURL}`, CONNECT: `https://${webWalletURL}/connect`, diff --git a/src/util/peraWalletTypes.ts b/src/util/peraWalletTypes.ts index 2841dc3..c30c055 100644 --- a/src/util/peraWalletTypes.ts +++ b/src/util/peraWalletTypes.ts @@ -1,10 +1,3 @@ -interface AppMeta { - logo: string; - name: string; - main_color: string; -} - -type PeraWalletNetwork = "dev" | "testnet" | "mainnet"; type PeraWalletType = "pera-wallet" | "pera-wallet-web"; type PeraWalletPlatformType = "mobile" | "web" | null; @@ -17,11 +10,4 @@ interface PeraWalletDetails { selectedAccount: string; } -export type { - AppMeta, - PeraWalletNetwork, - PeraWalletType, - PeraWalletPlatformType, - PeraWalletDetails, - AlgorandChainIDs -}; +export type {PeraWalletType, PeraWalletPlatformType, PeraWalletDetails, AlgorandChainIDs}; diff --git a/src/util/peraWalletUtils.ts b/src/util/peraWalletUtils.ts index d0bec9b..d662b44 100644 --- a/src/util/peraWalletUtils.ts +++ b/src/util/peraWalletUtils.ts @@ -1,8 +1,5 @@ -import PeraWalletLogo from "../asset/icon/PeraWallet.svg"; - import {detectBrowser, isAndroid, isIOS} from "./device/deviceUtils"; import {PERA_WALLET_APP_DEEP_LINK} from "./peraWalletConstants"; -import {AppMeta} from "./peraWalletTypes"; import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./storage/storageConstants"; import {getLocalStorage} from "./storage/storageUtils"; @@ -19,22 +16,6 @@ function generatePeraWalletAppDeepLink(shouldAddBrowserName = true): string { return appDeepLink; } -function getPeraWalletAppMeta(): AppMeta { - const storedAppMeta = getLocalStorage()?.getItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.APP_META - ); - - if (storedAppMeta) { - return JSON.parse(storedAppMeta) as AppMeta; - } - - return { - logo: PeraWalletLogo, - name: "Pera Wallet", - main_color: "#ffee55" - }; -} - function generateEmbeddedWalletURL(url: string) { const newURL = new URL(url); @@ -71,7 +52,6 @@ function generatePeraWalletConnectDeepLink(uri: string): string { export { generatePeraWalletAppDeepLink, - getPeraWalletAppMeta, generatePeraWalletConnectDeepLink, generateEmbeddedWalletURL }; diff --git a/src/util/storage/storageConstants.ts b/src/util/storage/storageConstants.ts index 685c9ac..1bf0f5e 100644 --- a/src/util/storage/storageConstants.ts +++ b/src/util/storage/storageConstants.ts @@ -1,9 +1,7 @@ const PERA_WALLET_LOCAL_STORAGE_KEYS = { WALLET: "PeraWallet.Wallet", WALLETCONNECT: "walletconnect", - DEEP_LINK: "PeraWallet.DeepLink", - APP_META: "PeraWallet.AppMeta", - NETWORK: "PeraWallet.Network" + DEEP_LINK: "PeraWallet.DeepLink" }; export {PERA_WALLET_LOCAL_STORAGE_KEYS}; diff --git a/src/util/storage/storageUtils.ts b/src/util/storage/storageUtils.ts index d1f4c03..9c8f27b 100644 --- a/src/util/storage/storageUtils.ts +++ b/src/util/storage/storageUtils.ts @@ -1,11 +1,7 @@ // eslint-disable-next-line import/no-unresolved import {IWalletConnectSession} from "@walletconnect/types"; -import { - PeraWalletDetails, - PeraWalletNetwork, - PeraWalletPlatformType -} from "../peraWalletTypes"; +import {PeraWalletDetails, PeraWalletPlatformType} from "../peraWalletTypes"; import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./storageConstants"; function getLocalStorage() { @@ -38,14 +34,6 @@ function getWalletDetailsFromStorage(): PeraWalletDetails | null { return null; } -function getNetworkFromStorage(): PeraWalletNetwork { - const storedNetwork = getLocalStorage()?.getItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.NETWORK - ) as PeraWalletNetwork; - - return storedNetwork || "mainnet"; -} - function getWalletConnectObjectFromStorage(): IWalletConnectSession | null { const storedWalletConnectObject = getLocalStorage()?.getItem( PERA_WALLET_LOCAL_STORAGE_KEYS.WALLETCONNECT @@ -63,7 +51,6 @@ function resetWalletDetailsFromStorage() { try { getLocalStorage()?.removeItem(PERA_WALLET_LOCAL_STORAGE_KEYS.WALLETCONNECT); getLocalStorage()?.removeItem(PERA_WALLET_LOCAL_STORAGE_KEYS.WALLET); - getLocalStorage()?.removeItem(PERA_WALLET_LOCAL_STORAGE_KEYS.NETWORK); resolve(undefined); } catch (error) { reject(error); @@ -89,7 +76,6 @@ export { saveWalletDetailsToStorage, resetWalletDetailsFromStorage, getWalletDetailsFromStorage, - getNetworkFromStorage, getWalletConnectObjectFromStorage, getWalletPlatformFromStorage }; diff --git a/src/util/transaction/transactionUtils.ts b/src/util/transaction/transactionUtils.ts index 381eee6..1ea98b4 100644 --- a/src/util/transaction/transactionUtils.ts +++ b/src/util/transaction/transactionUtils.ts @@ -1,5 +1,7 @@ import algosdk, {Transaction} from "algosdk"; +import {PeraWalletTransaction, SignerTransaction} from "../model/peraWalletModels"; + function encodeUnsignedTransactionInBase64(txn: Transaction): string { return Buffer.from(algosdk.encodeUnsignedTransaction(txn)).toString("base64"); } @@ -8,4 +10,34 @@ function base64ToUint8Array(data: string) { return Uint8Array.from(window.atob(data), (value) => value.charCodeAt(0)); } -export {encodeUnsignedTransactionInBase64, base64ToUint8Array}; +function composeTransaction(transaction: SignerTransaction, signerAddress?: string) { + let signers: PeraWalletTransaction["signers"]; + + if (signerAddress && !(transaction.signers || []).includes(signerAddress)) { + signers = []; + } + + const txnRequestParams: PeraWalletTransaction = { + txn: encodeUnsignedTransactionInBase64(transaction.txn) + }; + + if (Array.isArray(signers)) { + txnRequestParams.signers = signers; + } + + if (transaction.authAddr) { + txnRequestParams.authAddr = transaction.authAddr; + } + + if (transaction.message) { + txnRequestParams.message = transaction.message; + } + + if (transaction.msig) { + txnRequestParams.msig = transaction.msig; + } + + return txnRequestParams; +} + +export {encodeUnsignedTransactionInBase64, base64ToUint8Array, composeTransaction}; From 334fb2b6d362d5e5b7a4f75b49ebcbce53ed6ffd Mon Sep 17 00:00:00 2001 From: mucahit Date: Fri, 9 Dec 2022 11:02:52 +0000 Subject: [PATCH 02/19] fix: disconnect method --- src/PeraWalletConnect.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 1c517f9..99e1edd 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -491,15 +491,15 @@ class PeraWalletConnect { } async disconnect() { - const killPromise = this.connector?.killSession(); + if (this.connector) { + const killPromise = this.connector.killSession(); - killPromise?.then(() => { - this.connector = null; - }); + killPromise?.then(() => { + this.connector = null; + }); + } await resetWalletDetailsFromStorage(); - - return killPromise; } private async signTransactionWithMobile(signTxnRequestParams: PeraWalletTransaction[]) { From 36869d0be149c6134e41dc446b077f0a1d7a6242 Mon Sep 17 00:00:00 2001 From: mucahit Date: Thu, 15 Dec 2022 11:45:29 +0000 Subject: [PATCH 03/19] fix: Remove deprecated dependency --- package-lock.json | 45 ------------------------ package.json | 1 - rollup.config.js | 2 -- src/PeraWalletConnect.ts | 4 +-- src/util/number/numberUtils.ts | 10 ++++++ src/util/transaction/transactionUtils.ts | 17 ++++++++- 6 files changed, 28 insertions(+), 51 deletions(-) create mode 100644 src/util/number/numberUtils.ts diff --git a/package-lock.json b/package-lock.json index 4c6e263..8d737ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.7", "license": "ISC", "dependencies": { - "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", "bowser": "^2.11.0", @@ -288,23 +287,6 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, - "node_modules/@json-rpc-tools/types": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@json-rpc-tools/types/-/types-1.7.6.tgz", - "integrity": "sha512-nDSqmyRNEqEK9TZHtM15uNnDljczhCUdBmRhpNZ95bIPKEDQ+nTDmGMFd2lLin3upc5h2VVVd9tkTDdbXUhDIQ==", - "dependencies": { - "keyvaluestorage-interface": "^1.0.0" - } - }, - "node_modules/@json-rpc-tools/utils": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@json-rpc-tools/utils/-/utils-1.7.6.tgz", - "integrity": "sha512-HjA8x/U/Q78HRRe19yh8HVKoZ+Iaoo3YZjakJYxR+rw52NHo6jM+VE9b8+7ygkCFXl/EHID5wh/MkXaE/jGyYw==", - "dependencies": { - "@json-rpc-tools/types": "^1.7.6", - "@pedrouid/environment": "^1.0.1" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -364,11 +346,6 @@ "node": ">=10" } }, - "node_modules/@pedrouid/environment": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@pedrouid/environment/-/environment-1.0.1.tgz", - "integrity": "sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug==" - }, "node_modules/@rollup/plugin-image": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz", @@ -8047,23 +8024,6 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, - "@json-rpc-tools/types": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@json-rpc-tools/types/-/types-1.7.6.tgz", - "integrity": "sha512-nDSqmyRNEqEK9TZHtM15uNnDljczhCUdBmRhpNZ95bIPKEDQ+nTDmGMFd2lLin3upc5h2VVVd9tkTDdbXUhDIQ==", - "requires": { - "keyvaluestorage-interface": "^1.0.0" - } - }, - "@json-rpc-tools/utils": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/@json-rpc-tools/utils/-/utils-1.7.6.tgz", - "integrity": "sha512-HjA8x/U/Q78HRRe19yh8HVKoZ+Iaoo3YZjakJYxR+rw52NHo6jM+VE9b8+7ygkCFXl/EHID5wh/MkXaE/jGyYw==", - "requires": { - "@json-rpc-tools/types": "^1.7.6", - "@pedrouid/environment": "^1.0.1" - } - }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -8110,11 +8070,6 @@ "rimraf": "^3.0.2" } }, - "@pedrouid/environment": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@pedrouid/environment/-/environment-1.0.1.tgz", - "integrity": "sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug==" - }, "@rollup/plugin-image": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz", diff --git a/package.json b/package.json index 4300ca3..ff68863 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "typescript": "^4.6.3" }, "dependencies": { - "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", "bowser": "^2.11.0", diff --git a/rollup.config.js b/rollup.config.js index 005f88c..6ebf793 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,7 +17,6 @@ export default [ "@walletconnect/client": "WalletConnect", algosdk: "algosdk", bowser: "bowser", - "@json-rpc-tools/utils/dist/cjs/format": "format", "qr-code-styling": "QRCodeStyling", "lottie-web": "lottie" } @@ -25,7 +24,6 @@ export default [ external: [ "@walletconnect/client", "@walletconnect/types", - "@json-rpc-tools/utils/dist/cjs/format", "algosdk", "lottie-web", "bowser", diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 99e1edd..884b080 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -1,6 +1,5 @@ /* eslint-disable max-lines */ import WalletConnect from "@walletconnect/client"; -import {formatJsonRpcRequest} from "@json-rpc-tools/utils/dist/cjs/format"; import PeraWalletConnectError from "./util/PeraWalletConnectError"; import { @@ -32,7 +31,8 @@ import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./util/storage/storageConstants"; import {PeraWalletTransaction, SignerTransaction} from "./util/model/peraWalletModels"; import { base64ToUint8Array, - composeTransaction + composeTransaction, + formatJsonRpcRequest } from "./util/transaction/transactionUtils"; import {detectBrowser, isMobile} from "./util/device/deviceUtils"; import {AlgorandChainIDs} from "./util/peraWalletTypes"; diff --git a/src/util/number/numberUtils.ts b/src/util/number/numberUtils.ts new file mode 100644 index 0000000..52ddaf3 --- /dev/null +++ b/src/util/number/numberUtils.ts @@ -0,0 +1,10 @@ +function generateSimpleId(): number { + /* eslint-disable no-magic-numbers */ + const date = Date.now() * Math.pow(10, 3); + const extra = Math.floor(Math.random() * Math.pow(10, 3)); + /* eslint-enable no-magic-numbers */ + + return date + extra; +} + +export {generateSimpleId}; diff --git a/src/util/transaction/transactionUtils.ts b/src/util/transaction/transactionUtils.ts index 1ea98b4..4629f6b 100644 --- a/src/util/transaction/transactionUtils.ts +++ b/src/util/transaction/transactionUtils.ts @@ -1,6 +1,7 @@ import algosdk, {Transaction} from "algosdk"; import {PeraWalletTransaction, SignerTransaction} from "../model/peraWalletModels"; +import {generateSimpleId} from "../number/numberUtils"; function encodeUnsignedTransactionInBase64(txn: Transaction): string { return Buffer.from(algosdk.encodeUnsignedTransaction(txn)).toString("base64"); @@ -40,4 +41,18 @@ function composeTransaction(transaction: SignerTransaction, signerAddress?: stri return txnRequestParams; } -export {encodeUnsignedTransactionInBase64, base64ToUint8Array, composeTransaction}; +function formatJsonRpcRequest(method: string, params: T) { + return { + id: generateSimpleId(), + jsonrpc: "2.0", + method, + params + }; +} + +export { + encodeUnsignedTransactionInBase64, + base64ToUint8Array, + composeTransaction, + formatJsonRpcRequest +}; From 034e73a84314ed57329d6d8e30f36796e593f482 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Thu, 15 Dec 2022 17:21:56 +0300 Subject: [PATCH 04/19] feat: solve tab opening with communication --- src/PeraWalletConnect.ts | 170 +++++++++++++------- src/util/network/teller/appTellerManager.ts | 3 + 2 files changed, 114 insertions(+), 59 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 84cf12b..3630a98 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -166,20 +166,24 @@ class PeraWalletConnect { if (event.data.message.type === "CREATE_PASSCODE_EMBEDDED") { const newPeraWalletTab = window.open(webWalletURLs.CONNECT, "_blank"); - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, + const checkMessageIsReceived = setInterval(() => { + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, - origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab - }); - } + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); + } + + // eslint-disable-next-line no-magic-numbers + }, 300); const checkTabIsAliveInterval = setInterval(() => { if (newPeraWalletTab?.closed === true) { @@ -201,6 +205,10 @@ class PeraWalletConnect { appTellerManager.setupListener({ onReceiveMessage: (newTabEvent: MessageEvent>) => { + if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { + clearInterval(checkMessageIsReceived); + } + if (resolve && newTabEvent.data.message.type === "CONNECT_CALLBACK") { const accounts = newTabEvent.data.message.data.addresses; @@ -263,28 +271,8 @@ class PeraWalletConnect { peraWalletIframeWrapper.appendChild(peraWalletIframe); - if (peraWalletIframe.contentWindow) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, - - origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow, - timeout: 5000 - }); - } - - appTellerManager.setupListener({ - onReceiveMessage - }); - } else { - waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { - if (newPeraWalletTab && newPeraWalletTab.opener) { + const checkMessageIsReceived = setInterval(() => { + if (peraWalletIframe.contentWindow) { appTellerManager.sendMessage({ message: { type: "CONNECT", @@ -295,11 +283,45 @@ class PeraWalletConnect { }, origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab, - timeout: 5000 + targetWindow: peraWalletIframe.contentWindow }); } + // eslint-disable-next-line no-magic-numbers + }, 300); + + appTellerManager.setupListener({ + onReceiveMessage: (newTabEvent: MessageEvent>) => { + if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { + clearInterval(checkMessageIsReceived); + } + } + }); + + appTellerManager.setupListener({ + onReceiveMessage + }); + } else { + waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { + const checkMessageIsReceived = setInterval(() => { + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, + + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); + } + + // eslint-disable-next-line no-magic-numbers + }, 300); + const checkTabIsAliveInterval = setInterval(() => { if (newPeraWalletTab?.closed === true) { reject( @@ -320,6 +342,10 @@ class PeraWalletConnect { appTellerManager.setupListener({ onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "MESSAGE_RECEIVED") { + clearInterval(checkMessageIsReceived); + } + if (resolve && event.data.message.type === "CONNECT_CALLBACK") { const accounts = event.data.message.data.addresses; @@ -647,18 +673,31 @@ class PeraWalletConnect { }); } - if (peraWalletIframe.contentWindow) { - appTellerManager.sendMessage({ - message: { - type: "SIGN_TXN", - txn: signTxnRequestParams - }, + const checkMessageIsReceived = setInterval(() => { + if (peraWalletIframe.contentWindow) { + appTellerManager.sendMessage({ + message: { + type: "SIGN_TXN", + txn: signTxnRequestParams + }, - origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), - targetWindow: peraWalletIframe.contentWindow, - timeout: 3000 - }); - } + origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), + targetWindow: peraWalletIframe.contentWindow + }); + } + + // eslint-disable-next-line no-magic-numbers + }, 300); + + appTellerManager.setupListener({ + onReceiveMessage: ( + newTabEvent: MessageEvent> + ) => { + if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { + clearInterval(checkMessageIsReceived); + } + } + }); // 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. @@ -672,18 +711,31 @@ class PeraWalletConnect { .then((newTab) => { newPeraWalletTab = newTab; - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "SIGN_TXN", - txn: signTxnRequestParams - }, + const checkMessageIsReceived = setInterval(() => { + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "SIGN_TXN", + txn: signTxnRequestParams + }, - origin: webWalletURLs.TRANSACTION_SIGN, - targetWindow: newPeraWalletTab, - timeout: 3000 - }); - } + origin: webWalletURLs.TRANSACTION_SIGN, + targetWindow: newPeraWalletTab + }); + } + + // eslint-disable-next-line no-magic-numbers + }, 300); + + appTellerManager.setupListener({ + onReceiveMessage: ( + newTabEvent: MessageEvent> + ) => { + if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { + clearInterval(checkMessageIsReceived); + } + } + }); }) .catch((error) => { console.log(error); diff --git a/src/util/network/teller/appTellerManager.ts b/src/util/network/teller/appTellerManager.ts index cb4f012..80a3f25 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -56,6 +56,9 @@ export type PeraTeller = | { type: "SESSION_DISCONNECTED"; error: string; + } + | { + type: "MESSAGE_RECEIVED"; }; const appTellerManager = new Teller({ From b6ab4edcb3fc1fb142de22b4b25bda1b0ea9e425 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 16 Dec 2022 11:58:47 +0300 Subject: [PATCH 05/19] feat(redirect-modal): close modal on click redirect and set close timeout --- src/modal/header/PeraWalletModalHeader.ts | 19 +++++++++++++++++++ src/modal/redirect/PeraWalletRedirectModal.ts | 13 ++++++++++--- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/modal/header/PeraWalletModalHeader.ts b/src/modal/header/PeraWalletModalHeader.ts index 4cfbd26..541b64f 100644 --- a/src/modal/header/PeraWalletModalHeader.ts +++ b/src/modal/header/PeraWalletModalHeader.ts @@ -5,6 +5,10 @@ import CloseIconDark from "../../asset/icon/Close--dark.svg"; import styles from "./_pera-wallet-modal-header.scss"; import {isSmallScreen} from "../../util/screen/screenSizeUtils"; import {isMobile} from "../../util/device/deviceUtils"; +import { + PERA_WALLET_REDIRECT_MODAL_ID, + removeModalWrapperFromDOM +} from "../peraWalletConnectModalUtils"; const peraWalletModalHeader = document.createElement("template"); @@ -47,6 +51,21 @@ export class PeraWalletModalHeader extends HTMLElement { styleSheet.textContent = styles; this.shadowRoot.append(peraWalletModalHeader.content.cloneNode(true), styleSheet); + + this.onClose(); + } + } + + onClose() { + const closeButton = this.shadowRoot?.getElementById( + "pera-wallet-modal-header-close-button" + ); + const modalId = this.getAttribute("modal-id"); + + if (closeButton && modalId === PERA_WALLET_REDIRECT_MODAL_ID) { + closeButton.addEventListener("click", () => { + removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID); + }); } } } diff --git a/src/modal/redirect/PeraWalletRedirectModal.ts b/src/modal/redirect/PeraWalletRedirectModal.ts index ac947e1..3c5ff56 100644 --- a/src/modal/redirect/PeraWalletRedirectModal.ts +++ b/src/modal/redirect/PeraWalletRedirectModal.ts @@ -7,11 +7,15 @@ import { } from "../peraWalletConnectModalUtils"; import styles from "./_pera-wallet-redirect-modal.scss"; +const REDIRECT_MODAL_TIMEOUT = 15000; + const peraWalletRedirectModalTemplate = document.createElement("template"); peraWalletRedirectModalTemplate.innerHTML = `
+ +
@@ -80,20 +84,23 @@ export class PeraWalletRedirectModal extends HTMLElement { launchPeraLink?.addEventListener("click", () => { this.onClose(); + window.open(generatePeraWalletAppDeepLink(), "_blank"); }); - - launchPeraLink?.setAttribute("href", generatePeraWalletAppDeepLink()); } } connectedCallback() { - const peraWalletDeepLink = window.open(generatePeraWalletAppDeepLink()); + const peraWalletDeepLink = window.open(generatePeraWalletAppDeepLink(), "_blank"); if (peraWalletDeepLink) { peraWalletDeepLink.addEventListener("load", () => { this.onClose(); }); } + + setTimeout(() => { + removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID); + }, REDIRECT_MODAL_TIMEOUT); } onClose() { From 742a317e27c734af6b2505aff62de23c2a1a5327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 16 Dec 2022 12:11:55 +0300 Subject: [PATCH 06/19] fix(redirect-modal): close modal if deeplink opened succesfully --- src/modal/redirect/PeraWalletRedirectModal.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/modal/redirect/PeraWalletRedirectModal.ts b/src/modal/redirect/PeraWalletRedirectModal.ts index 3c5ff56..24dc7a8 100644 --- a/src/modal/redirect/PeraWalletRedirectModal.ts +++ b/src/modal/redirect/PeraWalletRedirectModal.ts @@ -92,10 +92,8 @@ export class PeraWalletRedirectModal extends HTMLElement { connectedCallback() { const peraWalletDeepLink = window.open(generatePeraWalletAppDeepLink(), "_blank"); - if (peraWalletDeepLink) { - peraWalletDeepLink.addEventListener("load", () => { - this.onClose(); - }); + if (peraWalletDeepLink && !peraWalletDeepLink.closed) { + this.onClose(); } setTimeout(() => { From 73c969c4bb94cfb8d15763bbf0cb357f253785b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 16 Dec 2022 12:36:16 +0300 Subject: [PATCH 07/19] feat(disconnect): don't check session if connected with web wallet --- src/PeraWalletConnect.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 84cf12b..80a24db 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -529,11 +529,16 @@ class PeraWalletConnect { } async disconnect() { - const killPromise = this.connector?.killSession(); + const walletDetails = getWalletDetailsFromStorage(); + let killPromise: Promise | undefined; - killPromise?.then(() => { - this.connector = null; - }); + if (walletDetails?.type === "pera-wallet") { + killPromise = this.connector?.killSession(); + + killPromise?.then(() => { + this.connector = null; + }); + } await resetWalletDetailsFromStorage(); From 6ec9bc43894ecda7b65b85cf6571a7ad220cde28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 16 Dec 2022 17:25:31 +0300 Subject: [PATCH 08/19] feat(lottie): update lottie to light version --- package-lock.json | 22 +- package.json | 2 +- rollup.config.js | 4 +- .../PeraWalletConnectModalPendingMessage.ts | 8 +- .../lotties/PeraLoaderAnimationLottie.json | 1862 ----------------- .../sign-toast/PeraWalletSignTxnToast.ts | 8 +- src/modal/sign-toast/lotties/Animation.json | 1389 ------------ 7 files changed, 22 insertions(+), 3273 deletions(-) delete mode 100644 src/modal/section/pending-message/lotties/PeraLoaderAnimationLottie.json delete mode 100644 src/modal/sign-toast/lotties/Animation.json diff --git a/package-lock.json b/package-lock.json index 4c6e263..0a7fec4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "version": "1.0.7", "license": "ISC", "dependencies": { + "@evanhahn/lottie-web-light": "^5.8.1", "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", "bowser": "^2.11.0", "buffer": "^6.0.3", - "lottie-web": "^5.9.6", "qr-code-styling": "^1.6.0-rc.1" }, "devDependencies": { @@ -169,6 +169,11 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@evanhahn/lottie-web-light": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@evanhahn/lottie-web-light/-/lottie-web-light-5.8.1.tgz", + "integrity": "sha512-U0G1tt3/UEYnyCNNslWPi1dB7X1xQ9aoSip+B3GTKO/Bns8yz/p39vBkRSN9d25nkbHuCsbjky2coQftj5YVKw==" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -4009,11 +4014,6 @@ "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "dev": true }, - "node_modules/lottie-web": { - "version": "5.9.6", - "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz", - "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA==" - }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -7955,6 +7955,11 @@ "strip-json-comments": "^3.1.1" } }, + "@evanhahn/lottie-web-light": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/@evanhahn/lottie-web-light/-/lottie-web-light-5.8.1.tgz", + "integrity": "sha512-U0G1tt3/UEYnyCNNslWPi1dB7X1xQ9aoSip+B3GTKO/Bns8yz/p39vBkRSN9d25nkbHuCsbjky2coQftj5YVKw==" + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -10878,11 +10883,6 @@ "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "dev": true }, - "lottie-web": { - "version": "5.9.6", - "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.9.6.tgz", - "integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA==" - }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", diff --git a/package.json b/package.json index 4300ca3..eae437c 100644 --- a/package.json +++ b/package.json @@ -30,12 +30,12 @@ "typescript": "^4.6.3" }, "dependencies": { + "@evanhahn/lottie-web-light": "^5.8.1", "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", "bowser": "^2.11.0", "buffer": "^6.0.3", - "lottie-web": "^5.9.6", "qr-code-styling": "^1.6.0-rc.1" }, "peerDependencies": { diff --git a/rollup.config.js b/rollup.config.js index 005f88c..2222d93 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -19,7 +19,7 @@ export default [ bowser: "bowser", "@json-rpc-tools/utils/dist/cjs/format": "format", "qr-code-styling": "QRCodeStyling", - "lottie-web": "lottie" + "@evanhahn/lottie-web-light": "lottie" } }, external: [ @@ -27,7 +27,7 @@ export default [ "@walletconnect/types", "@json-rpc-tools/utils/dist/cjs/format", "algosdk", - "lottie-web", + "@evanhahn/lottie-web-light", "bowser", "qr-code-styling", "bufferutil", diff --git a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts index fff608f..b10288b 100644 --- a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts +++ b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts @@ -1,8 +1,7 @@ import HelpIcon from "../../../asset/icon/Help.svg"; import SendIcon from "../../../asset/icon/Send.svg"; -import animationData from "./lotties/PeraLoaderAnimationLottie.json"; -import lottie from "lottie-web"; +import Lottie from "@evanhahn/lottie-web-light"; import {getPeraWalletAppMeta} from "../../../util/peraWalletUtils"; import { @@ -174,12 +173,13 @@ export class PeraWalletConnectModalPendingMessageSection extends HTMLElement { ); if (lottieWrapper) { - lottie.loadAnimation({ + Lottie.loadAnimation({ container: lottieWrapper, renderer: "svg", loop: true, autoplay: true, - animationData + animationData: + "https://gist.githubusercontent.com/yigiterdev/ea981d663e8c68726a0cdbbdd701a154/raw/c341095c9c42b8ea4d1dfec46fd6b18cdeaa43ff/PeraLoaderAnimationLottie.json" }); } } diff --git a/src/modal/section/pending-message/lotties/PeraLoaderAnimationLottie.json b/src/modal/section/pending-message/lotties/PeraLoaderAnimationLottie.json deleted file mode 100644 index 890b9ca..0000000 --- a/src/modal/section/pending-message/lotties/PeraLoaderAnimationLottie.json +++ /dev/null @@ -1,1862 +0,0 @@ -{ - "v": "4.8.0", - "meta": {"g": "LottieFiles AE 3.0.0", "a": "", "k": "", "d": "", "tc": ""}, - "fr": 30, - "ip": 0, - "op": 66, - "w": 240, - "h": 240, - "nm": "loader ", - "ddd": 0, - "assets": [], - "layers": [ - { - "ddd": 0, - "ind": 1, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.856]}, - "o": {"x": [0.76], "y": [0.187]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 69, - "st": 1, - "bm": 0 - }, - { - "ddd": 0, - "ind": 2, - "ty": 3, - "nm": "Null 10", - "parent": 1, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.636}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [89.5, 28.5, 0], - "to": [9.801, 1.891, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.408}, - "t": 30, - "s": [148.305, 39.844, 0], - "to": [0, 0, 0], - "ti": [9.801, 1.891, 0] - }, - {"t": 66, "s": [89.5, 28.5, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 3, - "ty": 4, - "nm": "1", - "parent": 2, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.945, "y": 0}, - "o": {"x": 0.4, "y": 0}, - "t": 1, - "s": [52.027, 49.266, 0], - "to": [-0.833, -1.667, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.044, "y": 1}, - "t": 30, - "s": [47.027, 39.266, 0], - "to": [0, 0, 0], - "ti": [-0.833, -1.667, 0] - }, - {"t": 66, "s": [52.027, 49.266, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.394, 0.394, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 1, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [0.752, 0.752, 0]}, - "t": 30, - "s": [250, 250, 100] - }, - {"t": 66, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 23, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 25, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 34, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 36, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 1, - "bm": 0 - }, - { - "ddd": 0, - "ind": 4, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.86]}, - "o": {"x": [0.76], "y": [0.19]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 5, - "ty": 3, - "nm": "Null 5", - "parent": 4, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": -58.013, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.521}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [51.5, 2.5, 0], - "to": [6.899, -6.585, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.424}, - "t": 35, - "s": [92.896, -37.007, 0], - "to": [0, 0, 0], - "ti": [6.899, -6.585, 0] - }, - {"t": 66, "s": [51.5, 2.5, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 6, - "ty": 4, - "nm": "7", - "parent": 5, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.014}, - "o": {"x": 0.4, "y": 0}, - "t": 3, - "s": [51.152, 48.266, 0], - "to": [-3.818, -3.834, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.205, "y": 1}, - "t": 27, - "s": [28.244, 25.262, 0], - "to": [0, 0, 0], - "ti": [-3.818, -3.834, 0] - }, - {"t": 65, "s": [51.152, 48.266, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.398, 0.398, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 3, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [0.953, 0.953, 0]}, - "t": 27, - "s": [250, 250, 100] - }, - {"t": 65, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.06}, - "o": {"x": 0.4, "y": 0}, - "t": 3, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.833, "y": 0.833}, - "o": {"x": 0.167, "y": 0.167}, - "t": 26, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.94}, - "t": 34, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "t": 65, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - } - ], - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 38, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 40, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 49, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 53, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 7, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.86]}, - "o": {"x": [0.76], "y": [0.19]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 5, - "bm": 0 - }, - { - "ddd": 0, - "ind": 8, - "ty": 3, - "nm": "Null 9", - "parent": 7, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": 61.855, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.37}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [9.25, 26, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.519}, - "t": 34, - "s": [-26.339, -7.312, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - {"t": 66, "s": [9.25, 26, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 9, - "ty": 4, - "nm": "6", - "parent": 8, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.693, "y": 0}, - "o": {"x": 0.4, "y": 0}, - "t": 5, - "s": [48.277, 50.891, 0], - "to": [-1.015, -7.059, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.219, "y": 1}, - "t": 30, - "s": [42.185, 8.534, 0], - "to": [0, 0, 0], - "ti": [-1.015, -7.059, 0] - }, - {"t": 65, "s": [48.277, 50.891, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.217, 0.217, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 5, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [1.097, 1.097, 0]}, - "t": 30, - "s": [250, 250, 100] - }, - {"t": 65, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 1, - "k": [ - { - "i": {"x": 0.74, "y": 0}, - "o": {"x": 0.52, "y": 0}, - "t": 5, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.833, "y": 0.833}, - "o": {"x": 0.167, "y": 0.167}, - "t": 26, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.94}, - "t": 34, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "t": 65, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - } - ], - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 35, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 37, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 46, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 48, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 5, - "bm": 0 - }, - { - "ddd": 0, - "ind": 10, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.86]}, - "o": {"x": [0.76], "y": [0.19]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 4, - "bm": 0 - }, - { - "ddd": 0, - "ind": 11, - "ty": 3, - "nm": "Null 8", - "parent": 10, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.248}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [6.25, 73.5, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.575}, - "t": 33, - "s": [-36.208, 68.618, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - {"t": 66, "s": [6.25, 73.5, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 12, - "ty": 4, - "nm": "5", - "parent": 11, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.798, "y": 0}, - "o": {"x": 0.4, "y": 0}, - "t": 4, - "s": [50.652, 49.891, 0], - "to": [-0.881, -5.447, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.155, "y": 1}, - "t": 30, - "s": [45.364, 17.206, 0], - "to": [0, 0, 0], - "ti": [-0.881, -5.447, 0] - }, - {"t": 64, "s": [50.652, 49.891, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.185, 0.185, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 4, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [1.065, 1.065, 0]}, - "t": 30, - "s": [250, 250, 100] - }, - {"t": 64, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.06}, - "o": {"x": 0.4, "y": 0}, - "t": 4, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.833, "y": 0.833}, - "o": {"x": 0.167, "y": 0.167}, - "t": 26, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.94}, - "t": 34, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "t": 64, - "s": [ - { - "i": [ - [0.564, 0.706], - [1.913, -1.93], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.6, -0.769], - [-2.408, 2.431], - [0.734, 0.88], - [1.959, -1.887] - ], - "v": [ - [4.188, -4.173], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - } - ], - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 32, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 34, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 43, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 45, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 4, - "bm": 0 - }, - { - "ddd": 0, - "ind": 13, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.86]}, - "o": {"x": [0.76], "y": [0.19]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 3, - "bm": 0 - }, - { - "ddd": 0, - "ind": 14, - "ty": 3, - "nm": "Null 7", - "parent": 13, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": 121.889, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.446}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [46.875, 97, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.482}, - "t": 32, - "s": [31.295, 128.342, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - {"t": 66, "s": [46.875, 97, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 15, - "ty": 4, - "nm": "4", - "parent": 14, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.854, "y": 0}, - "o": {"x": 0.4, "y": 0}, - "t": 3, - "s": [48.652, 49.391, 0], - "to": [2.512, 3.544, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.12, "y": 1}, - "t": 30, - "s": [63.724, 70.652, 0], - "to": [0, 0, 0], - "ti": [2.512, 3.544, 0] - }, - {"t": 63, "s": [48.652, 49.391, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.154, 0.154, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 3, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [1.034, 1.034, 0]}, - "t": 30, - "s": [250, 250, 100] - }, - {"t": 63, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.06}, - "o": {"x": 0.4, "y": 0}, - "t": 3, - "s": [ - { - "i": [ - [0.564, 0.706], - [2.371, -2.672], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.975, -1.342], - [-2.271, 2.56], - [0.734, 0.88], - [2.608, -2.511] - ], - "v": [ - [4.839, -4.831], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.833, "y": 0.833}, - "o": {"x": 0.167, "y": 0.167}, - "t": 26, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.74, "y": 1}, - "o": {"x": 0.4, "y": 0.8}, - "t": 34, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "t": 63, - "s": [ - { - "i": [ - [0.564, 0.706], - [2.371, -2.672], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.975, -1.342], - [-2.271, 2.56], - [0.734, 0.88], - [2.608, -2.511] - ], - "v": [ - [4.839, -4.831], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - } - ], - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 29, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 31, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 40, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 42, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 3, - "bm": 0 - }, - { - "ddd": 0, - "ind": 16, - "ty": 3, - "nm": "Null 4", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": { - "a": 1, - "k": [ - { - "i": {"x": [0.24], "y": [0.86]}, - "o": {"x": [0.76], "y": [0.19]}, - "t": 0, - "s": [0] - }, - {"t": 66, "s": [360]} - ], - "ix": 10 - }, - "p": {"a": 0, "k": [120, 120, 0], "ix": 2}, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 2, - "bm": 0 - }, - { - "ddd": 0, - "ind": 17, - "ty": 3, - "nm": "Null 6", - "parent": 16, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 0, "ix": 11}, - "r": {"a": 0, "k": 63.363, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.4}, - "o": {"x": 0.4, "y": 0}, - "t": 0, - "s": [88.5, 74.5, 0], - "to": [5.393, 3.57, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.32, "y": 0.592}, - "t": 31, - "s": [120.859, 95.923, 0], - "to": [0, 0, 0], - "ti": [5.393, 3.57, 0] - }, - {"t": 66, "s": [88.5, 74.5, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [50, 50, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "ip": 0, - "op": 68, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 18, - "ty": 4, - "nm": "3", - "parent": 17, - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.911, "y": 0}, - "o": {"x": 0.4, "y": 0}, - "t": 2, - "s": [50.527, 49.516, 0], - "to": [1.922, 1.871, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.6, "y": 1}, - "o": {"x": 0.078, "y": 1}, - "t": 30, - "s": [62.061, 60.743, 0], - "to": [0, 0, 0], - "ti": [1.922, 1.871, 0] - }, - {"t": 62, "s": [50.527, 49.516, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [6.506, 6.485, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.68, 0.68, 0.68], "y": [0.123, 0.123, 1]}, - "o": {"x": [0.4, 0.4, 0.4], "y": [0, 0, 0]}, - "t": 2, - "s": [400, 400, 100] - }, - { - "i": {"x": [0.6, 0.6, 0.6], "y": [1, 1, 1]}, - "o": {"x": [0.32, 0.32, 0.32], "y": [1.003, 1.003, 0]}, - "t": 30, - "s": [250, 250, 100] - }, - {"t": 62, "s": [400, 400, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 1, - "k": [ - { - "i": {"x": 0.68, "y": 0.06}, - "o": {"x": 0.4, "y": 0}, - "t": 2, - "s": [ - { - "i": [ - [0.564, 0.706], - [2.371, -2.672], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.975, -1.342], - [-2.271, 2.56], - [0.734, 0.88], - [2.608, -2.511] - ], - "v": [ - [4.839, -4.831], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.833, "y": 0.833}, - "o": {"x": 0.167, "y": 0.167}, - "t": 26, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "i": {"x": 0.74, "y": 1}, - "o": {"x": 0.4, "y": 0.8}, - "t": 34, - "s": [ - { - "i": [ - [1.722, 1.825], - [2.504, -2.435], - [-1.722, -1.825], - [-2.504, 2.435] - ], - "o": [ - [-1.722, -1.825], - [-2.504, 2.435], - [1.722, 1.825], - [2.504, -2.435] - ], - "v": [ - [4.534, -4.41], - [-3.118, -3.305], - [-4.534, 4.409], - [3.118, 3.304] - ], - "c": true - } - ] - }, - { - "t": 62, - "s": [ - { - "i": [ - [0.564, 0.706], - [2.371, -2.672], - [-0.74, -0.886], - [-2.516, 2.423] - ], - "o": [ - [-0.975, -1.342], - [-2.271, 2.56], - [0.734, 0.88], - [2.608, -2.511] - ], - "v": [ - [4.839, -4.831], - [-1.389, -1.624], - [-4.4, 4.321], - [1.496, 1.451] - ], - "c": true - } - ] - } - ], - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "mm", - "mm": 4, - "nm": "Merge Paths 1", - "mn": "ADBE Vector Filter - Merge", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 1, - "k": [ - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 26, - "s": [1, 1, 1, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 28, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - { - "i": {"x": [0.833], "y": [0.833]}, - "o": {"x": [0.167], "y": [0.167]}, - "t": 37, - "s": [1, 0.933333337307, 0.333333343267, 1] - }, - {"t": 39, "s": [1, 1, 1, 1]} - ], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [6.506, 6.485], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 68, - "st": 2, - "bm": 0 - } - ], - "markers": [] -} diff --git a/src/modal/sign-toast/PeraWalletSignTxnToast.ts b/src/modal/sign-toast/PeraWalletSignTxnToast.ts index 7d1b83a..cb446a9 100644 --- a/src/modal/sign-toast/PeraWalletSignTxnToast.ts +++ b/src/modal/sign-toast/PeraWalletSignTxnToast.ts @@ -1,7 +1,6 @@ import CloseIcon from "../../asset/icon/Close--small.svg"; -import animationData from "./lotties/Animation.json"; -import lottie from "lottie-web"; +import Lottie from "@evanhahn/lottie-web-light"; import styles from "./_pera-wallet-sign-txn-toast.scss"; import { @@ -62,12 +61,13 @@ export class PeraWalletSignTxnToast extends HTMLElement { ); if (lottieWrapper) { - lottie.loadAnimation({ + Lottie.loadAnimation({ container: lottieWrapper, renderer: "svg", loop: true, autoplay: true, - animationData + animationData: + "https://gist.githubusercontent.com/yigiterdev/e82b7253b774dc6e6f33cb2e1d5affc1/raw/d45f1dc977e2275d7d44e726e15a7245695f6aed/signtxnAnimation.json" }); } } diff --git a/src/modal/sign-toast/lotties/Animation.json b/src/modal/sign-toast/lotties/Animation.json deleted file mode 100644 index 8b86cee..0000000 --- a/src/modal/sign-toast/lotties/Animation.json +++ /dev/null @@ -1,1389 +0,0 @@ -{ - "v": "4.8.0", - "meta": {"g": "LottieFiles AE 1.1.0", "a": "", "k": "", "d": "", "tc": ""}, - "fr": 30, - "ip": 0, - "op": 180, - "w": 600, - "h": 600, - "nm": "Animation", - "ddd": 0, - "assets": [ - { - "id": "comp_0", - "layers": [ - { - "ddd": 0, - "ind": 1, - "ty": 4, - "nm": "Logo", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": {"a": 0, "k": [254.235, 236.75, 0], "ix": 2}, - "a": {"a": 0, "k": [88, 88, 0], "ix": 1}, - "s": {"a": 0, "k": [40, 40, 100], "ix": 6} - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [3.145, 3.26], - [9.58, -9.112], - [-3.145, -3.26], - [-9.58, 9.112] - ], - "o": [ - [-3.145, -3.26], - [-9.579, 9.113], - [3.145, 3.26], - [9.58, -9.113] - ], - "v": [ - [17.346, -16.5], - [-5.695, -5.903], - [-17.346, 16.5], - [5.695, 5.903] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [45.371, 111.619], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [-13.461, -3.969], - [1.25, -4.354], - [13.46, 3.969], - [-1.251, 4.353] - ], - "o": [ - [13.46, 3.969], - [-1.251, 4.354], - [-13.46, -3.97], - [1.251, -4.354] - ], - "v": [ - [2.266, -7.883], - [24.372, 7.187], - [-2.265, 7.883], - [-24.372, -7.187] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [128.492, 112.136], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 2", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [-12.682, -3.74], - [1.25, -4.353], - [12.681, 3.739], - [-1.251, 4.354] - ], - "o": [ - [12.682, 3.74], - [-1.251, 4.354], - [-12.682, -3.74], - [1.251, -4.353] - ], - "v": [ - [2.265, -7.883], - [22.963, 6.771], - [-2.264, 7.883], - [-22.962, -6.771] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [46.182, 62.976], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 3", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 3, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [-4.396, 1.094], - [3.293, 13.642], - [4.395, -1.093], - [-3.292, -13.641] - ], - "o": [ - [4.396, -1.093], - [-3.292, -13.641], - [-4.396, 1.094], - [3.293, 13.642] - ], - "v": [ - [5.962, 24.7], - [7.958, -1.98], - [-5.962, -24.701], - [-7.96, 1.98] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [87.295, 135.219], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 4", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 4, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [6.87, 7.281], - [9.99, -9.716], - [-6.87, -7.281], - [-9.991, 9.716] - ], - "o": [ - [-6.87, -7.281], - [-9.99, 9.716], - [6.869, 7.282], - [9.99, -9.715] - ], - "v": [ - [18.089, -17.592], - [-12.439, -13.184], - [-18.089, 17.591], - [12.439, 13.183] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [129.807, 66.019], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 5", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 5, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [-3.102, -12.852], - [4.395, -1.094], - [3.102, 12.853], - [-4.396, 1.094] - ], - "o": [ - [3.102, 12.853], - [-4.396, 1.093], - [-3.102, -12.853], - [4.396, -1.093] - ], - "v": [ - [7.959, -1.98], - [5.617, 23.272], - [-7.959, 1.98], - [-5.617, -23.272] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [88.713, 39.357], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Group 6", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 6, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 2, - "ty": 4, - "nm": "Button", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": {"a": 0, "k": [255.5, 370, 0], "ix": 2}, - "a": {"a": 0, "k": [5.5, -98, 0], "ix": 1}, - "s": { - "a": 1, - "k": [ - { - "i": {"x": [0.667, 0.667, 0.667], "y": [1, 1, 1]}, - "o": {"x": [0.6, 0.6, 0.333], "y": [0, 0, 0]}, - "t": 55, - "s": [100, 100, 100] - }, - { - "i": {"x": [0.4, 0.4, 0.667], "y": [1, 1, 1]}, - "o": {"x": [0.333, 0.333, 0.333], "y": [0, 0, 0]}, - "t": 61, - "s": [90, 90, 100] - }, - {"t": 67, "s": [100, 100, 100]} - ], - "ix": 6 - } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ty": "st", - "c": {"a": 0, "k": [1, 1, 1, 1], "ix": 3}, - "o": {"a": 0, "k": 100, "ix": 4}, - "w": {"a": 0, "k": 2, "ix": 5}, - "lc": 1, - "lj": 1, - "ml": 4, - "bm": 0, - "nm": "Stroke 1", - "mn": "ADBE Vector Graphic - Stroke", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.419607843137, 0.274509803922, 0.996078431373, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [0, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Shape 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "o": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "v": [ - [63.521, 12.602], - [63.521, 39.804], - [-61.45, 39.804], - [-61.45, 12.602] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.419607843137, 0.274509803922, 0.996078431373, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [3.974, -124.852], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Rectangle 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "rd", - "nm": "Round Corners 1", - "r": {"a": 0, "k": 6, "ix": 1}, - "ix": 3, - "mn": "ADBE Vector Filter - RC", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 3, - "ty": 4, - "nm": "Transaction", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": {"a": 0, "k": [250, 294, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ty": "st", - "c": { - "a": 0, - "k": [0.765150122549, 0.793584546856, 0.907322303922, 1], - "ix": 3 - }, - "o": {"a": 0, "k": 100, "ix": 4}, - "w": {"a": 0, "k": 1, "ix": 5}, - "lc": 1, - "lj": 1, - "ml": 4, - "bm": 0, - "nm": "Stroke 1", - "mn": "ADBE Vector Graphic - Stroke", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [0, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Shape 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "o": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "v": [ - [63.521, 9.852], - [63.521, 124.804], - [-61.45, 124.804], - [-61.45, 9.852] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "st", - "c": { - "a": 0, - "k": [0.765150122549, 0.793584546856, 0.907322303922, 1], - "ix": 3 - }, - "o": {"a": 0, "k": 100, "ix": 4}, - "w": {"a": 0, "k": 1, "ix": 5}, - "lc": 1, - "lj": 1, - "ml": 4, - "bm": 0, - "nm": "Stroke 1", - "mn": "ADBE Vector Graphic - Stroke", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [3.974, -124.852], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Rectangle 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "rd", - "nm": "Round Corners 1", - "r": {"a": 0, "k": 6, "ix": 1}, - "ix": 3, - "mn": "ADBE Vector Filter - RC", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 4, - "ty": 4, - "nm": "Title", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": {"a": 0, "k": [250, 250, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ty": "st", - "c": { - "a": 0, - "k": [0.764705882353, 0.792156862745, 0.905882352941, 1], - "ix": 3 - }, - "o": {"a": 0, "k": 100, "ix": 4}, - "w": {"a": 0, "k": 1, "ix": 5}, - "lc": 1, - "lj": 1, - "ml": 4, - "bm": 0, - "nm": "Stroke 1", - "mn": "ADBE Vector Graphic - Stroke", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [0, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Shape 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "o": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "v": [ - [63.521, 9.852], - [63.521, 39.804], - [-61.45, 39.804], - [-61.45, 9.852] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "st", - "c": { - "a": 0, - "k": [0.764705882353, 0.792156862745, 0.905882352941, 1], - "ix": 3 - }, - "o": {"a": 0, "k": 100, "ix": 4}, - "w": {"a": 0, "k": 1, "ix": 5}, - "lc": 1, - "lj": 1, - "ml": 4, - "bm": 0, - "nm": "Stroke 1", - "mn": "ADBE Vector Graphic - Stroke", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [3.974, -124.852], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Rectangle 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "rd", - "nm": "Round Corners 1", - "r": {"a": 0, "k": 6, "ix": 1}, - "ix": 3, - "mn": "ADBE Vector Filter - RC", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 5, - "ty": 4, - "nm": "Frame", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": {"a": 0, "k": [250, 250, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ty": "fl", - "c": {"a": 0, "k": [1, 1, 1, 1], "ix": 4}, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [0, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Shape 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "o": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "v": [ - [79.021, -27.148], - [79.021, 272.804], - [-75.95, 272.804], - [-75.95, -27.148] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": {"a": 0, "k": [1, 1, 1, 1], "ix": 4}, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [3.974, -124.852], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Rectangle 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "rd", - "nm": "Round Corners 1", - "r": {"a": 0, "k": 18, "ix": 1}, - "ix": 3, - "mn": "ADBE Vector Filter - RC", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - } - ] - } - ], - "layers": [ - { - "ddd": 0, - "ind": 1, - "ty": 4, - "nm": "Touch", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 34, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.4, "y": 1}, - "o": {"x": 0.6, "y": 0}, - "t": 39, - "s": [592, 207, 0], - "to": [-11.333, 0, 0], - "ti": [11.333, 0, 0] - }, - { - "i": {"x": 0.4, "y": 0.4}, - "o": {"x": 0.6, "y": 0.6}, - "t": 52, - "s": [524, 207, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.4, "y": 1}, - "o": {"x": 0.6, "y": 0}, - "t": 67, - "s": [524, 207, 0], - "to": [11.333, 0, 0], - "ti": [-11.333, 0, 0] - }, - {"t": 80, "s": [592, 207, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [0, 0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "d": 1, - "ty": "el", - "s": {"a": 0, "k": [35.796, 35.796], "ix": 2}, - "p": {"a": 0, "k": [0, 0], "ix": 3}, - "nm": "Ellipse Path 1", - "mn": "ADBE Vector Shape - Ellipse", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.572549019608, 0.627450980392, 0.760784373564, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [-224.082, 44.349], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Ellipse 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 180, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 2, - "ty": 0, - "nm": "Phone", - "refId": "comp_0", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 100, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.35, "y": 1}, - "o": {"x": 0.65, "y": 0}, - "t": 15, - "s": [292, 300, 0], - "to": [0, -26.167, 0], - "ti": [0, 26.167, 0] - }, - { - "i": {"x": 0.35, "y": 0.35}, - "o": {"x": 0.65, "y": 0.65}, - "t": 30, - "s": [292, 143, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.35, "y": 1}, - "o": {"x": 0.65, "y": 0}, - "t": 92, - "s": [292, 143, 0], - "to": [0, 26.167, 0], - "ti": [0, -26.167, 0] - }, - {"t": 107, "s": [292, 300, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [250, 250, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100, 100], "ix": 6} - }, - "ao": 0, - "w": 500, - "h": 500, - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 3, - "ty": 4, - "nm": "Shadow", - "sr": 1, - "ks": { - "o": {"a": 0, "k": 70, "ix": 11}, - "r": {"a": 0, "k": 0, "ix": 10}, - "p": { - "a": 1, - "k": [ - { - "i": {"x": 0.35, "y": 1}, - "o": {"x": 0.65, "y": 0}, - "t": 15, - "s": [292, 300, 0], - "to": [0, -26.167, 0], - "ti": [0, 26.167, 0] - }, - { - "i": {"x": 0.35, "y": 0.35}, - "o": {"x": 0.65, "y": 0.65}, - "t": 30, - "s": [292, 143, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": {"x": 0.35, "y": 1}, - "o": {"x": 0.65, "y": 0}, - "t": 92, - "s": [292, 143, 0], - "to": [0, 26.167, 0], - "ti": [0, -26.167, 0] - }, - {"t": 107, "s": [292, 300, 0]} - ], - "ix": 2 - }, - "a": {"a": 0, "k": [0, 0, 0], "ix": 1}, - "s": {"a": 0, "k": [87, 95, 100], "ix": 6} - }, - "ao": 0, - "ef": [ - { - "ty": 29, - "nm": "Gaussian Blur", - "np": 5, - "mn": "ADBE Gaussian Blur 2", - "ix": 1, - "en": 1, - "ef": [ - { - "ty": 0, - "nm": "Blurriness", - "mn": "ADBE Gaussian Blur 2-0001", - "ix": 1, - "v": {"a": 0, "k": 100, "ix": 1} - }, - { - "ty": 7, - "nm": "Blur Dimensions", - "mn": "ADBE Gaussian Blur 2-0002", - "ix": 2, - "v": {"a": 0, "k": 1, "ix": 2} - }, - { - "ty": 7, - "nm": "Repeat Edge Pixels", - "mn": "ADBE Gaussian Blur 2-0003", - "ix": 3, - "v": {"a": 0, "k": 0, "ix": 3} - } - ] - } - ], - "shapes": [ - { - "ty": "gr", - "it": [ - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [0, 0], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Shape 1", - "np": 2, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "gr", - "it": [ - { - "ind": 0, - "ty": "sh", - "ix": 1, - "ks": { - "a": 0, - "k": { - "i": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "o": [ - [0, 0], - [0, 0], - [0, 0], - [0, 0] - ], - "v": [ - [79.021, -27.148], - [79.021, 272.804], - [-75.95, 272.804], - [-75.95, -27.148] - ], - "c": true - }, - "ix": 2 - }, - "nm": "Path 1", - "mn": "ADBE Vector Shape - Group", - "hd": false - }, - { - "ty": "fl", - "c": { - "a": 0, - "k": [0.517647058824, 0.580392156863, 0.733333333333, 1], - "ix": 4 - }, - "o": {"a": 0, "k": 100, "ix": 5}, - "r": 1, - "bm": 0, - "nm": "Fill 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": {"a": 0, "k": [3.974, -124.852], "ix": 2}, - "a": {"a": 0, "k": [0, 0], "ix": 1}, - "s": {"a": 0, "k": [100, 100], "ix": 3}, - "r": {"a": 0, "k": 0, "ix": 6}, - "o": {"a": 0, "k": 100, "ix": 7}, - "sk": {"a": 0, "k": 0, "ix": 4}, - "sa": {"a": 0, "k": 0, "ix": 5}, - "nm": "Transform" - } - ], - "nm": "Rectangle 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 2, - "mn": "ADBE Vector Group", - "hd": false - }, - { - "ty": "rd", - "nm": "Round Corners 1", - "r": {"a": 0, "k": 18, "ix": 1}, - "ix": 3, - "mn": "ADBE Vector Filter - RC", - "hd": false - } - ], - "ip": 0, - "op": 200, - "st": 0, - "bm": 0 - } - ], - "markers": [] -} From e8ad441a426dbada3bb51ce080201cc28fe5d4e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 16 Dec 2022 17:29:59 +0300 Subject: [PATCH 09/19] fix: update animationData to path --- .../pending-message/PeraWalletConnectModalPendingMessage.ts | 3 +-- src/modal/sign-toast/PeraWalletSignTxnToast.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts index b10288b..bd9c864 100644 --- a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts +++ b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts @@ -178,8 +178,7 @@ export class PeraWalletConnectModalPendingMessageSection extends HTMLElement { renderer: "svg", loop: true, autoplay: true, - animationData: - "https://gist.githubusercontent.com/yigiterdev/ea981d663e8c68726a0cdbbdd701a154/raw/c341095c9c42b8ea4d1dfec46fd6b18cdeaa43ff/PeraLoaderAnimationLottie.json" + path: "https://gist.githubusercontent.com/yigiterdev/ea981d663e8c68726a0cdbbdd701a154/raw/c341095c9c42b8ea4d1dfec46fd6b18cdeaa43ff/PeraLoaderAnimationLottie.json" }); } } diff --git a/src/modal/sign-toast/PeraWalletSignTxnToast.ts b/src/modal/sign-toast/PeraWalletSignTxnToast.ts index cb446a9..79ee144 100644 --- a/src/modal/sign-toast/PeraWalletSignTxnToast.ts +++ b/src/modal/sign-toast/PeraWalletSignTxnToast.ts @@ -66,8 +66,7 @@ export class PeraWalletSignTxnToast extends HTMLElement { renderer: "svg", loop: true, autoplay: true, - animationData: - "https://gist.githubusercontent.com/yigiterdev/e82b7253b774dc6e6f33cb2e1d5affc1/raw/d45f1dc977e2275d7d44e726e15a7245695f6aed/signtxnAnimation.json" + path: "https://gist.githubusercontent.com/yigiterdev/e82b7253b774dc6e6f33cb2e1d5affc1/raw/d45f1dc977e2275d7d44e726e15a7245695f6aed/signtxnAnimation.json" }); } } From 469f9521d6a4326a14f13eb9f49a5484511217d7 Mon Sep 17 00:00:00 2001 From: mucahit Date: Thu, 29 Dec 2022 12:45:01 +0000 Subject: [PATCH 10/19] fix: Remove unused deep_link option --- src/PeraWalletConnect.ts | 10 ---------- src/util/peraWalletUtils.ts | 6 +----- src/util/storage/storageConstants.ts | 3 +-- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 99e1edd..0d9bd65 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -21,14 +21,12 @@ import { } from "./modal/peraWalletConnectModalUtils"; import { getWalletDetailsFromStorage, - getLocalStorage, resetWalletDetailsFromStorage, saveWalletDetailsToStorage, getWalletConnectObjectFromStorage, getWalletPlatformFromStorage } from "./util/storage/storageUtils"; import {getPeraConnectConfig} from "./util/api/peraWalletConnectApi"; -import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./util/storage/storageConstants"; import {PeraWalletTransaction, SignerTransaction} from "./util/model/peraWalletModels"; import { base64ToUint8Array, @@ -43,7 +41,6 @@ import {getMetaInfo, waitForTabOpening} from "./util/dom/domUtils"; interface PeraWalletConnectOptions { bridge?: string; - deep_link?: string; shouldShowSignTxnToast?: boolean; chainId?: AlgorandChainIDs; } @@ -72,13 +69,6 @@ class PeraWalletConnect { constructor(options?: PeraWalletConnectOptions) { this.bridge = options?.bridge || ""; - if (options?.deep_link) { - getLocalStorage()?.setItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.DEEP_LINK, - options.deep_link - ); - } - this.connector = null; this.shouldShowSignTxnToast = typeof options?.shouldShowSignTxnToast === "undefined" diff --git a/src/util/peraWalletUtils.ts b/src/util/peraWalletUtils.ts index d662b44..086fb0b 100644 --- a/src/util/peraWalletUtils.ts +++ b/src/util/peraWalletUtils.ts @@ -1,12 +1,8 @@ import {detectBrowser, isAndroid, isIOS} from "./device/deviceUtils"; import {PERA_WALLET_APP_DEEP_LINK} from "./peraWalletConstants"; -import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./storage/storageConstants"; -import {getLocalStorage} from "./storage/storageUtils"; function generatePeraWalletAppDeepLink(shouldAddBrowserName = true): string { - let appDeepLink = - getLocalStorage()?.getItem(PERA_WALLET_LOCAL_STORAGE_KEYS.DEEP_LINK) || - PERA_WALLET_APP_DEEP_LINK; + let appDeepLink = PERA_WALLET_APP_DEEP_LINK; const browserName = detectBrowser(); if (shouldAddBrowserName && browserName) { diff --git a/src/util/storage/storageConstants.ts b/src/util/storage/storageConstants.ts index 1bf0f5e..b660387 100644 --- a/src/util/storage/storageConstants.ts +++ b/src/util/storage/storageConstants.ts @@ -1,7 +1,6 @@ const PERA_WALLET_LOCAL_STORAGE_KEYS = { WALLET: "PeraWallet.Wallet", - WALLETCONNECT: "walletconnect", - DEEP_LINK: "PeraWallet.DeepLink" + WALLETCONNECT: "walletconnect" }; export {PERA_WALLET_LOCAL_STORAGE_KEYS}; From a27182f9fc4f6d4b513d94b32e92295c904fb158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Thu, 29 Dec 2022 17:38:09 +0300 Subject: [PATCH 11/19] chore: code improvements --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eae437c..7ef38bf 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "typescript": "^4.6.3" }, "dependencies": { - "@evanhahn/lottie-web-light": "^5.8.1", + "@evanhahn/lottie-web-light": "5.8.1", "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", From 6c04721ee1172ebd4b384956ad6bc432986be6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Tue, 3 Jan 2023 12:57:12 +0300 Subject: [PATCH 12/19] feat: update animation urls --- package-lock.json | 2 +- .../pending-message/PeraWalletConnectModalPendingMessage.ts | 5 +++-- .../util/peraWalletConnectModalPendingMessageConstants.ts | 4 +++- src/modal/sign-toast/PeraWalletSignTxnToast.ts | 3 ++- src/modal/sign-toast/util/peraWalletSignTxnToastContants.ts | 4 ++++ 5 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 src/modal/sign-toast/util/peraWalletSignTxnToastContants.ts diff --git a/package-lock.json b/package-lock.json index 0a7fec4..3bd6936 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.7", "license": "ISC", "dependencies": { - "@evanhahn/lottie-web-light": "^5.8.1", + "@evanhahn/lottie-web-light": "5.8.1", "@json-rpc-tools/utils": "^1.7.6", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", diff --git a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts index bd9c864..17ccffe 100644 --- a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts +++ b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts @@ -12,7 +12,8 @@ import styles from "./_pera-wallet-connect-modal-pending-message.scss"; import {isIOS} from "../../../util/device/deviceUtils"; import { CONNECT_AUDIO_URL, - CONNECT_TIMEOUT_INTERVAL + CONNECT_TIMEOUT_INTERVAL, + PERA_LOADER_ANIMATION_URL } from "./util/peraWalletConnectModalPendingMessageConstants"; const {logo} = getPeraWalletAppMeta(); @@ -178,7 +179,7 @@ export class PeraWalletConnectModalPendingMessageSection extends HTMLElement { renderer: "svg", loop: true, autoplay: true, - path: "https://gist.githubusercontent.com/yigiterdev/ea981d663e8c68726a0cdbbdd701a154/raw/c341095c9c42b8ea4d1dfec46fd6b18cdeaa43ff/PeraLoaderAnimationLottie.json" + path: PERA_LOADER_ANIMATION_URL }); } } diff --git a/src/modal/section/pending-message/util/peraWalletConnectModalPendingMessageConstants.ts b/src/modal/section/pending-message/util/peraWalletConnectModalPendingMessageConstants.ts index b36a3a4..436bb45 100644 --- a/src/modal/section/pending-message/util/peraWalletConnectModalPendingMessageConstants.ts +++ b/src/modal/section/pending-message/util/peraWalletConnectModalPendingMessageConstants.ts @@ -1,4 +1,6 @@ const CONNECT_TIMEOUT_INTERVAL = 30000; const CONNECT_AUDIO_URL = "https://s3.amazonaws.com/wc.perawallet.app/audio.mp3"; +const PERA_LOADER_ANIMATION_URL = + "https://s3.amazonaws.com/wc.perawallet.app/static/pera-loader-animation.json"; -export {CONNECT_AUDIO_URL, CONNECT_TIMEOUT_INTERVAL}; +export {CONNECT_AUDIO_URL, CONNECT_TIMEOUT_INTERVAL, PERA_LOADER_ANIMATION_URL}; diff --git a/src/modal/sign-toast/PeraWalletSignTxnToast.ts b/src/modal/sign-toast/PeraWalletSignTxnToast.ts index 79ee144..7ec13f2 100644 --- a/src/modal/sign-toast/PeraWalletSignTxnToast.ts +++ b/src/modal/sign-toast/PeraWalletSignTxnToast.ts @@ -7,6 +7,7 @@ import { PERA_WALLET_SIGN_TXN_TOAST_ID, removeModalWrapperFromDOM } from "../peraWalletConnectModalUtils"; +import {SIGN_TXN_ANIMATION_URL} from "./util/peraWalletSignTxnToastContants"; const peraWalletSignTxnToastTemplate = document.createElement("template"); @@ -66,7 +67,7 @@ export class PeraWalletSignTxnToast extends HTMLElement { renderer: "svg", loop: true, autoplay: true, - path: "https://gist.githubusercontent.com/yigiterdev/e82b7253b774dc6e6f33cb2e1d5affc1/raw/d45f1dc977e2275d7d44e726e15a7245695f6aed/signtxnAnimation.json" + path: SIGN_TXN_ANIMATION_URL }); } } diff --git a/src/modal/sign-toast/util/peraWalletSignTxnToastContants.ts b/src/modal/sign-toast/util/peraWalletSignTxnToastContants.ts new file mode 100644 index 0000000..8b04ab8 --- /dev/null +++ b/src/modal/sign-toast/util/peraWalletSignTxnToastContants.ts @@ -0,0 +1,4 @@ +const SIGN_TXN_ANIMATION_URL = + "https://s3.amazonaws.com/wc.perawallet.app/static/sign-toast-animation.json"; + +export {SIGN_TXN_ANIMATION_URL}; From d0187e2cc4f952c225ee1a5cb49ef8a2433e8dfd Mon Sep 17 00:00:00 2001 From: mucahit Date: Wed, 4 Jan 2023 13:35:35 +0000 Subject: [PATCH 13/19] fix: Better disconnect handling --- src/PeraWalletConnect.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 80a24db..0b4b8af 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -529,10 +529,9 @@ class PeraWalletConnect { } async disconnect() { - const walletDetails = getWalletDetailsFromStorage(); let killPromise: Promise | undefined; - if (walletDetails?.type === "pera-wallet") { + if (this.isConnected && this.platform === "mobile") { killPromise = this.connector?.killSession(); killPromise?.then(() => { From 86b7fe3e3ae012f0ef5529b4e3268f6d1cce312d Mon Sep 17 00:00:00 2001 From: mucahit Date: Thu, 5 Jan 2023 13:39:48 +0000 Subject: [PATCH 14/19] fix(redirect/modal): remove auto close --- src/modal/redirect/PeraWalletRedirectModal.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/modal/redirect/PeraWalletRedirectModal.ts b/src/modal/redirect/PeraWalletRedirectModal.ts index 24dc7a8..371ce4a 100644 --- a/src/modal/redirect/PeraWalletRedirectModal.ts +++ b/src/modal/redirect/PeraWalletRedirectModal.ts @@ -7,8 +7,6 @@ import { } from "../peraWalletConnectModalUtils"; import styles from "./_pera-wallet-redirect-modal.scss"; -const REDIRECT_MODAL_TIMEOUT = 15000; - const peraWalletRedirectModalTemplate = document.createElement("template"); peraWalletRedirectModalTemplate.innerHTML = ` @@ -95,10 +93,6 @@ export class PeraWalletRedirectModal extends HTMLElement { if (peraWalletDeepLink && !peraWalletDeepLink.closed) { this.onClose(); } - - setTimeout(() => { - removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID); - }, REDIRECT_MODAL_TIMEOUT); } onClose() { From 241d7a69be6a0b6e078a238de2bb081d8ef6fedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 6 Jan 2023 16:53:10 +0300 Subject: [PATCH 15/19] fix: update teller to check tab opened or not --- src/PeraWalletConnect.ts | 363 ++++++++++---------- src/util/dom/domUtils.ts | 26 +- src/util/network/teller/appTellerManager.ts | 5 +- 3 files changed, 202 insertions(+), 192 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 1d7fd7b..1ad34c7 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -100,7 +100,6 @@ class PeraWalletConnect { ) { const browser = detectBrowser(); const webWalletURLs = getPeraWebWalletURL(webWalletURL); - const peraWalletIframe = document.createElement("iframe"); function onReceiveMessage(event: MessageEvent>) { @@ -137,24 +136,20 @@ class PeraWalletConnect { if (event.data.message.type === "CREATE_PASSCODE_EMBEDDED") { const newPeraWalletTab = window.open(webWalletURLs.CONNECT, "_blank"); - const checkMessageIsReceived = setInterval(() => { - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, - - origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab - }); - } + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, - // eslint-disable-next-line no-magic-numbers - }, 300); + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); + } const checkTabIsAliveInterval = setInterval(() => { if (newPeraWalletTab?.closed === true) { @@ -176,10 +171,6 @@ class PeraWalletConnect { appTellerManager.setupListener({ onReceiveMessage: (newTabEvent: MessageEvent>) => { - if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { - clearInterval(checkMessageIsReceived); - } - if (resolve && newTabEvent.data.message.type === "CONNECT_CALLBACK") { const accounts = newTabEvent.data.message.data.addresses; @@ -242,8 +233,27 @@ class PeraWalletConnect { peraWalletIframeWrapper.appendChild(peraWalletIframe); - const checkMessageIsReceived = setInterval(() => { - if (peraWalletIframe.contentWindow) { + 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) => { + if (newPeraWalletTab && newPeraWalletTab.opener) { appTellerManager.sendMessage({ message: { type: "CONNECT", @@ -254,45 +264,10 @@ class PeraWalletConnect { }, origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow + targetWindow: newPeraWalletTab }); } - // eslint-disable-next-line no-magic-numbers - }, 300); - - appTellerManager.setupListener({ - onReceiveMessage: (newTabEvent: MessageEvent>) => { - if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { - clearInterval(checkMessageIsReceived); - } - } - }); - - appTellerManager.setupListener({ - onReceiveMessage - }); - } else { - waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { - const checkMessageIsReceived = setInterval(() => { - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, - - origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab - }); - } - - // eslint-disable-next-line no-magic-numbers - }, 300); - const checkTabIsAliveInterval = setInterval(() => { if (newPeraWalletTab?.closed === true) { reject( @@ -313,10 +288,6 @@ class PeraWalletConnect { appTellerManager.setupListener({ onReceiveMessage: (event: MessageEvent>) => { - if (event.data.message.type === "MESSAGE_RECEIVED") { - clearInterval(checkMessageIsReceived); - } - if (resolve && event.data.message.type === "CONNECT_CALLBACK") { const accounts = event.data.message.data.addresses; @@ -568,24 +539,6 @@ class PeraWalletConnect { return new Promise((resolve, reject) => { const webWalletURLs = getPeraWebWalletURL(webWalletURL); const browser = detectBrowser(); - let newPeraWalletTab: Window | null; - - const checkTabIsAliveInterval = setInterval(() => { - if (newPeraWalletTab?.closed === true) { - reject( - new PeraWalletConnectError( - { - type: "SIGN_TXN_CANCELLED" - }, - "Transaction signing is cancelled by user." - ) - ); - - clearInterval(checkTabIsAliveInterval); - } - - // eslint-disable-next-line no-magic-numbers - }, 2000); if (browser === "Chrome") { openPeraWalletSignTxnModal() @@ -627,28 +580,72 @@ class PeraWalletConnect { }); } - const checkMessageIsReceived = setInterval(() => { - if (peraWalletIframe.contentWindow) { - appTellerManager.sendMessage({ - message: { - type: "SIGN_TXN", - txn: signTxnRequestParams - }, - - origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), - targetWindow: peraWalletIframe.contentWindow - }); - } + if (peraWalletIframe.contentWindow) { + appTellerManager.sendMessage({ + message: { + type: "SIGN_TXN", + txn: signTxnRequestParams + }, - // eslint-disable-next-line no-magic-numbers - }, 300); + origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), + targetWindow: peraWalletIframe.contentWindow + }); + } appTellerManager.setupListener({ - onReceiveMessage: ( - newTabEvent: MessageEvent> - ) => { - if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { - clearInterval(checkMessageIsReceived); + onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "SIGN_TXN_CALLBACK") { + document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); + closePeraWalletSignTxnModal(); + + resolve( + event.data.message.signedTxns.map((txn) => + base64ToUint8Array(txn.signedTxn) + ) + ); + } + + 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" + ) + ); + } + + 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 + ) + ); } } }); @@ -662,31 +659,87 @@ class PeraWalletConnect { }); } else { waitForTabOpening(webWalletURLs.TRANSACTION_SIGN) - .then((newTab) => { - newPeraWalletTab = newTab; - - const checkMessageIsReceived = setInterval(() => { - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "SIGN_TXN", - txn: signTxnRequestParams - }, + .then((newPeraWalletTab) => { + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "SIGN_TXN", + txn: signTxnRequestParams + }, + + origin: webWalletURLs.TRANSACTION_SIGN, + targetWindow: newPeraWalletTab + }); + } - origin: webWalletURLs.TRANSACTION_SIGN, - targetWindow: newPeraWalletTab - }); + const checkTabIsAliveInterval = setInterval(() => { + if (newPeraWalletTab?.closed === true) { + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_CANCELLED" + }, + "Transaction signing is cancelled by user." + ) + ); + + clearInterval(checkTabIsAliveInterval); } // eslint-disable-next-line no-magic-numbers - }, 300); + }, 2000); appTellerManager.setupListener({ - onReceiveMessage: ( - newTabEvent: MessageEvent> - ) => { - if (newTabEvent.data.message.type === "MESSAGE_RECEIVED") { - clearInterval(checkMessageIsReceived); + onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "SIGN_TXN_CALLBACK") { + newPeraWalletTab?.close(); + + resolve( + event.data.message.signedTxns.map((txn) => + base64ToUint8Array(txn.signedTxn) + ) + ); + } + + 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" + ) + ); + } + + if (event.data.message.type === "SESSION_DISCONNECTED") { + newPeraWalletTab?.close(); + + 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") { + newPeraWalletTab?.close(); + + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_CANCELLED" + }, + event.data.message.error + ) + ); } } }); @@ -695,76 +748,6 @@ class PeraWalletConnect { console.log(error); }); } - - appTellerManager.setupListener({ - onReceiveMessage: (event: MessageEvent>) => { - if (event.data.message.type === "SIGN_TXN_CALLBACK") { - if (browser === "Chrome") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - } - - newPeraWalletTab?.close(); - - resolve( - event.data.message.signedTxns.map((txn) => - base64ToUint8Array(txn.signedTxn) - ) - ); - } - - 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" - ) - ); - } - - if (event.data.message.type === "SESSION_DISCONNECTED") { - if (browser === "Chrome") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - } - - newPeraWalletTab?.close(); - - 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") { - if (browser === "Chrome") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - } - - newPeraWalletTab?.close(); - - reject( - new PeraWalletConnectError( - { - type: "SIGN_TXN_CANCELLED" - }, - event.data.message.error - ) - ); - } - } - }); }); } diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 5c9a2f1..2daf95a 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,3 +1,5 @@ +import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; + function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); const metaDescription: HTMLElement | null = document.querySelector( @@ -99,7 +101,29 @@ function waitForTabOpening(url: string): Promise { try { const newWindow = window.open(url, "_blank"); - resolve(newWindow); + const checkTabIsOpened = setInterval(() => { + if (newWindow) { + appTellerManager.sendMessage({ + message: { + type: "TAB_OPEN" + }, + + origin: url, + targetWindow: newWindow + }); + } + + // eslint-disable-next-line no-magic-numbers + }, 300); + + appTellerManager.setupListener({ + onReceiveMessage: (newTabEvent: MessageEvent>) => { + if (newTabEvent.data.message.type === "TAB_OPEN_RECEIVED") { + clearInterval(checkTabIsOpened); + resolve(newWindow); + } + } + }); } catch (error) { reject(error); } diff --git a/src/util/network/teller/appTellerManager.ts b/src/util/network/teller/appTellerManager.ts index 80a3f25..1710127 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -58,7 +58,10 @@ export type PeraTeller = error: string; } | { - type: "MESSAGE_RECEIVED"; + type: "TAB_OPEN"; + } + | { + type: "TAB_OPEN_RECEIVED"; }; const appTellerManager = new Teller({ From 0008a68fa5d8384b16f678e053165840183d97dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Fri, 6 Jan 2023 18:08:27 +0300 Subject: [PATCH 16/19] fix: closed before message received issue --- src/PeraWalletConnect.ts | 109 +++++++++++++++-------------- src/util/PeraWalletConnectError.ts | 4 +- src/util/dom/domUtils.ts | 32 +++++++++ 3 files changed, 92 insertions(+), 53 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 1ad34c7..86b1562 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -252,71 +252,76 @@ class PeraWalletConnect { onReceiveMessage }); } else { - waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { - if (newPeraWalletTab && newPeraWalletTab.opener) { - 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" - ) - ); + waitForTabOpening(webWalletURLs.CONNECT) + .then((newPeraWalletTab) => { + if (newPeraWalletTab && newPeraWalletTab.opener) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, - clearInterval(checkTabIsAliveInterval); - onClose(); + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); } - // eslint-disable-next-line no-magic-numbers - }, 2000); - - appTellerManager.setupListener({ - onReceiveMessage: (event: MessageEvent>) => { - if (resolve && event.data.message.type === "CONNECT_CALLBACK") { - const accounts = event.data.message.data.addresses; - - saveWalletDetailsToStorage(accounts, "pera-wallet-web"); - - resolve(accounts); - - onClose(); - - newPeraWalletTab?.close(); - } else if (event.data.message.type === "CONNECT_NETWORK_MISMATCH") { + const checkTabIsAliveInterval = setInterval(() => { + if (newPeraWalletTab?.closed === true) { reject( new PeraWalletConnectError( { - type: "CONNECT_NETWORK_MISMATCH", - detail: event.data.message.error + type: "CONNECT_CANCELLED" }, - 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.` + "Connect is cancelled by user" ) ); + clearInterval(checkTabIsAliveInterval); onClose(); + } - newPeraWalletTab?.close(); + // eslint-disable-next-line no-magic-numbers + }, 2000); + + appTellerManager.setupListener({ + onReceiveMessage: (event: MessageEvent>) => { + if (resolve && event.data.message.type === "CONNECT_CALLBACK") { + const accounts = event.data.message.data.addresses; + + saveWalletDetailsToStorage(accounts, "pera-wallet-web"); + + resolve(accounts); + + onClose(); + + newPeraWalletTab?.close(); + } 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.` + ) + ); + + onClose(); + + newPeraWalletTab?.close(); + } } - } + }); + }) + .catch((error) => { + onClose(); + reject(error); }); - }); } } @@ -745,7 +750,7 @@ class PeraWalletConnect { }); }) .catch((error) => { - console.log(error); + reject(error); }); } }); diff --git a/src/util/PeraWalletConnectError.ts b/src/util/PeraWalletConnectError.ts index 402abe3..7075914 100644 --- a/src/util/PeraWalletConnectError.ts +++ b/src/util/PeraWalletConnectError.ts @@ -9,7 +9,9 @@ interface PeraWalletConnectErrorData { | "CONNECT_CANCELLED" | "SIGN_TXN_CANCELLED" | "CONNECT_NETWORK_MISMATCH" - | "SIGN_TXN_NETWORK_MISMATCH"; + | "SIGN_TXN_NETWORK_MISMATCH" + | "MESSAGE_NOT_RECEIVED" + | "OPERATION_CANCELLED"; detail?: any; } diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index 2daf95a..f7342f8 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,4 +1,5 @@ import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager"; +import PeraWalletConnectError from "../PeraWalletConnectError"; function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); @@ -101,8 +102,39 @@ function waitForTabOpening(url: string): Promise { try { const newWindow = window.open(url, "_blank"); + let count = 0; + const checkTabIsOpened = setInterval(() => { + count += 1; + // eslint-disable-next-line no-magic-numbers + if (count === 50) { + clearInterval(checkTabIsOpened); + reject( + new PeraWalletConnectError( + { + type: "MESSAGE_NOT_RECEIVED" + }, + + `Message not received by ${url}` + ) + ); + return; + } + if (newWindow) { + if (newWindow.closed === true) { + clearInterval(checkTabIsOpened); + reject( + new PeraWalletConnectError( + { + type: "OPERATION_CANCELLED" + }, + + "Operation cancelled by user" + ) + ); + } + appTellerManager.sendMessage({ message: { type: "TAB_OPEN" From 3b340fd5dc198429ef1723588e404ac2a11d527b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Mon, 9 Jan 2023 14:00:03 +0300 Subject: [PATCH 17/19] chore: code improvements --- src/PeraWalletConnect.ts | 84 ++++++++++++++++++++-------------------- src/util/dom/domUtils.ts | 13 ++++--- 2 files changed, 50 insertions(+), 47 deletions(-) diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 86b1562..9c41877 100644 --- a/src/PeraWalletConnect.ts +++ b/src/PeraWalletConnect.ts @@ -134,55 +134,57 @@ class PeraWalletConnect { ) ) { if (event.data.message.type === "CREATE_PASSCODE_EMBEDDED") { - const newPeraWalletTab = window.open(webWalletURLs.CONNECT, "_blank"); - - if (newPeraWalletTab && newPeraWalletTab.opener) { - appTellerManager.sendMessage({ - message: { - type: "CONNECT", - data: { - ...getMetaInfo(), - chainId - } - }, + waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => { + if (newPeraWalletTab) { + appTellerManager.sendMessage({ + message: { + type: "CONNECT", + data: { + ...getMetaInfo(), + chainId + } + }, - origin: webWalletURLs.CONNECT, - targetWindow: newPeraWalletTab - }); - } + origin: webWalletURLs.CONNECT, + targetWindow: newPeraWalletTab + }); + } - const checkTabIsAliveInterval = setInterval(() => { - if (newPeraWalletTab?.closed === true) { - reject( - new PeraWalletConnectError( - { - type: "CONNECT_CANCELLED" - }, - "Connect is cancelled by user" - ) - ); + const checkTabIsAliveInterval = setInterval(() => { + if (newPeraWalletTab?.closed === true) { + reject( + new PeraWalletConnectError( + { + type: "CONNECT_CANCELLED" + }, + "Connect is cancelled by user" + ) + ); - onClose(); - clearInterval(checkTabIsAliveInterval); - } + onClose(); + clearInterval(checkTabIsAliveInterval); + } - // eslint-disable-next-line no-magic-numbers - }, 2000); + // 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; + 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"); + saveWalletDetailsToStorage(accounts, "pera-wallet-web"); - resolve(accounts); + resolve(accounts); - onClose(); + onClose(); - newPeraWalletTab?.close(); + newPeraWalletTab?.close(); + } } - } + }); }); } else if (event.data.message.type === "SELECT_ACCOUNT_EMBEDDED") { const peraWalletConnectModalWrapper = document.getElementById( @@ -254,7 +256,7 @@ class PeraWalletConnect { } else { waitForTabOpening(webWalletURLs.CONNECT) .then((newPeraWalletTab) => { - if (newPeraWalletTab && newPeraWalletTab.opener) { + if (newPeraWalletTab) { appTellerManager.sendMessage({ message: { type: "CONNECT", @@ -665,7 +667,7 @@ class PeraWalletConnect { } else { waitForTabOpening(webWalletURLs.TRANSACTION_SIGN) .then((newPeraWalletTab) => { - if (newPeraWalletTab && newPeraWalletTab.opener) { + if (newPeraWalletTab) { appTellerManager.sendMessage({ message: { type: "SIGN_TXN", diff --git a/src/util/dom/domUtils.ts b/src/util/dom/domUtils.ts index f7342f8..17f1a95 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,6 +1,9 @@ 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; + function getMetaInfo() { const metaTitle: HTMLElement | null = document.querySelector('meta[name="name"]'); const metaDescription: HTMLElement | null = document.querySelector( @@ -106,8 +109,8 @@ function waitForTabOpening(url: string): Promise { const checkTabIsOpened = setInterval(() => { count += 1; - // eslint-disable-next-line no-magic-numbers - if (count === 50) { + + if (count === WAIT_FOR_TAB_MAX_TRY_COUNT) { clearInterval(checkTabIsOpened); reject( new PeraWalletConnectError( @@ -115,7 +118,7 @@ function waitForTabOpening(url: string): Promise { type: "MESSAGE_NOT_RECEIVED" }, - `Message not received by ${url}` + "Couldn't open Pera Wallet, please try again." ) ); return; @@ -144,9 +147,7 @@ function waitForTabOpening(url: string): Promise { targetWindow: newWindow }); } - - // eslint-disable-next-line no-magic-numbers - }, 300); + }, WAIT_FOR_TAB_TRY_INTERVAL); appTellerManager.setupListener({ onReceiveMessage: (newTabEvent: MessageEvent>) => { From 148501359d61926c5ebd4dfc6ea86773bd22aabb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Mon, 9 Jan 2023 16:34:30 +0300 Subject: [PATCH 18/19] fix: update wrong class in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cf0e8c0..27221d6 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ Starts the sign process and returns the signed transaction in `Uint8Array` ## Customizing Style -You can override the z-index using the `.pera-wallet-connect-modal` class so that the modal does not conflict with another component on your application. +You can override the z-index using the `.pera-wallet-modal` class so that the modal does not conflict with another component on your application. ```scss .pera-wallet-modal { From d51adfe0fcd598831a9a8f24d540f55b37e1ef98 Mon Sep 17 00:00:00 2001 From: mucahit Date: Mon, 9 Jan 2023 14:22:03 +0000 Subject: [PATCH 19/19] 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 54b28dd..bb613e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@perawallet/connect", - "version": "1.0.7", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@perawallet/connect", - "version": "1.0.7", + "version": "1.1.0", "license": "ISC", "dependencies": { "@evanhahn/lottie-web-light": "5.8.1", diff --git a/package.json b/package.json index 3c6bd27..d116241 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.7", + "version": "1.1.0", "name": "@perawallet/connect", "description": "JavaScript SDK for integrating Pera Wallet to web applications.", "main": "dist/index.js",