Fix httpgeter.

2021-05-18 18:01:52 +03:00
59 changed files with 460 additions and 8601 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,6 @@
 /dist
 /tmp
 /out-tsc
-/out
 # Only exists if Bazel was run
 /bazel-out

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,10 +1,6 @@
 {
  "name": "cic-staff-client",
-  "version": "0.0.1",
-  "author": "Spencer Ofwiti <maxspencer56@gmail.com>",
-  "description": "A fully featured admin client for managing users and transactions in the CIC network.",
-  "main": "dist/main.js",
-  "license": "GPL-3.0-or-later",
+  "version": "0.0.0",
  "scripts": {
    "config:dev": "ts-node set-env.ts --environment=dev",
    "config:prod": "ts-node set-env.ts --environment=prod",
@@ -22,17 +18,7 @@
    "e2e": "ng e2e",
    "precommit": "npm run format:fix && npm run lint",
    "postinstall": "node patch-webpack.js",
-    "prepare": "husky install",
-    "electron": "ng build --base-href ./ && electron .",
-    "electron-tsc": "ng build --base-href ./ && tsc --p src-backend --outDir dist && electron .",
-    "electron:build:dev": "ng build -c dev --base-href ./ && tsc --lib ES2018,DOM  --target ES5 src-backend/main.ts --outDir dist && electron .",
-    "electron:package": "npx electron-forge import && npm run make",
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make",
-    "elec:package": "npm run build:dev && electron-packager . CICADA --out out --overwrite --asar --icon=dist/cic-staff-client/icons/manifest-icon-512.ico   --ignore=^e2e$ --ignore=^src$ --ignore=^src-backend$ --ignore=^.editorconfig$ --ignore=^.gitignore$ --ignore=^angular.json$ --ignore=^browserslist$ --ignore=^karma.conf.js$ --ignore=^package-lock.json$ --ignore=^README.md$ --ignore=^tslint --ignore=^tsconfig --all",
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean"
+    "prepare": "husky install"
  },
  "private": true,
  "dependencies": {
@@ -52,7 +38,6 @@
    "bootstrap": "^4.5.3",
    "cic-client": "0.1.4",
    "cic-client-meta": "0.0.7-alpha.6",
-    "electron-squirrel-startup": "^1.0.0",
    "ethers": "^5.0.31",
    "http-server": "^0.12.3",
    "jquery": "^3.5.1",
@@ -68,21 +53,13 @@
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.0",
-    "@electron-forge/cli": "^6.0.0-beta.55",
-    "@electron-forge/maker-deb": "^6.0.0-beta.55",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.55",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.55",
-    "@electron-forge/maker-zip": "^6.0.0-beta.55",
    "@types/datatables.net": "^1.10.19",
-    "@types/electron": "^1.6.10",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.4",
-    "@types/node": "^15.6.1",
+    "@types/node": "^12.20.6",
    "codelyzer": "^6.0.0",
    "dotenv": "^8.2.0",
-    "electron": "^12.0.9",
-    "electron-packager": "^15.2.0",
    "husky": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
@@ -95,7 +72,6 @@
    "prettier": "^2.3.0",
    "pretty-quick": "^3.1.0",
    "protractor": "~7.0.0",
-    "rimraf": "^3.0.2",
    "secp256k1": "^4.0.2",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
@@ -109,32 +85,5 @@
    "hooks": {
      "pre-commit": "pretty-quick --staged & ng lint"
    }
-  },
-  "config": {
-    "forge": {
-      "packagerConfig": {},
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "cic_staff_client"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
-        }
-      ]
-    }
  }
 }
