@oila/0account 3.4.8 → 3.4.9

package/dist/collection/components/zero-account/qrcode.js

@@ -0,0 +1,111 @@
+import qr from "../../utils/qrcode/qrcode";
+import { h } from "@stencil/core";
+import { ErrorCorrectionLevel } from "./enums";
+const QRC = qr.QrCode;
+export class QRCode {
+    constructor() {
+        this.url = undefined;
+        this.level = ErrorCorrectionLevel.M;
+        this.class = '';
+        this.color = 'black';
+    }
+    render() {
+        const getEcc = (ecc) => {
+            ecc = ecc.toUpperCase();
+            if (ecc === 'L')
+                return QRC.Ecc.LOW;
+            if (ecc === 'M')
+                return QRC.Ecc.MEDIUM;
+            if (ecc === 'Q')
+                return QRC.Ecc.QUARTILE;
+            return QRC.Ecc.HIGH;
+        };
+        const ecc = getEcc(this.level);
+        const qr = QRC.encodeText(this.url, ecc);
+        const qrcode = qr.svgObject();
+        return (h("svg", { class: this.class, viewBox: `0 0 ${qrcode.size} ${qrcode.size}` }, h("path", { d: qrcode.path, fill: this.color })));
+    }
+    static get is() { return "qr-code"; }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "level": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ErrorCorrectionLevel",
+                    "resolved": "ErrorCorrectionLevel.H | ErrorCorrectionLevel.L | ErrorCorrectionLevel.M | ErrorCorrectionLevel.Q",
+                    "references": {
+                        "ErrorCorrectionLevel": {
+                            "location": "import",
+                            "path": "./enums",
+                            "id": "src/components/zero-account/enums.ts::ErrorCorrectionLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "level",
+                "reflect": false,
+                "defaultValue": "ErrorCorrectionLevel.M"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'black'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=qrcode.js.map

package/dist/collection/components/zero-account/qrcode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrcode.js","sourceRoot":"","sources":["../../../src/components/zero-account/qrcode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC;AAKtB,MAAM,OAAO,MAAM;;;qBAEsB,oBAAoB,CAAC,CAAC;qBACpC,EAAE;qBACF,OAAO;;IAEhC,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,EAAE;YAC7B,GAAG,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;YACxB,IAAI,GAAG,KAAK,GAAG;gBAAE,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;YACpC,IAAI,GAAG,KAAK,GAAG;gBAAE,OAAO,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC;YACvC,IAAI,GAAG,KAAK,GAAG;gBAAE,OAAO,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC;YACzC,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;QACtB,CAAC,CAAC;QAEF,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE/B,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;QAE9B,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,EAAE;YAClE,YAAM,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACtC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import qr from '../../utils/qrcode/qrcode';\nimport { Component, h, Prop } from '@stencil/core';\nimport { ErrorCorrectionLevel } from './enums';\n\nconst QRC = qr.QrCode;\n\n@Component({\n  tag: 'qr-code',\n})\nexport class QRCode {\n  @Prop() url!: string;\n  @Prop() level?: ErrorCorrectionLevel = ErrorCorrectionLevel.M;\n  @Prop() class?: string = '';\n  @Prop() color?: string = 'black';\n\n  render() {\n    const getEcc = (ecc: string) => {\n      ecc = ecc.toUpperCase();\n      if (ecc === 'L') return QRC.Ecc.LOW;\n      if (ecc === 'M') return QRC.Ecc.MEDIUM;\n      if (ecc === 'Q') return QRC.Ecc.QUARTILE;\n      return QRC.Ecc.HIGH;\n    };\n\n    const ecc = getEcc(this.level);\n\n    const qr = QRC.encodeText(this.url, ecc);\n    const qrcode = qr.svgObject();\n\n    return (\n      <svg class={this.class} viewBox={`0 0 ${qrcode.size} ${qrcode.size}`}>\n        <path d={qrcode.path} fill={this.color} />\n      </svg>\n    );\n  }\n}\n"]}

package/dist/collection/components/zero-account/websocket.js

@@ -0,0 +1,176 @@
+import { Environment } from "./enums";
+import http from "../../utils/request";
+const DEFAULT_CALLBACK_URL = window.location.origin + '/zero/auth';
+const API_URL = 'wss://ws.0account.com/ws';
+const API_URL_STAGING = 'wss://staging.ws.0account.com/ws';
+const PREFIX = '0account';
+const SESSION_ID = 'session-id';
+const SESSION_TOKEN = 'session-token';
+const fromWidgetUUIDUpdated = 'from-widget-uuid-updated';
+// const fromWidgetAuthenticationStarted = 'from-widget-authentication-started';
+const fromWidgetEnsureSession = 'from-widget-ensure-session';
+const toWidgetLogout = 'to-widget-logout';
+const toWidgetApproved = 'to-widget-approved';
+const toAnyError = 'to-any-error';
+// CustomEvents
+const zeroLogout = '0account-logout';
+const zeroAuthenticated = '0account-authenticated';
+// const zeroAuthenticationFailed = '0account-authentication-failed';
+function debounce(func, timeout = 300) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(this, args);
+        }, timeout);
+    };
+}
+export class WS {
+    constructor(appId, opts) {
+        this.wsURL = API_URL;
+        this.callbackURL = DEFAULT_CALLBACK_URL;
+        if (!opts.env)
+            opts.env = Environment.production;
+        this.appId = appId;
+        this.uaParser = opts.uaParser;
+        this.callbackURL = opts.callbackURL;
+        this.updateInterval = opts.updateInterval;
+        this.enableWithCredentials = opts.enableWithCredentials;
+        this.log = opts.log;
+        if (opts.env !== Environment.production)
+            this.wsURL = API_URL_STAGING;
+        this.init();
+    }
+    deviceInfo() {
+        return {
+            appId: this.appId,
+            browser: this.uaParser.getBrowser().withFeatureCheck().name,
+            os: this.uaParser.getOS().withFeatureCheck().name,
+            // TODO: handle these on backend:
+            // device: `${this.uaParser.getDevice().vendor} ${this.uaParser.getDevice().model}`,
+            // all: this.uaParser.getResult()
+        };
+    }
+    reinit() {
+        const retry = debounce(this.init.bind(this), 1000);
+        retry();
+    }
+    init() {
+        const onopen = (_) => {
+            this.send(fromWidgetEnsureSession, this.deviceInfo());
+        };
+        const onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                this.handleMessage(data);
+            }
+            catch (e) {
+                this.log(e);
+            }
+        };
+        const onerror = (_) => {
+            if (this.socket && (this.socket.readyState !== WebSocket.CLOSED
+                && this.socket.readyState !== WebSocket.CLOSING)) {
+                this.socket.close();
+            }
+        };
+        const onclose = (_) => {
+            if (this.socket) {
+                this.socket.removeEventListener('open', onopen);
+                this.socket.removeEventListener('message', onmessage);
+                this.socket.removeEventListener('error', onerror);
+                this.socket.removeEventListener('close', onclose);
+                delete this.socket;
+            }
+            this.reinit();
+        };
+        if (this.socket) {
+            this.socket.removeEventListener('open', onopen);
+            this.socket.removeEventListener('message', onmessage);
+            this.socket.removeEventListener('error', onerror);
+            this.socket.removeEventListener('close', onclose);
+        }
+        this.socket = new WebSocket(this.wsURL);
+        this.socket.addEventListener('open', onopen);
+        this.socket.addEventListener('message', onmessage);
+        this.socket.addEventListener('error', onerror);
+        this.socket.addEventListener('close', onclose);
+    }
+    updateUUID(uuid) {
+        this.uuid = uuid;
+        this.send(fromWidgetUUIDUpdated, this.deviceInfo());
+    }
+    send(action, data) {
+        if (!this.socket || !this.socket.readyState || this.socket.readyState !== WebSocket.OPEN) {
+            const retry = debounce(this.send.bind(this), 1000);
+            return retry();
+        }
+        const msg = {
+            action: action,
+            timeout: `${this.updateInterval}ms`,
+            uuid: this.uuid,
+            appId: `${this.appId}`,
+            message: {},
+        };
+        if (action === fromWidgetEnsureSession) {
+            const sessionId = localStorage.getItem(`${PREFIX}_${SESSION_ID}`);
+            const sessionToken = localStorage.getItem(`${PREFIX}_${SESSION_TOKEN}`);
+            if (!sessionId || !sessionToken)
+                return;
+            msg.sessionId = sessionId;
+            msg.sessionToken = sessionToken;
+        }
+        if (data)
+            msg.message = data;
+        this.socket.send(JSON.stringify(msg));
+    }
+    onZeroAuth() {
+        if (this.request)
+            this.request.abort();
+        this.request = http.send(this.callbackURL, {
+            enableWithCredentials: this.enableWithCredentials,
+            headers: {
+                'x-0account-uuid': this.uuid,
+                'x-0account-auth': 'true',
+            },
+        }, (responseText) => {
+            try {
+                const data = JSON.parse(responseText);
+                this.dispatchEventAndWsSend(zeroAuthenticated, data);
+            }
+            catch (err) {
+                this.log(err);
+            }
+        });
+    }
+    handleMessage(msg) {
+        switch (msg.action) {
+            case toWidgetApproved:
+                this.onZeroAuth();
+                localStorage.setItem(`${PREFIX}_${SESSION_ID}`, msg.sessionId);
+                localStorage.setItem(`${PREFIX}_${SESSION_TOKEN}`, msg.message);
+                break;
+            case toWidgetLogout:
+                localStorage.removeItem(`${PREFIX}_${SESSION_ID}`);
+                localStorage.removeItem(`${PREFIX}_${SESSION_TOKEN}`);
+                this.dispatchEvent(zeroLogout);
+                break;
+            case toAnyError:
+                this.log('ws error', msg);
+                break;
+            default:
+                this.log('incorrect action', msg.action, msg);
+        }
+    }
+    dispatchEventAndWsSend(name, data) {
+        this.dispatchEvent(name, data);
+        this.send('from-widget-' + name, data);
+    }
+    dispatchEvent(name, data) {
+        let event = new CustomEvent(name);
+        if (data)
+            event = new CustomEvent(name, { detail: data });
+        document.dispatchEvent(event);
+    }
+}
+//# sourceMappingURL=websocket.js.map

