From 71fc96bfe14561d36aba36a3a498b144fa830791 Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Wed, 9 Jun 2021 18:04:29 +0300 Subject: [PATCH] Add display of token balance together with token amount. --- src/app/_services/token.service.ts | 22 +++++++++++++++---- .../account-details.component.html | 10 ++++----- .../account-details.component.ts | 10 +++++++-- .../transaction-details.component.html | 14 ++++++------ .../transaction-details.component.ts | 14 ++++++++++-- .../transactions/transactions.component.html | 4 ++-- .../transactions/transactions.component.ts | 12 ++++++++-- src/app/shared/_pipes/token-ratio.pipe.ts | 2 +- 8 files changed, 63 insertions(+), 25 deletions(-) diff --git a/src/app/_services/token.service.ts b/src/app/_services/token.service.ts index d9ffed8..77df3c2 100644 --- a/src/app/_services/token.service.ts +++ b/src/app/_services/token.service.ts @@ -4,7 +4,7 @@ import { TokenRegistry } from '@app/_eth'; import { HttpClient } from '@angular/common/http'; import { RegistryService } from '@app/_services/registry.service'; import { Token } from '@app/_models'; -import {BehaviorSubject, Observable, Subject} from 'rxjs'; +import { BehaviorSubject, Observable, Subject } from 'rxjs'; @Injectable({ providedIn: 'root', @@ -14,8 +14,11 @@ export class TokenService { tokenRegistry: TokenRegistry; onload: (status: boolean) => void; tokens: Array = []; - private tokensList: BehaviorSubject> = new BehaviorSubject>(this.tokens); + private tokensList: BehaviorSubject> = new BehaviorSubject>( + this.tokens + ); tokensSubject: Observable> = this.tokensList.asObservable(); + load: BehaviorSubject = new BehaviorSubject(false); constructor(private httpClient: HttpClient) {} @@ -25,6 +28,7 @@ export class TokenService { this.tokenRegistry = new TokenRegistry( await this.registry.getContractAddressByName('TokenRegistry') ); + this.load.next(true); this.onload(this.tokenRegistry !== undefined); }; } @@ -71,7 +75,17 @@ export class TokenService { } async getTokenBalance(address: string): Promise<(address: string) => Promise> { - const sarafuToken = await this.registry.addToken(await this.tokenRegistry.entry(0)); - return await sarafuToken.methods.balanceOf(address).call(); + const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT'); + return await token.methods.balanceOf(address).call(); + } + + async getTokenName(): Promise { + const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT'); + return await token.methods.name().call(); + } + + async getTokenSymbol(): Promise { + const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT'); + return await token.methods.symbol().call(); } } diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html index 646dd4a..22d8df3 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -33,7 +33,7 @@

{{account?.vcard?.fn[0].value}}

- Balance: {{account?.balance | tokenRatio}} SRF + Balance: {{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }} Created: {{account?.date_registered | unixDate}} Address: {{accountAddress}} @@ -218,7 +218,7 @@ {{account?.vcard?.fn[0].value}} - {{account?.balance | tokenRatio}} + {{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }} {{account?.date_registered | unixDate}} @@ -274,8 +274,8 @@ Value - {{transaction?.value | tokenRatio}} - {{transaction?.toValue | tokenRatio}} + {{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }} + {{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }} @@ -348,7 +348,7 @@ BALANCE - {{user?.balance}} + {{user?.balance | tokenRatio}} {{tokenSymbol | uppercase}} diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index 312682a..e08703d 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/src/app/pages/accounts/account-details/account-details.component.ts @@ -64,6 +64,7 @@ export class AccountDetailsComponent implements OnInit { matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher(); submitted: boolean = false; bloxbergLink: string; + tokenSymbol: string; constructor( private formBuilder: FormBuilder, @@ -113,7 +114,7 @@ export class AccountDetailsComponent implements OnInit { this.loggingService.sendInfoLevelMessage(this.account); const fullName = this.account.vcard?.fn[0].value.split(' '); this.accountInfoForm.patchValue({ - firstName: fullName[0], + firstName: fullName[0].split(',')[0], lastName: fullName.slice(1).join(' '), phoneNumber: this.account.vcard?.tel[0].value, age: this.account.age, @@ -189,6 +190,11 @@ export class AccountDetailsComponent implements OnInit { .getGenders() .pipe(first()) .subscribe((res) => (this.genders = res)); + this.tokenService.load.subscribe(async (status) => { + if (status) { + this.tokenSymbol = await this.tokenService.getTokenSymbol(); + } + }); } doTransactionFilter(value: string): void { @@ -220,7 +226,7 @@ export class AccountDetailsComponent implements OnInit { } const accountKey = await this.userService.changeAccountInfo( this.accountAddress, - this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value, + this.accountInfoFormStub.firstName.value + ', ' + this.accountInfoFormStub.lastName.value, this.accountInfoFormStub.phoneNumber.value, this.accountInfoFormStub.age.value, this.accountInfoFormStub.type.value, diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.html b/src/app/pages/transactions/transaction-details/transaction-details.component.html index fb1c6b0..0da7816 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.html +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.html @@ -30,7 +30,7 @@
  • - Amount: SRF {{transaction.value | tokenRatio}} + Amount: {{transaction.value | tokenRatio}} {{ tokenSymbol | uppercase }}

    • Token:

    @@ -43,10 +43,10 @@
  • - Name: Sarafu Token + Name: {{ tokenName }}
  • - Symbol: SRF + Symbol: {{ tokenSymbol | uppercase }}
    • @@ -109,10 +109,10 @@ Name: {{transaction.sourceToken.name}}
  • - Symbol: {{transaction.sourceToken.symbol}} + Symbol: {{transaction.sourceToken.symbol | uppercase}}
  • - Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}} + Amount: {{transaction.fromValue}} {{transaction.sourceToken.symbol | uppercase}}
    • @@ -130,10 +130,10 @@ Name: {{transaction.destinationToken.name}}
  • - Symbol: {{transaction.destinationToken.symbol}} + Symbol: {{transaction.destinationToken.symbol | uppercase}}
  • - Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}} + Amount: {{transaction.toValue}} {{transaction.destinationToken.symbol | uppercase}}
    • diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.ts b/src/app/pages/transactions/transaction-details/transaction-details.component.ts index e6efb47..a2029ca 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.ts +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.ts @@ -7,7 +7,7 @@ import { Output, } from '@angular/core'; import { Router } from '@angular/router'; -import { TransactionService } from '@app/_services'; +import { TokenService, TransactionService } from '@app/_services'; import { copyToClipboard } from '@app/_helpers'; import { MatSnackBar } from '@angular/material/snack-bar'; import { strip0x } from '@src/assets/js/ethtx/dist/hex'; @@ -26,15 +26,19 @@ export class TransactionDetailsComponent implements OnInit { senderBloxbergLink: string; recipientBloxbergLink: string; traderBloxbergLink: string; + tokenName: string; + tokenSymbol: string; constructor( private router: Router, private transactionService: TransactionService, - private snackBar: MatSnackBar + private snackBar: MatSnackBar, + private tokenService: TokenService ) {} async ngOnInit(): Promise { await this.transactionService.init(); + await this.tokenService.init(); if (this.transaction?.type === 'conversion') { this.traderBloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions'; @@ -44,6 +48,12 @@ export class TransactionDetailsComponent implements OnInit { this.recipientBloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.transaction?.to + '/transactions'; } + this.tokenService.load.subscribe(async (status) => { + if (status) { + this.tokenSymbol = await this.tokenService.getTokenSymbol(); + this.tokenName = await this.tokenService.getTokenName(); + } + }); } async viewSender(): Promise { diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html index 2099255..1d9d548 100644 --- a/src/app/pages/transactions/transactions.component.html +++ b/src/app/pages/transactions/transactions.component.html @@ -59,8 +59,8 @@ Value - {{transaction?.value | tokenRatio}} - {{transaction?.toValue | tokenRatio}} + {{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }} + {{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }} diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts index b0b3543..49f52d2 100644 --- a/src/app/pages/transactions/transactions.component.ts +++ b/src/app/pages/transactions/transactions.component.ts @@ -5,7 +5,7 @@ import { OnInit, ViewChild, } from '@angular/core'; -import { BlockSyncService, TransactionService, UserService } from '@app/_services'; +import { BlockSyncService, TokenService, TransactionService, UserService } from '@app/_services'; import { MatTableDataSource } from '@angular/material/table'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; @@ -28,6 +28,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit { transaction: Transaction; transactionsType: string = 'all'; transactionsTypes: Array; + tokenSymbol: string; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -35,7 +36,8 @@ export class TransactionsComponent implements OnInit, AfterViewInit { constructor( private blockSyncService: BlockSyncService, private transactionService: TransactionService, - private userService: UserService + private userService: UserService, + private tokenService: TokenService ) {} async ngOnInit(): Promise { @@ -46,6 +48,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit { this.transactions = transactions; }); await this.blockSyncService.init(); + await this.tokenService.init(); await this.transactionService.init(); await this.userService.init(); await this.blockSyncService.blockSync(); @@ -53,6 +56,11 @@ export class TransactionsComponent implements OnInit, AfterViewInit { .getTransactionTypes() .pipe(first()) .subscribe((res) => (this.transactionsTypes = res)); + this.tokenService.load.subscribe(async (status) => { + if (status) { + this.tokenSymbol = await this.tokenService.getTokenSymbol(); + } + }); } viewTransaction(transaction): void { diff --git a/src/app/shared/_pipes/token-ratio.pipe.ts b/src/app/shared/_pipes/token-ratio.pipe.ts index 2d10f4c..f31855e 100644 --- a/src/app/shared/_pipes/token-ratio.pipe.ts +++ b/src/app/shared/_pipes/token-ratio.pipe.ts @@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'tokenRatio' }) export class TokenRatioPipe implements PipeTransform { - transform(value: any, ...args): any { + transform(value: any = 0, ...args): any { return Number(value) / Math.pow(10, 6); } }