cyberia 3.2.5 → 3.2.9

package/src/client/components/core/Worker.js

@@ -12,9 +12,15 @@ import { EventsUI } from './EventsUI.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
 import { loggerFactory } from './Logger.js';
 import { LoadRouter } from './Router.js';
+import { registerRoutes } from './Router.js';
 import { Translate } from './Translate.js';
 import { s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
+import { Css } from './Css.js';
+import { TranslateCore } from './Translate.js';
+import { Responsive } from './Responsive.js';
+import { SocketIo } from './SocketIo.js';
+import { Keyboard } from './Keyboard.js';
 const logger = loggerFactory(import.meta);
 
 /**
@@ -71,17 +77,39 @@ class PwaWorker {
     return window.renderPayload.dev || location.origin.match('localhost') || location.origin.match('127.0.0.1');
   }
 
+  async runComponentInit(component, options) {
+    if (!component) return;
+    if (Array.isArray(component)) {
+      for (const item of component) await this.runComponentInit(item, options);
+      return;
+    }
+    if (typeof component.instance === 'function') {
+      await component.instance(options);
+      return;
+    }
+    if (typeof component === 'function') {
+      await component(options);
+    }
+  }
+
   /**
-   * Initializes the PWA worker, registers global/worker event listeners,
-   * checks service worker status, and renders the initial content.
-   * This is the main entry point for the worker setup.
-   * @memberof PwaWorker
-   * @param {object} options - Configuration options.
-   * @param {function(): object} options.router - Function to get the router instance.
-   * @param {function(): Promise<void>} options.render - Function to render the application's UI.
+   * Bootstraps the app with a declarative options object.
+   * Shared core inits (Css, TranslateCore, Responsive, SocketIo, Keyboard) run
+   * internally in the correct order so index entrypoints only list app-specific components.
+   *
+   * @param {object} options
+   * @param {function(): object}          options.router       - Function returning the router instance.
+   * @param {function(): Promise<string>} [options.template]   - Async function returning the landing HTML body.
+   * @param {Array}                       [options.themes]     - CSS theme array passed to Css.loadThemes().
+   * @param {object|Array}                [options.translate]  - App translate class(es) with static instance().
+   * @param {object}                      [options.render]     - AppShell class with static instance().
+   * @param {string}                      [options.socketPath] - Socket.IO path override.
+   * @param {object}                      [options.appStore]   - AppStore whose .Data is used for socket channels.
+   * @param {object}                      [options.session]    - Session components: { socket, login, signout, signup }.
+   * @param {function(): Promise<void>}   [options.render]     - Legacy raw render callback (backward-compat).
    * @returns {Promise<void>}
    */
-  async instance({ router, render }) {
+  async instance({ router, template, themes, translate, render, socketPath, appStore, session }) {
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -131,10 +159,36 @@ class PwaWorker {
       });
     }
 
-    this.RouterInstance = router();
-    const isInstall = await this.status();
-    if (!isInstall) await this.install();
-    await render();
+    this.RouterInstance = typeof router?.instance === 'function' ? router.instance() : router();
+    if (this.RouterInstance?.Routes) registerRoutes(this.RouterInstance.Routes);
+    // Defer SW registration entirely out of the render critical path.
+    // Firefox IPC for SW registration is notably slower than Chromium;
+    // scheduling after 'load' means the first meaningful paint is not blocked.
+    this.registerServiceWorkerDeferred();
+
+    // ── declarative bootstrap path ──────────────────────────────────────────
+    // shared core inits
+    if (themes) await Css.loadThemes(themes);
+    await this.runComponentInit(TranslateCore);
+    await this.runComponentInit(translate);
+    await this.runComponentInit(Responsive);
+    // app shell render
+    if (render && typeof render.instance === 'function') {
+      const htmlMainBody = typeof template === 'function' ? template : undefined;
+      await this.runComponentInit(render, htmlMainBody ? { htmlMainBody } : undefined);
+    }
+    // socket init
+    const channels = appStore ? appStore.Data : (session && session.socket && session.socket.Data) || undefined;
+    await this.runComponentInit(SocketIo, { channels, path: socketPath });
+    if (session) {
+      await this.runComponentInit(session.socket);
+      await this.runComponentInit(session.login);
+      await this.runComponentInit(session.logout || session.signout);
+      await this.runComponentInit(session.signup);
+      await this.runComponentInit(session.account);
+    }
+    await this.runComponentInit(Keyboard);
+    // ────────────────────────────────────────────────────────────────────────
     await LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
     if (this.devMode()) {
@@ -178,6 +232,68 @@ class PwaWorker {
     });
   }
 