package/dist/collection/components/zero-account/websocket.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"websocket.js","sourceRoot":"","sources":["../../../src/components/zero-account/websocket.ts"],"names":[],"mappings":"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","sourcesContent":["import { UAParser } from 'ua-parser-js';\nimport { Environment } from './enums';\nimport http from '../../utils/request';\n\nconst DEFAULT_CALLBACK_URL = window.location.origin + '/zero/auth';\nconst API_URL = 'wss://ws.0account.com/ws';\nconst API_URL_STAGING = 'wss://staging.ws.0account.com/ws';\n\nconst PREFIX = '0account';\nconst SESSION_ID = 'session-id';\nconst SESSION_TOKEN = 'session-token';\n\nconst fromWidgetUUIDUpdated = 'from-widget-uuid-updated';\n// const fromWidgetAuthenticationStarted = 'from-widget-authentication-started';\nconst fromWidgetEnsureSession = 'from-widget-ensure-session';\n\nconst toWidgetLogout = 'to-widget-logout';\nconst toWidgetApproved = 'to-widget-approved';\nconst toAnyError = 'to-any-error';\n// CustomEvents\nconst zeroLogout = '0account-logout';\nconst zeroAuthenticated = '0account-authenticated';\n// const zeroAuthenticationFailed = '0account-authentication-failed';\n\nfunction debounce(func, timeout = 300) {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, timeout);\n  };\n}\n\ntype Options = {\n  callbackURL: string,\n  updateInterval: number,\n  enableWithCredentials: boolean,\n  uaParser: UAParser,\n  log: (...args) => void\n  env?: Environment,\n}\n\n\nexport class WS {\n  private readonly appId: string;\n  private socket: WebSocket;\n  private uaParser: UAParser;\n  private readonly log: (...args) => void;\n  private uuid: string;\n  private wsURL = API_URL;\n  private callbackURL = DEFAULT_CALLBACK_URL;\n  private request: XMLHttpRequest;\n  private readonly updateInterval: number;\n  private enableWithCredentials: boolean;\n\n  constructor(appId: string, opts: Options) {\n    if (!opts.env) opts.env = Environment.production\n\n    this.appId = appId;\n    this.uaParser = opts.uaParser;\n    this.callbackURL = opts.callbackURL;\n    this.updateInterval = opts.updateInterval;\n    this.enableWithCredentials = opts.enableWithCredentials;\n    this.log = opts.log;\n    if (opts.env !== Environment.production) this.wsURL = API_URL_STAGING;\n    this.init();\n  }\n\n  private deviceInfo() {\n    return {\n      appId: this.appId,\n      browser: this.uaParser.getBrowser().withFeatureCheck().name,\n      os: this.uaParser.getOS().withFeatureCheck().name,\n      // TODO: handle these on backend:\n      // device: `${this.uaParser.getDevice().vendor} ${this.uaParser.getDevice().model}`,\n      // all: this.uaParser.getResult()\n    };\n  }\n\n  private reinit() {\n    const retry = debounce(this.init.bind(this), 1000)\n    retry()\n  }\n\n  private init() {\n    const onopen = (_) => {\n      this.send(fromWidgetEnsureSession, this.deviceInfo());\n    };\n    const onmessage = (event) => {\n      try {\n        const data = JSON.parse(event.data);\n        this.handleMessage(data);\n      } catch (e) {\n        this.log(e);\n      }\n    };\n    const onerror = (_) => {\n      if (this.socket && (this.socket.readyState !== WebSocket.CLOSED\n          && this.socket.readyState !== WebSocket.CLOSING)) {\n        this.socket.close();\n      }\n    };\n    const onclose = (_) => {\n      if (this.socket) {\n        this.socket.removeEventListener('open', onopen);\n        this.socket.removeEventListener('message', onmessage);\n        this.socket.removeEventListener('error', onerror);\n        this.socket.removeEventListener('close', onclose);\n        delete this.socket;\n      }\n      this.reinit();\n    };\n\n    if (this.socket) {\n      this.socket.removeEventListener('open', onopen);\n      this.socket.removeEventListener('message', onmessage);\n      this.socket.removeEventListener('error', onerror);\n      this.socket.removeEventListener('close', onclose);\n    }\n    this.socket = new WebSocket(this.wsURL);\n    this.socket.addEventListener('open', onopen);\n    this.socket.addEventListener('message', onmessage);\n    this.socket.addEventListener('error', onerror);\n    this.socket.addEventListener('close', onclose);\n  }\n\n  updateUUID(uuid: string) {\n    this.uuid = uuid;\n    this.send(fromWidgetUUIDUpdated, this.deviceInfo());\n  }\n\n  send(action, data) {\n    if (!this.socket || !this.socket.readyState || this.socket.readyState !== WebSocket.OPEN) {\n      const retry = debounce(this.send.bind(this), 1000)\n      return retry();\n    }\n\n    const msg: any = {\n      action: action,\n      timeout: `${this.updateInterval}ms`,\n      uuid: this.uuid,\n      appId: `${this.appId}`,\n      message: {},\n    };\n    if (action === fromWidgetEnsureSession) {\n      const sessionId = localStorage.getItem(`${PREFIX}_${SESSION_ID}`);\n      const sessionToken = localStorage.getItem(`${PREFIX}_${SESSION_TOKEN}`);\n      if (!sessionId || !sessionToken) return;\n      msg.sessionId = sessionId;\n      msg.sessionToken = sessionToken;\n    }\n\n    if (data) msg.message = data;\n    this.socket.send(JSON.stringify(msg));\n  }\n\n  onZeroAuth() {\n    if (this.request) this.request.abort();\n    this.request = http.send(this.callbackURL,\n      {\n        enableWithCredentials: this.enableWithCredentials,\n        headers: {\n          'x-0account-uuid': this.uuid,\n          'x-0account-auth': 'true',\n        },\n      },\n      (responseText) => {\n        try {\n          const data = JSON.parse(responseText);\n          this.dispatchEventAndWsSend(zeroAuthenticated, data);\n        } catch (err) {\n          this.log(err);\n        }\n      },\n    );\n  }\n\n  private handleMessage(msg: any) {\n    switch (msg.action) {\n      case toWidgetApproved:\n        this.onZeroAuth();\n        localStorage.setItem(`${PREFIX}_${SESSION_ID}`, msg.sessionId);\n        localStorage.setItem(`${PREFIX}_${SESSION_TOKEN}`, msg.message);\n        break;\n      case toWidgetLogout:\n        localStorage.removeItem(`${PREFIX}_${SESSION_ID}`);\n        localStorage.removeItem(`${PREFIX}_${SESSION_TOKEN}`);\n        this.dispatchEvent(zeroLogout);\n        break;\n      case toAnyError:\n        this.log('ws error', msg);\n        break;\n      default:\n        this.log('incorrect action', msg.action, msg);\n    }\n  }\n\n  private dispatchEventAndWsSend(name, data) {\n    this.dispatchEvent(name, data);\n    this.send('from-widget-' + name, data);\n  }\n\n  private dispatchEvent(name: string, data?: any) {\n    let event = new CustomEvent(name);\n    if (data) event = new CustomEvent(name, { detail: data });\n    document.dispatchEvent(event);\n  }\n\n}\n"]}

