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; address: string;
supply: string; supply: string;
decimals: string; decimals: string;
reserves: { reserves?: {
'0xa686005CE37Dce7738436256982C3903f2E4ea8E'?: { '0xa686005CE37Dce7738436256982C3903f2E4ea8E'?: {
weight: string; weight: string;
balance: string; balance: string;

View File

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

View File

@ -10,20 +10,20 @@ import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatRippleModule } from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
import {SharedModule} from '@app/shared/shared.module'; import { SharedModule } from '@app/shared/shared.module';
@NgModule({ @NgModule({
declarations: [AuthComponent, PasswordToggleDirective], declarations: [AuthComponent, PasswordToggleDirective],
imports: [ imports: [
CommonModule, CommonModule,
AuthRoutingModule, AuthRoutingModule,
ReactiveFormsModule, ReactiveFormsModule,
MatCardModule, MatCardModule,
MatSelectModule, MatSelectModule,
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatRippleModule, MatRippleModule,
SharedModule, SharedModule,
], ],
}) })
export class AuthModule {} export class AuthModule {}

View File

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

View File

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

View File

@ -24,6 +24,9 @@
</div> </div>
</mat-card-title> </mat-card-title>
<div class="card-body"> <div class="card-body">
<app-token-details [token]="token" (closeWindow)="token = $event"></app-token-details>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> Filter </mat-label> <mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter"> <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
@ -48,7 +51,7 @@
<ng-container matColumnDef="supply"> <ng-container matColumnDef="supply">
<mat-header-cell *matHeaderCellDef mat-sort-header> Supply </mat-header-cell> <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> </ng-container>
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row> <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 { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { exportCsv } from '@app/_helpers'; import { exportCsv } from '@app/_helpers';
import { Token } from '@app/_models';
@Component({ @Component({
selector: 'app-tokens', selector: 'app-tokens',
@ -17,7 +18,8 @@ export class TokensComponent implements OnInit {
columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply']; columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply'];
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
tokens: Array<any>; tokens: Array<Token>;
token: Token;
constructor( constructor(
private tokenService: TokenService, private tokenService: TokenService,
@ -40,8 +42,8 @@ export class TokensComponent implements OnInit {
this.dataSource.filter = value.trim().toLocaleLowerCase(); this.dataSource.filter = value.trim().toLocaleLowerCase();
} }
async viewToken(token): Promise<void> { viewToken(token): void {
await this.router.navigateByUrl(`/tokens/${token.symbol}`); this.token = token;
} }
downloadCsv(): void { downloadCsv(): void {