machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bisq module separation.

Browse Source 
Transaction view.
Block view.
Blocks list.
This commit is contained in:
softsimon
2020-07-13 15:16:12 +07:00
parent 60e1b9a41e
commit db2e293ce5
25 changed files with 438 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/app/bisq/bisq-block/bisq-block.component.html
View File

@@ -6,23 +6,95 @@
<div class="clearfix"></div>
<ng-template ngFor let-tx [ngForOf]="bisqTransactions">
<ng-template [ngIf]="!isLoading && !error">
<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 class="box">
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Hash</td>
<td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}">{{ block.hash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.hash"></app-clipboard></td>
</tr>
<tr>
<td>Timestamp</td>
<td>
{{ block.time | date:'yyyy-MM-dd HH:mm' }}
<div class="lg-inline">
<i>(<app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since> ago)</i>
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Previous hash</td>
<td><a [routerLink]="['/block/' | relativeUrl, block.previousBlockHash]" title="{{ block.hash }}">{{ block.previousBlockHash | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.previousBlockHash"></app-clipboard></td>
</tr>
</table>
</div>
</div>
<div class="clearfix"></div>
</div>
<app-bisq-transfers [tx]="tx"></app-bisq-transfers>
<div class="clearfix"></div>
<br>
<h2>{{ block.txs.length | number }} transactions</h2>
<ng-template ngFor let-tx [ngForOf]="block.txs">
<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>
</ng-template>
<ng-template [ngIf]="isLoading">
<div class="box">
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Hash</td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td>Timestamp</td>
<td><span class="skeleton-loader"></span></td>
</tr>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width">Previous hash</td>
<td><span class="skeleton-loader"></span></td>
</tr>
</table>
</div>
</div>
</div>
</ng-template>
</div>

10
frontend/src/app/bisq/bisq-block/bisq-block.component.scss
View File

@@ -0,0 +1,10 @@
.td-width {
width: 175px;
}
@media (max-width: 767.98px) {
.td-width {
width: 140px;
}
}

52
frontend/src/app/bisq/bisq-block/bisq-block.component.ts
View File

@@ -1,32 +1,52 @@
import { Component, OnInit } from '@angular/core';
import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
import { ApiService } from 'src/app/services/api.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { BisqTransaction, BisqBlock } from 'src/app/bisq/bisq.interfaces';
import { BisqApiService } from '../bisq-api.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscribable, Subscription, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-bisq-block',
templateUrl: './bisq-block.component.html',
styleUrls: ['./bisq-block.component.scss']
})
export class BisqBlockComponent implements OnInit {
bisqTransactions: BisqTransaction[];
bisqTransactionsCount: number;
export class BisqBlockComponent implements OnInit, OnDestroy {
block: BisqBlock;
subscription: Subscription;
blockHash = '';
blockHeight = 0;
isLoading = true;
error: any;
constructor(
private apiService: ApiService,
private bisqApiService: BisqApiService,
private route: ActivatedRoute,
) { }
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;
});
this.subscription = this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
this.blockHash = params.get('id') || '';
this.isLoading = true;
if (history.state.data && history.state.data.blockHeight) {
this.blockHeight = history.state.data.blockHeight;
}
if (history.state.data && history.state.data.block) {
this.blockHeight = history.state.data.block.height;
return of(history.state.data.block);
}
return this.bisqApiService.getBlock$(this.blockHash);
})
)
.subscribe((block: BisqBlock) => {
this.isLoading = false;
this.blockHeight = block.height;
this.block = block;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}