(feat): wallet balance tokens and service updates (c45fd44f) · Commits · Minds / Minds Frontend

src/app/common/components/shadowbox-header-tabs/shadowbox-header-tabs.component.html

+9 −0

Original line number	Original line	Diff line number	Diff line
	@@ -15,6 +15,15 @@
	*ngIf="tab.value \|\| tab.value === 0"		*ngIf="tab.value \|\| tab.value === 0"
	[ngSwitch]="tab?.unit"		[ngSwitch]="tab?.unit"
	>		>
			<ng-template ngSwitchCase="tokens">
			{{ tab.value \| token: 18 \| number: '1.0-3' }}
			</ng-template>
			<ng-template ngSwitchCase="eth">
			{{ tab.value \| token: 18 \| number: '1.0-3' }}
			</ng-template>
			<ng-template ngSwitchCase="btc">
			{{ tab.value \| token: 18 \| number: '1.0-3' }}
			</ng-template>
	<ng-template ngSwitchCase="number">		<ng-template ngSwitchCase="number">
	{{ tab.value \| number }}		{{ tab.value \| number }}
	</ng-template>		</ng-template>

src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.html

+22 −21

Original line number	Original line	Diff line number	Diff line
	@@ -5,20 +5,16 @@
	<div class="m-walletBalance--tokens__balanceTitle">Token Balance</div>		<div class="m-walletBalance--tokens__balanceTitle">Token Balance</div>
	<div class="m-walletBalance--tokens__balanceValWrapper">		<div class="m-walletBalance--tokens__balanceValWrapper">
	<span class="m-walletBalance--tokens__balanceVal--int">{{		<span class="m-walletBalance--tokens__balanceVal--int">{{
	totalBalance.int		tokenBalance.int \| number
	}}</span		}}</span
	>.<span class="m-walletBalance--tokens__balanceVal--frac">{{		><span
	totalBalance.frac		class="m-walletBalance--tokens__balanceVal--frac"
	}}</span>		*ngIf="tokenBalance.frac"
			>.{{ tokenBalance.frac \| token: 15 \| number: '3.0-0' }}</span
			>
	</div>		</div>
	</div>		</div>
			<ng-container *ngTemplateOutlet="buyTokens"></ng-container>
	<a class="m-walletBalance--tokens__buyButtonWrapper" routerLink="/tokens"
	><m-shadowboxSubmitButton
	[disabled]="!session.getLoggedInUser().rewards"
	>Buy tokens</m-shadowboxSubmitButton
	></a
	>
	</div>		</div>
	<div class="m-walletBalance--tokens__equationSymbol">=</div>		<div class="m-walletBalance--tokens__equationSymbol">=</div>
	<div class="m-walletBalance--tokens__balanceWrapper--subtotal">		<div class="m-walletBalance--tokens__balanceWrapper--subtotal">
	@@ -29,12 +25,12 @@
	</div>		</div>
	<div class="m-walletBalance--tokens__balanceValWrapper">		<div class="m-walletBalance--tokens__balanceValWrapper">
	<span class="m-walletBalance--tokens__balanceVal--int">{{		<span class="m-walletBalance--tokens__balanceVal--int">{{
	offchainBalance.int \| token: 18 \| number: '1.0-0'		offchainBalance.int \| number
	}}</span		}}</span
	><span		><span
	class="m-walletBalance--tokens__balanceVal--frac"		class="m-walletBalance--tokens__balanceVal--frac"
	*ngIf="offchainBalance.frac"		*ngIf="offchainBalance.frac"
	>.{{ offchainBalance.frac }}</span		>.{{ offchainBalance.frac \| token: 15 \| number: '3.0-0' }}</span
	>		>
	tokens		tokens
	</div>		</div>
	@@ -43,20 +39,17 @@
	<div class="m-walletBalance--tokens__balanceWrapper--subtotal">		<div class="m-walletBalance--tokens__balanceWrapper--subtotal">
	<div class="m-walletBalance--tokens__balanceTitle">		<div class="m-walletBalance--tokens__balanceTitle">
	On-Chain<m-tooltip icon="help"		On-Chain<m-tooltip icon="help"
	>A short description of On-chain</m-tooltip		>A "short description of On-chain" lol</m-tooltip
	>		>
	</div>		</div>
	<div class="m-walletBalance--tokens__balanceValWrapper">		<div class="m-walletBalance--tokens__balanceValWrapper">
	<span class="m-walletBalance--tokens__balanceVal--int">{{		<span class="m-walletBalance--tokens__balanceVal--int">{{
	onchainBalance.int \| token: 18 \| number: '1.0-0'		onchainBalance.int \| number
	}}</span		}}</span
	><span		><span
	class="m-walletBalance--tokens__balanceVal--frac"		class="m-walletBalance--tokens__balanceVal--frac"
	*ngIf="onchainBalance.frac"		*ngIf="onchainBalance.frac"
	>.{{		>.{{ onchainBalance.frac \| token: 15 \| number: '3.0-0' }}</span
	(onchainBalance.total - onchainBalance.total.toFixed(0)) * 1000
	\| number: '1.0-0'
	}}</span
	>		>
	tokens		tokens
	</div>		</div>
	@@ -69,11 +62,19 @@
	<div class="m-walletBalance--tokens__payout">		<div class="m-walletBalance--tokens__payout">
	Daily estimated payout		Daily estimated payout
	<span>{{ estimatedTokenPayout \| token: 18 \| number: '1.0-3' }}</span>		<span>{{ estimatedTokenPayout \| token: 18 \| number: '1.0-3' }}</span>
	tokens. Next payout in <span>{{ nextPayout \| timediff: true }}</span> (Daily		tokens. Next payout in
	at 2:00am UTC)		<span>{{ nextPayout \| timediff }}</span> (Daily at 2:00am UTC)
	</div>		</div>
	</ng-container>		</ng-container>

			<ng-template #buyTokens>
			<a class="m-walletBalance--tokens__buyButtonWrapper" routerLink="/tokens"
			><m-shadowboxSubmitButton [disabled]="!session.getLoggedInUser().rewards"
			>Buy tokens</m-shadowboxSubmitButton
			></a
			>
			</ng-template>

	<ng-template #loading>		<ng-template #loading>
	<h2>...</h2>		<h2>...</h2>
	</ng-template>		</ng-template>

