diff --git a/README.md b/README.md index 5e29bba..27221d6 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. @@ -154,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 { diff --git a/package-lock.json b/package-lock.json index 4c6e263..bb613e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,20 @@ { "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": { - "@json-rpc-tools/utils": "^1.7.6", + "@evanhahn/lottie-web-light": "5.8.1", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", - "bowser": "^2.11.0", + "bowser": "2.11.0", "buffer": "^6.0.3", - "lottie-web": "^5.9.6", - "qr-code-styling": "^1.6.0-rc.1" + "qr-code-styling": "1.6.0-rc.1" }, "devDependencies": { "@hipo/eslint-config-base": "^4.1.1", @@ -169,6 +168,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", @@ -288,23 +292,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 +351,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", @@ -4009,11 +3991,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 +7932,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", @@ -8047,23 +8029,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 +8075,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", @@ -10878,11 +10838,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..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", @@ -30,13 +30,12 @@ "typescript": "^4.6.3" }, "dependencies": { - "@json-rpc-tools/utils": "^1.7.6", + "@evanhahn/lottie-web-light": "5.8.1", "@walletconnect/client": "^1.8.0", "@walletconnect/types": "^1.8.0", - "bowser": "^2.11.0", + "bowser": "2.11.0", "buffer": "^6.0.3", - "lottie-web": "^5.9.6", - "qr-code-styling": "^1.6.0-rc.1" + "qr-code-styling": "1.6.0-rc.1" }, "peerDependencies": { "algosdk": "^1.23.2" diff --git a/rollup.config.js b/rollup.config.js index 005f88c..b4cbc33 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,17 +17,15 @@ export default [ "@walletconnect/client": "WalletConnect", algosdk: "algosdk", bowser: "bowser", - "@json-rpc-tools/utils/dist/cjs/format": "format", "qr-code-styling": "QRCodeStyling", - "lottie-web": "lottie" + "@evanhahn/lottie-web-light": "lottie" } }, external: [ "@walletconnect/client", "@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/PeraWalletConnect.ts b/src/PeraWalletConnect.ts index 84cf12b..9c41877 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 { @@ -16,37 +15,33 @@ 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"; 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, - encodeUnsignedTransactionInBase64 + composeTransaction, + formatJsonRpcRequest } 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"; interface PeraWalletConnectOptions { bridge?: string; - deep_link?: string; - app_meta?: AppMeta; shouldShowSignTxnToast?: boolean; - network?: PeraWalletNetwork; chainId?: AlgorandChainIDs; } @@ -69,35 +64,11 @@ class PeraWalletConnect { bridge: string; connector: WalletConnect | null; shouldShowSignTxnToast: boolean; - network = getNetworkFromStorage(); chainId?: number; constructor(options?: PeraWalletConnectOptions) { this.bridge = options?.bridge || ""; - if (options?.deep_link) { - getLocalStorage()?.setItem( - PERA_WALLET_LOCAL_STORAGE_KEYS.DEEP_LINK, - options.deep_link - ); - } - - 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,8 +99,7 @@ class PeraWalletConnect { chainId: number | undefined ) { const browser = detectBrowser(); - const webWalletURLs = getPeraWebWalletURL(webWalletURL, this.network); - + const webWalletURLs = getPeraWebWalletURL(webWalletURL); const peraWalletIframe = document.createElement("iframe"); function onReceiveMessage(event: MessageEvent>) { @@ -164,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( @@ -274,8 +246,7 @@ class PeraWalletConnect { }, origin: webWalletURLs.CONNECT, - targetWindow: peraWalletIframe.contentWindow, - timeout: 5000 + targetWindow: peraWalletIframe.contentWindow }); } @@ -283,72 +254,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, - timeout: 5000 - }); - } - - 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) { + 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(); + } + + // 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(); + 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); }); - }); } } @@ -361,18 +336,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 +355,7 @@ class PeraWalletConnect { webWalletURL, shouldDisplayNewBadge, shouldUseSound - } = await getPeraConnectConfig(network || this.network); + } = await getPeraConnectConfig(); const {onWebWalletConnect} = this.connectWithWebWallet( resolve, @@ -410,19 +384,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 +392,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 +407,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 +428,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 +471,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` ) ); } @@ -529,15 +485,17 @@ class PeraWalletConnect { } async disconnect() { - const killPromise = this.connector?.killSession(); + let killPromise: Promise | undefined; - killPromise?.then(() => { - this.connector = null; - }); + if (this.isConnected && this.platform === "mobile") { + killPromise = this.connector?.killSession(); - await resetWalletDetailsFromStorage(); + killPromise?.then(() => { + this.connector = null; + }); + } - return killPromise; + await resetWalletDetailsFromStorage(); } private async signTransactionWithMobile(signTxnRequestParams: PeraWalletTransaction[]) { @@ -547,7 +505,7 @@ class PeraWalletConnect { try { try { - const {silent} = await getPeraConnectConfig(this.network); + const {silent} = await getPeraConnectConfig(); const response = await this.connector!.sendCustomRequest( formattedSignTxnRequest, @@ -586,26 +544,8 @@ 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; - - 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() @@ -655,11 +595,68 @@ class PeraWalletConnect { }, origin: generateEmbeddedWalletURL(webWalletURLs.TRANSACTION_SIGN), - targetWindow: peraWalletIframe.contentWindow, - timeout: 3000 + targetWindow: peraWalletIframe.contentWindow }); } + appTellerManager.setupListener({ + 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 + ) + ); + } + } + }); + // 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. // The promise is rejected when the web wallet responds with an error. @@ -669,10 +666,8 @@ class PeraWalletConnect { }); } else { waitForTabOpening(webWalletURLs.TRANSACTION_SIGN) - .then((newTab) => { - newPeraWalletTab = newTab; - - if (newPeraWalletTab && newPeraWalletTab.opener) { + .then((newPeraWalletTab) => { + if (newPeraWalletTab) { appTellerManager.sendMessage({ message: { type: "SIGN_TXN", @@ -680,85 +675,86 @@ class PeraWalletConnect { }, origin: webWalletURLs.TRANSACTION_SIGN, - targetWindow: newPeraWalletTab, - timeout: 3000 + targetWindow: newPeraWalletTab }); } - }) - .catch((error) => { - 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(); + const checkTabIsAliveInterval = setInterval(() => { + if (newPeraWalletTab?.closed === true) { + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_CANCELLED" + }, + "Transaction signing is cancelled by user." + ) + ); - resolve( - event.data.message.signedTxns.map((txn) => - base64ToUint8Array(txn.signedTxn) - ) - ); - } + clearInterval(checkTabIsAliveInterval); + } - 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" - ) - ); - } + // eslint-disable-next-line no-magic-numbers + }, 2000); - if (event.data.message.type === "SESSION_DISCONNECTED") { - if (browser === "Chrome") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - } + appTellerManager.setupListener({ + onReceiveMessage: (event: MessageEvent>) => { + if (event.data.message.type === "SIGN_TXN_CALLBACK") { + newPeraWalletTab?.close(); - newPeraWalletTab?.close(); + resolve( + event.data.message.signedTxns.map((txn) => + base64ToUint8Array(txn.signedTxn) + ) + ); + } - resetWalletDetailsFromStorage(); + if (event.data.message.type === "SIGN_TXN_NETWORK_MISMATCH") { + reject( + new PeraWalletConnectError( + { + type: "SIGN_TXN_NETWORK_MISMATCH", + detail: event.data.message.error + }, + event.data.message.error || "Network mismatch" + ) + ); + } - reject( - new PeraWalletConnectError( - { - type: "SESSION_DISCONNECTED", - detail: event.data.message.error - }, - event.data.message.error - ) - ); - } + if (event.data.message.type === "SESSION_DISCONNECTED") { + newPeraWalletTab?.close(); - if (event.data.message.type === "SIGN_TXN_CALLBACK_ERROR") { - if (browser === "Chrome") { - document.getElementById(PERA_WALLET_IFRAME_ID)?.remove(); - closePeraWalletSignTxnModal(); - } + resetWalletDetailsFromStorage(); - newPeraWalletTab?.close(); + reject( + new PeraWalletConnectError( + { + type: "SESSION_DISCONNECTED", + detail: event.data.message.error + }, + event.data.message.error + ) + ); + } - reject( - new PeraWalletConnectError( - { - type: "SIGN_TXN_CANCELLED" - }, - 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 + ) + ); + } + } + }); + }) + .catch((error) => { + reject(error); + }); + } }); } @@ -766,9 +762,7 @@ class PeraWalletConnect { txGroups: SignerTransaction[][], signerAddress?: string ): Promise { - const walletDetails = getWalletDetailsFromStorage(); - - if (walletDetails?.type === "pera-wallet") { + if (this.platform === "mobile") { if (isMobile()) { // This is to automatically open the wallet app when trying to sign with it. openPeraWalletRedirectModal(); @@ -784,41 +778,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); + if (this.platform === "web") { + const {webWalletURL} = await getPeraConnectConfig(); return this.signTransactionWithWeb(signTxnRequestParams, webWalletURL); } 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/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/redirect/PeraWalletRedirectModal.ts b/src/modal/redirect/PeraWalletRedirectModal.ts index ac947e1..371ce4a 100644 --- a/src/modal/redirect/PeraWalletRedirectModal.ts +++ b/src/modal/redirect/PeraWalletRedirectModal.ts @@ -12,6 +12,8 @@ const peraWalletRedirectModalTemplate = document.createElement("template"); peraWalletRedirectModalTemplate.innerHTML = `
+ +
@@ -80,19 +82,16 @@ 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(); - }); + if (peraWalletDeepLink && !peraWalletDeepLink.closed) { + this.onClose(); } } 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..cec3bbe 100644 --- a/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts +++ b/src/modal/section/pending-message/PeraWalletConnectModalPendingMessage.ts @@ -1,10 +1,9 @@ +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 Lottie from "@evanhahn/lottie-web-light"; -import {getPeraWalletAppMeta} from "../../../util/peraWalletUtils"; import { PERA_WALLET_CONNECT_MODAL_ID, removeModalWrapperFromDOM @@ -13,10 +12,10 @@ 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(); 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 @@ -174,12 +173,12 @@ export class PeraWalletConnectModalPendingMessageSection extends HTMLElement { ); if (lottieWrapper) { - lottie.loadAnimation({ + Lottie.loadAnimation({ container: lottieWrapper, renderer: "svg", loop: true, autoplay: true, - animationData + path: PERA_LOADER_ANIMATION_URL }); } } 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/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 7d1b83a..7ec13f2 100644 --- a/src/modal/sign-toast/PeraWalletSignTxnToast.ts +++ b/src/modal/sign-toast/PeraWalletSignTxnToast.ts @@ -1,13 +1,13 @@ 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 { PERA_WALLET_SIGN_TXN_TOAST_ID, removeModalWrapperFromDOM } from "../peraWalletConnectModalUtils"; +import {SIGN_TXN_ANIMATION_URL} from "./util/peraWalletSignTxnToastContants"; const peraWalletSignTxnToastTemplate = document.createElement("template"); @@ -62,12 +62,12 @@ export class PeraWalletSignTxnToast extends HTMLElement { ); if (lottieWrapper) { - lottie.loadAnimation({ + Lottie.loadAnimation({ container: lottieWrapper, renderer: "svg", loop: true, autoplay: true, - animationData + path: SIGN_TXN_ANIMATION_URL }); } } 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": [] -} 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}; 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/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/dom/domUtils.ts b/src/util/dom/domUtils.ts index 5c9a2f1..17f1a95 100644 --- a/src/util/dom/domUtils.ts +++ b/src/util/dom/domUtils.ts @@ -1,3 +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( @@ -99,7 +105,58 @@ function waitForTabOpening(url: string): Promise { try { const newWindow = window.open(url, "_blank"); - resolve(newWindow); + let count = 0; + + const checkTabIsOpened = setInterval(() => { + count += 1; + + if (count === WAIT_FOR_TAB_MAX_TRY_COUNT) { + clearInterval(checkTabIsOpened); + reject( + new PeraWalletConnectError( + { + type: "MESSAGE_NOT_RECEIVED" + }, + + "Couldn't open Pera Wallet, please try again." + ) + ); + 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" + }, + + origin: url, + targetWindow: newWindow + }); + } + }, WAIT_FOR_TAB_TRY_INTERVAL); + + 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 cb4f012..1710127 100644 --- a/src/util/network/teller/appTellerManager.ts +++ b/src/util/network/teller/appTellerManager.ts @@ -56,6 +56,12 @@ export type PeraTeller = | { type: "SESSION_DISCONNECTED"; error: string; + } + | { + type: "TAB_OPEN"; + } + | { + type: "TAB_OPEN_RECEIVED"; }; const appTellerManager = new Teller({ 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/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..086fb0b 100644 --- a/src/util/peraWalletUtils.ts +++ b/src/util/peraWalletUtils.ts @@ -1,15 +1,8 @@ -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"; 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) { @@ -19,22 +12,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 +48,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..b660387 100644 --- a/src/util/storage/storageConstants.ts +++ b/src/util/storage/storageConstants.ts @@ -1,9 +1,6 @@ const PERA_WALLET_LOCAL_STORAGE_KEYS = { WALLET: "PeraWallet.Wallet", - WALLETCONNECT: "walletconnect", - DEEP_LINK: "PeraWallet.DeepLink", - APP_META: "PeraWallet.AppMeta", - NETWORK: "PeraWallet.Network" + WALLETCONNECT: "walletconnect" }; 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..4629f6b 100644 --- a/src/util/transaction/transactionUtils.ts +++ b/src/util/transaction/transactionUtils.ts @@ -1,5 +1,8 @@ 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"); } @@ -8,4 +11,48 @@ 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; +} + +function formatJsonRpcRequest(method: string, params: T) { + return { + id: generateSimpleId(), + jsonrpc: "2.0", + method, + params + }; +} + +export { + encodeUnsignedTransactionInBase64, + base64ToUint8Array, + composeTransaction, + formatJsonRpcRequest +};