Lint code.

# Conflicts:
#	package-lock.json
#	src/app/_helpers/http-getter.ts
#	src/app/_services/auth.service.ts
#	src/app/auth/auth.component.ts
#	src/assets/js/hoba-pgp.js
#	src/styles.scss

src/app/_eth/accountIndex.ts

@@ -1,8 +1,8 @@
+import { environment } from '@src/environments/environment';
 import Web3 from 'web3';
-import { Web3Service } from '@app/_services/web3.service';
 
 const abi: Array<any> = require('@src/assets/js/block-sync/data/AccountsIndex.json');
-const web3: Web3 = Web3Service.getInstance();
+const web3: Web3 = new Web3(environment.web3Provider);
 
 export class AccountIndex {
   contractAddress: string;

src/app/_eth/token-registry.ts

@@ -1,8 +1,8 @@
 import Web3 from 'web3';
-import { Web3Service } from '@app/_services/web3.service';
+import { environment } from '@src/environments/environment';
 
 const abi: Array<any> = require('@src/assets/js/block-sync/data/TokenUniqueSymbolIndex.json');
-const web3: Web3 = Web3Service.getInstance();
+const web3: Web3 = new Web3(environment.web3Provider);
 
 export class TokenRegistry {
   contractAddress: string;

src/app/_helpers/mock-backend.ts

@@ -1151,7 +1151,7 @@ export class MockBackendInterceptor implements HttpInterceptor {
       const queriedCategory: Category = categories.find((category) =>
         category.products.includes(stringFromUrl())
       );
-      return ok(queriedCategory.name || 'other');
+      return ok(queriedCategory.name);
     }
 
     function getAreaNames(): Observable<HttpResponse<any>> {
@@ -1163,7 +1163,7 @@ export class MockBackendInterceptor implements HttpInterceptor {
       const queriedAreaName: AreaName = areaNames.find((areaName) =>
         areaName.locations.includes(stringFromUrl())
       );
-      return ok(queriedAreaName.name || 'other');
+      return ok(queriedAreaName.name);
     }
 
     function getAreaTypes(): Observable<HttpResponse<any>> {
@@ -1175,7 +1175,7 @@ export class MockBackendInterceptor implements HttpInterceptor {
       const queriedAreaType: AreaType = areaTypes.find((areaType) =>
         areaType.area.includes(stringFromUrl())
       );
-      return ok(queriedAreaType.name || 'other');
+      return ok(queriedAreaType.name);
     }
 
     function getAccountTypes(): Observable<HttpResponse<any>> {

src/app/_helpers/schema-validation.ts

@@ -4,7 +4,7 @@ async function personValidation(person: any): Promise<void> {
   const personValidationErrors: any = await validatePerson(person);
 
   if (personValidationErrors) {
-    personValidationErrors.map((error) => console.error(`${error.message}`, person, error));
+    personValidationErrors.map((error) => console.error(`${error.message}`));
   }
 }
 
@@ -12,7 +12,7 @@ async function vcardValidation(vcard: any): Promise<void> {
   const vcardValidationErrors: any = await validateVcard(vcard);
 
   if (vcardValidationErrors) {
-    vcardValidationErrors.map((error) => console.error(`${error.message}`, vcard, error));
+    vcardValidationErrors.map((error) => console.error(`${error.message}`));
   }
 }
 

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/_pgp/pgp-key-store.ts

@@ -6,7 +6,7 @@ const keyring = new openpgp.Keyring();
 interface MutableKeyStore extends KeyStore {
   loadKeyring(): void;
   importKeyPair(publicKey: any, privateKey: any): Promise<void>;
-  importPublicKey(publicKey: any): Promise<void>;
+  importPublicKey(publicKey: any): void;
   importPrivateKey(privateKey: any): Promise<void>;
   getPublicKeys(): Array<any>;
   getTrustedKeys(): Array<any>;
@@ -28,7 +28,7 @@ interface MutableKeyStore extends KeyStore {
   removePublicKeyForId(keyId: string): any;
   removePublicKey(publicKey: any): any;
   clearKeysInKeyring(): void;
-  sign(plainText: string): Promise<any>;
+  sign(plainText: string, passphrase: string): Promise<any>;
 }
 
 class MutablePgpKeyStore implements MutableKeyStore {
@@ -42,8 +42,8 @@ class MutablePgpKeyStore implements MutableKeyStore {
     await keyring.privateKeys.importKey(privateKey);
   }
 
-  async importPublicKey(publicKey: any): Promise<void> {
+  importPublicKey(publicKey: any): void {
-    await keyring.publicKeys.importKey(publicKey);
+    keyring.publicKeys.importKey(publicKey);
   }
 
   async importPrivateKey(privateKey: any): Promise<void> {
@@ -150,11 +150,10 @@ class MutablePgpKeyStore implements MutableKeyStore {
     keyring.clear();
   }
 
-  async sign(plainText): Promise<any> {
+  async sign(plainText: string, passphrase: string): Promise<any> {
     const privateKey = this.getPrivateKey();
     if (!privateKey.isDecrypted()) {
-      const password = window.prompt('password');
+      await privateKey.decrypt(passphrase);
-      await privateKey.decrypt(password);
     }
     const opts = {
       message: openpgp.message.fromText(plainText),

src/app/_services/auth.service.ts

@@ -7,19 +7,14 @@ import { MutableKeyStore, MutablePgpKeyStore } from '@app/_pgp';
 import { ErrorDialogService } from '@app/_services/error-dialog.service';
 import { HttpClient } from '@angular/common/http';
 import { HttpError, rejectBody } from '@app/_helpers/global-error-handler';
-import { Staff } from '@app/_models';
-import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
+  sessionToken: any;
+  privateKey: any;
   mutableKeyStore: MutableKeyStore;
-  trustedUsers: Array<Staff> = [];
-  private trustedUsersList: BehaviorSubject<Array<Staff>> = new BehaviorSubject<Array<Staff>>(
-    this.trustedUsers
-  );
-  trustedUsersSubject: Observable<Array<Staff>> = this.trustedUsersList.asObservable();
 
   constructor(
     private httpClient: HttpClient,
@@ -31,105 +26,140 @@ export class AuthService {
 
   async init(): Promise<void> {
     await this.mutableKeyStore.loadKeyring();
+    // TODO setting these together should be atomic
+    if (sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'))) {
+      this.sessionToken = sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'));
+    }
     if (localStorage.getItem(btoa('CICADA_PRIVATE_KEY'))) {
+      this.privateKey = localStorage.getItem(btoa('CICADA_PRIVATE_KEY'));
       await this.mutableKeyStore.importPrivateKey(localStorage.getItem(btoa('CICADA_PRIVATE_KEY')));
     }
   }
 
-  getSessionToken(): string {
-    return sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'));
-  }
-
-  setSessionToken(token): void {
-    sessionStorage.setItem(btoa('CICADA_SESSION_TOKEN'), token);
-  }
-
   setState(s): void {
     document.getElementById('state').innerHTML = s;
   }
 
   getWithToken(): Promise<boolean> {
-    const headers = {
+    return new Promise((resolve, reject) => {
-      Authorization: 'Bearer ' + this.getSessionToken,
+      const headers = {
-      'Content-Type': 'application/json;charset=utf-8',
+        Authorization: 'Bearer ' + this.sessionToken,
-      'x-cic-automerge': 'none',
+        'Content-Type': 'application/json;charset=utf-8',
-    };
+        'x-cic-automerge': 'none',
-    const options = {
+      };
-      headers,
+      const options = {
-    };
+        headers,
-    return fetch(environment.cicMetaUrl, options).then((response) => {
+      };
-      if (!response.ok) {
+      fetch(environment.cicMetaUrl, options).then((response) => {
-        this.loggingService.sendErrorLevelMessage('failed to get with auth token.', this, {
+        if (response.status === 401) {
-          error: '',
+          return reject(rejectBody(response));
-        });
+        }
-
+        return resolve(true);
-        return false;
+      });
-      }
-      return true;
     });
   }
 
   // TODO rename to send signed challenge and set session. Also separate these responsibilities
-  sendSignedChallenge(hobaResponseEncoded: any): Promise<any> {
+  sendResponse(hobaResponseEncoded: any): Promise<boolean> {
-    const headers = {
+    return new Promise((resolve, reject) => {
-      Authorization: 'HOBA ' + hobaResponseEncoded,
+      const headers = {
-      'Content-Type': 'application/json;charset=utf-8',
+        Authorization: 'HOBA ' + hobaResponseEncoded,
-      'x-cic-automerge': 'none',
+        'Content-Type': 'application/json;charset=utf-8',
-    };
+        'x-cic-automerge': 'none',
-    const options = {
+      };
-      headers,
+      const options = {
-    };
+        headers,
-    return fetch(environment.cicMetaUrl, options);
+      };
-  }
+      fetch(environment.cicMetaUrl, options).then((response) => {
-
+        if (response.status === 401) {
-  getChallenge(): Promise<any> {
+          return reject(rejectBody(response));
-    return fetch(environment.cicMetaUrl).then((response) => {
+        }
-      if (response.status === 401) {
+        this.sessionToken = response.headers.get('Token');
-        const authHeader: string = response.headers.get('WWW-Authenticate');
+        sessionStorage.setItem(btoa('CICADA_SESSION_TOKEN'), this.sessionToken);
-        return hobaParseChallengeHeader(authHeader);
+        this.setState('Click button to log in');
-      }
+        return resolve(true);
+      });
     });
   }
 
-  async login(): Promise<boolean> {
+  getChallenge(): Promise<any> {
-    if (this.getSessionToken()) {
+    return new Promise((resolve, reject) => {
-      sessionStorage.removeItem(btoa('CICADA_SESSION_TOKEN'));
+      fetch(environment.cicMetaUrl).then(async (response) => {
-    } else {
-      const o = await this.getChallenge();
-
-      const r = await signChallenge(
-        o.challenge,
-        o.realm,
-        environment.cicMetaUrl,
-        this.mutableKeyStore
-      );
-
-      const tokenResponse = await this.sendSignedChallenge(r).then((response) => {
-        const token = response.headers.get('Token');
-        if (token) {
-          return token;
-        }
         if (response.status === 401) {
-          throw new HttpError('You are not authorized to use this system', response.status);
+          const authHeader: string = response.headers.get('WWW-Authenticate');
+          return resolve(hobaParseChallengeHeader(authHeader));
         }
         if (!response.ok) {
-          throw new HttpError('Unknown error from authentication server', response.status);
+          return reject(rejectBody(response));
         }
       });
-
+    });
-      if (tokenResponse) {
-        this.setSessionToken(tokenResponse);
-        this.setState('Click button to log in');
-        return true;
-      }
-      return false;
-    }
   }
 
-  loginView(): void {
+  async passwordLogin(password: string): Promise<boolean> {
-    document.getElementById('one').style.display = 'none';
+    try {
-    document.getElementById('two').style.display = 'block';
+      const o = await this.getChallenge();
-    this.setState('Click button to log in with PGP key ' + this.mutableKeyStore.getPrivateKeyId());
+      await this.loginResponse(o, password);
+      return true;
+    } catch (error) {
+      this.loggingService.sendErrorLevelMessage(
+        `Login challenge failed: Error ${error.status} - ${error.statusText}`,
+        this,
+        { error }
+      );
+    }
+    return false;
+  }
+
+  async login(): Promise<boolean> {
+    if (this.sessionToken !== undefined) {
+      try {
+        this.getWithToken();
+        return true;
+      } catch (error) {
+        this.loggingService.sendErrorLevelMessage(
+          `Login token failed: Error ${error.status} - ${error.statusText}`,
+          this,
+          { error }
+        );
+      }
+    }
+    return false;
+  }
+
+  async loginResponse(o: { challenge: string; realm: any }): Promise<any> {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const r = await signChallenge(
+          o.challenge,
+          o.realm,
+          environment.cicMetaUrl,
+          this.mutableKeyStore
+        );
+        const response: boolean = await this.sendResponse(r);
+        resolve(response);
+      } catch (error) {
+        if (error instanceof HttpError) {
+          if (error.status === 403) {
+            this.errorDialogService.openDialog({
+              message: 'You are not authorized to use this system',
+            });
+          } else if (error.status === 401) {
+            this.errorDialogService.openDialog({
+              message:
+                'Unable to authenticate with the service. ' +
+                'Please speak with the staff at Grassroots ' +
+                'Economics for requesting access ' +
+                'staff@grassrootseconomics.net.',
+            });
+          }
+        } else {
+          // TODO define this error
+          this.errorDialogService.openDialog({ message: 'Incorrect key passphrase.' });
+        }
+        resolve(false);
+      }
+    });
   }
 
   async setKey(privateKeyArmored): Promise<boolean> {
@@ -138,11 +168,12 @@ export class AuthService {
       if (!isValidKeyCheck) {
         throw Error('The private key is invalid');
       }
-      // TODO leaving this out for now.
+      const isEncryptedKeyCheck = await this.mutableKeyStore.isEncryptedPrivateKey(
-      // const isEncryptedKeyCheck = await this.mutableKeyStore.isEncryptedPrivateKey(privateKeyArmored);
+        privateKeyArmored
-      // if (!isEncryptedKeyCheck) {
+      );
-      //   throw Error('The private key does not have a password!');
+      if (!isEncryptedKeyCheck) {
-      // }
+        throw Error('The private key does not have a password!');
+      }
       const key = await this.mutableKeyStore.importPrivateKey(privateKeyArmored);
       localStorage.setItem(btoa('CICADA_PRIVATE_KEY'), privateKeyArmored);
     } catch (err) {
@@ -156,32 +187,20 @@ export class AuthService {
       });
       return false;
     }
-    this.loginView();
     return true;
   }
 
   logout(): void {
     sessionStorage.removeItem(btoa('CICADA_SESSION_TOKEN'));
     localStorage.removeItem(btoa('CICADA_PRIVATE_KEY'));
+    this.sessionToken = undefined;
     window.location.reload();
   }
 
-  addTrustedUser(user: Staff): void {
+  getTrustedUsers(): any {
-    const savedIndex = this.trustedUsers.findIndex((staff) => staff.userid === user.userid);
+    const trustedUsers: Array<any> = [];
-    if (savedIndex === 0) {
+    this.mutableKeyStore.getPublicKeys().forEach((key) => trustedUsers.push(key.users[0].userId));
-      return;
+    return trustedUsers;
-    }
-    if (savedIndex > 0) {
-      this.trustedUsers.splice(savedIndex, 1);
-    }
-    this.trustedUsers.unshift(user);
-    this.trustedUsersList.next(this.trustedUsers);
-  }
-
-  getTrustedUsers(): void {
-    this.mutableKeyStore.getPublicKeys().forEach((key) => {
-      this.addTrustedUser(key.users[0].userId);
-    });
   }
 
   async getPublicKeys(): Promise<any> {
@@ -199,8 +218,4 @@ export class AuthService {
   getPrivateKey(): any {
     return this.mutableKeyStore.getPrivateKey();
   }
-
-  getPrivateKeyInfo(): any {
-    return this.getPrivateKey().users[0].userId;
-  }
 }

src/app/_services/block-sync.service.ts

@@ -6,7 +6,6 @@ import { TransactionService } from '@app/_services/transaction.service';
 import { environment } from '@src/environments/environment';
 import { LoggingService } from '@app/_services/logging.service';
 import { RegistryService } from '@app/_services/registry.service';
-import { Web3Service } from '@app/_services/web3.service';
 
 @Injectable({
   providedIn: 'root',
@@ -17,33 +16,31 @@ export class BlockSyncService {
 
   constructor(
     private transactionService: TransactionService,
-    private loggingService: LoggingService
+    private loggingService: LoggingService,
+    private registryService: RegistryService
   ) {}
 
-  async init(): Promise<void> {
+  blockSync(address: string = null, offset: number = 0, limit: number = 100): void {
-    await this.transactionService.init();
-  }
-
-  async blockSync(address: string = null, offset: number = 0, limit: number = 100): Promise<void> {
     this.transactionService.resetTransactionsList();
     const settings: Settings = new Settings(this.scan);
     const readyStateElements: { network: number } = { network: 2 };
     settings.w3.provider = environment.web3Provider;
-    settings.w3.engine = Web3Service.getInstance();
+    settings.w3.engine = this.registryService.getWeb3();
-    settings.registry = await RegistryService.getRegistry();
+    settings.registry = this.registryService.getRegistry();
     settings.txHelper = new TransactionHelper(settings.w3.engine, settings.registry);
 
     settings.txHelper.ontransfer = async (transaction: any): Promise<void> => {
-      window.dispatchEvent(this.newEvent(transaction, 'cic_transfer'));
+      window.dispatchEvent(this.newTransferEvent(transaction));
     };
     settings.txHelper.onconversion = async (transaction: any): Promise<any> => {
-      window.dispatchEvent(this.newEvent(transaction, 'cic_convert'));
+      window.dispatchEvent(this.newConversionEvent(transaction));
     };
-    // settings.registry.onload = (addressReturned: string): void => {
+    settings.registry.onload = (addressReturned: number): void => {
-    //   this.loggingService.sendInfoLevelMessage(`Loaded network contracts ${addressReturned}`);
+      this.loggingService.sendInfoLevelMessage(`Loaded network contracts ${addressReturned}`);
-    //   this.readyStateProcessor(settings, readyStateElements.network, address, offset, limit);
+      this.readyStateProcessor(settings, readyStateElements.network, address, offset, limit);
-    // };
+    };
-    this.readyStateProcessor(settings, readyStateElements.network, address, offset, limit);
+
+    settings.registry.load();
   }
 
   readyStateProcessor(
@@ -81,8 +78,16 @@ export class BlockSyncService {
     }
   }
 
-  newEvent(tx: any, eventType: string): any {
+  newTransferEvent(tx: any): any {
-    return new CustomEvent(eventType, {
+    return new CustomEvent('cic_transfer', {
+      detail: {
+        tx,
+      },
+    });
+  }
+
+  newConversionEvent(tx: any): any {
+    return new CustomEvent('cic_convert', {
       detail: {
         tx,
       },

src/app/_services/index.ts

@@ -6,4 +6,3 @@ export * from '@app/_services/block-sync.service';
 export * from '@app/_services/location.service';
 export * from '@app/_services/logging.service';
 export * from '@app/_services/error-dialog.service';
-export * from '@app/_services/web3.service';

src/app/_services/registry.service.ts

@@ -1,30 +1,33 @@
 import { Injectable } from '@angular/core';
+import Web3 from 'web3';
 import { environment } from '@src/environments/environment';
 import { CICRegistry, FileGetter } from 'cic-client';
 import { HttpGetter } from '@app/_helpers';
-import { Web3Service } from '@app/_services/web3.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class RegistryService {
-  static fileGetter: FileGetter = new HttpGetter();
+  web3: Web3 = new Web3(environment.web3Provider);
-  private static registry: CICRegistry;
+  fileGetter: FileGetter = new HttpGetter();
+  registry: CICRegistry = new CICRegistry(
+    this.web3,
+    environment.registryAddress,
+    'Registry',
+    this.fileGetter,
+    ['../../assets/js/block-sync/data']
+  );
 
-  constructor() {}
+  constructor() {
+    this.registry.declaratorHelper.addTrust(environment.trustedDeclaratorAddress);
+    this.registry.load();
+  }
 
-  public static async getRegistry(): Promise<CICRegistry> {
+  getRegistry(): any {
-    if (!RegistryService.registry) {
+    return this.registry;
-      RegistryService.registry = new CICRegistry(
+  }
-        Web3Service.getInstance(),
+
-        environment.registryAddress,
+  getWeb3(): any {
-        'Registry',
+    return this.web3;
-        RegistryService.fileGetter,
-        ['../../assets/js/block-sync/data']
-      );
-      RegistryService.registry.declaratorHelper.addTrust(environment.trustedDeclaratorAddress);
-      await RegistryService.registry.load();
-    }
-    return RegistryService.registry;
   }
 }

src/app/_services/token.service.ts

@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
+import { environment } from '@src/environments/environment';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { CICRegistry } from 'cic-client';
 import { TokenRegistry } from '@app/_eth';
 import { HttpClient } from '@angular/common/http';
 import { RegistryService } from '@app/_services/registry.service';
-import { Token } from '@app/_models';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -12,67 +12,29 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs';
 export class TokenService {
   registry: CICRegistry;
   tokenRegistry: TokenRegistry;
-  onload: (status: boolean) => void;
+  LoadEvent: EventEmitter<number> = new EventEmitter<number>();
-  tokens: Array<Token> = [];
-  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(
-    this.tokens
-  );
-  tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
 
-  constructor(private httpClient: HttpClient) {}
+  constructor(private httpClient: HttpClient, private registryService: RegistryService) {
-
+    this.registry = registryService.getRegistry();
-  async init(): Promise<void> {
+    this.registry.load();
-    this.registry = await RegistryService.getRegistry();
     this.registry.onload = async (address: string): Promise<void> => {
       this.tokenRegistry = new TokenRegistry(
         await this.registry.getContractAddressByName('TokenRegistry')
       );
-      this.onload(this.tokenRegistry !== undefined);
+      this.LoadEvent.next(Date.now());
     };
   }
 
-  addToken(token: Token): void {
+  async getTokens(): Promise<Array<Promise<string>>> {
-    const savedIndex = this.tokens.findIndex((tk) => tk.address === token.address);
-    if (savedIndex === 0) {
-      return;
-    }
-    if (savedIndex > 0) {
-      this.tokens.splice(savedIndex, 1);
-    }
-    this.tokens.unshift(token);
-    this.tokensList.next(this.tokens);
-  }
-
-  async getTokens(): Promise<void> {
     const count: number = await this.tokenRegistry.totalTokens();
-    for (let i = 0; i < count; i++) {
+    return Array.from({ length: count }, async (v, i) => await this.tokenRegistry.entry(i));
-      const token: Token = await this.getTokenByAddress(await this.tokenRegistry.entry(i));
-      this.addToken(token);
-    }
   }
 
-  async getTokenByAddress(address: string): Promise<Token> {
+  getTokenBySymbol(symbol: string): Observable<any> {
-    const token: any = {};
+    return this.httpClient.get(`${environment.cicCacheUrl}/tokens/${symbol}`);
-    const tokenContract = await this.registry.addToken(address);
-    token.address = address;
-    token.name = await tokenContract.methods.name().call();
-    token.symbol = await tokenContract.methods.symbol().call();
-    token.supply = await tokenContract.methods.totalSupply().call();
-    token.decimals = await tokenContract.methods.decimals().call();
-    return token;
   }
 
-  async getTokenBySymbol(symbol: string): Promise<Observable<Token>> {
+  async getTokenBalance(address: string): Promise<number> {
-    const tokenSubject: Subject<Token> = new Subject<Token>();
-    await this.getTokens();
-    this.tokensSubject.subscribe((tokens) => {
-      const queriedToken = tokens.find((token) => token.symbol === symbol);
-      tokenSubject.next(queriedToken);
-    });
-    return tokenSubject.asObservable();
-  }
-
-  async getTokenBalance(address: string): Promise<(address: string) => Promise<number>> {
     const sarafuToken = await this.registry.addToken(await this.tokenRegistry.entry(0));
     return await sarafuToken.methods.balanceOf(address).call();
   }

src/app/_services/transaction.service.ts

@@ -17,7 +17,6 @@ import { HttpClient } from '@angular/common/http';
 import { CICRegistry } from 'cic-client';
 import { RegistryService } from '@app/_services/registry.service';
 import Web3 from 'web3';
-import { Web3Service } from '@app/_services/web3.service';
 const vCard = require('vcard-parser');
 
 @Injectable({
@@ -35,15 +34,12 @@ export class TransactionService {
     private httpClient: HttpClient,
     private authService: AuthService,
     private userService: UserService,
-    private loggingService: LoggingService
+    private loggingService: LoggingService,
+    private registryService: RegistryService
   ) {
-    this.web3 = Web3Service.getInstance();
+    this.web3 = this.registryService.getWeb3();
-  }
+    this.registry = registryService.getRegistry();
-
+    this.registry.load();
-  async init(): Promise<void> {
-    await this.authService.init();
-    await this.userService.init();
-    this.registry = await RegistryService.getRegistry();
   }
 
   getAllTransactions(offset: number, limit: number): Observable<any> {
@@ -51,7 +47,7 @@ export class TransactionService {
   }
 
   getAddressTransactions(address: string, offset: number, limit: number): Observable<any> {
-    return this.httpClient.get(`${environment.cicCacheUrl}/tx/user/${address}/${offset}/${limit}`);
+    return this.httpClient.get(`${environment.cicCacheUrl}/tx/${address}/${offset}/${limit}`);
   }
 
   async setTransaction(transaction, cacheSize: number): Promise<void> {
@@ -66,11 +62,10 @@ export class TransactionService {
         .pipe(first())
         .subscribe(
           (res) => {
-            transaction.sender = this.getAccountInfo(res, cacheSize);
+            transaction.sender = this.getAccountInfo(res.body);
           },
           (error) => {
             transaction.sender = defaultAccount;
-            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
       this.userService
@@ -78,11 +73,10 @@ export class TransactionService {
         .pipe(first())
         .subscribe(
           (res) => {
-            transaction.recipient = this.getAccountInfo(res, cacheSize);
+            transaction.recipient = this.getAccountInfo(res.body);
           },
           (error) => {
             transaction.recipient = defaultAccount;
-            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
     } finally {
@@ -103,11 +97,10 @@ export class TransactionService {
         .pipe(first())
         .subscribe(
           (res) => {
-            conversion.sender = conversion.recipient = this.getAccountInfo(res);
+            conversion.sender = conversion.recipient = this.getAccountInfo(res.body);
           },
           (error) => {
             conversion.sender = conversion.recipient = defaultAccount;
-            this.userService.addAccount(defaultAccount, cacheSize);
           }
         );
     } finally {
@@ -116,16 +109,9 @@ export class TransactionService {
   }
 
   addTransaction(transaction, cacheSize: number): void {
-    const savedIndex = this.transactions.findIndex((tx) => tx.tx.txHash === transaction.tx.txHash);
-    if (savedIndex === 0) {
-      return;
-    }
-    if (savedIndex > 0) {
-      this.transactions.splice(savedIndex, 1);
-    }
     this.transactions.unshift(transaction);
     if (this.transactions.length > cacheSize) {
-      this.transactions.length = Math.min(this.transactions.length, cacheSize);
+      this.transactions.length = cacheSize;
     }
     this.transactionList.next(this.transactions);
   }
@@ -135,10 +121,9 @@ export class TransactionService {
     this.transactionList.next(this.transactions);
   }
 
-  getAccountInfo(account: string, cacheSize: number = 100): any {
+  getAccountInfo(account: string): any {
     const accountInfo = Envelope.fromJSON(JSON.stringify(account)).unwrap().m.data;
     accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
-    this.userService.addAccount(accountInfo, cacheSize);
     return accountInfo;
   }
 
@@ -148,43 +133,41 @@ export class TransactionService {
     recipientAddress: string,
     value: number
   ): Promise<any> {
-    this.registry.onload = async (addressReturned: string): Promise<void> => {
+    const transferAuthAddress = await this.registry.getContractAddressByName(
-      const transferAuthAddress = await this.registry.getContractAddressByName(
+      'TransferAuthorization'
-        'TransferAuthorization'
+    );
-      );
+    const hashFunction = new Keccak(256);
-      const hashFunction = new Keccak(256);
+    hashFunction.update('createRequest(address,address,address,uint256)');
-      hashFunction.update('createRequest(address,address,address,uint256)');
+    const hash = hashFunction.digest();
-      const hash = hashFunction.digest();
+    const methodSignature = hash.toString('hex').substring(0, 8);
-      const methodSignature = hash.toString('hex').substring(0, 8);
+    const abiCoder = new utils.AbiCoder();
-      const abiCoder = new utils.AbiCoder();
+    const abi = await abiCoder.encode(
-      const abi = await abiCoder.encode(
+      ['address', 'address', 'address', 'uint256'],
-        ['address', 'address', 'address', 'uint256'],
+      [senderAddress, recipientAddress, tokenAddress, value]
-        [senderAddress, recipientAddress, tokenAddress, value]
+    );
-      );
+    const data = fromHex(methodSignature + strip0x(abi));
-      const data = fromHex(methodSignature + strip0x(abi));
+    const tx = new Tx(environment.bloxbergChainId);
-      const tx = new Tx(environment.bloxbergChainId);
+    tx.nonce = await this.web3.eth.getTransactionCount(senderAddress);
-      tx.nonce = await this.web3.eth.getTransactionCount(senderAddress);
+    tx.gasPrice = Number(await this.web3.eth.getGasPrice());
-      tx.gasPrice = Number(await this.web3.eth.getGasPrice());
+    tx.gasLimit = 8000000;
-      tx.gasLimit = 8000000;
+    tx.to = fromHex(strip0x(transferAuthAddress));
-      tx.to = fromHex(strip0x(transferAuthAddress));
+    tx.value = toValue(value);
-      tx.value = toValue(value);
+    tx.data = data;
-      tx.data = data;
+    const txMsg = tx.message();
-      const txMsg = tx.message();
+    const privateKey = this.authService.mutableKeyStore.getPrivateKey();
-      const privateKey = this.authService.mutableKeyStore.getPrivateKey();
+    if (!privateKey.isDecrypted()) {
-      if (!privateKey.isDecrypted()) {
+      const password = window.prompt('password');
-        const password = window.prompt('password');
+      await privateKey.decrypt(password);
-        await privateKey.decrypt(password);
+    }
-      }
+    const signatureObject = secp256k1.ecdsaSign(txMsg, privateKey.keyPacket.privateParams.d);
-      const signatureObject = secp256k1.ecdsaSign(txMsg, privateKey.keyPacket.privateParams.d);
+    const r = signatureObject.signature.slice(0, 32);
-      const r = signatureObject.signature.slice(0, 32);
+    const s = signatureObject.signature.slice(32);
-      const s = signatureObject.signature.slice(32);
+    const v = signatureObject.recid;
-      const v = signatureObject.recid;
+    tx.setSignature(r, s, v);
-      tx.setSignature(r, s, v);
+    const txWire = add0x(toHex(tx.serializeRLP()));
-      const txWire = add0x(toHex(tx.serializeRLP()));
+    const result = await this.web3.eth.sendSignedTransaction(txWire);
-      const result = await this.web3.eth.sendSignedTransaction(txWire);
+    this.loggingService.sendInfoLevelMessage(`Result: ${result}`);
-      this.loggingService.sendInfoLevelMessage(`Result: ${result}`);
+    const transaction = await this.web3.eth.getTransaction(result.transactionHash);
-      const transaction = await this.web3.eth.getTransaction(result.transactionHash);
+    this.loggingService.sendInfoLevelMessage(`Transaction: ${transaction}`);
-      this.loggingService.sendInfoLevelMessage(`Transaction: ${transaction}`);
-    };
   }
 }

src/app/_services/user.service.ts

@@ -39,20 +39,20 @@ export class UserService {
     private httpClient: HttpClient,
     private loggingService: LoggingService,
     private tokenService: TokenService,
+    private registryService: RegistryService,
     private authService: AuthService
-  ) {}
+  ) {
-
+    this.authService.init().then(() => {
-  async init(): Promise<void> {
+      this.keystore = authService.mutableKeyStore;
-    await this.authService.init();
+      this.signer = new PGPSigner(this.keystore);
-    await this.tokenService.init();
+    });
-    this.keystore = this.authService.mutableKeyStore;
+    this.registry = registryService.getRegistry();
-    this.signer = new PGPSigner(this.keystore);
+    this.registry.load();
-    this.registry = await RegistryService.getRegistry();
   }
 
   resetPin(phone: string): Observable<any> {
     const params: HttpParams = new HttpParams().set('phoneNumber', phone);
-    return this.httpClient.put(`${environment.cicUssdUrl}/pin`, { params });
+    return this.httpClient.get(`${environment.cicUssdUrl}/pin`, { params });
   }
 
   getAccountStatus(phone: string): Observable<any> {
@@ -183,7 +183,9 @@ export class UserService {
       'AccountRegistry'
     );
     const accountIndexQuery = new AccountIndex(accountIndexAddress);
-    const accountAddresses: Array<string> = await accountIndexQuery.last(limit);
+    const accountAddresses: Array<string> = await accountIndexQuery.last(
+      await accountIndexQuery.totalAccounts()
+    );
     this.loggingService.sendInfoLevelMessage(accountAddresses);
     for (const accountAddress of accountAddresses.slice(offset, offset + limit)) {
       await this.getAccountByAddress(accountAddress, limit);
@@ -201,14 +203,16 @@ export class UserService {
         const account: Syncable = Envelope.fromJSON(JSON.stringify(res)).unwrap();
         const accountInfo = account.m.data;
         await personValidation(accountInfo);
-        this.tokenService.onload = async (status: boolean): Promise<void> => {
+        accountInfo.balance = await this.tokenService.getTokenBalance(
-          accountInfo.balance = await this.tokenService.getTokenBalance(
+          accountInfo.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0]
-            accountInfo.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0]
+        );
-          );
-        };
         accountInfo.vcard = vCard.parse(atob(accountInfo.vcard));
         await vcardValidation(accountInfo.vcard);
-        this.addAccount(accountInfo, limit);
+        this.accounts.unshift(accountInfo);
+        if (this.accounts.length > limit) {
+          this.accounts.length = limit;
+        }
+        this.accountsList.next(this.accounts);
         accountSubject.next(accountInfo);
       });
     return accountSubject.asObservable();
@@ -260,23 +264,4 @@ export class UserService {
   getGenders(): Observable<any> {
     return this.httpClient.get(`${environment.cicMetaUrl}/genders`);
   }
-
-  addAccount(account: AccountDetails, cacheSize: number): void {
-    const savedIndex = this.accounts.findIndex(
-      (acc) =>
-        acc.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0] ===
-        account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0]
-    );
-    if (savedIndex === 0) {
-      return;
-    }
-    if (savedIndex > 0) {
-      this.accounts.splice(savedIndex, 1);
-    }
-    this.accounts.unshift(account);
-    if (this.accounts.length > cacheSize) {
-      this.accounts.length = Math.min(this.accounts.length, cacheSize);
-    }
-    this.accountsList.next(this.accounts);
-  }
 }

src/app/_services/web3.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { Web3Service } from './web3.service';
-
-describe('Web3Service', () => {
-  let service: Web3Service;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(Web3Service);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/_services/web3.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import Web3 from 'web3';
-import { environment } from '@src/environments/environment';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class Web3Service {
-  private static web3: Web3;
-
-  constructor() {}
-
-  public static getInstance(): Web3 {
-    if (!Web3Service.web3) {
-      Web3Service.web3 = new Web3(environment.web3Provider);
-    }
-    return Web3Service.web3;
-  }
-}

src/app/app.component.html

@@ -1 +1,2 @@
+<app-network-status></app-network-status>
 <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

src/app/app.component.ts

@@ -27,23 +27,28 @@ export class AppComponent implements OnInit {
     private errorDialogService: ErrorDialogService,
     private swUpdate: SwUpdate
   ) {
+    (async () => {
+      try {
+        await this.authService.init();
+        // this.authService.getPublicKeys()
+        //   .pipe(catchError(async (error) => {
+        //     this.loggingService.sendErrorLevelMessage('Unable to load trusted public keys.', this, {error});
+        //     this.errorDialogService.openDialog({message: 'Trusted keys endpoint can\'t be reached. Please try again later.'});
+        // })).subscribe(this.authService.mutableKeyStore.importPublicKey);
+        const publicKeys = await this.authService.getPublicKeys();
+        await this.authService.mutableKeyStore.importPublicKey(publicKeys);
+      } catch (error) {
+        this.errorDialogService.openDialog({
+          message: 'Trusted keys endpoint cannot be reached. Please try again later.',
+        });
+        // TODO do something to halt user progress...show a sad cicada page 🦗?
+      }
+    })();
     this.mediaQuery.addEventListener('change', this.onResize);
     this.onResize(this.mediaQuery);
   }
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.authService.init();
-    await this.transactionService.init();
-    try {
-      const publicKeys = await this.authService.getPublicKeys();
-      await this.authService.mutableKeyStore.importPublicKey(publicKeys);
-      this.authService.getTrustedUsers();
-    } catch (error) {
-      this.errorDialogService.openDialog({
-        message: 'Trusted keys endpoint cannot be reached. Please try again later.',
-      });
-      // TODO do something to halt user progress...show a sad cicada page 🦗?
-    }
     if (!this.swUpdate.isEnabled) {
       this.swUpdate.available.subscribe(() => {
         if (confirm('New Version available. Load New Version?')) {

src/app/auth/auth.component.html

@@ -1,14 +1,13 @@
-<app-network-status></app-network-status>
 <div class="container">
   <div class="row justify-content-center mt-5 mb-5">
     <div class="col-lg-6 col-md-8 col-sm-10">
       <div class="card">
-        <mat-card-title class="card-header pt-4 pb-4 text-center background-dark">
+        <mat-card-title class="card-header pt-4 pb-4 text-center bg-dark">
           <a routerLink="/">
             <h1 class="text-white">CICADA</h1>
           </a>
         </mat-card-title>
-        <div id="one" style="display: block" class="card-body p-4">
+        <div  id="one" style="display: block" class="card-body p-4 align-items-center">
 
           <div class="text-center w-75 m-auto">
             <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
@@ -20,19 +19,56 @@
               <mat-label>Private Key</mat-label>
               <textarea matInput style="height: 30rem" formControlName="key" placeholder="Enter your private key..."
                         [errorStateMatcher]="matcher"></textarea>
-              <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
+              <div *ngIf="keyFormSubmitted && keyFormStub.key.errors" class="invalid-feedback">
                 <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
               </div>
             </mat-form-field>
 
-            <button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">
+            <button mat-raised-button matRipple color="primary" type="submit" [disabled]="keyFormLoading">
-              <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+              <span *ngIf="keyFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
               Add Key
             </button>
 
           </form>
         </div>
-        <div id="two" style="display: none" class="card-body p-4 align-items-center">
+        <div  id="two" style="display: none" class="card-body p-4 align-items-center">
+
+          <div class="text-center w-75 m-auto">
+            <h4 id="passwordState" class="text-dark-50 text-center font-weight-bold"></h4>
+          </div>
+
+          <div class="center-items">
+            <form [formGroup]="passwordForm" (ngSubmit)="onPasswordInput()">
+
+              <mat-form-field appearance="outline">
+                <mat-label>Password</mat-label>
+                <input matInput type="password" formControlName="password" placeholder="Enter your private key password..."
+                          [errorStateMatcher]="matcher">
+                <div *ngIf="passwordForm && passwordFormStub.password.errors" class="invalid-feedback">
+                  <mat-error *ngIf="passwordFormStub.password.errors.required">Private Key password is required.</mat-error>
+                </div>
+              </mat-form-field>
+
+              <button id="passwordLoginButton" mat-raised-button matRipple color="primary" type="submit" class="ml-3" [disabled]="passwordFormLoading">
+                <span *ngIf="passwordFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
+                Login
+              </button>
+
+            </form>
+          </div>
+
+          <div class="row mt-3">
+            <div class="col-12 text-center">
+              <p class="text-muted">Change private key?
+                <a (click)="keyInput()" class="text-muted ml-1">
+                  <b>Enter private key</b>
+                </a>
+              </p>
+            </div> <!-- end col-->
+          </div>
+          <!-- end row -->
+        </div>
+        <div  id="three" style="display: none" class="card-body p-4 align-items-center">
 
           <div class="text-center w-75 m-auto">
             <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>
@@ -41,7 +77,11 @@
 
           <div class="row mt-3">
             <div class="col-12 text-center">
-              <p class="text-muted">Change private key? <a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a></p>
+              <p class="text-muted">Change private key?
+                <a (click)="keyInput()" class="text-muted ml-1">
+                  <b>Enter private key</b>
+                </a>
+              </p>
             </div> <!-- end col-->
           </div>
           <!-- end row -->

src/app/auth/auth.component.ts

@@ -1,9 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CustomErrorStateMatcher } from '@app/_helpers';
 import { AuthService } from '@app/_services';
-import { ErrorDialogService } from '@app/_services/error-dialog.service';
-import { LoggingService } from '@app/_services/logging.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -14,68 +12,126 @@ import { Router } from '@angular/router';
 })
 export class AuthComponent implements OnInit {
   keyForm: FormGroup;
-  submitted: boolean = false;
-  loading: boolean = false;
   matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
+  keyFormSubmitted: boolean = false;
+  keyFormLoading: boolean = false;
+  passwordForm: FormGroup;
+  passwordFormSubmitted: boolean = false;
+  passwordFormLoading: boolean = false;
 
   constructor(
     private authService: AuthService,
     private formBuilder: FormBuilder,
     private router: Router,
-    private errorDialogService: ErrorDialogService
+    private cdr: ChangeDetectorRef
   ) {}
 
   async ngOnInit(): Promise<void> {
     this.keyForm = this.formBuilder.group({
       key: ['', Validators.required],
     });
-    if (this.authService.getPrivateKey()) {
+    this.passwordForm = this.formBuilder.group({
-      this.authService.loginView();
+      password: ['', Validators.required],
+    });
+    if (this.authService.privateKey !== undefined) {
+      const setKey = await this.authService.setKey(this.authService.privateKey);
+      if (setKey) {
+        this.passwordInput();
+      }
+      if (setKey && this.authService.sessionToken !== undefined) {
+        this.loginView();
+      }
     }
   }
 
   get keyFormStub(): any {
     return this.keyForm.controls;
   }
+  get passwordFormStub(): any {
+    return this.passwordForm.controls;
+  }
 
   async onSubmit(): Promise<void> {
-    this.submitted = true;
+    this.keyFormSubmitted = true;
 
     if (this.keyForm.invalid) {
       return;
     }
 
-    this.loading = true;
+    this.keyFormLoading = true;
-    await this.authService.setKey(this.keyFormStub.key.value);
+    const keySetup = await this.authService.setKey(this.keyFormStub.key.value);
-    this.loading = false;
+    if (keySetup) {
+      this.passwordInput();
+    }
+    this.keyFormLoading = false;
+    this.cdr.detectChanges();
   }
 
-  async login(): Promise<void> {
+  async onPasswordInput(): Promise<void> {
-    try {
+    this.passwordFormSubmitted = true;
-      const loginResult = await this.authService.login();
+
-      if (loginResult) {
+    if (this.passwordForm.invalid) {
-        this.router.navigate(['/home']);
+      return;
-      }
+    }
-    } catch (HttpError) {
+
-      this.errorDialogService.openDialog({
+    this.passwordFormLoading = true;
-        message: HttpError.message,
+    const passwordLogin = await this.authService.passwordLogin(
-      });
+      this.passwordFormStub.password.value
+    );
+    if (passwordLogin) {
+      this.loginView();
+    }
+    this.passwordFormLoading = false;
+    this.cdr.detectChanges();
+  }
+
+  login(): void {
+    if (this.authService.sessionToken === undefined) {
+      this.passwordInput();
+    }
+    const loginStatus = this.authService.login();
+    if (loginStatus) {
+      this.router.navigate(['/home']);
     }
   }
 
-  switchWindows(): void {
+  keyInput(): void {
-    const divOne: HTMLElement = document.getElementById('one');
+    this.authService.sessionToken = undefined;
-    const divTwo: HTMLElement = document.getElementById('two');
+    this.switchWindows(true, false, false);
-    this.toggleDisplay(divOne);
-    this.toggleDisplay(divTwo);
   }
 
-  toggleDisplay(element: any): void {
+  passwordInput(): void {
+    this.authService.sessionToken = undefined;
+    this.switchWindows(false, true, false);
+    this.setPasswordState(
+      'Enter Password to log in with PGP key ' + this.authService.mutableKeyStore.getPrivateKeyId()
+    );
+  }
+
+  loginView(): void {
+    this.switchWindows(false, false, true);
+    this.authService.setState('Click button to log in');
+  }
+
+  switchWindows(divOneStatus: boolean, divTwoStatus: boolean, divThreeStatus: boolean): void {
+    const divOne = document.getElementById('one');
+    const divTwo = document.getElementById('two');
+    const divThree = document.getElementById('three');
+    this.toggleDisplay(divOne, divOneStatus);
+    this.toggleDisplay(divTwo, divTwoStatus);
+    this.toggleDisplay(divThree, divThreeStatus);
+  }
+
+  toggleDisplay(element: any, active: boolean): void {
     const style: string = window.getComputedStyle(element).display;
-    if (style === 'block') {
+    if (active) {
-      element.style.display = 'none';
-    } else {
       element.style.display = 'block';
+    } else {
+      element.style.display = 'none';
     }
   }
+
+  setPasswordState(s): void {
+    document.getElementById('passwordState').innerHTML = s;
+  }
 }

src/app/auth/auth.module.ts

@@ -10,7 +10,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
-import { SharedModule } from '@app/shared/shared.module';
 
 @NgModule({
   declarations: [AuthComponent, PasswordToggleDirective],
@@ -23,7 +22,6 @@ import { SharedModule } from '@app/shared/shared.module';
     MatInputModule,
     MatButtonModule,
     MatRippleModule,
-    SharedModule,
   ],
 })
 export class AuthModule {}

src/app/pages/accounts/account-details/account-details.component.html

@@ -34,7 +34,7 @@
             <strong> {{account?.vcard?.fn[0].value}} </strong>
           </h3>
           <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span>
-          <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | unixDate}}</span>
+          <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span>
           <span class="ml-2"><strong>Address:</strong>
             <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
             <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress()" alt="Copy">
@@ -48,19 +48,10 @@
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
-                  <mat-label>First Name: *</mat-label>
+                  <mat-label>Name(s): *</mat-label>
-                  <input matInput type="text" id="firstName" placeholder="{{account?.vcard?.fn[0].value.split(' ')[0]}}"
+                  <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
-                         value="{{account?.vcard?.fn[0].value.split(' ')[0]}}" formControlName="firstName" [errorStateMatcher]="matcher">
+                         value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors">First Name is required.</mat-error>
+                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
-                </mat-form-field>
-              </div>
-
-              <div class="col-md-6 col-lg-4">
-                <mat-form-field appearance="outline">
-                  <mat-label>Last Name(s): *</mat-label>
-                  <input matInput type="text" id="lastName" placeholder="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}"
-                         value="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}" formControlName="lastName" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.lastName.errors">Last Name is required.</mat-error>
                 </mat-form-field>
               </div>
 
@@ -219,9 +210,12 @@
               <tr>
                 <td>{{account?.vcard?.fn[0].value}}</td>
                 <td>{{account?.balance | tokenRatio}}</td>
-                <td>{{account?.date_registered | unixDate}}</td>
+                <td>{{account?.date_registered | date}}</td>
                 <td>
-                  <span class="badge badge-success badge-pill">
+                  <span *ngIf="accountStatus === 'active'" class="badge badge-success badge-pill">
+                    {{accountStatus}}
+                  </span>
+                  <span *ngIf="accountStatus === 'blocked'" class="badge badge-danger badge-pill">
                     {{accountStatus}}
                   </span>
                 </td>
@@ -234,7 +228,7 @@
 
       <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
         <mat-tab label="Transactions">
-          <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
+          <app-transaction-details [transaction]="transaction"></app-transaction-details>
           <div class="card mt-1">
             <div class="card-header">
               <div class="row">
@@ -258,17 +252,17 @@
                 <mat-icon matSuffix>search</mat-icon>
               </mat-form-field>
 
-              <table mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
+              <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
                          #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>
 
                 <ng-container matColumnDef="sender">
                   <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value || transaction.from}} </td>
+                  <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="recipient">
                   <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value || transaction.to}} </td>
+                  <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="value">
@@ -281,7 +275,7 @@
 
                 <ng-container matColumnDef="created">
                   <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
-                  <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | unixDate}} </td>
+                  <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
                 </ng-container>
 
                 <ng-container matColumnDef="type">
@@ -291,10 +285,10 @@
                   </td>
                 </ng-container>
 
-                <tr mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></tr>
+                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
-                <tr mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
+                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
-                         (click)="viewTransaction(transaction)"></tr>
+                         (click)="viewTransaction(transaction)"></mat-row>
-              </table>
+              </mat-table>
 
               <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
                              [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>
@@ -343,7 +337,7 @@
 
                 <ng-container matColumnDef="created">
                   <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-                  <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>
+                  <mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
                 </ng-container>
 
                 <ng-container matColumnDef="balance">

src/app/pages/accounts/account-details/account-details.component.ts

@@ -78,17 +78,8 @@ export class AccountDetailsComponent implements OnInit {
     private cdr: ChangeDetectorRef,
     private snackBar: MatSnackBar
   ) {
-    this.route.paramMap.subscribe((params: Params) => {
-      this.accountAddress = add0x(params.get('id'));
-      this.bloxbergLink =
-        'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
-    });
-  }
-
-  async ngOnInit(): Promise<void> {
     this.accountInfoForm = this.formBuilder.group({
-      firstName: ['', Validators.required],
+      name: ['', Validators.required],
-      lastName: ['', Validators.required],
       phoneNumber: ['', Validators.required],
       age: ['', Validators.required],
       type: ['', Validators.required],
@@ -99,71 +90,36 @@ export class AccountDetailsComponent implements OnInit {
       location: ['', Validators.required],
       locationType: ['', Validators.required],
     });
-    await this.blockSyncService.init();
+    this.route.paramMap.subscribe(async (params: Params) => {
-    await this.tokenService.init();
+      this.accountAddress = add0x(params.get('id'));
-    await this.transactionService.init();
+      this.bloxbergLink =
-    await this.userService.init();
+        'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
-    await this.blockSyncService.blockSync(this.accountAddress);
+      (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
-    this.userService.resetAccountsList();
+        async (res) => {
-    (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
+          if (res !== undefined) {
-      async (res) => {
+            this.account = res;
-        if (res !== undefined) {
+            this.cdr.detectChanges();
-          this.account = res;
+            this.loggingService.sendInfoLevelMessage(this.account);
-          this.cdr.detectChanges();
+            // this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first())
-          this.loggingService.sendInfoLevelMessage(this.account);
+            //   .subscribe(response => this.accountStatus = response);
-          const fullName = this.account.vcard?.fn[0].value.split(' ');
+            this.accountInfoForm.patchValue({
-          this.accountInfoForm.patchValue({
+              name: this.account.vcard?.fn[0].value,
-            firstName: fullName[0],
+              phoneNumber: this.account.vcard?.tel[0].value,
-            lastName: fullName.slice(1).join(' '),
+              age: this.account.age,
-            phoneNumber: this.account.vcard?.tel[0].value,
+              type: this.account.type,
-            age: this.account.age,
+              bio: this.account.products,
-            type: this.account.type,
+              gender: this.account.gender,
-            bio: this.account.products,
+              businessCategory: this.account.category,
-            gender: this.account.gender,
+              userLocation: this.account.location.area_name,
-            businessCategory:
+              location: this.account.location.area,
-              this.account.category ||
+              locationType: this.account.location.area_type,
-              this.userService.getCategoryByProduct(this.account.products[0]),
+            });
-            userLocation: this.account.location.area_name,
+          } else {
-            location:
+            alert('Account not found!');
-              this.account.location.area ||
+          }
-              this.locationService
-                .getAreaNameByLocation(this.account.location.area_name)
-                .pipe(first())
-                .subscribe((response) => {
-                  return response;
-                }),
-            locationType:
-              this.account.location.area_type ||
-              this.locationService
-                .getAreaTypeByArea(this.accountInfoFormStub.location.value)
-                .pipe(first())
-                .subscribe((response) => {
-                  return response;
-                }),
-          });
-          this.userService
-            .getAccountStatus(this.account.vcard?.tel[0].value)
-            .pipe(first())
-            .subscribe((response) => (this.accountStatus = response.status));
-        } else {
-          alert('Account not found!');
         }
-      }
+      );
-    );
+      this.blockSyncService.blockSync(this.accountAddress);
-    this.userService.accountsSubject.subscribe((accounts) => {
-      this.userDataSource = new MatTableDataSource<any>(accounts);
-      this.userDataSource.paginator = this.userTablePaginator;
-      this.userDataSource.sort = this.userTableSort;
-      this.accounts = accounts;
-      this.cdr.detectChanges();
-    });
-
-    this.transactionService.transactionsSubject.subscribe((transactions) => {
-      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
-      this.transactionsDataSource.paginator = this.transactionTablePaginator;
-      this.transactionsDataSource.sort = this.transactionTableSort;
-      this.transactions = transactions;
-      this.cdr.detectChanges();
     });
     this.userService
       .getCategories()
@@ -191,6 +147,22 @@ export class AccountDetailsComponent implements OnInit {
       .subscribe((res) => (this.genders = res));
   }
 
+  ngOnInit(): void {
+    this.userService.accountsSubject.subscribe((accounts) => {
+      this.userDataSource = new MatTableDataSource<any>(accounts);
+      this.userDataSource.paginator = this.userTablePaginator;
+      this.userDataSource.sort = this.userTableSort;
+      this.accounts = accounts;
+    });
+
+    this.transactionService.transactionsSubject.subscribe((transactions) => {
+      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
+      this.transactionsDataSource.paginator = this.transactionTablePaginator;
+      this.transactionsDataSource.sort = this.transactionTableSort;
+      this.transactions = transactions;
+    });
+  }
+
   doTransactionFilter(value: string): void {
     this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
   }
@@ -220,7 +192,7 @@ export class AccountDetailsComponent implements OnInit {
     }
     const accountKey = await this.userService.changeAccountInfo(
       this.accountAddress,
-      this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value,
+      this.accountInfoFormStub.name.value,
       this.accountInfoFormStub.phoneNumber.value,
       this.accountInfoFormStub.age.value,
       this.accountInfoFormStub.type.value,

src/app/pages/accounts/account-search/account-search.component.ts

@@ -30,8 +30,7 @@ export class AccountSearchComponent implements OnInit {
     private router: Router
   ) {}
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.userService.init();
     this.nameSearchForm = this.formBuilder.group({
       name: ['', Validators.required],
     });

src/app/pages/accounts/accounts.component.html

@@ -56,7 +56,7 @@
 
             <ng-container matColumnDef="created">
               <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
-              <mat-cell *matCellDef="let user"> {{user?.date_registered | unixDate}} </mat-cell>
+              <mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="balance">

src/app/pages/accounts/accounts.component.ts

@@ -32,26 +32,28 @@ export class AccountsComponent implements OnInit {
     private userService: UserService,
     private loggingService: LoggingService,
     private router: Router
-  ) {}
+  ) {
+    (async () => {
+      try {
+        // TODO it feels like this should be in the onInit handler
+        await this.userService.loadAccounts(100);
+      } catch (error) {
+        this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
+      }
+    })();
+    this.userService
+      .getAccountTypes()
+      .pipe(first())
+      .subscribe((res) => (this.accountTypes = res));
+  }
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.userService.init();
-    try {
-      // TODO it feels like this should be in the onInit handler
-      await this.userService.loadAccounts(100);
-    } catch (error) {
-      this.loggingService.sendErrorLevelMessage('Failed to load accounts', this, { error });
-    }
     this.userService.accountsSubject.subscribe((accounts) => {
       this.dataSource = new MatTableDataSource<any>(accounts);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.accounts = accounts;
     });
-    this.userService
-      .getAccountTypes()
-      .pipe(first())
-      .subscribe((res) => (this.accountTypes = res));
   }
 
   doFilter(value: string): void {

src/app/pages/accounts/create-account/create-account.component.ts

@@ -26,8 +26,7 @@ export class CreateAccountComponent implements OnInit {
     private userService: UserService
   ) {}
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.userService.init();
     this.createForm = this.formBuilder.group({
       accountType: ['', Validators.required],
       idNumber: ['', Validators.required],

src/app/pages/admin/admin.component.ts

@@ -30,10 +30,7 @@ export class AdminComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private userService: UserService, private loggingService: LoggingService) {}
+  constructor(private userService: UserService, private loggingService: LoggingService) {
-
-  async ngOnInit(): Promise<void> {
-    await this.userService.init();
     this.userService.getActions();
     this.userService.actionsSubject.subscribe((actions) => {
       this.dataSource = new MatTableDataSource<any>(actions);
@@ -43,6 +40,8 @@ export class AdminComponent implements OnInit {
     });
   }
 
+  ngOnInit(): void {}
+
   doFilter(value: string): void {
     this.dataSource.filter = value.trim().toLocaleLowerCase();
   }

src/app/pages/settings/settings.component.html

@@ -23,10 +23,9 @@
               SETTINGS
             </mat-card-title>
             <div class="card-body">
-              <h4>CICADA Admin Credentials</h4>
+              <h4>Kobo Toolbox Credentials</h4>
-              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br>
+              <span><strong>Username: </strong> admin_reserve </span><br>
-              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br>
+              <span><strong>Password: </strong> ******** </span>
-              <span><strong>Email: </strong> {{ userInfo?.email }} </span>
             </div>
             <hr>
             <div class="card-body">

src/app/pages/settings/settings.component.ts

@@ -17,22 +17,19 @@ export class SettingsComponent implements OnInit {
   dataSource: MatTableDataSource<any>;
   displayedColumns: Array<string> = ['name', 'email', 'userId'];
   trustedUsers: Array<Staff>;
-  userInfo: Staff;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(private authService: AuthService) {}
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.authService.init();
+    const d = new Date();
-    this.authService.trustedUsersSubject.subscribe((users) => {
+    this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
-      this.dataSource = new MatTableDataSource<any>(users);
+    this.trustedUsers = this.authService.getTrustedUsers();
-      this.dataSource.paginator = this.paginator;
+    this.dataSource = new MatTableDataSource<any>(this.trustedUsers);
-      this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
-      this.trustedUsers = users;
+    this.dataSource.sort = this.sort;
-    });
-    this.userInfo = this.authService.getPrivateKeyInfo();
   }
 
   doFilter(value: string): void {

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

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

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

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

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

@@ -24,9 +24,6 @@
           </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">

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

@@ -5,7 +5,8 @@ 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';
+import { TokenRegistry } from '../../_eth';
+import { Token } from '../../_models';
 
 @Component({
   selector: 'app-tokens',
@@ -18,8 +19,7 @@ export class TokensComponent implements OnInit {
   columnsToDisplay: Array<string> = ['name', 'symbol', 'address', 'supply'];
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  tokens: Array<Token>;
+  tokens: Array<Promise<string>>;
-  token: Token;
 
   constructor(
     private tokenService: TokenService,
@@ -28,25 +28,22 @@ export class TokensComponent implements OnInit {
   ) {}
 
   async ngOnInit(): Promise<void> {
-    await this.tokenService.init();
+    this.tokenService.LoadEvent.subscribe(async () => {
-    this.tokenService.onload = async (status: boolean): Promise<void> => {
+      this.tokens = await this.tokenService.getTokens();
-      await this.tokenService.getTokens();
-    };
-    this.tokenService.tokensSubject.subscribe((tokens) => {
-      this.loggingService.sendInfoLevelMessage(tokens);
-      this.dataSource = new MatTableDataSource(tokens);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-      this.tokens = tokens;
     });
+    this.tokens = await this.tokenService.getTokens();
+    this.loggingService.sendInfoLevelMessage(this.tokens);
+    this.dataSource = new MatTableDataSource(this.tokens);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
   }
 
   doFilter(value: string): void {
     this.dataSource.filter = value.trim().toLocaleLowerCase();
   }
 
-  viewToken(token): void {
+  async viewToken(token): Promise<void> {
-    this.token = token;
+    await this.router.navigateByUrl(`/tokens/${token.symbol}`);
   }
 
   downloadCsv(): void {

src/app/pages/transactions/transaction-details/transaction-details.component.html

@@ -1,9 +1,9 @@
-<div *ngIf="transaction" class="mb-3 mt-1">
+<div *ngIf="transaction | async" class="mb-3 mt-1">
   <div class="card text-center">
     <mat-card-title class="card-header">
       <div class="row">
         TRANSACTION DETAILS
-        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
+        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="transaction = null"> CLOSE </button>
       </div>
     </mat-card-title>
     <div *ngIf="transaction.type == 'transaction'" class="card-body">
@@ -66,7 +66,7 @@
               <span>Success: {{transaction.tx.success}}</span>
             </li>
             <li class="list-group-item">
-              <span>Timestamp: {{transaction.tx.timestamp | unixDate}}</span>
+              <span>Timestamp: {{transaction.tx.timestamp | date}}</span>
             </li>
           </ul><br>
           <div class="mb-3">

src/app/pages/transactions/transaction-details/transaction-details.component.ts

@@ -1,11 +1,4 @@
-import {
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
 import { Router } from '@angular/router';
 import { TransactionService } from '@app/_services';
 import { copyToClipboard } from '@app/_helpers';
@@ -20,9 +13,6 @@ import { strip0x } from '@src/assets/js/ethtx/dist/hex';
 })
 export class TransactionDetailsComponent implements OnInit {
   @Input() transaction;
-
-  @Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();
-
   senderBloxbergLink: string;
   recipientBloxbergLink: string;
   traderBloxbergLink: string;
@@ -33,8 +23,7 @@ export class TransactionDetailsComponent implements OnInit {
     private snackBar: MatSnackBar
   ) {}
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
-    await this.transactionService.init();
     if (this.transaction?.type === 'conversion') {
       this.traderBloxbergLink =
         'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions';
@@ -72,9 +61,4 @@ export class TransactionDetailsComponent implements OnInit {
       this.snackBar.open(address + ' copied successfully!', 'Close', { duration: 3000 });
     }
   }
-
-  close(): void {
-    this.transaction = null;
-    this.closeWindow.emit(this.transaction);
-  }
 }

src/app/pages/transactions/transactions.component.html

@@ -22,7 +22,7 @@
         </mat-card-title>
         <div class="card-body">
 
-          <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
+          <app-transaction-details [transaction]="transaction"></app-transaction-details>
 
           <div class="row card-header">
             <mat-form-field appearance="outline">
@@ -48,12 +48,12 @@
 
             <ng-container matColumnDef="sender">
               <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value || transaction.from}} </td>
+              <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
             </ng-container>
 
             <ng-container matColumnDef="recipient">
               <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value || transaction.to}} </td>
+              <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
             </ng-container>
 
             <ng-container matColumnDef="value">
@@ -66,7 +66,7 @@
 
             <ng-container matColumnDef="created">
               <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
-              <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | unixDate}} </td>
+              <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
             </ng-container>
 
             <ng-container matColumnDef="type">

src/app/pages/transactions/transactions.component.ts

@@ -36,19 +36,17 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
     private blockSyncService: BlockSyncService,
     private transactionService: TransactionService,
     private userService: UserService
-  ) {}
+  ) {
+    this.blockSyncService.blockSync();
+  }
 
-  async ngOnInit(): Promise<void> {
+  ngOnInit(): void {
     this.transactionService.transactionsSubject.subscribe((transactions) => {
       this.transactionDataSource = new MatTableDataSource<any>(transactions);
       this.transactionDataSource.paginator = this.paginator;
       this.transactionDataSource.sort = this.sort;
       this.transactions = transactions;
     });
-    await this.blockSyncService.init();
-    await this.transactionService.init();
-    await this.userService.init();
-    await this.blockSyncService.blockSync();
     this.userService
       .getTransactionTypes()
       .pipe(first())

src/app/shared/_pipes/unix-date.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { UnixDatePipe } from './unix-date.pipe';
-
-describe('UnixDatePipe', () => {
-  it('create an instance', () => {
-    const pipe = new UnixDatePipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/app/shared/_pipes/unix-date.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'unixDate',
-})
-export class UnixDatePipe implements PipeTransform {
-  transform(timestamp: number, ...args: unknown[]): any {
-    return new Date(timestamp * 1000).toLocaleDateString('en-GB');
-  }
-}

src/app/shared/footer/footer.component.html

@@ -1,8 +1,5 @@
 <!-- Footer Start -->
 <footer class="footer">
-  <a target="blank" title="GPL-3" href="https://www.gnu.org/licenses/gpl-3.0.en.html"> Copyleft </a> 🄯.
+  2020 © Grassroots Economics
-  {{ currentYear }}
-  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"><u> Grassroots Economics </u></a>
-
 </footer>
 <!-- end Footer -->

src/app/shared/footer/footer.component.ts

@@ -7,7 +7,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent implements OnInit {
-  currentYear = new Date().getFullYear();
   constructor() {}
 
   ngOnInit(): void {}

src/app/shared/network-status/network-status.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark background-dark">
+<nav class="navbar navbar-dark bg-dark">
   <h1 class="navbar-brand">
     <div *ngIf="noInternetConnection; then offlineBlock else onlineBlock"></div>
     <ng-template #offlineBlock>

src/app/shared/shared.module.ts

@@ -12,7 +12,6 @@ import { ErrorDialogComponent } from '@app/shared/error-dialog/error-dialog.comp
 import { MatDialogModule } from '@angular/material/dialog';
 import { SafePipe } from '@app/shared/_pipes/safe.pipe';
 import { NetworkStatusComponent } from './network-status/network-status.component';
-import { UnixDatePipe } from './_pipes/unix-date.pipe';
 
 @NgModule({
   declarations: [
@@ -25,7 +24,6 @@ import { UnixDatePipe } from './_pipes/unix-date.pipe';
     ErrorDialogComponent,
     SafePipe,
     NetworkStatusComponent,
-    UnixDatePipe,
   ],
   exports: [
     TopbarComponent,
@@ -35,7 +33,6 @@ import { UnixDatePipe } from './_pipes/unix-date.pipe';
     TokenRatioPipe,
     SafePipe,
     NetworkStatusComponent,
-    UnixDatePipe,
   ],
   imports: [CommonModule, RouterModule, MatIconModule, MatDialogModule],
 })

src/app/shared/sidebar/sidebar.component.html

@@ -1,6 +1,5 @@
 <!-- ========== Left Sidebar Start ========== -->
 <div id="sidebar">
-  <app-network-status></app-network-status>
   <nav>
 
     <div class="sidebar-header">

src/assets/js/block-sync/driver.js

@@ -42,7 +42,7 @@ Driver.prototype.sync = function (n) {
   const processor = async (b, t) => {
     return await self.process(b, t);
   };
-  self.syncer(self.lo, self.hi, self.filters[0], self.filters[1], countGetter, processor);
+  self.syncer(self, self.lo, self.hi, self.filters[0], self.filters[1], countGetter, processor);
 };
 
 Driver.prototype.process = function (b, t) {

src/assets/js/hoba-pgp.js

@@ -2,7 +2,7 @@ import { hobaResult, hobaToSign } from '@src/assets/js/hoba.js';
 
 const alg = '969';
 
-export async function signChallenge(challenge, realm, origin, keyStore) {
+export async function signChallenge(challenge, realm, origin, keyStore, password) {
   const fingerprint = keyStore.getFingerprint();
   const nonce_array = new Uint8Array(32);
   crypto.getRandomValues(nonce_array);
@@ -14,7 +14,7 @@ export async function signChallenge(challenge, realm, origin, keyStore) {
   const a_challenge = btoa(challenge);
   const message = hobaToSign(a_nonce, a_kid, a_challenge, realm, origin, alg);
 
-  const signature = await keyStore.sign(message);
+  const signature = await keyStore.sign(message, password);
   const a_signature = btoa(signature);
 
   const result = hobaResult(a_nonce, a_kid, a_challenge, a_signature);

src/environments/environment.dev.ts

@@ -10,7 +10,7 @@ export const environment = {
   publicKeysUrl: 'https://dev.grassrootseconomics.net/.well-known/publickeys/',
   cicCacheUrl: 'https://cache.dev.grassrootseconomics.net',
   web3Provider: 'wss://bloxberg-ws.dev.grassrootseconomics.net',
-  cicUssdUrl: 'https://user.dev.grassrootseconomics.net',
+  cicUssdUrl: 'https://ussd.dev.grassrootseconomics.net',
   registryAddress: '0xea6225212005e86a4490018ded4bf37f3e772161',
   trustedDeclaratorAddress: '0xEb3907eCad74a0013c259D5874AE7f22DcBcC95C',
 };

src/environments/environment.prod.ts

@@ -10,7 +10,7 @@ export const environment = {
   publicKeysUrl: 'https://dev.grassrootseconomics.net/.well-known/publickeys/',
   cicCacheUrl: 'https://cache.dev.grassrootseconomics.net',
   web3Provider: 'wss://bloxberg-ws.dev.grassrootseconomics.net',
-  cicUssdUrl: 'https://user.dev.grassrootseconomics.net',
+  cicUssdUrl: 'https://ussd.dev.grassrootseconomics.net',
   registryAddress: '0xea6225212005e86a4490018ded4bf37f3e772161',
   trustedDeclaratorAddress: '0xEb3907eCad74a0013c259D5874AE7f22DcBcC95C',
 };

src/environments/environment.ts

@@ -10,7 +10,7 @@ export const environment = {
   publicKeysUrl: 'https://dev.grassrootseconomics.net/.well-known/publickeys/',
   cicCacheUrl: 'https://cache.dev.grassrootseconomics.net',
   web3Provider: 'wss://bloxberg-ws.dev.grassrootseconomics.net',
-  cicUssdUrl: 'https://user.dev.grassrootseconomics.net',
+  cicUssdUrl: 'https://ussd.dev.grassrootseconomics.net',
   registryAddress: '0xea6225212005e86a4490018ded4bf37f3e772161',
   trustedDeclaratorAddress: '0xEb3907eCad74a0013c259D5874AE7f22DcBcC95C',
 };

src/styles.scss

@@ -18,8 +18,8 @@ body {
   background: #fafafa;
 }
 
-.background-dark {
+.bg-dark {
-  background: #313a46 !important;
+  background: #313a46;
 }
 
 p {
@@ -65,6 +65,12 @@ footer.footer { color: black; }
   left: -9999px;
 }
 
+.center-items {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 #sidebar {
   position: sticky;
   position: -webkit-sticky;
@@ -207,6 +213,11 @@ a[data-toggle="collapse"] { position: relative; }
 
 .mat-column-select { overflow: initial; }
 
+#passwordLoginButton {
+  height: 3.0rem;
+  padding-top: 0.5rem;
+}
+
 button { height: 2.5rem; }
 
 .badge-pill { width: 5rem; }