+  async clearAllCaches() {
+    const cacheNames = await caches.keys();
+    await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)));
+    return cacheNames.length;
+  }
+
+  async clearWorkboxIndexedDb() {
+    if (!('indexedDB' in window) || typeof indexedDB.databases !== 'function') return 0;
+    const databases = await indexedDB.databases();
+    const workboxDatabases = databases
+      .map((database) => database.name)
+      .filter(
+        (name) =>
+          typeof name === 'string' &&
+          (name.toLowerCase().includes('workbox') ||
+            name.toLowerCase().includes('background-sync') ||
+            name.includes('api-mutation-queue')),
+      );
+
+    await Promise.all(
+      workboxDatabases.map(
+        (name) =>
+          new Promise((resolve) => {
+            const request = indexedDB.deleteDatabase(name);
+            request.onsuccess = () => resolve(true);
+            request.onerror = () => resolve(false);
+            request.onblocked = () => resolve(false);
+          }),
+      ),
+    );
+
+    return workboxDatabases.length;
+  }
+
+  async requestWorkboxReset() {
+    if (!(navigator.serviceWorker && navigator.serviceWorker.controller)) return false;
+
+    return new Promise((resolve) => {
+      const channel = new MessageChannel();
+      const timeoutId = setTimeout(() => resolve(false), 1500);
+
+      channel.port1.onmessage = (event) => {
+        clearTimeout(timeoutId);
+        resolve(event.data?.status === 'workbox-reset-done');
+      };
+
+      navigator.serviceWorker.controller.postMessage({ status: 'workbox-reset' }, [channel.port2]);
+    });
+  }
+
+  async resetWorkboxAndRestart() {
+    localStorage.clear();
+    sessionStorage.clear();
+
+    await this.requestWorkboxReset();
+    await this.uninstall();
+    await this.clearAllCaches();
+    await this.clearWorkboxIndexedDb();
+    await this.install();
+    await this.reload(600);
+  }
+
   /**
    * Updates the application by clearing specific caches and running the service worker update logic.
    * Cache names matching 'components/', 'services/', or '.index.js' are deleted.
@@ -197,6 +313,30 @@ class PwaWorker {
     }
   }
 
+  /**
+   * Schedules SW registration to run after the page 'load' event (or immediately
+   * if the page is already loaded). This keeps SW work off the render critical path,
+   * which is the primary cause of Firefox being slower than Chromium on first load.
+   * @memberof PwaWorker
+   * @returns {void}
+   */
+  registerServiceWorkerDeferred() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker Disabled in browser');
+      return;
+    }
+    const register = () => {
+      this.status().then((isInstall) => {
+        if (!isInstall) this.install();
+      });
+    };
+    if (document.readyState === 'complete') {
+      register();
+    } else {
+      window.addEventListener('load', register, { once: true });
+    }
+  }
+
   /**
    * Checks the current status of all service worker registrations and sets the
    * `updateServiceWorker` function reference if an active worker is found.
@@ -242,9 +382,7 @@ class PwaWorker {
     return new Promise((resolve) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
-          .register(`${getProxyPath()}sw.js`, {
-            type: 'module',
-          })
+          .register(`${getProxyPath()}sw.js`)
           .then((...args) => {
             logger.warn('Service Worker Registered', args);
             resolve(args);
@@ -340,28 +478,26 @@ class PwaWorker {
       // Event listener for the clean cache button
       EventsUI.onClick(`.btn-clean-cache`, async (e) => {
         e.preventDefault();
-        // Clear local storage, uninstall the worker, and reload
-        localStorage.clear();
-        await this.uninstall();
-        await this.reload();
+        // Full reset: workbox runtime state + SW registrations + client storage.
+        await this.resetWorkboxAndRestart();
       });
     });
     return html` <div class="in">
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'inl section-mp btn-custom btn-install-service-controller hide',
-        label: html`<i class="fas fa-download"></i> ${Translate.Render('Install control service')}`,
+        label: html`<i class="fas fa-download"></i> ${Translate.instance('Install control service')}`,
       })}
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'inl section-mp btn-custom btn-uninstall-service-controller hide',
-        label: html`<i class="far fa-trash-alt"></i> ${Translate.Render('Uninstall control service')}`,
+        label: html`<i class="far fa-trash-alt"></i> ${Translate.instance('Uninstall control service')}`,
       })}
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'inl section-mp btn-custom btn-clean-cache',
-        label: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clean-cache')}`,
+        label: html`<i class="fa-solid fa-broom"></i> ${Translate.instance('clean-cache')}`,
       })}
-      ${await BtnIcon.Render({
+      ${await BtnIcon.instance({
         class: 'inl section-mp btn-custom btn-reload hide',
-        label: html`<i class="fas fa-sync-alt"></i> ${Translate.Render('Reload')}`,
+        label: html`<i class="fas fa-sync-alt"></i> ${Translate.instance('Reload')}`,
       })}
     </div>`;
   }

package/src/client/components/core/windowGetDimensions.js

@@ -149,23 +149,23 @@ export class PwaWindowDimensions {
    * Get the best-available viewport height in pixels.
    *
    * Priority (from most reliable for "visible" to least):
-   * 1. window.visualViewport.height (if `preferVisualViewport` is true)
-   * 2. document.documentElement.clientHeight (Layout viewport)
-   * 3. window.innerHeight (Window size)
-   * 4. document.body.clientHeight (Body size)
-   * 5. window.visualViewport.height (if `preferVisualViewport` is false)
+   * 1. document.documentElement.clientHeight (Layout viewport, default — stable against iframe scrolls)
+   * 2. window.innerHeight (Window size)
+   * 3. document.body.clientHeight (Body size)
+   * 4. window.visualViewport.height (if `preferVisualViewport` is true; first priority; or last before screen fallbacks)
+   * 5. window.visualViewport.height (if `preferVisualViewport` is false — used as fallback after layout values)
    * 6. window.screen.availHeight / window.screen.height (Physical screen)
    * 7. window.outerHeight (Last resort)
    *
    * @memberof PwaWindowDimensions
    * @static
    * @param {Object} [options]
-   * @param {boolean} [options.preferVisualViewport=true] - When true, visualViewport is checked first (best for visible screen size, e.g., above mobile keyboard).
+   * @param {boolean} [options.preferVisualViewport=false] - When true, visualViewport is checked first (best for visible screen size, e.g., above mobile keyboard). Defaults to false to use stable layout viewport height, preventing Chrome iframe scroll from causing transient visualViewport changes that affect modal sizing.
    * @returns {number|null} Height in px (rounded integer) or null if none found.
    * @memberof PwaWindowDimensions
    */
   static getH(options = {}) {
-    const { preferVisualViewport = true } = options;
+    const { preferVisualViewport = false } = options;
 
     const vv = PwaWindowDimensions.#getFromVisualViewport();
     const de = PwaWindowDimensions.#getFromDocumentElement();

package/src/client/components/cryptokoyn/{MenuCryptokoyn.js → AppShellCryptokoyn.js}

@@ -12,125 +12,125 @@ import { htmls, s } from '../core/VanillaJs.js';
 import { getProxyPath } from '../core/Router.js';
 import { AppStoreCryptokoyn } from './AppStoreCryptokoyn.js';
 import Sortable from 'sortablejs';
-import { RouterCryptokoyn, BannerAppTemplate } from './RoutesCryptokoyn.js';
+import { RouterCryptokoyn, BannerAppTemplate } from './RouterCryptokoyn.js';
 import { Wallet } from '../core/Wallet.js';
 import { Badge } from '../core/Badge.js';
 import { SettingsCryptokoyn } from './SettingsCryptokoyn.js';
 import { Recover } from '../core/Recover.js';
 
-const MenuCryptokoyn = {
-  Data: {},
-  Render: async function () {
-    const id = getId(this.Data, 'menu-');
-    this.Data[id] = {};
-    const RouterInstance = RouterCryptokoyn();
+class AppShellCryptokoyn {
+  static Data = {};
+  static async instance() {
+    const id = getId(AppShellCryptokoyn.Data, 'menu-');
+    AppShellCryptokoyn.Data[id] = {};
+    const RouterInstance = RouterCryptokoyn.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
 
     const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
-    await Modal.Render({
+    await Modal.instance({
       id: 'modal-menu',
       html: html`
         <div class="fl menu-btn-container">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/home.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('home')}</span>`,
             }),
             // style: 'display: none',
             attrs: `data-id="home"`,
             tabHref: `${getProxyPath()}`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('home')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('home')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-log-in',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/log-in.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-in')}</span>`,
             }),
             attrs: `data-id="log-in"`,
             tabHref: `${getProxyPath()}log-in`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-in')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-in')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-sign-up',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/sign-up.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('sign-up')}</span>`,
             }),
             attrs: `data-id="sign-up"`,
             tabHref: `${getProxyPath()}sign-up`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('sign-up')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('sign-up')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-log-out',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/log-out.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-out')}</span>`,
             }),
             attrs: `data-id="log-out"`,
             style: 'display: none',
             tabHref: `${getProxyPath()}log-out`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-out')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-out')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-account',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/account.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('account')}</span>`,
             }),
             style: 'display: none',
             attrs: `data-id="account"`,
             tabHref: `${getProxyPath()}account`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('account')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('account')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-wallet',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/wallet.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('wallet')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('wallet')}</span>`,
             }),
             attrs: `data-id="wallet"`,
             tabHref: `${getProxyPath()}wallet`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('wallet')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('wallet')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-settings',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<img class="inl cryptokoyn-menu-icon" src="${getProxyPath()}assets/ui-icons/settings.png" />`,
