Merge branch 'feature/WW-26-architecture'

src/components/app-main/AppMainElement.ts

@@ -13,6 +13,11 @@ class AppMainElement extends HTMLElement {
     @target appModal: AppModalElement;
     @target mainRoot: AppRootElement;
     @closest appMain: AppMainElement;
+    public domEvents: any = {
+        routechanged: new Event("routechanged"),
+        tokenchange: new Event("tokenchange"),
+        walletupdate: new Event("walletupdate"),
+    };
 
     constructor() {
         super();
@@ -114,6 +119,10 @@ class AppMainElement extends HTMLElement {
         this.appendChild(_appModal);
     };
 
+    public triggerWalletUpdate = () => {
+        this.dispatchEvent(this.domEvents.walletupdate);
+    };
+
     private createAppModal = () => {
         const _appModal = document.createElement("app-modal");
         _appModal.setAttribute("data-target", "app-main.appModal");

src/components/app-menu/AppMenuElement.ts

@@ -23,15 +23,17 @@ class AppMenuElement extends BaseComponentElement {
             this.update();
         }
         this.appMain.addEventListener("tokenchange", this.updateToken);
+        this.appMain.addEventListener("walletupdate", this.updateToken);
     };
 
     elementDisconnected = (appMain: AppMainElement): void => {
         appMain?.removeEventListener("tokenchange", this.updateToken);
+        appMain?.removeEventListener("walletupdate", this.updateToken);
     };
 
     getWallets = async (): Promise<void> => {
         try {
-            const response = await this.walletService.getAll({ rpp: 2 });
+            const response = await this.walletService.getAll({ rpp: 3 });
             this.setWallets(response.items, response.totalRecords);
         } catch (err) {
             this.update();
@@ -96,15 +98,23 @@ class AppMenuElement extends BaseComponentElement {
             }
             return html`<menu-item data-path="${path}">${title}</menu-item>`;
         };
-        const authMenu = (path: string, title: string): TemplateResult => {
+        const authMenu = (
+            path: string,
+            title: string,
+            action?: string
+        ): TemplateResult => {
             if (isAuth) {
-                return regularMenu(path, title);
+                return regularMenu(path, title, action);
             }
             return html``;
         };
-        const notAuthMenu = (path: string, title: string): TemplateResult => {
+        const notAuthMenu = (
+            path: string,
+            title: string,
+            action?: string
+        ): TemplateResult => {
             if (!isAuth) {
-                return regularMenu(path, title);
+                return regularMenu(path, title, action);
             }
             return html``;
         };
@@ -117,12 +127,6 @@ class AppMenuElement extends BaseComponentElement {
             }
             return html``;
         };
-        const otherWallets = (action: string) => {
-            if (isAuth && totalWallets > 2) {
-                return regularMenu("/wallet/all", "Other Wallets", action);
-            }
-            return html``;
-        };
         const menuHeader = (title) =>
             html`<div class="menu-item menu-header">${title}</div>`;
 
@@ -130,8 +134,12 @@ class AppMenuElement extends BaseComponentElement {
             <div data-target="app-menu.sidebar">
                 ${menuHeader("Wallets")} ${regularMenu("/", "Home")}
                 ${authMenu("/history", "Transaction History")}
+                ${authMenu(
+                    "/wallet/all",
+                    "My Wallets",
+                    "click:app-menu#openModal"
+                )}
                 ${renderWallets(walletData)}
-                ${otherWallets("click:app-menu#openModal")}
                 <span class="menu-item divider"></span>
                 ${authMenu("/logout", "Logout")}
                 ${notAuthMenu("/login", "Login")}

src/components/menu-item/MenuItemElement.ts

@@ -44,7 +44,7 @@ class MenuItemElement extends BaseComponentElement {
                           data-target="menu-item.customButton"
                           data-action="${this.customaction}"
                       >
-                          Add
+                          +
                       </div>`
                     : html``}
             </div>

src/configs/development/app-settings.json

@@ -1,5 +1,5 @@
 {
-    "apiUrl": "localhost:4000",
+    "apiUrl": "main-wallet--dtnyc2vcdgu2re9j-gtw.qovery.io",
     "apiVersion": "v1",
-    "ssl": false
+    "ssl": true
 }

src/core/services/router-service/RouterService.ts

@@ -4,9 +4,6 @@ import { AppMainElement } from "components/";
 class RouterService {
     private historyStack: Array<RouteState> = [];
     private _routes: Array<RouteState> = [];
-    private domEvents: any = {
-        routechanged: new Event("routechanged"),
-    };
     constructor(
         private appMain: AppMainElement,
         private mainRoot: ShadowRoot | HTMLElement
@@ -154,7 +151,7 @@ class RouterService {
             this.historyStack.push(newRoute);
             this.update();
         }
-        this.appMain.dispatchEvent(this.domEvents.routechanged);
+        this.appMain.dispatchEvent(this.appMain?.domEvents.routechanged);
     };
 
     public goTo = (path: string, data?: any): void => {

src/core/store/AuthStore.ts

@@ -7,9 +7,6 @@ class AuthStore {
     private _token: string;
     private _userDetails: UserDetails;
     private authService: AuthService;
-    private domEvents: any = {
-        tokenchange: new Event("tokenchange"),
-    };
     constructor(
         private appMain: AppMainElement,
         private appService: AppService
@@ -33,7 +30,7 @@ class AuthStore {
         if (_changed) {
             this._token = token;
             localStorage.setItem("token", token);
-            this.appMain.dispatchEvent(this.domEvents.tokenchange);
+            this.appMain.dispatchEvent(this.appMain?.domEvents.tokenchange);
         }
     }
 

src/pages/wallet-create/WalletCreateElement.ts

@@ -45,11 +45,10 @@ class WalletCreateElement extends BasePageElement {
             const response = await this.walletService.post(this.values);
 
             if (response?.id) {
+                this.appMain.triggerWalletUpdate();
                 this.routerService.goTo("/wallet/:walletId", {
                     walletId: response.id,
                 });
-                const { token } = this.authStore;
-                this.authStore.token = token;
             }
         } catch (err) {
             this.errorMessage = "Unable to create wallet!";

src/styles/menu-item/menu-item.scss

@@ -50,22 +50,29 @@ menu-item {
         [data-target="menu-item.customButton"] {
             grid-area: custom;
             display: flex;
-            visibility: hidden;
-            width: 0px;
-            display: flex;
-            transition: width 0.3s;
-        }
-        &:hover {
-            [data-target="menu-item.customButton"] {
-                grid-area: custom;
-                visibility: visible;
-                align-items: center;
-                justify-content: center;
-                width: 50px;
+            width: 10px;
             height: 50px;
             background-color: $blue-09;
             cursor: pointer;
             user-select: none;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            transition: width 0.3s;
+            color: transparent;
+            * {
+                visibility: hidden;
+            }
+        }
+        &:hover {
+            [data-target="menu-item.customButton"] {
+                grid-area: custom;
+                width: 50px;
+                transition: color 0.3s step-start;
+                color: $white;
+                * {
+                    transition: visibility 0.3s;
+                }
                 &:hover {
                     background-color: $blue-08;
                 }