diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index d1078b6..ce9e043 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/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"); diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 7610a56..e4a6c12 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/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 => { 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`${title}`; }; - 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``; @@ -130,8 +134,12 @@ class AppMenuElement extends BaseComponentElement {
${menuHeader("Wallets")} ${regularMenu("/", "Home")} ${authMenu("/history", "Transaction History")} + ${authMenu( + "/wallet/all", + "My Wallets", + "click:app-menu#openModal" + )} ${renderWallets(walletData)} - ${otherWallets("click:app-menu#openModal")} ${authMenu("/logout", "Logout")} ${notAuthMenu("/login", "Login")} diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 548be7e..9c04b22 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/src/components/menu-item/MenuItemElement.ts @@ -44,7 +44,7 @@ class MenuItemElement extends BaseComponentElement { data-target="menu-item.customButton" data-action="${this.customaction}" > - Add + +
` : html``} diff --git a/src/configs/development/app-settings.json b/src/configs/development/app-settings.json index 917f16f..1a74f7a 100644 --- a/src/configs/development/app-settings.json +++ b/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 } \ No newline at end of file diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts index 2daf550..54dde44 100644 --- a/src/core/services/router-service/RouterService.ts +++ b/src/core/services/router-service/RouterService.ts @@ -4,9 +4,6 @@ import { AppMainElement } from "components/"; class RouterService { private historyStack: Array = []; private _routes: Array = []; - 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 => { diff --git a/src/core/store/AuthStore.ts b/src/core/store/AuthStore.ts index fcb84d4..07cf56d 100644 --- a/src/core/store/AuthStore.ts +++ b/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); } } diff --git a/src/pages/wallet-create/WalletCreateElement.ts b/src/pages/wallet-create/WalletCreateElement.ts index 0ee1775..a71d579 100644 --- a/src/pages/wallet-create/WalletCreateElement.ts +++ b/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!"; diff --git a/src/styles/menu-item/menu-item.scss b/src/styles/menu-item/menu-item.scss index 2c125f2..b3e761a 100644 --- a/src/styles/menu-item/menu-item.scss +++ b/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; + 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; - visibility: visible; - align-items: center; - justify-content: center; width: 50px; - height: 50px; - background-color: $blue-09; - cursor: pointer; - user-select: none; + transition: color 0.3s step-start; + color: $white; + * { + transition: visibility 0.3s; + } &:hover { background-color: $blue-08; }