src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.scss

+3 −1

Original line number	Original line	Diff line number	Diff line
	@@ -49,6 +49,9 @@ m-walletBalance--tokens {
	}		}

	.m-walletBalance--tokens__balanceWrapper--subtotal {		.m-walletBalance--tokens__balanceWrapper--subtotal {
			.m-walletBalance--tokens__balanceTitle {
			min-width: 78px;
			}
	.m-walletBalance--tokens__balanceValWrapper {		.m-walletBalance--tokens__balanceValWrapper {
	font-size: 13px;		font-size: 13px;
	line-height: 18px;		line-height: 18px;
	@@ -102,7 +105,6 @@ m-walletBalance--tokens {
	margin-top: 10px;		margin-top: 10px;
	}		}

	// TODO make equationLeft flex-direction:column at a certain width
	@media screen and (max-width: 800px) {		@media screen and (max-width: 800px) {
	.m-walletBalance--tokens__equationLeft {		.m-walletBalance--tokens__equationLeft {
	flex-direction: column;		flex-direction: column;

src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.ts

+39 −56

Original line number	Original line	Diff line number	Diff line
	@@ -4,9 +4,12 @@ import {
	OnDestroy,		OnDestroy,
	ChangeDetectionStrategy,		ChangeDetectionStrategy,
	ChangeDetectorRef,		ChangeDetectorRef,
			Input,
	} from '@angular/core';		} from '@angular/core';
	import { Client } from '../../../../services/api/client';		import { Client } from '../../../../services/api/client';
	import { Session } from '../../../../services/session';		import { Session } from '../../../../services/session';
			import { WalletDashboardService } from './../dashboard.service';
			import * as BN from 'bn.js';

	@Component({		@Component({
	selector: 'm-walletBalance--tokens',		selector: 'm-walletBalance--tokens',
	@@ -14,91 +17,71 @@ import { Session } from '../../../../services/session';
	changeDetection: ChangeDetectionStrategy.OnPush,		changeDetection: ChangeDetectionStrategy.OnPush,
	})		})
	export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {		export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
			@Input() wallet;
	constructor(		constructor(
	protected client: Client,		protected client: Client,
	protected cd: ChangeDetectorRef,		protected cd: ChangeDetectorRef,
	protected session: Session		protected session: Session,
			protected walletService: WalletDashboardService
	) {}		) {}
			tokenBalance;
			offchainBalance;
			onchainBalance;
	inProgress = true;		inProgress = true;
	protected updateTimer$;		protected updateTimer$;
	nextPayout;		nextPayout;
	estimatedTokenPayout;		estimatedTokenPayout;
	totalBalance = {
	total: 123.345777892347923487,
	int: 123,
	frac: 345,
	};
	offchainBalance = {
	total: 1.34,
	int: 1,
	frac: 34,
	};
	onchainBalance = {
	total: 122,
	int: 122,
	frac: 0,
	};

	ngOnInit() {		ngOnInit() {
	this.loadBalances();		this.tokenBalance = this.formatBalance(this.wallet.tokens.balance);
	this.loadPayout();		this.offchainBalance = this.formatBalance(this.wallet.offchain.balance);
			this.onchainBalance = this.formatBalance(this.wallet.onchain.balance);

			const payouts: any = this.walletService.getTokenPayoutOverview();
			console.log('888', payouts);
			this.nextPayout = payouts.nextPayout;
			this.estimatedTokenPayout = payouts.currentReward;

	this.inProgress = false;		this.inProgress = false;
	this.updateTimer$ = setInterval(this.updateNextPayout.bind(this), 1000);		this.updateTimer$ = setInterval(this.updateNextPayout.bind(this), 1000);
			this.detectChanges();
	}		}
	ngOnDestroy() {		ngOnDestroy() {
	clearInterval(this.updateTimer$);		clearInterval(this.updateTimer$);
	}		}

	async loadBalances() {		updateNextPayout() {
	try {		if (this.nextPayout) {
	const result: any = await this.client.get(		this.nextPayout--;
	`api/v2/blockchain/contributions/overview`
	);

	// this.totalBalance = result. ;

	this.detectChanges();		this.detectChanges();
	} catch (e) {
	console.error(e);
	}		}
	}		}
	async loadPayout() {
	try {
	const result: any = await this.client.get(
	`api/v2/blockchain/contributions/overview`
	);

	this.nextPayout = result.nextPayout;		formatBalance(balance) {
	this.estimatedTokenPayout = result.currentReward;		const formattedBalance = {
			total: balance,
	this.detectChanges();		int: 0,
	} catch (e) {		frac: null,
	console.error(e);		};
			if (balance <= 0) {
			return formattedBalance;
	}		}

			if (balance.length > 18) {
			formattedBalance.int = balance.slice(0, -18);
	}		}
			const decimals = balance.slice(-18);

	updateNextPayout() {		console.log('888iszero?', !new BN(decimals).isZero());
	if (this.nextPayout) {		if (!new BN(decimals).isZero() \|\| decimals.slice(0, 3) !== '000') {
	this.nextPayout--;		formattedBalance.frac = decimals;
	this.detectChanges();
	}		}
			console.log('888', formattedBalance);
			return formattedBalance;
	}		}

	detectChanges() {		detectChanges() {
	this.cd.markForCheck();		this.cd.markForCheck();
	this.cd.detectChanges();		this.cd.detectChanges();
	}		}

	//get total balance () {
	// return total: #, int: #, dec: #
	// }

	//get offchain balance

	// get onchain balance

	// process all 3 balances
	// option a: ~~total will truncate??
	// option b: var num = (15.46974).toFixed(2) // returns str
	}		}

src/app/modules/wallet/v2/chart/chart.component.ts

+2 −2

Original line number	Original line	Diff line number	Diff line
	@@ -42,7 +42,7 @@ export class WalletChartComponent implements OnInit {

	ngOnInit() {		ngOnInit() {
	this.activeTimespan = this.timespans[0];		this.activeTimespan = this.timespans[0];
	this.data['visualisation'] = this.walletService.getTokenChartData(		this.data['visualisation'] = this.walletService.getTokenChart(
	this.activeTimespan		this.activeTimespan
	);		);
	}		}
	@@ -51,6 +51,6 @@ export class WalletChartComponent implements OnInit {
	this.activeTimespan = this.timespans.find(		this.activeTimespan = this.timespans.find(
	ts => ts.id === $event.timespanId		ts => ts.id === $event.timespanId
	);		);
	this.data = this.walletService.getTokenChartData(this.activeTimespan);		this.data = this.walletService.getTokenChart(this.activeTimespan);
	}		}
	}		}