Add block-sync to application.
This commit is contained in:
Spencer Ofwiti
@@ -1 +1,2 @@
|
||||
export * from './transaction';
|
||||
export * from './settings';
|
||||
|
||||
18
src/app/_models/settings.ts
Normal file
18
src/app/_models/settings.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export class Settings {
|
||||
w3: W3 = {
|
||||
engine: undefined,
|
||||
provider: undefined,
|
||||
};
|
||||
scanFilter: any;
|
||||
registry: any;
|
||||
txHelper: any;
|
||||
|
||||
constructor(scanFilter: any) {
|
||||
this.scanFilter = scanFilter;
|
||||
}
|
||||
}
|
||||
|
||||
export class W3 {
|
||||
engine: any;
|
||||
provider: any;
|
||||
}
|
||||
@@ -3,11 +3,14 @@ import {HttpClient} from '@angular/common/http';
|
||||
import {map} from 'rxjs/operators';
|
||||
import {Observable} from 'rxjs';
|
||||
import {environment} from '../../environments/environment';
|
||||
import {Conversion, Transaction} from '../_models';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TransactionService {
|
||||
transactions: Transaction[] = [];
|
||||
conversions: Conversion[] = [];
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
@@ -24,4 +27,12 @@ export class TransactionService {
|
||||
return response;
|
||||
}));
|
||||
}
|
||||
|
||||
setTransaction(transaction): void {
|
||||
this.transactions.push(transaction);
|
||||
}
|
||||
|
||||
setConversion(conversion): void {
|
||||
this.conversions.push(conversion);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,106 @@
|
||||
import { Component } from '@angular/core';
|
||||
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';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
export class AppComponent implements OnInit {
|
||||
title = 'cic-staff-client';
|
||||
registryAddress: string = '0xb708175e3f6Cd850643aAF7B32212AFad50e2549';
|
||||
readyStateTarget: number = 3;
|
||||
readyState: number = 0;
|
||||
|
||||
constructor(private transactionService: TransactionService) {}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
readyStateProcessor(settings, bit): void {
|
||||
this.readyState |= bit;
|
||||
if (this.readyStateTarget === this.readyState && this.readyStateTarget) {
|
||||
console.log('reached readyState target', this.readyStateTarget);
|
||||
fetcher(settings);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<div *ngIf="conversion" class="mb-5">
|
||||
<div class="card text-center">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<strong>CONVERSION DETAILS</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Exchange: </h4>
|
||||
<h6>Trader Address: {{conversion.trader}}</h6><br>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Source Token: </h4>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<p>Address: {{conversion.sourceToken.address}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Name: {{conversion.sourceToken.name}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Symbol: {{conversion.sourceToken.symbol}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Amount: {{conversion.fromValue | currency: conversion.sourceToken.name + ' ' }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Destination Token: </h4>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<p>Address: {{conversion.destinationToken.address}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Name: {{conversion.destinationToken.name}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Symbol: {{conversion.destinationToken.symbol}}</p>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<p>Amount: {{conversion.toValue | currency: conversion.destinationToken.name + ' ' }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ConversionDetailsComponent } from './conversion-details.component';
|
||||
|
||||
describe('ConversionDetailsComponent', () => {
|
||||
let component: ConversionDetailsComponent;
|
||||
let fixture: ComponentFixture<ConversionDetailsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ConversionDetailsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ConversionDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {Conversion} from '../../../_models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-conversion-details',
|
||||
templateUrl: './conversion-details.component.html',
|
||||
styleUrls: ['./conversion-details.component.scss']
|
||||
})
|
||||
export class ConversionDetailsComponent implements OnInit {
|
||||
@Input() conversion: Conversion;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<div *ngIf="transaction" class="mb-5">
|
||||
<div class="card">
|
||||
<div class="card-header text-center bg-dark text-white">
|
||||
<strong>TRANSACTIONS DETAILS</strong>
|
||||
<div class="card text-center">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<strong>TRANSACTION DETAILS</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let transaction of data">
|
||||
<tr *ngFor="let transaction of transactions">
|
||||
<td>{{transaction.from}}</td>
|
||||
<td>{{transaction.to}}</td>
|
||||
<td>{{transaction.value | currency: transaction.token.name + ' '}}</td>
|
||||
@@ -47,6 +47,49 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Conversions
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<app-conversion-details [conversion]="conversion"></app-conversion-details>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-bordered table-hover table-sm row-border hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">Initial Token</th>
|
||||
<th scope="col">Initial Value</th>
|
||||
<th scope="col">Final Token</th>
|
||||
<th scope="col">Final Value</th>
|
||||
<th scope="col">Trader</th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let conversion of conversions">
|
||||
<td>{{conversion.sourceToken.symbol}}</td>
|
||||
<td>{{conversion.fromValue | currency: conversion.sourceToken.name + ' '}}</td>
|
||||
<td>{{conversion.destinationToken.symbol}}</td>
|
||||
<td>{{conversion.toValue | currency: conversion.destinationToken.name + ' '}}</td>
|
||||
<td>{{conversion.trader}}</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-outline-primary" (click)="viewConversion(conversion)"><i class="fa fa-eye"> VIEW </i></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">Initial Token</th>
|
||||
<th scope="col">Initial Value</th>
|
||||
<th scope="col">Final Token</th>
|
||||
<th scope="col">Final Value</th>
|
||||
<th scope="col">Trader</th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-footer appMenuSelection></app-footer>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {TransactionService} from '../../_services/transaction.service';
|
||||
import {Transaction} from '../../_models';
|
||||
import {Conversion, Transaction} from '../../_models';
|
||||
import {Subject} from 'rxjs';
|
||||
import {first} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-transactions',
|
||||
@@ -10,22 +9,12 @@ import {first} from 'rxjs/operators';
|
||||
styleUrls: ['./transactions.component.scss']
|
||||
})
|
||||
export class TransactionsComponent implements OnInit, OnDestroy {
|
||||
public data: Transaction[] = [
|
||||
{from: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', to: '0xc14958CD9A605AB0d9A36850362AaD2b9D42DF97', token: {address: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', name: 'RSV', symbol: 'Reserve Token'}, value: 100000, tx: {block: 20, txIndex: 0, txHash: '0x88a498042610113f1348fdaab03eabd6d67e1d182fb23cb2b580a3db342a5aa5', timestamp: 1603360297, success: true}},
|
||||
{from: '0xc14958CD9A605AB0d9A36850362AaD2b9D42DF97', to: '0xbF0b5cD8Ae50b3bfA304D1f989916038E6d2Fa2e', token: {address: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', name: 'RSV', symbol: 'Reserve Token'}, value: 100000, tx: {block: 26, txIndex: 0, txHash: '0x165b4a37ccf7f8bf1fac057d509939d890ada47d040d1f8e180aed538c72af6c', timestamp: 1603360298, success: true}},
|
||||
{from: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', to: '0xe3C4db5947409Aff0FF8D643047EA41515cA4B8e', token: {address: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', name: 'RSV', symbol: 'Reserve Token'}, value: 50000, tx: {block: 21, txIndex: 0, txHash: '0x552948b95f0bf2768e0ed2251627295d9c60d9d3509f397aa1c585be496dea39', timestamp: 1603360298, success: true}},
|
||||
{from: '0xe3C4db5947409Aff0FF8D643047EA41515cA4B8e', to: '0xee617C30f026536d420358CF00fE60b993975A6f', token: {address: '0x36Bd1f197E2b3D2b8213d4A1Dc20a6d949B8C273', name: 'RSV', symbol: 'Reserve Token'}, value: 50000, tx: {block: 29, txIndex: 0, txHash: '0x2aa5cfb84eb1d36fe9f9554c4633914eb8e5813a47ef07d02b621b96c9d86ffa', timestamp: 1603360298, success: true}},
|
||||
{from: '0x0000000000000000000000000000000000000000', to: '0xc14958CD9A605AB0d9A36850362AaD2b9D42DF97', token: {address: '0x528c3E8B3e6dC646530440D88F83da0e45DaC25b', name: 'BRT', symbol: 'Bert Token'}, value: 400000, tx: {block: 26, txIndex: 0, txHash: '0x165b4a37ccf7f8bf1fac057d509939d890ada47d040d1f8e180aed538c72af6c', timestamp: 1603360298, success: true}},
|
||||
{from: '0x0000000000000000000000000000000000000000', to: '0xe3C4db5947409Aff0FF8D643047EA41515cA4B8e', token: {address: '0x720B26ebd87476b39a47DE50020376d099d7e1A0', name: 'RNI', symbol: 'Ernie Token'}, value: 200000, tx: {block: 29, txIndex: 0, txHash: '0x2aa5cfb84eb1d36fe9f9554c4633914eb8e5813a47ef07d02b621b96c9d86ffa', timestamp: 1603360298, success: true}},
|
||||
{from: '0xc14958CD9A605AB0d9A36850362AaD2b9D42DF97', to: '0x528c3E8B3e6dC646530440D88F83da0e45DaC25b', token: {address: '0x528c3E8B3e6dC646530440D88F83da0e45DaC25b', name: 'BRT', symbol: 'Bert Token'}, value: 100, tx: {block: 33, txIndex: 0, txHash: '0xfbe21fcf7677a760b8792e5499e4cf7d5b9d16b0e343e81502882962467bba3b', timestamp: 1603645828, success: true}},
|
||||
];
|
||||
dtOptions: DataTables.Settings = {};
|
||||
dtTrigger: Subject<any> = new Subject();
|
||||
defaultLimit = 100;
|
||||
defaultOffset = 0;
|
||||
transactions: any[] = [];
|
||||
transactions: Transaction[] = [];
|
||||
conversions: Conversion[] = [];
|
||||
transaction: Transaction;
|
||||
error: any;
|
||||
conversion: Conversion;
|
||||
|
||||
constructor(private transactionService: TransactionService) { }
|
||||
|
||||
@@ -37,15 +26,9 @@ export class TransactionsComponent implements OnInit, OnDestroy {
|
||||
processing: true
|
||||
};
|
||||
|
||||
this.transactionService.getAllTransactions(this.defaultOffset, this.defaultLimit)
|
||||
.pipe(first()).subscribe(response => {
|
||||
this.transactions = response;
|
||||
this.dtTrigger.next();
|
||||
console.log(response);
|
||||
}, error => {
|
||||
this.error = error;
|
||||
console.log(error);
|
||||
});
|
||||
this.transactions = this.transactionService.transactions;
|
||||
this.conversions = this.transactionService.conversions;
|
||||
this.dtTrigger.next();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@@ -55,4 +38,8 @@ export class TransactionsComponent implements OnInit, OnDestroy {
|
||||
viewTransaction(transaction): void {
|
||||
this.transaction = transaction;
|
||||
}
|
||||
|
||||
viewConversion(conversion): void {
|
||||
this.conversion = conversion;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,10 +6,11 @@ import { TransactionsComponent } from './transactions.component';
|
||||
import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
|
||||
import {DataTablesModule} from 'angular-datatables';
|
||||
import {SharedModule} from '../../shared/shared.module';
|
||||
import { ConversionDetailsComponent } from './conversion-details/conversion-details.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [TransactionsComponent, TransactionDetailsComponent],
|
||||
declarations: [TransactionsComponent, TransactionDetailsComponent, ConversionDetailsComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
TransactionsRoutingModule,
|
||||
|
||||
Reference in New Issue
Block a user