-              text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('settings')}</span>`,
             }),
             attrs: `data-id="settings"`,
             tabHref: `${getProxyPath()}settings`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('settings')),
           })}
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in wfa main-btn-menu main-btn-recover hide',
             useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
+              text: html`<span class="menu-label-text">${Translate.instance('recover')}</span>`,
             }),
             attrs: `data-id="recover"`,
             tabHref: `${getProxyPath()}recover`,
             handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('recover')),
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('recover')),
           })}
         </div>
       `,
@@ -155,7 +155,7 @@ const MenuCryptokoyn = {
       searchCustomImgClass: 'cryptokoyn-menu-icon',
     });
 
-    this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
+    AppShellCryptokoyn.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
       animation: 150,
       group: `menu-sortable`,
       forceFallback: true,
@@ -206,15 +206,15 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-sign-up`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-sign-up',
         route: 'sign-up',
         barConfig,
         title: renderViewTitle({
           icon: html`<img class="inl cryptokoyn-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/sign-up.png" />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('sign-up')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('sign-up')}</span>`,
         }),
-        html: async () => await SignUp.Render({ idModal: 'modal-sign-up' }),
+        html: async () => await SignUp.instance({ idModal: 'modal-sign-up' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -225,15 +225,15 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-log-out`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-log-out',
         route: 'log-out',
         barConfig,
         title: renderViewTitle({
           icon: html`<img class="inl cryptokoyn-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/log-out.png" />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('log-out')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('log-out')}</span>`,
         }),
