Add display of token balance together with token amount.

This commit is contained in:
Spencer Ofwiti 2021-06-09 18:04:29 +03:00
parent 1dc751f15f
commit 71fc96bfe1
8 changed files with 63 additions and 25 deletions

View File

@ -4,7 +4,7 @@ import { TokenRegistry } from '@app/_eth';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { RegistryService } from '@app/_services/registry.service'; import { RegistryService } from '@app/_services/registry.service';
import { Token } from '@app/_models'; import { Token } from '@app/_models';
import {BehaviorSubject, Observable, Subject} from 'rxjs'; import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
@ -14,8 +14,11 @@ export class TokenService {
tokenRegistry: TokenRegistry; tokenRegistry: TokenRegistry;
onload: (status: boolean) => void; onload: (status: boolean) => void;
tokens: Array<Token> = []; tokens: Array<Token> = [];
private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens); private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(
this.tokens
);
tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable(); tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
load: BehaviorSubject<any> = new BehaviorSubject<any>(false);
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
@ -25,6 +28,7 @@ export class TokenService {
this.tokenRegistry = new TokenRegistry( this.tokenRegistry = new TokenRegistry(
await this.registry.getContractAddressByName('TokenRegistry') await this.registry.getContractAddressByName('TokenRegistry')
); );
this.load.next(true);
this.onload(this.tokenRegistry !== undefined); this.onload(this.tokenRegistry !== undefined);
}; };
} }
@ -71,7 +75,17 @@ export class TokenService {
} }
async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> { async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> {
const sarafuToken = await this.registry.addToken(await this.tokenRegistry.entry(0)); const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
return await sarafuToken.methods.balanceOf(address).call(); return await token.methods.balanceOf(address).call();
}
async getTokenName(): Promise<string> {
const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
return await token.methods.name().call();
}
async getTokenSymbol(): Promise<string> {
const token = await this.registry.getTokenBySymbol('TokenRegistry', 'GFT');
return await token.methods.symbol().call();
} }
} }

View File

