Refactor token details into a presentation component.

This commit is contained in:
Spencer Ofwiti 2021-06-02 10:04:42 +03:00
parent 8de8e6a30b
commit 81620600e3
7 changed files with 76 additions and 93 deletions

View File

@ -4,7 +4,7 @@ interface Token {
address: string;
supply: string;
decimals: string;
reserves: {
reserves?: {
'0xa686005CE37Dce7738436256982C3903f2E4ea8E'?: {
weight: string;
balance: string;

View File

@ -28,14 +28,15 @@ export class TokenService {
async getTokens(): Promise<Array<any>> {
const count: number = await this.tokenRegistry.totalTokens();
let tokens: Array<any> = [];
const tokens: Array<any> = [];
for (let i = 0; i < count; i++) {
const tokenContract = await this.registry.addToken(await this.tokenRegistry.entry(i));
let token: any = {};
const token: any = {};
token.address = await this.tokenRegistry.entry(i);
const tokenContract = await this.registry.addToken(token.address);
token.name = await tokenContract.methods.name().call();
token.symbol = await tokenContract.methods.symbol().call();
token.address = await this.tokenRegistry.entry(i);
token.totalSupply = await tokenContract.methods.totalSupply().call();
token.supply = await tokenContract.methods.totalSupply().call();
token.decimals = await tokenContract.methods.decimals().call();
tokens.push(token);
}

View File

@ -1,60 +1,36 @@
<!-- Begin page -->
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div id="content">
<app-topbar></app-topbar>
<!-- Start Content-->
<div class="container-fluid text-center" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/tokens">Tokens</a></li>
<li class="breadcrumb-item active" aria-current="page">{{token.name}}</li>
</ol>
</nav>
<div class="col-md-6 center-body">
<div class="card">
<div *ngIf="token" class="mb-3 mt-1">
<div class="card text-center">
<mat-card-title class="card-header">
Token
<div class="row">
TOKEN DETAILS
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
</div>
</mat-card-title>
<div class="card-body">
<div>
<span><strong>Name:</strong> {{token.name}}</span>
<span><strong>Name:</strong> {{token?.name}}</span>
</div>
<div>
<span><strong>Symbol:</strong> {{token.symbol}}</span>
<span><strong>Symbol:</strong> {{token?.symbol}}</span>
</div>
<div>
<span><strong>Address:</strong> {{token.address}}</span>
<span><strong>Address:</strong> {{token?.address}}</span>
</div>
<div>
<span><strong>Details:</strong> A community inclusive currency for trading among lower to middle income societies.</span>
</div>
<div>
<span><strong>Supply:</strong> {{token.supply | tokenRatio}}</span>
<span><strong>Supply:</strong> {{token?.supply | tokenRatio}}</span>
</div><br>
<div>
<h2>Reserve</h2>
<div>
<span><strong>Weight:</strong> {{token.reserveRatio}}</span>
<span><strong>Weight:</strong> {{token?.reserveRatio}}</span>
</div>
<div>
<span><strong>Owner:</strong> {{token.owner}}</span>
<span><strong>Owner:</strong> {{token?.owner}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>

View File

@ -1,8 +1,12 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { TokenService } from '@app/_services';
import { first } from 'rxjs/operators';
import { Token } from '../../../_models';
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { Token } from '@app/_models';
@Component({
selector: 'app-token-details',
@ -11,19 +15,16 @@ import { Token } from '../../../_models';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TokenDetailsComponent implements OnInit {
token: Token;
@Input() token: Token;
constructor(private route: ActivatedRoute, private tokenService: TokenService) {}
@Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();
async ngOnInit(): Promise<void> {
await this.tokenService.init();
this.route.paramMap.subscribe((params: Params) => {
this.tokenService
.getTokenBySymbol(params.get('id'))
.pipe(first())
.subscribe((res) => {
this.token = res;
});
});
constructor() {}
ngOnInit(): void {}
close(): void {
this.token = null;
this.closeWindow.emit(this.token);
}
}

View File

@ -24,6 +24,9 @@
</div>
</mat-card-title>
<div class="card-body">
<app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
@ -48,7 +51,7 @@
<ng-container matColumnDef="supply">
<mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell>
<mat-cell *matCellDef="let token"> {{token.totalSupply | tokenRatio}} </mat-cell>
<mat-cell *matCellDef="let token"> {{token.supply | tokenRatio}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>

View File

@ -5,6 +5,7 @@ import { LoggingService, TokenService } from '@app/_services';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { exportCsv } from '@app/_helpers';
import { Token } from '@app/_models';
@Component({
selector: 'app-tokens',
@ -17,7 +18,8 @@ export class TokensComponent implements OnInit {
columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
tokens: Array<any>;
tokens: Array<Token>;
token: Token;
constructor(
private tokenService: TokenService,
@ -40,8 +42,8 @@ export class TokensComponent implements OnInit {
this.dataSource.filter = value.trim().toLocaleLowerCase();
}
async viewToken(token): Promise<void> {
await this.router.navigateByUrl(`/tokens/${token.symbol}`);
viewToken(token): void {
this.token = token;
}
downloadCsv(): void {