-        html: async () => await LogOut.Render(),
+        html: async () => await LogOut.instance(),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -244,15 +244,15 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-log-in`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-log-in',
         route: 'log-in',
         barConfig,
         title: renderViewTitle({
           icon: html`<img class="inl cryptokoyn-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/log-in.png" />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('log-in')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('log-in')}</span>`,
         }),
-        html: async () => await LogIn.Render(),
+        html: async () => await LogIn.instance(),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -263,16 +263,16 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-account`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-account',
         route: 'account',
         barConfig,
         title: renderViewTitle({
           icon: html`<img class="inl cryptokoyn-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/account.png" />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('account')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('account')}</span>`,
         }),
         html: async () =>
-          await Account.Render({
+          await Account.instance({
             idModal: 'modal-account',
             user: AppStoreCryptokoyn.Data.user.main.model.user,
             disabled: [],
@@ -287,15 +287,15 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-wallet`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-wallet',
         route: 'wallet',
         barConfig,
         title: renderViewTitle({
           icon: html`<img class="inl cryptokoyn-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/wallet.png" />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('wallet')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('wallet')}</span>`,
         }),
-        html: async () => await Wallet.Render({ idModal: 'modal-wallet' }),
+        html: async () => await Wallet.instance({ idModal: 'modal-wallet' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -306,7 +306,7 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-settings`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-settings',
         route: 'settings',
         barConfig,
@@ -315,9 +315,9 @@ const MenuCryptokoyn = {
             class="inl cryptokoyn-menu-icon-modal"
             src="${getProxyPath()}assets/ui-icons/settings.png"
           />`,
-          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.Render('settings')}</span>`,
+          text: `<span class='inl cryptokoyn-text-title-modal'>${Translate.instance('settings')}</span>`,
         }),
-        html: async () => await SettingsCryptokoyn.Render({ idModal: 'modal-settings' }),
+        html: async () => await SettingsCryptokoyn.instance({ idModal: 'modal-settings' }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -329,16 +329,16 @@ const MenuCryptokoyn = {
 
     EventsUI.onClick(`.main-btn-recover`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
+      await Modal.instance({
         id: 'modal-recover',
         route: 'recover',
         barConfig,
         title: renderViewTitle({
           icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-          text: Translate.Render('recover'),
+          text: Translate.instance('recover'),
         }),
         html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: AppStoreCryptokoyn.Data.user.main.model.user }),
+          await Recover.instance({ idModal: 'modal-recover', user: AppStoreCryptokoyn.Data.user.main.model.user }),
         handleType: 'bar',
         maximize: true,
         mode: 'view',
@@ -346,7 +346,7 @@ const MenuCryptokoyn = {
         RouterInstance,
       });
     });
-  },
-};
+  }
+}
 
