changes to structure

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,8 +1,7 @@
-import { attr, controller, target } from '@github/catalyst';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, attr, controller } from 'core/utils';
 import { BaseComponentElement } from 'common/';
-import { CircleLoaderElement } from 'components/circle-loader/CircleLoaderElement';
 import { findMethod } from 'core/utils';
+import { WalletHeaderElementTemplate } from 'components/wallet-header';
 
 @controller
 class WalletHeaderElement extends BaseComponentElement {
@@ -44,31 +43,15 @@ class WalletHeaderElement extends BaseComponentElement {
 		}
 	};
 
-	render = (): TemplateResult => {
-		const { currentBalance, currency, lastMonth, nextMonth } = this;
-
-		const renderItem = (header, balance, currency) => html`<div class="header-item">
-			<div class="--header">${header}</div>
-			<div class="--content">
-				<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
-					>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
-				><span class="--currency">(${currency})</span>
-			</div>
-		</div>`;
-
-		const renderHeader = () => {
-			if (this.loader && this.loader.loading && !this.initial) {
-				return html``;
-			}
-			return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
-				'Current Balance',
-				currentBalance,
-				currency
-			)}${renderItem('Next Month', nextMonth, currency)}`;
-		};
-
-		return html`<div class="wallet-header">${renderHeader()}</div>`;
-	};
+	render = (): TemplateResult =>
+		WalletHeaderElementTemplate({
+			currentBalance: this.currentBalance,
+			currency: this.currency,
+			lastMonth: this.lastMonth,
+			nextMonth: this.nextMonth,
+			loader: this.loader,
+			initial: this.initial,
+		});
 }
 
 export type { WalletHeaderElement };