added getters from main app element to other elements

src/common/core/BaseElement/BaseElement.ts

@@ -1,5 +1,7 @@
 import { html, render, TemplateResult } from "@github/jtml";
-import { AppMainElement } from "components/";
+import { AppMainElement, AppModalElement, AppRootElement } from "components/";
+import { AppService, RouterService } from "core/services";
+import { AuthStore } from "core/store";
 import { closest } from "core/utils";
 
 class BaseElement extends HTMLElement {
@@ -12,7 +14,31 @@ class BaseElement extends HTMLElement {
         this.disconnectedCallback = this.disconnectedCallback.bind(this);
     }
 
-    bindEvents = (): void => {
+    public get routerService(): RouterService {
+        return this.appMain?.routerService;
+    }
+
+    public get authStore(): AuthStore {
+        return this.appMain?.authStore;
+    }
+
+    public get appService(): AppService {
+        return this.appMain?.appService;
+    }
+
+    public get appModal(): AppModalElement {
+        return this.appMain?.appModal;
+    }
+
+    public get mainRoot(): AppRootElement {
+        return this.appMain?.mainRoot;
+    }
+
+    public get isAuth(): boolean {
+        return this.appMain?.isAuth();
+    }
+
+    public bindEvents = (): void => {
         const _elems = this.querySelectorAll("[data-action]");
         _elems?.forEach((el) => {
             for (const action of (el.getAttribute("data-action") || "")

src/components/app-link/AppLinkElement.ts

@@ -11,13 +11,11 @@ class AppLinkElement extends BaseComponentElement {
     @attr goBack: string;
     @attr title: string;
     @target main: Element;
-    routerService: RouterService;
     constructor() {
         super();
     }
 
     elementConnected = (): void => {
-        this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
             this.innerText = null;

src/components/app-main/AppMainElement.ts

@@ -1,22 +1,23 @@
 import { controller, target } from "@github/catalyst";
 import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
-import { BaseComponentElement } from "common/";
 import { AppModalElement, AppRootElement } from "components/";
+import { closest } from "core/utils";
 
 @controller
-class AppMainElement extends BaseComponentElement {
+class AppMainElement extends HTMLElement {
     public routerService: RouterService;
     public authStore: AuthStore;
     private httpClient: HttpClient;
     public appService: AppService;
     @target appModal: AppModalElement;
     @target mainRoot: AppRootElement;
+    @closest appMain: AppMainElement;
 
     constructor() {
         super();
     }
-    elementConnected = () => {
+    connectedCallback() {
         if (this.appMain !== this) return;
         const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
@@ -48,6 +49,11 @@ class AppMainElement extends BaseComponentElement {
                 layout: "menu-layout",
                 middleware: this.isAuth,
                 children: [
+                    {
+                        path: "/all",
+                        component: "wallet-list",
+                        layout: "menu-layout",
+                    },
                     {
                         path: "/:walletId",
                         component: "history-page",
@@ -86,7 +92,7 @@ class AppMainElement extends BaseComponentElement {
             },
         ]);
         this.routerService.init();
-    };
+    }
 
     middleAuth = () => {
         if (!this.isAuth) {

src/components/input-field/InputFieldElement.ts

@@ -17,7 +17,6 @@ class InputFieldElement extends BaseComponentElement {
     @target inp: HTMLElement;
     error: string;
     randId: string;
-    routerService: RouterService;
     constructor() {
         super();
     }

src/components/menu-item/MenuItemElement.ts

@@ -1,7 +1,6 @@
 import { attr, controller, target } from "@github/catalyst";
 import { html, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
-import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";
 
 @controller
@@ -9,13 +8,11 @@ class MenuItemElement extends BaseComponentElement {
     @attr path: string;
     @attr title: string;
     @target itemEl: HTMLElement;
-    routerService: RouterService;
     constructor() {
         super();
     }
 
     public elementConnected = (): void => {
-        this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
             this.innerText = null;

src/pages/login-page/LoginPageElement.ts

@@ -9,14 +9,12 @@ import { BasePageElement } from "common/";
 class LoginPageElement extends BasePageElement {
     @targets inputs: Array<InputFieldElement>;
     authService: AuthService;
-    routerService: RouterService;
     errorMessage: string;
     constructor() {
         super();
     }
     elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);
-        this.routerService = this.appMain.routerService;
         this.update();
     };