Refactor token details into a presentation component.

src/app/_models/token.ts

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

src/app/_services/token.service.ts

@@ -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);
     }

src/app/pages/tokens/token-details/token-details.component.html

@@ -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>
-

src/app/pages/tokens/token-details/token-details.component.ts

@@ -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);
   }
 }

src/app/pages/tokens/tokens.component.html

@@ -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>

src/app/pages/tokens/tokens.component.ts

@@ -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 {