@ -33,7 +33,7 @@
<h3> <h3>
<strong> {{account?.vcard?.fn[0].value}} </strong> <strong> {{account?.vcard?.fn[0].value}} </strong>
</h3> </h3>
<span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span> <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
<span class="ml-2"><strong>Created:</strong> {{account?.date_registered | unixDate}}</span> <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | unixDate}}</span>
<span class="ml-2"><strong>Address:</strong> <span class="ml-2"><strong>Address:</strong>
<a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a> <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
@ -218,7 +218,7 @@
<tbody> <tbody>
<tr> <tr>
<td>{{account?.vcard?.fn[0].value}}</td> <td>{{account?.vcard?.fn[0].value}}</td>
<td>{{account?.balance | tokenRatio}}</td> <td>{{account?.balance | tokenRatio}} {{ tokenSymbol | uppercase }}</td>
<td>{{account?.date_registered | unixDate}}</td> <td>{{account?.date_registered | unixDate}}</td>
<td> <td>
<span class="badge badge-success badge-pill"> <span class="badge badge-success badge-pill">
@ -274,8 +274,8 @@
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
<td mat-cell *matCellDef="let transaction"> <td mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span> <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span> <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
</td> </td>
</ng-container> </ng-container>
@ -348,7 +348,7 @@
<ng-container matColumnDef="balance"> <ng-container matColumnDef="balance">
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user?.balance}} </mat-cell> <mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} {{tokenSymbol | uppercase}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="location"> <ng-container matColumnDef="location">

View File

@ -64,6 +64,7 @@ export class AccountDetailsComponent implements OnInit {
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher(); matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
submitted: boolean = false; submitted: boolean = false;
bloxbergLink: string; bloxbergLink: string;
tokenSymbol: string;
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
@ -113,7 +114,7 @@ export class AccountDetailsComponent implements OnInit {
this.loggingService.sendInfoLevelMessage(this.account); this.loggingService.sendInfoLevelMessage(this.account);
const fullName = this.account.vcard?.fn[0].value.split(' '); const fullName = this.account.vcard?.fn[0].value.split(' ');
this.accountInfoForm.patchValue({ this.accountInfoForm.patchValue({
firstName: fullName[0], firstName: fullName[0].split(',')[0],
lastName: fullName.slice(1).join(' '), lastName: fullName.slice(1).join(' '),
phoneNumber: this.account.vcard?.tel[0].value, phoneNumber: this.account.vcard?.tel[0].value,
age: this.account.age, age: this.account.age,
@ -189,6 +190,11 @@ export class AccountDetailsComponent implements OnInit {
.getGenders() .getGenders()
.pipe(first()) .pipe(first())
.subscribe((res) => (this.genders = res)); .subscribe((res) => (this.genders = res));
this.tokenService.load.subscribe(async (status) => {
if (status) {
this.tokenSymbol = await this.tokenService.getTokenSymbol();
}
});
} }
doTransactionFilter(value: string): void { doTransactionFilter(value: string): void {
@ -220,7 +226,7 @@ export class AccountDetailsComponent implements OnInit {
} }
const accountKey = await this.userService.changeAccountInfo( const accountKey = await this.userService.changeAccountInfo(
this.accountAddress, this.accountAddress,
this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value, this.accountInfoFormStub.firstName.value + ', ' + this.accountInfoFormStub.lastName.value,
this.accountInfoFormStub.phoneNumber.value, this.accountInfoFormStub.phoneNumber.value,
this.accountInfoFormStub.age.value, this.accountInfoFormStub.age.value,
this.accountInfoFormStub.type.value, this.accountInfoFormStub.type.value,

View File

@ -30,7 +30,7 @@
<button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button> <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Amount: SRF {{transaction.value | tokenRatio}}</span> <span>Amount: {{transaction.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
</li> </li>
</ul> </ul>
<h4 class="mt-2">Token: </h4> <h4 class="mt-2">Token: </h4>
@ -43,10 +43,10 @@
</span> </span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Name: Sarafu Token</span> <span>Name: {{ tokenName }}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Symbol: SRF</span> <span>Symbol: {{ tokenSymbol | uppercase }}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -109,10 +109,10 @@
<span>Name: {{transaction.sourceToken.name}}</span> <span>Name: {{transaction.sourceToken.name}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Symbol: {{transaction.sourceToken.symbol}}</span> <span>Symbol: {{transaction.sourceToken.symbol | uppercase}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}}</span> <span>Amount: {{transaction.fromValue}} {{transaction.sourceToken.symbol | uppercase}}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -130,10 +130,10 @@
<span>Name: {{transaction.destinationToken.name}}</span> <span>Name: {{transaction.destinationToken.name}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Symbol: {{transaction.destinationToken.symbol}}</span> <span>Symbol: {{transaction.destinationToken.symbol | uppercase}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}}</span> <span>Amount: {{transaction.toValue}} {{transaction.destinationToken.symbol | uppercase}}</span>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -7,7 +7,7 @@ import {
Output, Output,
} from '@angular/core'; } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { TransactionService } from '@app/_services'; import { TokenService, TransactionService } from '@app/_services';
import { copyToClipboard } from '@app/_helpers'; import { copyToClipboard } from '@app/_helpers';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { strip0x } from '@src/assets/js/ethtx/dist/hex'; import { strip0x } from '@src/assets/js/ethtx/dist/hex';
@ -26,15 +26,19 @@ export class TransactionDetailsComponent implements OnInit {
senderBloxbergLink: string; senderBloxbergLink: string;
recipientBloxbergLink: string; recipientBloxbergLink: string;
traderBloxbergLink: string; traderBloxbergLink: string;
tokenName: string;
tokenSymbol: string;
constructor( constructor(
private router: Router, private router: Router,
private transactionService: TransactionService, private transactionService: TransactionService,
private snackBar: MatSnackBar private snackBar: MatSnackBar,
private tokenService: TokenService
) {} ) {}
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
await this.transactionService.init(); await this.transactionService.init();
await this.tokenService.init();
if (this.transaction?.type === 'conversion') { if (this.transaction?.type === 'conversion') {
this.traderBloxbergLink = this.traderBloxbergLink =
'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions'; 'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions';
@ -44,6 +48,12 @@ export class TransactionDetailsComponent implements OnInit {
this.recipientBloxbergLink = this.recipientBloxbergLink =
'https://blockexplorer.bloxberg.org/address/' + this.transaction?.to + '/transactions'; '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<void> { async viewSender(): Promise<void> {

View File

@ -59,8 +59,8 @@
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
<td mat-cell *matCellDef="let transaction"> <td mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span> <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span> <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}} {{ tokenSymbol | uppercase }}</span>
</td> </td>
</ng-container> </ng-container>

View File

@ -5,7 +5,7 @@ import {
OnInit, OnInit,
ViewChild, ViewChild,
} from '@angular/core'; } 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 { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
@ -28,6 +28,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
transaction: Transaction; transaction: Transaction;
transactionsType: string = 'all'; transactionsType: string = 'all';
transactionsTypes: Array<string>; transactionsTypes: Array<string>;
tokenSymbol: string;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ -35,7 +36,8 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
constructor( constructor(
private blockSyncService: BlockSyncService, private blockSyncService: BlockSyncService,
private transactionService: TransactionService, private transactionService: TransactionService,
private userService: UserService private userService: UserService,
private tokenService: TokenService
) {} ) {}
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
@ -46,6 +48,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
this.transactions = transactions; this.transactions = transactions;
}); });
await this.blockSyncService.init(); await this.blockSyncService.init();
await this.tokenService.init();
await this.transactionService.init(); await this.transactionService.init();
await this.userService.init(); await this.userService.init();
await this.blockSyncService.blockSync(); await this.blockSyncService.blockSync();
@ -53,6 +56,11 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
.getTransactionTypes() .getTransactionTypes()
.pipe(first()) .pipe(first())
.subscribe((res) => (this.transactionsTypes = res)); .subscribe((res) => (this.transactionsTypes = res));
this.tokenService.load.subscribe(async (status) => {
if (status) {
this.tokenSymbol = await this.tokenService.getTokenSymbol();
}
});
} }
viewTransaction(transaction): void { viewTransaction(transaction): void {

View File

@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'tokenRatio' }) @Pipe({ name: 'tokenRatio' })
export class TokenRatioPipe implements PipeTransform { export class TokenRatioPipe implements PipeTransform {
transform(value: any, ...args): any { transform(value: any = 0, ...args): any {
return Number(value) / Math.pow(10, 6); return Number(value) / Math.pow(10, 6);
} }
} }