cyberia 3.2.5 → 3.2.12

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 };

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

@@ -2,13 +2,15 @@ import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
 import { AppStoreCryptokoyn } from './AppStoreCryptokoyn.js';
 
-const LogInCryptokoyn = async function () {
-  LogIn.Event['LogInCryptokoyn'] = async (options) => {
+class LogInCryptokoyn {
+  static async instance() {
+  LogIn.onLogin(async (options) => {
     const { token, user } = options;
     AppStoreCryptokoyn.Data.user.main.model.user = user;
-  };
+  }, { key: 'LogInCryptokoyn' });
   const { user } = await Auth.sessionIn();
   AppStoreCryptokoyn.Data.user.main.model.user = user;
-};
+  }
+}
 
 export { LogInCryptokoyn };

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

@@ -1,10 +1,12 @@
 import { LogOut } from '../core/LogOut.js';
 import { AppStoreCryptokoyn } from './AppStoreCryptokoyn.js';
 
-const LogOutCryptokoyn = async function () {
-  LogOut.Event['LogOutCryptokoyn'] = async (result = { user: { _id: '' } }) => {
+class LogOutCryptokoyn {
+  static async instance() {
+  LogOut.onLogout(async (result = { user: { _id: '' } }) => {
     AppStoreCryptokoyn.Data.user.main.model.user = result.user;
-  };
-};
+  }, { key: 'LogOutCryptokoyn' });
+  }
+}
 
 export { LogOutCryptokoyn };

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

@@ -0,0 +1,37 @@
+import { loggerFactory } from '../core/Logger.js';
+import { Modal } from '../core/Modal.js';
+import { s } from '../core/VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const BannerAppTemplate = html`Cryptokoyn`;
+
+class RouterCryptokoyn {
+  static routes() {
+    return {
+      '/': {
+        title: 'Home',
+        render: () => Modal.onHomeRouterEvent(),
+      },
+      '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click() },
+      '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click() },
+      '/log-out': {
+        title: 'log-out',
+        render: () => s(`.main-btn-log-out`).click(),
+      },
+      '/account': {
+        title: 'account',
+        render: () => s(`.main-btn-account`).click(),
+      },
+      '/wallet': { title: 'wallet', render: () => s(`.main-btn-wallet`).click() },
+      '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
+      '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
+    };
+  }
+
+  static instance() {
+    return { Routes: RouterCryptokoyn.routes };
+  }
+}
+
+export { RouterCryptokoyn, BannerAppTemplate };

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

@@ -3,14 +3,14 @@ import { FullScreen } from '../core/FullScreen.js';
 import { Translate } from '../core/Translate.js';
 import { Worker } from '../core/Worker.js';
 
-const SettingsCryptokoyn = {
-  Render: async function () {
+class SettingsCryptokoyn {
+  static async instance() {
     let render = await FullScreen.RenderSetting();
     render += await Css.RenderSetting();
     render += await Translate.RenderSetting();
     render += await Worker.RenderSetting();
     return render;
-  },
-};
+  }
+}
 
 export { SettingsCryptokoyn };

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

@@ -1,9 +1,11 @@
 import { SignUp } from '../core/SignUp.js';
 
-const SignUpCryptokoyn = function () {
-  SignUp.Event['SignUpCryptokoyn'] = async (options) => {
+class SignUpCryptokoyn {
+  static instance() {
+  SignUp.onSignup(async (options) => {
     const { user } = options;
-  };
-};
+  }, { key: 'SignUpCryptokoyn' });
+  }
+}
 
 export { SignUpCryptokoyn };