package/dist/collection/components/zero-account/zero-account.css

@@ -0,0 +1,294 @@
+:host {
+  --primary-color: #7263FA;
+  --primary-background-color: #FFF;
+  --theme-based-radius: 0px;
+  --theme-based-padding: 0px;
+
+  /* buttons */
+  --button-animation-duration: 200ms;
+  --text-color: #000;
+  --button-border-color: #B2D4FF;
+  --button-border-radius: 9999px;
+  --button-background-color: var(--primary-background-color);
+
+  /* modal */
+  --modal-logo-border-color: var(--primary-color);
+  --modal-animation-duration: 350ms;
+  --easing: cubic-bezier(0.16, 1, 0.3, 1);
+  /*--easing: ease;*/
+
+  font-family: sans-serif;
+}
+
+.dark {
+  --button-background-color: rgb(30, 41, 59);
+  --primary-background-color: rgb(30, 41, 59);
+  --button-border-color: #FFFFF9;
+  --text-color: #FFFFF9;
+  --modal-logo-border-color: #CCC;
+  --theme-based-radius: 4px;
+  --theme-based-padding: 8px;
+}
+
+.button {
+  font-size: 16px;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 8px 12px 8px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--button-border-color);
+  background-color: var(--button-background-color);
+  border-radius: var(--button-border-radius);
+}
+
+.button:hover {
+  transition: box-shadow var(--button-animation-duration);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  /* lighter shade of --button-background-color */
+  background: linear-gradient(
+    to top,
+    rgba(200, 200, 200, 0.1),
+    rgba(200, 200, 200, 0.1)
+  ) var(--button-background-color)
+}
+
+.button:active {
+  transition: box-shadow var(--button-animation-duration);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+.button__logo {
+  width: 1.3rem;
+}
+
+/* -------- modal --------- */
+
+.modal {
+  display: flex;
+  z-index: 9999;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.3);
+  transition: opacity var(--modal-animation-duration) var(--easing);
+}
+
+.modal--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.modal__content {
+  max-width: 240px;
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  background-color: var(--primary-background-color);
+  transform: scale(1);
+  transition: transform var(--modal-animation-duration) var(--easing);
+}
+
+.modal--hidden .modal__content {
+  transform: scale(0.5);
+}
+
+.modal__qrcode__container {
+  position: relative;
+  background-color: white;
+  border-radius: var(--theme-based-radius);
+  padding: var(--theme-based-padding);
+}
+
+.modal__qrcode {
+  border-radius: 4px;
+  width: 100%;
+  height: auto;
+}
+
+.modal__logo {
+  padding: 8px;
+  border: 2px var(--modal-logo-border-color) solid;
+  border-radius: var(--button-border-radius);
+  background-color: var(--primary-background-color);
+  position: absolute;
+  width: 16%;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.modal-animated .circle__overlay {
+  width: 100%;
+  height: 100%;
+}
+
+.modal-animated .modal__qrcode {
+  filter: blur(2px);
+}
+
+.modal-animated .modal__logo {
+  border: none;
+  animation: spin 2.5s var(--easing) infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate3d(-50%, -50%, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate3d(-50%, -50%, 0) rotate(180deg);
+  }
+  100% {
+    transform: translate3d(-50%, -50%, 0) rotate(360deg);
+  }
+}
+
+.modal__buttons {
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 14px;
+  display: flex;
+  text-align: center;
+}
+
+.modal:not(.modal--hidden) .modal__button {
+  transform: scale(1) translate3d(0, 0, 0);
+}
+
+.modal:not(.modal--hidden) .modal__link {
+  transform: scale(1) translate3d(0, 0, 0);
+}
+
+.modal__button {
+  transform: scale(0) translate3d(0, 150px, 0);
+  transition: calc(var(--modal-animation-duration) + 50ms) var(--easing);
+  transition-property: scale, transform, background-color;
+  cursor: pointer;
+  padding: 12px;
+  font-size: 14px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  width: 100%;
+}
+
+.modal__button:hover {
+  /* darker shade of --primary-color */
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.1)
+  ) var(--primary-color);
+}
+
+.modal__link {
+  transform: scale(0) translate3d(0, 150px, 0);
+  transition: calc(var(--modal-animation-duration) + 150ms) var(--easing);
+  transition-property: scale, transform;
+  font-size: 0.8rem;
+  padding: 10px 20px 0;
+  color: var(--primary-color);
+  width: 100%;
+  text-decoration: underline rgba(0, 0, 0, 0);
+}
+
+.modal__link:hover {
+  text-decoration-color:var(--primary-color);
+}
+
+.modal__close-button {
+  position: absolute;
+  top: -26px;
+  right: -26px;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background-color var(--modal-animation-duration) var(--easing);
+}
+
+.modal__close-button:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal__close-button:before,
+.modal__close-button:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.8);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.modal__close-button:after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* circle ripple */
+
+.circle__overlay{
+  overflow: hidden;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  background-color: var(--primary-background-color);
+  border-radius: var(--button-border-radius);
+  width: 10%;
+  height: 10%;
+  border: 2px var(--modal-logo-border-color) solid;
+  transition: calc(var(--modal-animation-duration) + 200ms) var(--easing);
+  transition-property: width, height, opacity;
+}
+
+.circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #E0E0E0;
+  animation: circle__ripple 2s linear infinite;
+}
+
+.circle--medium {
+  width: 150px;
+  height: 150px;
+  animation-duration: 2.5s;
+}
+
+.circle--large {
+  width: 200px;
+  height: 200px;
+  animation-duration: 3s;
+}
+
+@keyframes circle__ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}

