Add listerers for tracking new transactions.

This commit is contained in:
Spencer Ofwiti 2020-11-25 11:05:13 +03:00
parent fb63c5d504
commit 933d73e635
4 changed files with 38 additions and 85 deletions

View File

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

View File

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

View File

@ -1,10 +1,5 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {TransactionService} from './_services/transaction.service';
import {fetcher} from './../assets/js/plugin';
import {Registry, TransactionHelper} from './../assets/js/bancor/registry';
import Web3 from 'web3';
import { Settings } from './_models';
import {BlockSyncService, TransactionService} from './_services';
@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);
const provider = 'ws://localhost:8545';
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();
this.mediaQuery.addListener(this.onResize);
this.onResize(this.mediaQuery);
}
readyStateProcessor(settings, bit): void {
this.readyState |= bit;
if (this.readyStateTarget === this.readyState && this.readyStateTarget) {
console.log('reached readyState target', this.readyStateTarget);
fetcher(settings);
// Load resize
onResize(e): void {
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content');
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);
}

View File

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