Added placeholders for tokens components

StratisCore.UI/src/app/wallet/tokens/components/tokens.component.html

@@ -1,3 +1,72 @@
-<p>
-  tokens works!
-</p>
+<section id="GUI" class="light">
+  <section id="content" class="light smartcontracts col-10 mx-auto">
+    <section class="mb-3">
+
+      <div class="col-12">
+        <section class="row d-flex align-items-center">
+
+          <div class="col-9">
+            <div class="card">
+              <div class="card-header">Active address</div>
+              <div class="card-body d-flex align-items-center">
+                <div style="display: flex; flex-direction: row">
+                  <select class="form-control" [(ngModel)]="selectedAddress" [ngModelOptions]="{standalone: true}"
+                    (change)="addressChanged($event.target.value)">
+                    <option *ngFor="let address of addresses">{{address}}</option>
+                  </select>
+                  <button type="button" class="btn btn-outline-secondary d-inline-block ml-2 btn-sm"
+                    data-toggle="tooltip" data-placement="top" title="" data-original-title="Copy to Clipboard"
+                    (click)="clipboardAddressClicked()">
+                    <i class="lnr lnr-file-add"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-3">
+            <button type="button" class="btn btn-outline-stratis-green btn-block" data-toggle="modal"
+              data-target="#modalCalltx" (click)="addToken()">Add Token
+            </button>
+            <button type="button" class="btn btn-stratis-green btn-block" data-toggle="modal"
+              data-target="#modalCreatetx" (click)="issueToken()">Issue Token
+            </button>
+          </div>
+
+        </section>
+      </div>
+    </section>
+
+    <section class="col-12">
+      <div class="card my-4">
+        <div class="card-body">
+          <table class="table">
+            <thead>
+              <tr>
+                <th scope="col">Ticker</th>
+                <th scope="col">Hash</th>
+                <th scope="col">Balance</th>
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+
+              <tr *ngFor="let item of history">
+                <td><span class="badge badge-info">{{item.ticker}}</span></td>
+                <td>{{ item.hash }}</td>
+                <td>
+                  <sc-balance [balance]="item.balance" [coinUnit]="item.ticker"></sc-balance>
+                </td>
+                <td>
+                  <button type="button" class="btn btn-stratis-green btn-block" (click)="send(item)">Issue Token
+                  </button>
+                </td>
+              </tr>
+
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+  </section>

StratisCore.UI/src/app/wallet/tokens/components/tokens.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ReplaySubject } from 'rxjs';
+import { ModalService } from '@shared/services/modal.service';
+import { ClipboardService } from 'ngx-clipboard';
+import { ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { Disposable } from '../models/disposable';
@@ -14,10 +16,18 @@ import { TokensService } from '../services/tokens.service';
 })
 @Mixin([Disposable])
 export class TokensComponent implements OnInit, OnDestroy, Disposable {
+  addressChanged$: Subject<string>;
   disposed$ = new ReplaySubject<boolean>();
+  addresses: string[];
   dispose: () => void;
+  selectedAddress: string;
+  history = [];
 
-  constructor(private tokenService: TokensService) { }
+  constructor(private tokenService: TokensService,
+    private clipboardService: ClipboardService,
+    private genericModalService: ModalService) {
+
+  }
 
   ngOnInit() {
     this.tokenService
@@ -30,4 +40,30 @@ export class TokensComponent implements OnInit, OnDestroy, Disposable {
     this.dispose();
   }
 
+  showApiError(error: string) {
+    this.genericModalService.openModal("Error", error);
+  }
+
+  addressChanged(address: string) {
+    this.addressChanged$.next(address);
+  }
+
+  clipboardAddressClicked() {
+    if (this.selectedAddress && this.clipboardService.copyFromContent(this.selectedAddress)) {
+      console.log(`Copied ${this.selectedAddress} to clipboard`);
+    }
+  }
+
+  addToken() {
+    //this.showModal(Mode.Call);
+  }
+
+  issueToken() {
+    //this.showModal(Mode.Create);
+  }
+
+  send(item: any) {
+
+  }
+
 }

StratisCore.UI/src/app/wallet/tokens/tokens.module.ts

@@ -5,6 +5,8 @@ import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '@shared/shared.module';
 import { ClipboardModule } from 'ngx-clipboard';
 
+import { ScBalanceComponent } from '../smart-contracts/components/balance/balance.component';
+import { ContractTypePipe } from '../smart-contracts/components/contract-type.pipe';
 import { SmartContractsModule } from '../smart-contracts/smart-contracts.module';
 import { TokensComponent } from './components/tokens.component';
 import { Log } from './services/logger.service';
@@ -19,7 +21,9 @@ import { TokensService, TokensServiceBase } from './services/tokens.service';
   providers: [{ provide: TokensServiceBase, useClass: TokensService }, StorageService, Log],
 
   declarations: [
-    TokensComponent
+    TokensComponent,
+    ScBalanceComponent,
+    ContractTypePipe
   ],
 
   entryComponents: [