Bisq explorer is now a separate module.

This commit is contained in:
softsimon 2020-07-11 00:17:13 +07:00
parent 8c23eae5fe
commit 60e1b9a41e
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
34 changed files with 347 additions and 106 deletions

View File

@ -59,27 +59,25 @@ class Bisq {
}
private buildIndex() {
this.transactions = [];
this.transactionsIndex = {};
this.blocksIndex = {};
this.blocks.forEach((block) => {
if (this.blocksIndex[block.hash]) {
return;
}
this.blocksIndex[block.hash] = block;
block.txs.forEach((tx) => {
this.transactions.push(tx);
this.transactions.unshift(tx);
this.transactionsIndex[tx.id] = tx;
});
});
this.blocks.reverse();
this.transactions.reverse();
console.log('Bisq data index rebuilt');
}
private async loadBisqBlocksDump(cacheData: string) {
private async loadBisqBlocksDump(cacheData: string): Promise<void> {
const start = new Date().getTime();
if (cacheData && cacheData.length !== 0) {
console.log('Parsing Bisq data from dump file');
const data: BisqBlocks = JSON.parse(cacheData);
if (data.blocks) {
if (data.blocks && data.blocks.length !== this.blocks.length) {
this.blocks = data.blocks;
this.latestBlockHeight = data.chainHeight;
const end = new Date().getTime();

View File

@ -1,18 +1,18 @@
{
"/api": {
"/api/v1": {
"target": "http://localhost:8999/",
"secure": false
},
"/ws": {
"/api/v1/ws": {
"target": "http://localhost:8999/",
"secure": false,
"ws": true
},
"/electrs": {
"target": "https://www.blockstream.info/testnet/api/",
"/api": {
"target": "http://localhost:50001/",
"secure": false,
"pathRewrite": {
"^/electrs": ""
"^/api": ""
}
}
}

View File

@ -20,7 +20,6 @@ import { AddressComponent } from './components/address/address.component';
import { SearchFormComponent } from './components/search-form/search-form.component';
import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
import { WebsocketService } from './services/websocket.service';
import { TimeSinceComponent } from './components/time-since/time-since.component';
import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
import { QrcodeComponent } from './components/qrcode/qrcode.component';
@ -45,8 +44,6 @@ import { AssetsComponent } from './assets/assets.component';
import { StatusViewComponent } from './components/status-view/status-view.component';
import { MinerComponent } from './components/miner/miner.component';
import { SharedModule } from './shared/shared.module';
import { BisqTransfersComponent } from './components/bisq-transfers/bisq-transfers.component';
import { BisqTransactionDetailsComponent } from './components/bisq-transaction-details/bisq-transaction-details.component';
@NgModule({
declarations: [
@ -65,7 +62,6 @@ import { BisqTransactionDetailsComponent } from './components/bisq-transaction-d
AmountComponent,
SearchFormComponent,
LatestBlocksComponent,
TimeSinceComponent,
TimespanComponent,
AddressLabelsComponent,
MempoolBlocksComponent,
@ -81,8 +77,6 @@ import { BisqTransactionDetailsComponent } from './components/bisq-transaction-d
AssetsComponent,
MinerComponent,
StatusViewComponent,
BisqTransfersComponent,
BisqTransactionDetailsComponent,
],
imports: [
BrowserModule,

View File

@ -0,0 +1,28 @@
<div class="container-xl">
<div class="title-block">
<h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
</div>
<div class="clearfix"></div>
<ng-template ngFor let-tx [ngForOf]="bisqTransactions">
<div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">
<span style="float: left;" class="d-block d-md-none">{{ tx.id | shortenString : 16 }}</span>
<span style="float: left;" class="d-none d-md-block">{{ tx.id }}</span>
</a>
<div class="float-right">
{{ tx.time | date:'yyyy-MM-dd HH:mm' }}
</div>
<div class="clearfix"></div>
</div>
<app-bisq-transfers [tx]="tx"></app-bisq-transfers>
<br>
</ng-template>
</div>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BisqBlockComponent } from './bisq-block.component';
describe('BisqBlockComponent', () => {
let component: BisqBlockComponent;
let fixture: ComponentFixture<BisqBlockComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BisqBlockComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BisqBlockComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,32 @@
import { Component, OnInit } from '@angular/core';
import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
import { ApiService } from 'src/app/services/api.service';
@Component({
selector: 'app-bisq-block',
templateUrl: './bisq-block.component.html',
styleUrls: ['./bisq-block.component.scss']
})
export class BisqBlockComponent implements OnInit {
bisqTransactions: BisqTransaction[];
bisqTransactionsCount: number;
blockHash = '';
blockHeight = 0;
constructor(
private apiService: ApiService,
) { }
ngOnInit(): void {
this.apiService.listBisqBlockTransactions$(this.blockHash, 0, 10)
.subscribe((response) => {
this.bisqTransactionsCount = parseInt(response.headers.get('x-total-count'), 10);
this.bisqTransactions = response.body;
});
}
}

View File

@ -0,0 +1,5 @@
<div class="container-xl">
<h2 style="float: left;">Blocks</h2>
<br>
</div>

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bisq-blocks',
templateUrl: './bisq-blocks.component.html',
styleUrls: ['./bisq-blocks.component.scss']
})
export class BisqBlocksComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1 @@
<router-outlet></router-outlet>

View File

@ -0,0 +1,18 @@
import { Component, OnInit } from '@angular/core';
import { WebsocketService } from 'src/app/services/websocket.service';
@Component({
selector: 'app-bisq-explorer',
templateUrl: './bisq-explorer.component.html',
styleUrls: ['./bisq-explorer.component.scss']
})
export class BisqExplorerComponent implements OnInit {
constructor(
private websocketService: WebsocketService,
) { }
ngOnInit(): void {
this.websocketService.want(['blocks']);
}
}

View File

@ -0,0 +1,65 @@
<div class="container-xl">
<h1 class="float-left mr-3 mb-md-3">Transaction</h1>
<button type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">2 confirmations</button>
<div>
<a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.blockHash]" style="line-height: 56px;">
<span class="d-inline d-lg-none">{{ bisqTx.blockHash | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ bisqTx.blockHash }}</span>
</a>
</div>
<div class="clearfix"></div>
<div class="box">
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Included in block</td>
<td>
<a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHash } }">{{ bisqTx.blockHeight }}</a>
<i> (<app-time-since [time]="bisqTx.time" [fastRender]="true"></app-time-since> ago)</i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Fee</td>
<td>15,436 sat ($1.40)</td>
</tr>
<tr>
<td>Fee per vByte</td>
<td> 68.2 sat/vB
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<h2>Details</h2>
<app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
<br>
<h2>Inputs & Outputs</h2>
<app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
<br>
</div>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BisqTransactionComponent } from './bisq-transaction.component';
describe('BisqTransactionComponent', () => {
let component: BisqTransactionComponent;
let fixture: ComponentFixture<BisqTransactionComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BisqTransactionComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BisqTransactionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,36 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
import { switchMap } from 'rxjs/operators';
import { ApiService } from 'src/app/services/api.service';
import { of } from 'rxjs';
@Component({
selector: 'app-bisq-transaction',
templateUrl: './bisq-transaction.component.html',
styleUrls: ['./bisq-transaction.component.scss']
})
export class BisqTransactionComponent implements OnInit {
bisqTx: BisqTransaction;
txId: string;
constructor(
private route: ActivatedRoute,
private apiService: ApiService,
) { }
ngOnInit(): void {
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.txId = params.get('id') || '';
if (history.state.bsqTx) {
return of(history.state.bsqTx);
}
return this.apiService.getBisqTransaction$(this.txId);
})
)
.subscribe((tx) => {
this.bisqTx = tx;
});
}
}

View File

@ -4,16 +4,49 @@ import { BisqRoutingModule } from './bisq.routing.module';
import { SharedModule } from '../shared/shared.module';
import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
import { BisqBlockComponent } from './bisq-block/bisq-block.component';
import { BisqIconComponent } from './bisq-icon/bisq-icon.component';
import { BisqTransactionDetailsComponent } from './bisq-transaction-details/bisq-transaction-details.component';
import { BisqTransfersComponent } from './bisq-transfers/bisq-transfers.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faLeaf, faQuestion, faExclamationTriangle, faRocket, faRetweet, faFileAlt, faMoneyBill,
faEye, faEyeSlash, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
import { BisqExplorerComponent } from './bisq-explorer/bisq-explorer.component';
@NgModule({
declarations: [
BisqTransactionsComponent,
BisqTransactionComponent,
BisqBlockComponent,
BisqTransactionComponent,
BisqIconComponent,
BisqTransactionDetailsComponent,
BisqTransfersComponent,
BisqBlocksComponent,
BisqExplorerComponent,
],
imports: [
CommonModule,
BisqRoutingModule,
SharedModule,
NgbPaginationModule,
FontAwesomeModule,
],
})
export class BisqModule { }
export class BisqModule {
constructor(library: FaIconLibrary) {
library.addIcons(faQuestion);
library.addIcons(faExclamationTriangle);
library.addIcons(faRocket);
library.addIcons(faRetweet);
library.addIcons(faLeaf);
library.addIcons(faFileAlt);
library.addIcons(faMoneyBill);
library.addIcons(faEye);
library.addIcons(faEyeSlash);
library.addIcons(faLock);
library.addIcons(faLockOpen);
}
}

View File

@ -1,18 +1,17 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StartComponent } from '../components/start/start.component';
import { TransactionComponent } from '../components/transaction/transaction.component';
import { BlockComponent } from '../components/block/block.component';
import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component';
import { AboutComponent } from '../components/about/about.component';
import { AddressComponent } from '../components/address/address.component';
import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
import { StatisticsComponent } from '../components/statistics/statistics.component';
import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
import { BisqBlockComponent } from './bisq-block/bisq-block.component';
import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
import { BisqExplorerComponent } from './bisq-explorer/bisq-explorer.component';
const routes: Routes = [
{
path: '',
component: StartComponent,
component: BisqExplorerComponent,
children: [
{
path: '',
@ -20,34 +19,30 @@ const routes: Routes = [
},
{
path: 'tx/:id',
component: TransactionComponent
component: BisqTransactionComponent
},
{
path: 'blocks',
children: [],
component: BisqBlocksComponent
},
{
path: 'block/:id',
component: BlockComponent
component: BisqBlockComponent,
},
{
path: 'mempool-block/:id',
component: MempoolBlockComponent
path: 'address/:id',
component: AddressComponent
},
],
},
{
path: 'graphs',
component: StatisticsComponent,
},
{
path: 'about',
component: AboutComponent,
},
{
path: 'address/:id',
children: [],
component: AddressComponent
},
{
path: '**',
redirectTo: ''
{
path: 'about',
component: AboutComponent,
},
{
path: '**',
redirectTo: ''
}
]
}
];

View File

@ -24,14 +24,22 @@
<div class="navbar-collapse collapse" id="navbarCollapse" [ngClass]="{'show': navCollapsed}">
<ul class="navbar-nav mr-auto {{ network }}">
<li class="nav-item" routerLinkActive="active">
<ng-template [ngIf]="network === 'bisq'">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/bisq']" (click)="collapse()">Transactions</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/bisq/blocks']" (click)="collapse()">Blocks</a>
</li>
</ng-template>
<li *ngIf="network !== 'bisq'" class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()">Graphs</a>
</li>
<li class="nav-item" routerLinkActive="active">
<li *ngIf="network !== 'bisq'" class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()">TV view &nbsp;<img src="./resources/expand.png" width="15"/></a>
</li>
<li *ngIf="network === 'liquid'" class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()">Assets</a>
<a class="nav-link" [routerLink]="['liquid/assets']" (click)="collapse()">Assets</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/about' | relativeUrl]" (click)="collapse()">About</a>
@ -46,6 +54,10 @@
<router-outlet></router-outlet>
<br><br><br>
<br>
<app-footer></app-footer>
<ng-template [ngIf]="network !== 'bisq'">
<br><br>
<app-footer></app-footer>
</ng-template>

View File

@ -148,21 +148,6 @@
<br>
<ng-template [ngIf]="bisqTx">
<h2>BSQ Information</h2>
<app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>
<br>
<h2>BSQ transfers</h2>
<app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>
<br>
</ng-template>
<h2>Inputs & Outputs</h2>
<app-transactions-list [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>

View File

@ -92,10 +92,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
this.segwitGains = calcSegwitFeeGains(tx);
this.isRbfTransaction = tx.vin.some((v) => v.sequence < 0xfffffffe);
if (this.network === 'bisq') {
this.loadBisqTransaction();
}
if (!tx.status.confirmed) {
this.websocketService.startTrackTransaction(tx.txid);
@ -139,17 +135,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
.subscribe((rbfTransaction) => this.rbfTransaction = rbfTransaction);
}
loadBisqTransaction() {
if (history.state.bsqTx) {
this.bisqTx = history.state.bsqTx;
} else {
this.apiService.getBisqTransaction$(this.txId)
.subscribe((tx) => {
this.bisqTx = tx;
});
}
}
handleLoadElectrsTransactionError(error: any): Observable<any> {
if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
this.websocketService.startMultiTrackTransaction(this.txId);

View File

@ -73,4 +73,10 @@ export class ApiService {
getBisqBlock$(hash: string): Observable<BisqBlock> {
return this.httpClient.get<BisqBlock>(this.apiBaseUrl + '/bisq/block/' + hash);
}
listBisqBlockTransactions$(blockHash: string, start: number, length: number): Observable<HttpResponse<BisqTransaction[]>> {
return this.httpClient.get<BisqTransaction[]>(
this.apiBaseUrl + `/bisq/block/${blockHash}/txs/${start}/${length}`, { observe: 'response' }
);
}
}

View File

@ -30,7 +30,7 @@ export class WebsocketService {
private stateService: StateService,
) {
this.network = this.stateService.network === 'bisq' ? '' : this.stateService.network;
this.websocketSubject = webSocket<WebsocketResponse | any>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.startSubscription();
this.stateService.networkChanged$.subscribe((network) => {
@ -48,7 +48,7 @@ export class WebsocketService {
this.websocketSubject.complete();
this.subscription.unsubscribe();
this.websocketSubject = webSocket<WebsocketResponse | any>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
this.startSubscription();
});

View File

@ -8,9 +8,7 @@ import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { BisqIconComponent } from '../components/bisq-icon/bisq-icon.component';
import { faLeaf, faQuestion, faExclamationTriangle, faRocket, faRetweet, faFileAlt, faMoneyBill, faEye, faEyeSlash, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
import { TimeSinceComponent } from '../components/time-since/time-since.component';
@NgModule({
declarations: [
@ -22,11 +20,10 @@ import { faLeaf, faQuestion, faExclamationTriangle, faRocket, faRetweet, faFileA
WuBytesPipe,
CeilPipe,
ShortenStringPipe,
BisqIconComponent,
TimeSinceComponent,
],
imports: [
CommonModule,
FontAwesomeModule,
],
providers: [
VbytesPipe,
@ -40,21 +37,7 @@ import { faLeaf, faQuestion, faExclamationTriangle, faRocket, faRetweet, faFileA
WuBytesPipe,
CeilPipe,
ShortenStringPipe,
BisqIconComponent,
TimeSinceComponent,
]
})
export class SharedModule {
constructor(library: FaIconLibrary) {
library.addIcons(faQuestion);
library.addIcons(faExclamationTriangle);
library.addIcons(faRocket);
library.addIcons(faRetweet);
library.addIcons(faLeaf);
library.addIcons(faFileAlt);
library.addIcons(faMoneyBill);
library.addIcons(faEye);
library.addIcons(faEyeSlash);
library.addIcons(faLock);
library.addIcons(faLockOpen);
}
}
export class SharedModule {}