implemented balance headers

src/pages/home-page/HomePageElement.ts

@@ -1,12 +1,13 @@
-import { controller } from "@github/catalyst";
+import { controller, target } from "@github/catalyst";
 import { html, TemplateResult, until } from "@github/jtml";
-import { PingService } from "services/";
-import { AppMainElement } from "components/";
+import { WalletService } from "services/";
+import { AppMainElement, WalletHeaderElement } from "components/";
 import { BasePageElement } from "common/";
 
 @controller
 class HomePageElement extends BasePageElement {
-    private pingService: PingService;
+    @target walletHeader: WalletHeaderElement;
+    private walletService: WalletService;
     constructor() {
         super({
             title: "Home",
@@ -14,25 +15,31 @@ class HomePageElement extends BasePageElement {
     }
 
     elementConnected = (): void => {
-        this.pingService = new PingService(this.appMain?.appService);
+        this.walletService = new WalletService(this.appMain?.appService);
         this.update();
         this.appMain.addEventListener("tokenchange", this.update);
+        this.getBalance();
     };
 
     elementDisconnected = (appMain: AppMainElement): void => {
         appMain?.removeEventListener("tokenchange", this.update);
     };
 
-    getPong = async (): Promise<void> => {
+    getBalance = async (): Promise<void> => {
         try {
-            const response = await this.pingService.getAll();
+            const response = await this.walletService.getBalance();
+            this.setBalance(response);
         } catch (err) {
             throw err;
         }
     };
 
-    pongEl = (): TemplateResult => {
-        return html`<div>${until(this.getPong())}</div>`;
+    setBalance = (header) => {
+        if (!this.walletHeader) return;
+        this.walletHeader.currency = header.currency;
+        this.walletHeader.currentBalance = header.currentBalance || "0";
+        this.walletHeader.lastMonth = header.lastMonth || "0";
+        this.walletHeader.nextMonth = header.nextMonth || "0";
     };
 
     openModal = (): void => {
@@ -47,6 +54,14 @@ class HomePageElement extends BasePageElement {
     render = (): TemplateResult => {
         return html`
             <button data-action="click:home-page#openModal">New Wallet</button>
+            <wallet-header
+                data-target="home-page.walletHeader"
+                data-current-balance="0"
+                data-last-month="0"
+                data-next-month="0"
+                data-currency="0"
+                data-custom="home-page#getBalance"
+            ></wallet-header>
         `;
     };
 }