package/dist/collection/components/zero-account/zero-account.e2e.js

@@ -0,0 +1,26 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('zero-account', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<zero-account></zero-account>');
+        const element = await page.find('zero-account');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('renders changes to the name data', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<zero-account></zero-account>');
+        const component = await page.find('zero-account');
+        const element = await page.find('zero-account >>> div');
+        expect(element.textContent).toEqual(`Hello, World! I'm `);
+        component.setProperty('first', 'James');
+        await page.waitForChanges();
+        expect(element.textContent).toEqual(`Hello, World! I'm James`);
+        component.setProperty('last', 'Quincy');
+        await page.waitForChanges();
+        expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);
+        component.setProperty('middle', 'Earl');
+        await page.waitForChanges();
+        expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
+    });
+});
+//# sourceMappingURL=zero-account.e2e.js.map

package/dist/collection/components/zero-account/zero-account.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero-account.e2e.js","sourceRoot":"","sources":["../../../src/components/zero-account/zero-account.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;QACvD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACxD,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAE1D,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;QAE/D,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;QAEtE,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,qCAAqC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('zero-account', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n\n    await page.setContent('<zero-account></zero-account>');\n    const element = await page.find('zero-account');\n    expect(element).toHaveClass('hydrated');\n  });\n\n  it('renders changes to the name data', async () => {\n    const page = await newE2EPage();\n\n    await page.setContent('<zero-account></zero-account>');\n    const component = await page.find('zero-account');\n    const element = await page.find('zero-account >>> div');\n    expect(element.textContent).toEqual(`Hello, World! I'm `);\n\n    component.setProperty('first', 'James');\n    await page.waitForChanges();\n    expect(element.textContent).toEqual(`Hello, World! I'm James`);\n\n    component.setProperty('last', 'Quincy');\n    await page.waitForChanges();\n    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);\n\n    component.setProperty('middle', 'Earl');\n    await page.waitForChanges();\n    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);\n  });\n});\n"]}