diff --git a/README.md b/README.md
index 5a58bef..25821cb 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,12 @@ function App() {
`@perawallet/connect` also allows signing transactions using the Pera Wallet application. Once the `signTransaction` method is triggered if the user is on a mobile browser, the Pera Wallet app will be launched automatically, if the browser blocks the redirection there's also a popup that links to the Pera Wallet app.
+`@perawallet/connect` guides users with a toast message when the `signTransaction` is triggered. It's enabled by default but in some cases, you may not need to the toast message (e.g. you already have signing guidance for users). There's a configuration called `shouldShowSignTxnToast` to disable it, see the example below:
+
+```js
+const peraWallet = new PeraWalletConnect({shouldShowSignTxnToast: false});
+```
+
`signTransaction` accepts `SignerTransaction[][]` the type can be found [here](./src/util/model/peraWalletModels.ts)
**To see more details & working examples please [visit here](https://codesandbox.io/s/txns-demo-pj3nf2)**
diff --git a/package-lock.json b/package-lock.json
index 69fa8f8..be845ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
{
"name": "@perawallet/connect",
- "version": "0.1.4",
+ "version": "0.1.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@perawallet/connect",
- "version": "0.1.4",
+ "version": "0.1.5",
"license": "ISC",
"dependencies": {
"@json-rpc-tools/utils": "^1.7.6",
"@walletconnect/client": "^1.7.7",
"buffer": "^6.0.3",
+ "lottie-react": "^2.3.1",
"react-qrcode-logo": "^2.7.0"
},
"devDependencies": {
@@ -19,6 +20,7 @@
"@hipo/eslint-config-react": "^2.2.0",
"@hipo/eslint-config-typescript": "^1.1.0",
"@rollup/plugin-image": "^2.1.1",
+ "@rollup/plugin-json": "^4.1.0",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -320,6 +322,18 @@
"rollup": "^1.20.0 || ^2.0.0"
}
},
+ "node_modules/@rollup/plugin-json": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+ "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+ "dev": true,
+ "dependencies": {
+ "@rollup/pluginutils": "^3.0.8"
+ },
+ "peerDependencies": {
+ "rollup": "^1.20.0 || ^2.0.0"
+ }
+ },
"node_modules/@rollup/pluginutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -3962,6 +3976,23 @@
"loose-envify": "cli.js"
}
},
+ "node_modules/lottie-react": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.3.1.tgz",
+ "integrity": "sha512-8cxd6XZZtECT6LoAhCftRdYrEpHxiouvB5EPiYA+TtCG5LHNYAdMS9IVIHcxKtWnpo7x16QfCLj1XLXZpaN81A==",
+ "dependencies": {
+ "lottie-web": "^5.9.4"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "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",
@@ -8231,6 +8262,15 @@
"mini-svg-data-uri": "^1.2.3"
}
},
+ "@rollup/plugin-json": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+ "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+ "dev": true,
+ "requires": {
+ "@rollup/pluginutils": "^3.0.8"
+ }
+ },
"@rollup/pluginutils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -11022,6 +11062,19 @@
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
+ "lottie-react": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.3.1.tgz",
+ "integrity": "sha512-8cxd6XZZtECT6LoAhCftRdYrEpHxiouvB5EPiYA+TtCG5LHNYAdMS9IVIHcxKtWnpo7x16QfCLj1XLXZpaN81A==",
+ "requires": {
+ "lottie-web": "^5.9.4"
+ }
+ },
+ "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 555670d..05cb894 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@perawallet/connect",
- "version": "0.1.4",
+ "version": "0.1.5",
"description": "JavaScript SDK for integrating Pera Wallet to web applications.",
"main": "dist/index.js",
"scripts": {
@@ -15,6 +15,7 @@
"@hipo/eslint-config-react": "^2.2.0",
"@hipo/eslint-config-typescript": "^1.1.0",
"@rollup/plugin-image": "^2.1.1",
+ "@rollup/plugin-json": "^4.1.0",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -35,6 +36,7 @@
"@json-rpc-tools/utils": "^1.7.6",
"@walletconnect/client": "^1.7.7",
"buffer": "^6.0.3",
+ "lottie-react": "^2.3.1",
"react-qrcode-logo": "^2.7.0"
},
"peerDependencies": {
diff --git a/rollup.config.js b/rollup.config.js
index db32a86..e1c4d55 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,6 +2,7 @@ import typescript from "rollup-plugin-typescript2";
import {terser} from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import image from "@rollup/plugin-image";
+import json from "@rollup/plugin-json";
export default [
{
@@ -19,7 +20,8 @@ export default [
"@hipo/react-ui-toolkit",
"react-qrcode-logo",
"@json-rpc-tools/utils/dist/cjs/format",
- "algosdk"
+ "algosdk",
+ "lottie-react"
],
plugins: [
image(),
@@ -29,7 +31,8 @@ export default [
rollupCommonJSResolveHack: true,
exclude: "**/__tests__/**",
clean: true
- })
+ }),
+ json()
]
}
];
diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts
index 5ec96cc..4467be0 100644
--- a/src/PeraWalletConnect.ts
+++ b/src/PeraWalletConnect.ts
@@ -7,7 +7,9 @@ import {
openPeraWalletRedirectModal,
removeModalWrapperFromDOM,
PERA_WALLET_CONNECT_MODAL_ID,
- PERA_WALLET_REDIRECT_MODAL_ID
+ PERA_WALLET_REDIRECT_MODAL_ID,
+ openPeraWalletSignTxnToast,
+ PERA_WALLET_SIGN_TXN_TOAST_ID
} from "./modal/peraWalletConnectModalUtils";
import {
resetWalletDetailsFromStorage,
@@ -28,6 +30,7 @@ interface PeraWalletConnectOptions {
bridge?: string;
deep_link?: string;
app_meta?: AppMeta;
+ shouldShowSignTxnToast?: boolean;
}
function generatePeraWalletConnectModalActions(rejectPromise?: (error: any) => void) {
@@ -40,6 +43,7 @@ function generatePeraWalletConnectModalActions(rejectPromise?: (error: any) => v
class PeraWalletConnect {
bridge: string;
connector: WalletConnect | null;
+ shouldShowSignTxnToast: boolean;
constructor(options?: PeraWalletConnectOptions) {
this.bridge =
@@ -59,6 +63,10 @@ class PeraWalletConnect {
}
this.connector = null;
+ this.shouldShowSignTxnToast =
+ typeof options?.shouldShowSignTxnToast === "undefined"
+ ? true
+ : options.shouldShowSignTxnToast;
}
connect() {
@@ -201,6 +209,9 @@ class PeraWalletConnect {
if (isMobile()) {
// This is to automatically open the wallet app when trying to sign with it.
openPeraWalletRedirectModal();
+ } else if (!isMobile() && this.shouldShowSignTxnToast) {
+ // This is to inform user go the wallet app when trying to sign with it.
+ openPeraWalletSignTxnToast();
}
return this.connector
@@ -228,7 +239,10 @@ class PeraWalletConnect {
)
)
)
- .finally(() => removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID));
+ .finally(() => {
+ removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID);
+ removeModalWrapperFromDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+ });
}
}
diff --git a/src/asset/icon/Close--small.svg b/src/asset/icon/Close--small.svg
new file mode 100644
index 0000000..21b7d04
--- /dev/null
+++ b/src/asset/icon/Close--small.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/modal/peraWalletConnectModalUtils.tsx b/src/modal/peraWalletConnectModalUtils.tsx
index 66482c9..638d3a8 100644
--- a/src/modal/peraWalletConnectModalUtils.tsx
+++ b/src/modal/peraWalletConnectModalUtils.tsx
@@ -9,6 +9,7 @@ import PeraWalletConnectModal from "./PeraWalletConnectModal";
import PeraWalletRedirectModal from "./redirect/PeraWalletRedirectModal";
import {AccordionData} from "./component/accordion/util/accordionTypes";
import PeraWalletConnectError from "../util/PeraWalletConnectError";
+import PeraWalletSignTxnToast from "./sign-toast/PeraWalletSignTxnToast";
// The ID of the wrapper element for PeraWalletConnectModal
const PERA_WALLET_CONNECT_MODAL_ID = "pera-wallet-connect-modal-wrapper";
@@ -16,6 +17,9 @@ const PERA_WALLET_CONNECT_MODAL_ID = "pera-wallet-connect-modal-wrapper";
// The ID of the wrapper element for PeraWalletRedirectModal
const PERA_WALLET_REDIRECT_MODAL_ID = "pera-wallet-redirect-modal-wrapper";
+// The ID of the wrapper element for PeraWalletSignTxnToast
+const PERA_WALLET_SIGN_TXN_TOAST_ID = "pera-wallet-sign-txn-toast";
+
/**
* @returns {HTMLDivElement} wrapper element for PeraWalletConnectModal
*/
@@ -82,6 +86,24 @@ function openPeraWalletRedirectModal() {
}
}
+/**
+ * Creates a PeraWalletSignTxnToast instance and renders it on the DOM.
+ *
+ * @returns {void}
+ */
+function openPeraWalletSignTxnToast() {
+ const wrapper = createModalWrapperOnDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+
+ ReactDOM.render(
+ ,
+ wrapper
+ );
+
+ function handlePeraWalletSignTxnToast() {
+ removeModalWrapperFromDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+ }
+}
+
/**
* Removes the PeraWalletConnectModal from the DOM.
* @returns {void}
@@ -150,7 +172,9 @@ export {getPeraConnectModalAccordionData};
export {
PERA_WALLET_CONNECT_MODAL_ID,
PERA_WALLET_REDIRECT_MODAL_ID,
+ PERA_WALLET_SIGN_TXN_TOAST_ID,
openPeraWalletConnectModal,
openPeraWalletRedirectModal,
+ openPeraWalletSignTxnToast,
removeModalWrapperFromDOM
};
diff --git a/src/modal/sign-toast/PeraWalletSignTxnToast.tsx b/src/modal/sign-toast/PeraWalletSignTxnToast.tsx
new file mode 100644
index 0000000..bcddf8f
--- /dev/null
+++ b/src/modal/sign-toast/PeraWalletSignTxnToast.tsx
@@ -0,0 +1,44 @@
+import "./_pera-wallet-sign-txn-toast.scss";
+
+import CloseIcon from "../../asset/icon/Close--small.svg";
+import animationData from "./lotties/Animation.json";
+
+import React from "react";
+import Lottie from "lottie-react";
+
+interface PeraWalletSignTxnToastProps {
+ onClose: () => void;
+}
+
+function PeraWalletSignTxnToast({onClose}: PeraWalletSignTxnToastProps) {
+ return (
+
+
+
+
+
+
+
+
+
+ {"Please launch "}
+
+ {"Pera Wallet"}
+
+ {" on your iOS or Android device to sign this transaction."}
+
+
+
+ );
+}
+
+export default PeraWalletSignTxnToast;
diff --git a/src/modal/sign-toast/_pera-wallet-sign-txn-toast.scss b/src/modal/sign-toast/_pera-wallet-sign-txn-toast.scss
new file mode 100644
index 0000000..7cf1ded
--- /dev/null
+++ b/src/modal/sign-toast/_pera-wallet-sign-txn-toast.scss
@@ -0,0 +1,89 @@
+@import "../../ui/styles/media-queries";
+
+.pera-wallet-sign-txn-toast {
+ --pera-wallet-sign-txn-toast-width: 422px;
+ --pera-wallet-sign-txn-toast-height: 134px;
+ --pera-wallet-sign-txn-toast-font-family: "Inter", sans-serif;
+
+ position: absolute;
+ bottom: 28px;
+ right: 35px;
+ z-index: 11;
+ overflow: hidden;
+
+ width: var(--pera-wallet-sign-txn-toast-width);
+ height: var(--pera-wallet-sign-txn-toast-height);
+
+ background: #edeffb;
+ border-radius: 8px;
+
+ font-family: var(--pera-wallet-sign-txn-toast-font-family);
+ // Although this is not a standard, Design team suggest that we use it so supported browsers will use it
+ // stylelint-disable-next-line property-no-unknown
+ font-smooth: antialiased;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ animation: 0.2s PeraWalletSignTxnToastSlideIn ease-out;
+}
+
+.pera-wallet-sign-txn-toast__header__close-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+
+ width: 20px;
+ height: 20px;
+
+ margin: 0;
+ padding: 0;
+
+ background: transparent;
+
+ border: none;
+
+ cursor: pointer;
+}
+
+.pera-wallet-sign-txn-toast__content__lottie-animation {
+ position: absolute;
+ top: -75px;
+ left: -100px;
+
+ width: 368px;
+ height: 368px;
+}
+
+.pera-wallet-sign-txn-toast__content__description {
+ position: absolute;
+ top: 40px;
+ right: 48px;
+
+ max-width: 197px;
+
+ color: #2c3559;
+
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: -0.1px;
+}
+
+@include for-small-screens {
+ .pera-wallet-sign-txn-toast {
+ display: none;
+ }
+}
+
+@keyframes PeraWalletSignTxnToastSlideIn {
+ 0% {
+ bottom: 12px;
+
+ opacity: 0;
+ }
+
+ 100% {
+ bottom: 26px;
+
+ opacity: 1;
+ }
+}
diff --git a/src/modal/sign-toast/lotties/Animation.json b/src/modal/sign-toast/lotties/Animation.json
new file mode 100644
index 0000000..8b86cee
--- /dev/null
+++ b/src/modal/sign-toast/lotties/Animation.json
@@ -0,0 +1,1389 @@
+{
+ "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/tsconfig.json b/tsconfig.json
index 902ea7d..434531f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,9 @@
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "downlevelIteration": true
+ "downlevelIteration": true,
+
+ "resolveJsonModule": true
},
"include": ["src"]
}