--- a/src-backend/main.ts
+++ b/src-backend/main.ts
@@ -1,139 +0,0 @@
-import { BrowserWindow, Menu, Tray, app, ipcMain } from 'electron';
-import * as path from 'path';
-import * as url from 'url';
-import * as fs from 'fs';
-
-let mainWindow: BrowserWindow;
-
-async function createWindow(): Promise<void> {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    fullscreen: false,
-    width: 1000,
-    height: 800,
-    icon: path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'),
-    // Allows IPC and other APIs
-    webPreferences: {
-      nodeIntegration: true,
-      enableRemoteModule: true,
-      nodeIntegrationInWorker: true,
-    }
-  });
-  // load the dist folder from Angular
-  await mainWindow.loadURL(
-    url.format({
-      pathname: path.join(__dirname, '/cic-staff-client/index.html'),
-      protocol: 'file',
-      slashes: true
-    })
-  );
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools();
-
-  mainWindow.on('closed', () => {
-    mainWindow = null;
-  });
-}
-
-async function openModal(): Promise<void> {
-  const modal = new BrowserWindow({
-    parent: mainWindow,
-    modal: true,
-    show: false,
-  });
-  await modal.loadURL('https://dashboard.sarafu.network/');
-  modal.once('ready-to-show', () => {
-    modal.show();
-  });
-}
-
-function isRoot(): boolean {
-  return path.parse(process.cwd()).root === process.cwd();
-}
-
-function getImages(): void {
-  const cwd = process.cwd();
-  fs.readdir('.', { withFileTypes: true }, ((err, files) => {
-    if (!err) {
-      const re = /(?:\.([^.]+))?$/;
-      const images = files.filter(file => file.isFile() && ['jpg', 'png'].includes(re.exec(file.name)[1])).map(file => `file://${cwd}/${file.name}`);
-      mainWindow.webContents.send('getImagesResponse', images);
-    }
-  }));
-}
-
-function getDirectory(): void {
-  fs.readdir('.', { withFileTypes: true }, (err, files) => {
-    if (!err) {
-      const directories = files.filter(file =>  file.isDirectory()).map(file => file.name);
-      if (!isRoot()) {
-        directories.unshift('..');
-      }
-      mainWindow.webContents.send('getDirectoryResponse', directories);
-    }
-  });
-}
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', async () => {
-  let tray = null;
-  tray = new Tray(path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'));
-  const contextMenu = Menu.buildFromTemplate([
-    { label: 'Item1', type: 'radio' },
-    { label: 'Item2', type: 'radio' },
-    { label: 'Item3', type: 'radio', checked: true },
-    { label: 'Exit', type: 'normal', click: () => { app.quit(); } },
-  ]);
-  tray.setToolTip('CIC Administration Dashboard.');
-  // Overrides 'right-click' event.
-  tray.setContextMenu(contextMenu);
-  tray.on('click', (event, arg) => {
-    console.log('Systray was left-clicked.', event, arg);
-  });
-  tray.on('double-click', (event, arg) => {
-    console.log('Systray was double-clicked.', event, arg);
-  });
-  await createWindow();
-});
-
-app.on('activate', async () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) {
-    await createWindow();
-  }
-});
-
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
-
-ipcMain.on('my-custom-signal', (event, arg) => {
-  console.log('Print to the main process terminal (STDOUT) when signal received from renderer process.');
-  console.log(event);
-  console.log(arg);
-  mainWindow.webContents.send('other-custom-signal', 'message from the backend process');
-});
-
-ipcMain.on('navigateDirectory', (event, arg) => {
-  process.chdir(arg);
-  getImages();
-  getDirectory();
-});
-
-ipcMain.on('getFiles', (event, arg) => {
-  const files = fs.readdirSync(__dirname);
-  mainWindow.webContents.send('getFilesResponse', files);
-});
-
-ipcMain.on('openModal', async (event, arg) => {
-  await openModal();
-});
--- a/src-backend/tsconfig.json
+++ b/src-backend/tsconfig.json
@@ -1,9 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../dist",
-    "module": "commonjs",
-    "skipLibCheck": true
-  }
-}
--- a/src/app/_eth/accountIndex.ts
+++ b/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;
--- a/src/app/_eth/token-registry.ts
+++ b/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;
--- a/src/app/_helpers/mock-backend.ts
+++ b/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>> {
--- a/src/app/_helpers/schema-validation.ts
+++ b/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}`));
  }
 }

--- a/src/app/_models/token.ts
+++ b/src/app/_models/token.ts
@@ -4,7 +4,7 @@ interface Token {
  address: string;
  supply: string;
  decimals: string;
-  reserves?: {
+  reserves: {
    '0xa686005CE37Dce7738436256982C3903f2E4ea8E'?: {
      weight: string;
      balance: string;
--- a/src/app/_pgp/pgp-key-store.ts
+++ b/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>;
@@ -42,8 +42,8 @@ class MutablePgpKeyStore implements MutableKeyStore {
    await keyring.privateKeys.importKey(privateKey);
  }

-  async importPublicKey(publicKey: any): Promise<void> {
-    await keyring.publicKeys.importKey(publicKey);
+  importPublicKey(publicKey: any): void {
+    keyring.publicKeys.importKey(publicKey);
  }

  async importPrivateKey(privateKey: any): Promise<void> {
--- a/src/app/_services/auth.service.ts
+++ b/src/app/_services/auth.service.ts
@@ -7,8 +7,6 @@ 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',
@@ -16,11 +14,6 @@ import { BehaviorSubject, Observable } from 'rxjs';
 export class AuthService {
  sessionToken: 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,
@@ -197,22 +190,10 @@ export class AuthService {
    window.location.reload();
  }

-  addTrustedUser(user: Staff): void {
-    const savedIndex = this.trustedUsers.findIndex((staff) => staff.userid === user.userid);
-    if (savedIndex === 0) {
-      return;
-    }
-    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);
-    });
+  getTrustedUsers(): any {
+    const trustedUsers: Array<any> = [];
+    this.mutableKeyStore.getPublicKeys().forEach((key) => trustedUsers.push(key.users[0].userId));
+    return trustedUsers;
  }

  async getPublicKeys(): Promise<any> {
@@ -230,8 +211,4 @@ export class AuthService {
  getPrivateKey(): any {
    return this.mutableKeyStore.getPrivateKey();
  }
-
-  getPrivateKeyInfo(): any {
-    return this.getPrivateKey().users[0].userId;
-  }
 }
--- a/src/app/_services/block-sync.service.ts
+++ b/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> {
-    await this.transactionService.init();
-  }
-
-  async blockSync(address: string = null, offset: number = 0, limit: number = 100): Promise<void> {
+  blockSync(address: string = null, offset: number = 0, limit: number = 100): 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.registry = await RegistryService.getRegistry();
+    settings.w3.engine = this.registryService.getWeb3();
+    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 => {
-    //   this.loggingService.sendInfoLevelMessage(`Loaded network contracts ${addressReturned}`);
-    //   this.readyStateProcessor(settings, readyStateElements.network, address, offset, limit);
-    // };
-    this.readyStateProcessor(settings, readyStateElements.network, address, offset, limit);
+    settings.registry.onload = (addressReturned: number): void => {
+      this.loggingService.sendInfoLevelMessage(`Loaded network contracts ${addressReturned}`);
+      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 {
-    return new CustomEvent(eventType, {
+  newTransferEvent(tx: any): any {
+    return new CustomEvent('cic_transfer', {
+      detail: {
+        tx,
+      },
+    });
+  }
+
+  newConversionEvent(tx: any): any {
+    return new CustomEvent('cic_convert', {
      detail: {
        tx,
      },
--- a/src/app/_services/electron.service.spec.ts
+++ b/src/app/_services/electron.service.spec.ts
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ElectronService } from './electron.service';
-
-describe('ElectronService', () => {
-  let service: ElectronService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ElectronService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/src/app/_services/electron.service.ts
+++ b/src/app/_services/electron.service.ts
@@ -1,65 +0,0 @@
-import { Injectable } from '@angular/core';
-import { IpcRenderer } from 'electron';
-import {BehaviorSubject} from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ElectronService {
-  private ipc: IpcRenderer;
-  images = new BehaviorSubject<string[]>([]);
-  directory = new BehaviorSubject<string[]>([]);
-
-  constructor() {
-    if ((window as any).require) {
-      console.log('Pass');
-      try {
-        console.log('supported');
-        this.ipc = (window as any).require('electron').ipcRenderer;
-      } catch (error) {
-        console.error(error);
-        throw error;
-      }
-    } else {
-      console.warn('Could not load electron ipc');
-    }
-  }
-
-  testIpc(): void {
-    this.ipc.on('my-custom-signal', (event, arg) => {
-      console.log('Received acknowledged from backend about receipt of our signal.');
-      console.log(event);
-      console.log(arg);
-    });
-
-    this.ipc.on('getImageResponse', (event, images) => {
-      this.images.next(images);
-    });
-
-    this.ipc.on('getDirectoryResponse', (event, directory) => {
-      this.directory.next(directory);
-    });
-
-    console.log('Sending message to backend.');
-    this.ipc.send('my-custom-signal', 'hello, are you there?');
-  }
-
-  navigateDirectory(path): any {
-    this.ipc.send('navigateDirectory', path);
-  }
-
-  async getFiles(): Promise<string[]> {
-    console.log('Starting');
-    return new Promise<string[]>((resolve, reject) => {
-      this.ipc.once('getFilesResponse', (event, arg) => {
-        resolve(arg);
-      });
-      this.ipc.send('getFiles');
-    });
-  }
-
-  openModal(): void {
-    console.log('Open a modal.');
-    this.ipc.send('openModal');
-  }
-}
--- a/src/app/_services/index.ts
+++ b/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';
--- a/src/app/_services/registry.service.ts
+++ b/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();
-  private static registry: CICRegistry;
+  web3: Web3 = new Web3(environment.web3Provider);
+  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> {
-    if (!RegistryService.registry) {
-      RegistryService.registry = new CICRegistry(
-        Web3Service.getInstance(),
-        environment.registryAddress,
-        'Registry',
-        RegistryService.fileGetter,
-        ['../../assets/js/block-sync/data']
-      );
-      RegistryService.registry.declaratorHelper.addTrust(environment.trustedDeclaratorAddress);
-      await RegistryService.registry.load();
-    }
-    return RegistryService.registry;
+  getRegistry(): any {
+    return this.registry;
+  }
+
+  getWeb3(): any {
+    return this.web3;
  }
 }
--- a/src/app/_services/token.service.ts
+++ b/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,65 +12,29 @@ import {BehaviorSubject, Observable, Subject} from 'rxjs';
 export class TokenService {
  registry: CICRegistry;
  tokenRegistry: TokenRegistry;
-  onload: (status: boolean) => void;
-  tokens: Array<Token> = [];
-  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens);
-  tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
+  LoadEvent: EventEmitter<number> = new EventEmitter<number>();

-  constructor(private httpClient: HttpClient) {}
-
-  async init(): Promise<void> {
-    this.registry = await RegistryService.getRegistry();
+  constructor(private httpClient: HttpClient, private registryService: RegistryService) {
+    this.registry = registryService.getRegistry();
+    this.registry.load();
    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 {
-    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> {
+  async getTokens(): Promise<Array<Promise<string>>> {
    const count: number = await this.tokenRegistry.totalTokens();
-    for (let i = 0; i < count; i++) {
-      const token: Token = await this.getTokenByAddress(await this.tokenRegistry.entry(i));
-      this.addToken(token);
-    }
+    return Array.from({ length: count }, async (v, i) => await this.tokenRegistry.entry(i));
  }

-  async getTokenByAddress(address: string): Promise<Token> {
-    const token: any = {};
-    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;
+  getTokenBySymbol(symbol: string): Observable<any> {
+    return this.httpClient.get(`${environment.cicCacheUrl}/tokens/${symbol}`);
  }

-  async getTokenBySymbol(symbol: string): Promise<Observable<Token>> {
-    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>> {
+  async getTokenBalance(address: string): Promise<number> {
    const sarafuToken = await this.registry.addToken(await this.tokenRegistry.entry(0));
    return await sarafuToken.methods.balanceOf(address).call();
  }
--- a/src/app/_services/transaction.service.ts
+++ b/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();
-  }
-
-  async init(): Promise<void> {
-    await this.authService.init();
-    await this.userService.init();
-    this.registry = await RegistryService.getRegistry();
+    this.web3 = this.registryService.getWeb3();
+    this.registry = registryService.getRegistry();
+    this.registry.load();
  }

  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(
-        'TransferAuthorization'
-      );
-      const hashFunction = new Keccak(256);
-      hashFunction.update('createRequest(address,address,address,uint256)');
-      const hash = hashFunction.digest();
-      const methodSignature = hash.toString('hex').substring(0, 8);
-      const abiCoder = new utils.AbiCoder();
-      const abi = await abiCoder.encode(
-        ['address', 'address', 'address', 'uint256'],
-        [senderAddress, recipientAddress, tokenAddress, value]
-      );
-      const data = fromHex(methodSignature + strip0x(abi));
-      const tx = new Tx(environment.bloxbergChainId);
-      tx.nonce = await this.web3.eth.getTransactionCount(senderAddress);
-      tx.gasPrice = Number(await this.web3.eth.getGasPrice());
-      tx.gasLimit = 8000000;
-      tx.to = fromHex(strip0x(transferAuthAddress));
-      tx.value = toValue(value);
-      tx.data = data;
-      const txMsg = tx.message();
-      const privateKey = this.authService.mutableKeyStore.getPrivateKey();
-      if (!privateKey.isDecrypted()) {
-        const password = window.prompt('password');
-        await privateKey.decrypt(password);
-      }
-      const signatureObject = secp256k1.ecdsaSign(txMsg, privateKey.keyPacket.privateParams.d);
-      const r = signatureObject.signature.slice(0, 32);
-      const s = signatureObject.signature.slice(32);
-      const v = signatureObject.recid;
-      tx.setSignature(r, s, v);
-      const txWire = add0x(toHex(tx.serializeRLP()));
-      const result = await this.web3.eth.sendSignedTransaction(txWire);
-      this.loggingService.sendInfoLevelMessage(`Result: ${result}`);
-      const transaction = await this.web3.eth.getTransaction(result.transactionHash);
-      this.loggingService.sendInfoLevelMessage(`Transaction: ${transaction}`);
-    };
+    const transferAuthAddress = await this.registry.getContractAddressByName(
+      'TransferAuthorization'
+    );
+    const hashFunction = new Keccak(256);
+    hashFunction.update('createRequest(address,address,address,uint256)');
+    const hash = hashFunction.digest();
+    const methodSignature = hash.toString('hex').substring(0, 8);
+    const abiCoder = new utils.AbiCoder();
+    const abi = await abiCoder.encode(
+      ['address', 'address', 'address', 'uint256'],
+      [senderAddress, recipientAddress, tokenAddress, value]
+    );
+    const data = fromHex(methodSignature + strip0x(abi));
+    const tx = new Tx(environment.bloxbergChainId);
+    tx.nonce = await this.web3.eth.getTransactionCount(senderAddress);
+    tx.gasPrice = Number(await this.web3.eth.getGasPrice());
+    tx.gasLimit = 8000000;
+    tx.to = fromHex(strip0x(transferAuthAddress));
+    tx.value = toValue(value);
+    tx.data = data;
+    const txMsg = tx.message();
+    const privateKey = this.authService.mutableKeyStore.getPrivateKey();
+    if (!privateKey.isDecrypted()) {
+      const password = window.prompt('password');
+      await privateKey.decrypt(password);
+    }
+    const signatureObject = secp256k1.ecdsaSign(txMsg, privateKey.keyPacket.privateParams.d);
+    const r = signatureObject.signature.slice(0, 32);
+    const s = signatureObject.signature.slice(32);
+    const v = signatureObject.recid;
+    tx.setSignature(r, s, v);
+    const txWire = add0x(toHex(tx.serializeRLP()));
+    const result = await this.web3.eth.sendSignedTransaction(txWire);
+    this.loggingService.sendInfoLevelMessage(`Result: ${result}`);
+    const transaction = await this.web3.eth.getTransaction(result.transactionHash);
+    this.loggingService.sendInfoLevelMessage(`Transaction: ${transaction}`);
  }
 }
--- a/src/app/_services/user.service.ts
+++ b/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
-  ) {}
-
-  async init(): Promise<void> {
-    await this.authService.init();
-    await this.tokenService.init();
-    this.keystore = this.authService.mutableKeyStore;
-    this.signer = new PGPSigner(this.keystore);
-    this.registry = await RegistryService.getRegistry();
+  ) {
+    this.authService.init().then(() => {
+      this.keystore = authService.mutableKeyStore;
+      this.signer = new PGPSigner(this.keystore);
+    });
+    this.registry = registryService.getRegistry();
+    this.registry.load();
  }

  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.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0]
-          );
-        };
+        accountInfo.balance = await this.tokenService.getTokenBalance(
+          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);
-  }
 }
--- a/src/app/_services/web3.service.spec.ts
+++ b/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();
-  });
-});
--- a/src/app/_services/web3.service.ts
+++ b/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;
-  }
-}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
+<app-network-status></app-network-status>
 <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>
--- a/src/app/app.component.ts
+++ b/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> {
-    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 🦗?
-    }
+  ngOnInit(): void {
    if (!this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() => {
        if (confirm('New Version available. Load New Version?')) {
--- a/src/app/auth/auth.component.html
+++ b/src/app/auth/auth.component.html
@@ -1,9 +1,8 @@
-<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>
--- a/src/app/auth/auth.module.ts
+++ b/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 {}
--- a/src/app/pages/accounts/account-details/account-details.component.html
+++ b/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>
-                  <input matInput type="text" id="firstName" placeholder="{{account?.vcard?.fn[0].value.split(' ')[0]}}"
-                         value="{{account?.vcard?.fn[0].value.split(' ')[0]}}" formControlName="firstName" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors">First 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-label>Name(s): *</mat-label>
+                  <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
+                         value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
+                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">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>
-                <tr mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
-                         (click)="viewTransaction(transaction)"></tr>
-              </table>
+                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
+                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
+                         (click)="viewTransaction(transaction)"></mat-row>
+              </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">
--- a/src/app/pages/accounts/account-details/account-details.component.ts
+++ b/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],
-      lastName: ['', Validators.required],
+      name: ['', 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();
-    await this.tokenService.init();
-    await this.transactionService.init();
-    await this.userService.init();
-    await this.blockSyncService.blockSync(this.accountAddress);
-    this.userService.resetAccountsList();
-    (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
-      async (res) => {
-        if (res !== undefined) {
-          this.account = res;
-          this.cdr.detectChanges();
-          this.loggingService.sendInfoLevelMessage(this.account);
-          const fullName = this.account.vcard?.fn[0].value.split(' ');
-          this.accountInfoForm.patchValue({
-            firstName: fullName[0],
-            lastName: fullName.slice(1).join(' '),
-            phoneNumber: this.account.vcard?.tel[0].value,
-            age: this.account.age,
-            type: this.account.type,
-            bio: this.account.products,
-            gender: this.account.gender,
-            businessCategory:
-              this.account.category ||
-              this.userService.getCategoryByProduct(this.account.products[0]),
-            userLocation: this.account.location.area_name,
-            location:
-              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.route.paramMap.subscribe(async (params: Params) => {
+      this.accountAddress = add0x(params.get('id'));
+      this.bloxbergLink =
+        'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
+      (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
+        async (res) => {
+          if (res !== undefined) {
+            this.account = res;
+            this.cdr.detectChanges();
+            this.loggingService.sendInfoLevelMessage(this.account);
+            // this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first())
+            //   .subscribe(response => this.accountStatus = response);
+            this.accountInfoForm.patchValue({
+              name: this.account.vcard?.fn[0].value,
+              phoneNumber: this.account.vcard?.tel[0].value,
+              age: this.account.age,
+              type: this.account.type,
+              bio: this.account.products,
+              gender: this.account.gender,
+              businessCategory: this.account.category,
+              userLocation: this.account.location.area_name,
+              location: this.account.location.area,
+              locationType: this.account.location.area_type,
+            });
+          } else {
+            alert('Account not found!');
+          }
        }
-      }
-    );
-    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.blockSyncService.blockSync(this.accountAddress);
    });
    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,
--- a/src/app/pages/accounts/account-search/account-search.component.ts
+++ b/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> {
-    await this.userService.init();
+  ngOnInit(): void {
    this.nameSearchForm = this.formBuilder.group({
      name: ['', Validators.required],
    });
--- a/src/app/pages/accounts/accounts.component.html
+++ b/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">
--- a/src/app/pages/accounts/accounts.component.ts
+++ b/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> {
-    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 });
-    }
+  ngOnInit(): void {
    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 {
--- a/src/app/pages/accounts/create-account/create-account.component.ts
+++ b/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> {
-    await this.userService.init();
+  ngOnInit(): void {
    this.createForm = this.formBuilder.group({
      accountType: ['', Validators.required],
      idNumber: ['', Validators.required],
--- a/src/app/pages/admin/admin.component.ts
+++ b/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) {}
-
-  async ngOnInit(): Promise<void> {
-    await this.userService.init();
+  constructor(private userService: UserService, private loggingService: LoggingService) {
    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();
  }
--- a/src/app/pages/settings/settings.component.html
+++ b/src/app/pages/settings/settings.component.html
@@ -23,10 +23,9 @@
              SETTINGS
            </mat-card-title>
            <div class="card-body">
-              <h4>CICADA Admin Credentials</h4>
-              <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br>
-              <span><strong>Username: </strong> {{ userInfo?.name }} </span><br>
-              <span><strong>Email: </strong> {{ userInfo?.email }} </span>
+              <h4>Kobo Toolbox Credentials</h4>
+              <span><strong>Username: </strong> admin_reserve </span><br>
+              <span><strong>Password: </strong> ******** </span>
            </div>
            <hr>
            <div class="card-body">
--- a/src/app/pages/settings/settings.component.ts
+++ b/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> {
-    await this.authService.init();
-    this.authService.trustedUsersSubject.subscribe((users) => {
-      this.dataSource = new MatTableDataSource<any>(users);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-      this.trustedUsers = users;
-    });
-    this.userInfo = this.authService.getPrivateKeyInfo();
+  ngOnInit(): void {
+    const d = new Date();
+    this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
+    this.trustedUsers = this.authService.getTrustedUsers();
+    this.dataSource = new MatTableDataSource<any>(this.trustedUsers);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
  }

  doFilter(value: string): void {
--- a/src/app/pages/tokens/token-details/token-details.component.html
+++ b/src/app/pages/tokens/token-details/token-details.component.html
@@ -1,36 +1,60 @@
-<div *ngIf="token" class="mb-3 mt-1">
-  <div class="card text-center">
-    <mat-card-title class="card-header">
-      <div class="row">
-        TOKEN DETAILS
-        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
-      </div>
-    </mat-card-title>
-    <div class="card-body">
-      <div>
-        <span><strong>Name:</strong> {{token?.name}}</span>
-      </div>
-      <div>
-        <span><strong>Symbol:</strong> {{token?.symbol}}</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>
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid text-center" appMenuSelection>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
+          <li class="breadcrumb-item"><a routerLink="/tokens">Tokens</a></li>
+          <li class="breadcrumb-item active" aria-current="page">{{token.name}}</li>
+        </ol>
+      </nav>
+      <div class="col-md-6 center-body">
+        <div class="card">
+          <mat-card-title class="card-header">
+            Token
+          </mat-card-title>
+          <div class="card-body">
+            <div>
+              <span><strong>Name:</strong> {{token.name}}</span>
+            </div>
+            <div>
+              <span><strong>Symbol:</strong> {{token.symbol}}</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>
+
--- a/src/app/pages/tokens/token-details/token-details.component.ts
+++ b/src/app/pages/tokens/token-details/token-details.component.ts
@@ -1,12 +1,8 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { Token } from '@app/_models';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { TokenService } from '@app/_services';
+import { first } from 'rxjs/operators';
+import { Token } from '../../../_models';

@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() {}
+  constructor(private route: ActivatedRoute, private tokenService: TokenService) {
+    this.route.paramMap.subscribe((params: Params) => {
+      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);
-  }
 }
--- a/src/app/pages/tokens/tokens.component.html
+++ b/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">
--- a/src/app/pages/tokens/tokens.component.ts
+++ b/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>;
-  token: Token;
+  tokens: Array<Promise<string>>;

  constructor(
    private tokenService: TokenService,
@@ -28,25 +28,22 @@ export class TokensComponent implements OnInit {
  ) {}

  async ngOnInit(): Promise<void> {
-    await this.tokenService.init();
-    this.tokenService.onload = async (status: boolean): Promise<void> => {
-      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.tokenService.LoadEvent.subscribe(async () => {
+      this.tokens = await this.tokenService.getTokens();
    });
+    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 {
-    this.token = token;
+  async viewToken(token): Promise<void> {
+    await this.router.navigateByUrl(`/tokens/${token.symbol}`);
  }

  downloadCsv(): void {
--- a/src/app/pages/transactions/transaction-details/transaction-details.component.html
+++ b/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">
--- a/src/app/pages/transactions/transaction-details/transaction-details.component.ts
+++ b/src/app/pages/transactions/transaction-details/transaction-details.component.ts
@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } 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> {
-    await this.transactionService.init();
+  ngOnInit(): void {
    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);
-  }
 }
--- a/src/app/pages/transactions/transactions.component.html
+++ b/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">
--- a/src/app/pages/transactions/transactions.component.ts
+++ b/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())
--- a/src/app/shared/_pipes/unix-date.pipe.spec.ts
+++ b/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();
-  });
-});
--- a/src/app/shared/_pipes/unix-date.pipe.ts
+++ b/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');
-  }
-}
--- a/src/app/shared/footer/footer.component.html
+++ b/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> 🄯.
-  {{ currentYear }}
-  <a target="blank" title="Gitlab@GrassrootsEconomics" href="https://gitlab.com/grassrootseconomics"><u> Grassroots Economics </u></a>
-
+  2020 © Grassroots Economics
 </footer>
 <!-- end Footer -->
--- a/src/app/shared/footer/footer.component.ts
+++ b/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 {}
--- a/src/app/shared/network-status/network-status.component.html
+++ b/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>
--- a/src/app/shared/shared.module.ts
+++ b/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],
 })
--- a/src/app/shared/sidebar/sidebar.component.html
+++ b/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">
--- a/src/assets/icons/manifest-icon-512.ico
+++ b/src/assets/icons/manifest-icon-512.ico
--- a/src/assets/js/block-sync/data/AddressDeclarator.json
+++ b/src/assets/js/block-sync/data/AddressDeclarator.json
--- a/src/assets/js/block-sync/driver.js
+++ b/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) {
--- a/src/environments/environment.dev.ts
+++ b/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',
 };
--- a/src/environments/environment.prod.ts
+++ b/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',
 };
--- a/src/environments/environment.ts
+++ b/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',
 };
--- a/src/index.html
+++ b/src/index.html
@@ -3,11 +3,10 @@
 <head>
  <meta charset="utf-8">
  <title>CICADA</title>
-  <base href="./">
+  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description"/>
  <meta content="Spencer Ofwiti" name="author"/>
-  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  <link rel="icon" type="image/x-icon" href="assets/icons/manifest-icon-512.png">
  <link rel="apple-touch-icon" href="assets/icons/apple-icon-180.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -18,8 +18,8 @@ body {
  background: #fafafa;
 }

-.background-dark {
-  background: #313a46 !important;
+.bg-dark {
+  background: #313a46;
 }

 p {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,11 +14,9 @@
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
-    "esModuleInterop": true,
    "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
    "module": "es2020",
-    "typeRoots": ["node_modules/@types"],
    "lib": [
      "es2018",
      "dom"