@oila/0account 3.5.0 → 3.5.2

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ const index = require('./index-ef57218a.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["qr-code_2.cjs",[[1,"zero-account",{"appId":[1,"app-id"],"updateInterval":[2,"update-interval"],"callbackURL":[1,"callback-url"],"modal":[4],"level":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"],"environment":[1],"enableWithCredentials":[4,"enable-with-credentials"],"themePreset":[1,"theme-preset"],"autoStartApp":[4,"auto-start-app"],"modalOpen":[32],"isAnimating":[32],"url":[32]},[[4,"0account-toggle-modal","toggleModal"],[4,"0account-close-modal","_closeModal"],[4,"0account-authenticated","_closeModal"],[4,"0account-open-app","openApp"]]],[0,"qr-code",{"url":[1],"level":[1],"class":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["qr-code_2.cjs",[[1,"zero-account",{"appId":[1,"app-id"],"updateInterval":[2,"update-interval"],"callbackURL":[1,"callback-url"],"modal":[4],"level":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"],"environment":[1],"enableWithCredentials":[4,"enable-with-credentials"],"themePreset":[1,"theme-preset"],"autoStartApp":[4,"auto-start-app"],"modalOpen":[32],"isAnimating":[32],"url":[32]},[[4,"0account-toggle-modal","toggleModal"],[4,"0account-close-modal","_closeModal"],[4,"0account-authenticated","_closeModal"],[4,"0account-logout","logout"],[4,"0account-open-app","openApp"]]],[0,"qr-code",{"url":[1],"level":[1],"class":[1],"color":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/qr-code_2.cjs.entry.js

@@ -1336,6 +1336,9 @@ class WS {
         this.uuid = uuid;
         this.send(fromWidgetUUIDUpdated, this.deviceInfo());
     }
+    logout() {
+        this.send(fromWidgetLoggedOut, this.deviceInfo());
+    }
     send(action, data) {
         if (!this.socket || !this.socket.readyState || this.socket.readyState !== WebSocket.OPEN) {
             const retry = debounce(this.send.bind(this), 1000);
@@ -1348,7 +1351,7 @@ class WS {
             appId: `${this.appId}`,
             message: {},
         };
-        if (action === fromWidgetEnsureSession) {
+        if (action === fromWidgetEnsureSession || action === fromWidgetLoggedOut) {
             const sessionId = localStorage.getItem(`${PREFIX}_${SESSION_ID}`);
             const sessionToken = localStorage.getItem(`${PREFIX}_${SESSION_TOKEN}`);
             if (!sessionId || !sessionToken)
@@ -1411,7 +1414,7 @@ class WS {
     }
 }
 
-const zeroAccountCss = ":host{--primary-color:#7263FA;--primary-background-color:#FFF;--theme-based-radius:0px;--theme-based-padding:0px;--button-animation-duration:200ms;--text-color:#000;--button-border-color:#B2D4FF;--button-border-radius:9999px;--button-background-color:var(--primary-background-color);--modal-logo-border-color:var(--primary-color);--modal-animation-duration:350ms;--easing:cubic-bezier(0.16, 1, 0.3, 1);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);background:linear-gradient(\n    to top,\n    rgba(200, 200, 200, 0.1),\n    rgba(200, 200, 200, 0.1)\n  ) 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{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{background:linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.1),\n    rgba(0, 0, 0, 0.1)\n  ) 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__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}}";
+const zeroAccountCss = ":host{--primary-color:#7263FA;--primary-background-color:#FFF;--theme-based-radius:0px;--theme-based-padding:0px;--button-animation-duration:200ms;--text-color:#000;--button-border-color:#B2D4FF;--button-border-radius:9999px;--button-background-color:var(--primary-background-color);--modal-logo-border-color:var(--primary-color);--modal-animation-duration:350ms;--easing:cubic-bezier(0.16, 1, 0.3, 1);--disabled-background-color:rgba(0, 0, 0, 0.12);--disabled-color:rgba(0, 0, 0, 0.3);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;--disabled-background-color:rgba(255, 255, 255, 0.12);--disabled-color:rgba(255, 255, 255, 0.3);--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);background:linear-gradient(\n    to top,\n    rgba(200, 200, 200, 0.1),\n    rgba(200, 200, 200, 0.1)\n  ) 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{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{background:linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.1),\n    rgba(0, 0, 0, 0.1)\n  ) var(--primary-color)}.modal__button:disabled{background-color:var(--disabled-background-color);color:var(--disabled-color);cursor:not-allowed;pointer-events:none}.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__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}}";
 const ZeroAccountStyle0 = zeroAccountCss;
 
 const maxInterval = 59 * 60 * 1000;
@@ -1422,6 +1425,7 @@ const ZeroAccount = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.refreshQR = (ignoreAnimate = false) => {
+            this.initServices();
             const update = () => {
                 this.restartTimer();
                 this.updateURL();
@@ -1470,6 +1474,9 @@ const ZeroAccount = class {
         this.modalOpen = false;
         this.stopTimer();
     }
+    logout() {
+        this.ws.logout();
+    }
     closeModal(e) {
         if (e.target !== this.modalEl && e.target !== this.closeButtonEl) {
             return e.stopPropagation();
@@ -1478,17 +1485,19 @@ const ZeroAccount = class {
     }
     openApp() {
         if (this.modalOpen) {
+            this.refreshQR(true);
             window.location.href = this.url;
         }
     }
     render() {
         const logoColor = this.themePreset === ThemePreset.light ? '#7263FA' : '#FFFFF9';
         const qrColor = '#000';
-        return (index.h(index.Host, { key: '1dc3610232166249e09861006f22ad43a58d208d' }, index.h("slot", { key: '5c510d06b9423a2540e494c57eebda16ac2f3fe6' }), this.host.childNodes.length === 0 &&
-            index.h("button", { class: `button ${this.themePreset}`, onClick: () => this.toggleModal() }, index.h(Logo, { className: 'button__logo', color: logoColor }), "use 0account"), index.h("div", { key: '1ccab237f88fe77eb22f0c0b82b9612b536a6eb2', ref: el => this.modalEl = el, onClick: (e) => this.closeModal(e), class: `modal ${this.themePreset} ${this.isAnimating ? 'modal-animated' : ''} ${this.modalOpen ? '' : 'modal--hidden'}` }, index.h("div", { key: 'cca5693c98f2dbf7aa5584e62862e90783c24bdb', class: 'modal__content' }, index.h("div", { key: 'fa239e9bb2f618a7d0067c74d6c599f1482aa0ce', ref: el => this.closeButtonEl = el, class: 'modal__close-button' }), index.h("div", { key: '3d8e206fbbb7a45f0b634fc1ac5cda0a3434d6d9', class: 'modal__qrcode__container' }, index.h("qr-code", { key: 'a2f7f00f7926c7994c79098b4f386e4e60f16bc4', url: this.url, class: `modal__qrcode`, level: this.level, color: qrColor }), index.h("div", { key: '5819116a32e44341a408b79d5ed48a31c0be17d9', class: 'circle__overlay' }, index.h("div", { key: '67220c1757145e3263fdf8b265730a9b50628034', class: 'circle' }), index.h("div", { key: '2d43067a7a3e0fad60670a92f026925b7b2141f0', class: 'circle circle--medium' }), index.h("div", { key: 'c6cc6df2fcfd06b895e185f5b818150ea031c15e', class: 'circle circle--large' })), index.h(Logo, { key: '1e5b5f9687d0629cacd3c2524bb271824c03f102', className: 'modal__logo', color: logoColor })), index.h("div", { key: '13e998689e3b8942c39f94c8d67b1d6908ea63de', class: 'modal__buttons' }, index.h("button", { key: '879631b5e37bd0b9f440023edbef542d3628142c', onClick: () => this.openApp(), class: 'modal__button' }, "Open the desktop app"), index.h("a", { key: '3be4413c520f42982546535badf4aa133a25ee78', href: 'https://0account.com/downloads', class: 'modal__link' }, "Download the app"))))));
+        return (index.h(index.Host, { key: '16e012816a541ac508e2c7e4bfb2c86ec5e12139' }, index.h("slot", { key: 'f843c7ca9d61291c0e789ea57f7f205ff426fbb5' }), this.host.childNodes.length === 0 &&
+            index.h("button", { class: `button ${this.themePreset}`, onClick: () => this.toggleModal() }, index.h(Logo, { className: 'button__logo', color: logoColor }), "use 0account"), index.h("div", { key: '3a97849bd767edbd569ebd9e18d0dcd1adc0d5d2', ref: el => this.modalEl = el, onClick: (e) => this.closeModal(e), class: `modal ${this.themePreset} ${this.isAnimating ? 'modal-animated' : ''} ${this.modalOpen ? '' : 'modal--hidden'}` }, index.h("div", { key: 'b26ba193432193a6157c52be76fa3b15129760e2', class: 'modal__content' }, index.h("div", { key: '5586291e6cc5717aac240bfb9bef3b7e38240ff5', ref: el => this.closeButtonEl = el, class: 'modal__close-button' }), index.h("div", { key: '77edd32e4e29b902b20c4dbd60e348efe8c0f521', class: 'modal__qrcode__container' }, index.h("qr-code", { key: 'f0fa7b6c4ef4db32c579bf20da52bd9fef5b30cb', url: this.url, class: `modal__qrcode`, level: this.level, color: qrColor }), index.h("div", { key: '4ed77c6bfe8b90fe3907c869e54b3dfaf06f221f', class: 'circle__overlay' }, index.h("div", { key: '2d866ad14e0d42bb00f24ad572823c55413c5ffd', class: 'circle' }), index.h("div", { key: '8f29661b6d0626054dfa1d9a918666e939e0980c', class: 'circle circle--medium' }), index.h("div", { key: 'a6d5be1ba18df35063a49a4af0c64a1ca9bbe22d', class: 'circle circle--large' })), index.h(Logo, { key: '7f252c9b4df9660ad7bb21141ca2de02687056e8', className: 'modal__logo', color: logoColor })), index.h("div", { key: '69230e62468944142e4bd99ead185ee20af20b6f', class: 'modal__buttons' }, index.h("button", { key: '4d03821841d9262f3774011abee30b8a85e460eb', disabled: this.isAnimating, onClick: () => this.openApp(), class: 'modal__button' }, "Open 0account"), index.h("a", { key: 'd6e6313b40eefd3dce8a9097a298f9464eb0a86e', href: 'https://0account.com/downloads', class: 'modal__link' }, "Download"))))));
     }
-    // called only once
-    componentWillLoad() {
+    initServices() {
+        if (this.logger && this.uaParser && this.ws)
+            return;
         this.logger = new Logger(this.environment);
         this.uaParser = new uaParser_pack.exports.UAParser();
         this.ws = new WS(this.appId, {
@@ -1499,6 +1508,10 @@ const ZeroAccount = class {
             env: this.environment,
             log: this.log,
         });
+    }
+    // called only once
+    componentWillLoad() {
+        this.initServices();
         // make sure we initQR
         this.refreshQR(true);
         document.addEventListener('keydown', this.hideOnEsc);