-export { MenuCryptokoyn };
+export { AppShellCryptokoyn };

package/src/client/components/cryptokoyn/CssCryptokoyn.js

@@ -153,11 +153,11 @@ const CssCommonCryptokoyn = async () => {
     <div class="ag-grid-style"></div>`;
 };
 
-const CssCryptokoynDark = {
-  theme: 'cryptokoyn-dark',
-  dark: true,
-  barButtonsIconTheme: 'img',
-  render: async () => {
+class CssCryptokoynDark {
+  static theme = 'cryptokoyn-dark';
+  static dark = true;
+  static barButtonsIconTheme = 'img';
+  static render = async () => {
     return (
       (await CssCommonCryptokoyn()) +
       html`
@@ -177,14 +177,14 @@ const CssCryptokoynDark = {
         ${borderChar(2, `#ff0d0d`, ['.default-slide-menu-top-bar-fix-title-container-text'])}
       `
     );
-  },
-};
-
-const CssCryptokoynLight = {
-  theme: 'cryptokoyn-light',
-  dark: false,
-  barButtonsIconTheme: 'img',
-  render: async () => {
+  };
+}
+
+class CssCryptokoynLight {
+  static theme = 'cryptokoyn-light';
+  static dark = false;
+  static barButtonsIconTheme = 'img';
+  static render = async () => {
     return (
       (await CssCommonCryptokoyn()) +
       html`
@@ -206,7 +206,7 @@ const CssCryptokoynLight = {
         ${borderChar(1, `#010101`, ['button', '.a-btn'], true)}
       `
     );
-  },
-};
+  };
+}
 
 export { CssCryptokoynDark, CssCommonCryptokoyn, CssCryptokoynLight };