Add listerers for tracking new transactions.

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

src/app/app.component.spec.ts

@@ -1,6 +1,8 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import {TransactionService} from './_services';
+import {FooterStubComponent, SidebarStubComponent, TopbarStubComponent, TransactionServiceStub} from '../testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -9,8 +11,14 @@ describe('AppComponent', () => {
         RouterTestingModule
       ],
       declarations: [
-        AppComponent
+        AppComponent,
+        FooterStubComponent,
+        SidebarStubComponent,
+        TopbarStubComponent
       ],
+      providers: [
+        { provide: TransactionService, useClass: TransactionServiceStub }
+      ]
     }).compileComponents();
   });
 
@@ -25,11 +33,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('cic-staff-client');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('cic-staff-client app is running!');
-  });
 });

src/app/app.component.ts

@@ -1,10 +1,5 @@
 import {Component, HostListener, OnInit} from '@angular/core';
-import {TransactionService} from './_services/transaction.service';
+import {BlockSyncService, TransactionService} from './_services';
-import {fetcher} from './../assets/js/plugin';
-import {Registry, TransactionHelper} from './../assets/js/bancor/registry';
-import Web3 from 'web3';
-import { Settings } from './_models';
-
 
 @Component({
   selector: 'app-root',
@@ -16,90 +11,43 @@ export class AppComponent implements OnInit {
   registryAddress: string = '0xb708175e3f6Cd850643aAF7B32212AFad50e2549';
   readyStateTarget: number = 3;
   readyState: number = 0;
+  mediaQuery = window.matchMedia('(max-width: 768px)');
 
-  constructor(private transactionService: TransactionService) {}
+  constructor(
+    private transactionService: TransactionService,
+    private blockSyncService: BlockSyncService
+  ) {
+    this.blockSyncService.blockSync();
+  }
 
   ngOnInit(): void {
-    const settings = new Settings(this.scan);
+    this.mediaQuery.addListener(this.onResize);
-    const provider = 'ws://localhost:8545';
+    this.onResize(this.mediaQuery);
-    const readyStateElements = {
-      token: 1,
-      network: 2,
-    };
-    settings.w3.provider = provider;
-    settings.w3.engine = new Web3(provider);
-    settings.registry = new Registry(settings.w3.engine, this.registryAddress);
-    settings.txHelper = new TransactionHelper(settings.w3.engine, settings.registry);
-
-    settings.txHelper.ontransfer = async (transaction: any): Promise<void> => {
-      window.dispatchEvent(this.newTransferEvent(transaction));
-    };
-    settings.txHelper.onconversion = async (transaction: any): Promise<any> => {
-      window.dispatchEvent(this.newConversionEvent(transaction));
-    };
-    settings.registry.ontokenload = (tokenCount: number): void => {
-      console.debug('loaded tokens', tokenCount);
-      this.readyStateProcessor(settings, readyStateElements.token);
-    };
-    settings.registry.onregistryload = (tokenCount: number): void => {
-      console.debug('loaded network contracts', tokenCount);
-      this.readyStateProcessor(settings, readyStateElements.network);
-    };
-
-    settings.registry.load();
   }
 
-  readyStateProcessor(settings, bit): void {
+  // Load resize
-    this.readyState |= bit;
+  onResize(e): void {
-    if (this.readyStateTarget === this.readyState && this.readyStateTarget) {
+    const sidebar = document.getElementById('sidebar');
-      console.log('reached readyState target', this.readyStateTarget);
+    const content = document.getElementById('content');
-      fetcher(settings);
+    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    sidebarCollapse.classList.remove('active');
+    if (e.matches) {
+      sidebar.classList.add('active');
+      content.classList.add('active');
+    } else {
+      sidebar.classList.remove('active');
+      content.classList.remove('active');
     }
   }
 
-  newTransferEvent(tx): any {
-    return new CustomEvent('cic_transfer', {
-      detail: {
-        tx,
-      },
-    });
-  }
-
-  newConversionEvent(tx): any {
-    return new CustomEvent('cic_convert', {
-      detail: {
-        tx,
-      },
-    });
-  }
-
-  async scan(settings, lo, hi, bloomBlockBytes, bloomBlocktxBytes, bloomRounds): Promise<void> {
-    const w = new Worker('./../assets/js/worker.js');
-    w.onmessage = (m) => {
-      settings.txHelper.processReceipt(m.data);
-    };
-    w.postMessage({
-      w3_provider: settings.w3.provider,
-      lo,
-      hi,
-      filters: [
-        bloomBlockBytes,
-        bloomBlocktxBytes,
-      ],
-      filter_rounds: bloomRounds,
-    });
-  }
-
   @HostListener('window:cic_transfer', ['$event'])
   cicTransfer(event: CustomEvent): void {
-    console.log('have tx ', event.detail.tx);
     const transaction = event.detail.tx;
-    this.transactionService.setTransaction(transaction);
+    this.transactionService.setTransaction(transaction, 100);
   }
 
   @HostListener('window:cic_convert', ['$event'])
   cicConvert(event: CustomEvent): void {
-    console.log('have convert ', event.detail.tx);
     const conversion = event.detail.tx;
     this.transactionService.setConversion(conversion);
   }

src/app/app.module.ts

@@ -6,6 +6,8 @@ import { AppComponent } from './app.component';
 import {DataTablesModule} from 'angular-datatables';
 import {SharedModule} from './shared/shared.module';
 import {HttpClientModule} from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatTableModule} from '@angular/material/table';
 
 @NgModule({
   declarations: [
@@ -16,7 +18,9 @@ import {HttpClientModule} from '@angular/common/http';
     AppRoutingModule,
     HttpClientModule,
     DataTablesModule,
-    SharedModule
+    SharedModule,
+    BrowserAnimationsModule,
+    MatTableModule
   ],
   providers: [],
   bootstrap: [AppComponent]