@oila/0account 3.4.3 → 3.4.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../src/components/zero-account/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE;EACrD,OAAO,CACL,WACE,KAAK,EAAE,SAAS,EAChB,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa;IACpE,SAAG,IAAI,EAAE,KAAK,eAAY,SAAS;MACjC,YAAM,CAAC,EAAC,2MAA2M,GAAG,CACpN;IACJ;MACE,gBAAU,EAAE,EAAC,GAAG;QACd,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,oBAAoB,GAAG,CAClC,CACN,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nconst Logo = ({ className = '', color = '#7263FA' }) => {\n  return (\n    <svg\n      class={className}\n      xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 256 256'>\n      <g fill={color} clip-path='url(#a)'>\n        <path d='M128 185h57v57h-57zM128 14h57v57h-57zM71 185h57v57H71zM71 14h57v57H71zM14 71h57v57H14zM185 71h57v57h-57zM71 14v57H14l57-57ZM14 128h57v57H14zM185 128h57v57h-57zM14 185h57v57l-57-57ZM185 14l57 57h-57V14Z' />\n      </g>\n      <defs>\n        <clipPath id='a'>\n          <path fill='#fff' d='M14 14h228v228H14z' />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n};\n\nexport default Logo;\n"]}

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;;;iBAEsB,oBAAoB,CAAC,CAAC;iBACpC,EAAE;iBACF,OAAO;;EAEhC,MAAM;IACJ,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,EAAE;MAC7B,GAAG,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;MACxB,IAAI,GAAG,KAAK,GAAG;QAAE,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;MACpC,IAAI,GAAG,KAAK,GAAG;QAAE,OAAO,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC;MACvC,IAAI,GAAG,KAAK,GAAG;QAAE,OAAO,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC;MACzC,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/B,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;IAE9B,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,EAAE;MAClE,YAAM,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACtC,CACP,CAAC;EACJ,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,174 @@
+import { Environment } from "./enums";
+import http from "../../utils/request";
+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 = API_URL;
+    if (!opts.env)
+      opts.env = Environment.production;
+    this.appId = appId;
+    this.uaParser = opts.uaParser;
+    this.callbackURL = opts.callbackURL;
+    this.updateInterval = opts.updateInterval;
+    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().name,
+      os: this.uaParser.getOS().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: true,
+      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 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  uaParser: UAParser,\n  log: (...args) => void\n  env?: Environment,\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 = API_URL;\n  private request: XMLHttpRequest;\n  private readonly updateInterval: number;\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.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().name,\n      os: this.uaParser.getOS().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: true,\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,287 @@
+:host {
+  --primary-color: #7263FA;
+  --primary-background-color: #FFF;
+
+  /* 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;
+}
+
+.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;
+}
+
+.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;EAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAE1D,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAE/D,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IAEtE,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,qCAAqC,CAAC,CAAC;EAC7E,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"]}