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

165
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
View File

@@ -2,64 +2,133 @@
<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>
<ng-template [ngIf]="!isLoading" [ngIfElse]="isLoadingTmpl">
<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>
<button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">{{ latestBlock.height - bisqTx.blockHeight + 1 }} confirmation<ng-container *ngIf="latestBlock.height - bisqTx.blockHeight + 1 > 1">s</ng-container></button>
<div class="box">
<div class="row">
<div class="col-sm">
<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>
<app-clipboard [text]="txId"></app-clipboard>
</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 / 1000" [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 burnt</td>
<td>
{{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ
</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>
</ng-template>
<ng-template #isLoadingTmpl>
<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"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td class="td-width"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<h2>Details</h2>
<div class="box">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<br>
<h2>Inputs & Outputs</h2>
<div class="box">
<div class="row">
<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>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></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>
</ng-template>
</div>

9
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss
View File

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

25
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.spec.ts
View File

@@ -1,25 +0,0 @@
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();
});
});

36
frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts
View File

@@ -1,36 +1,50 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } 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';
import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
import { switchMap, map } from 'rxjs/operators';
import { of, Observable, Subscription } from 'rxjs';
import { StateService } from 'src/app/services/state.service';
import { Block } from 'src/app/interfaces/electrs.interface';
import { BisqApiService } from '../bisq-api.service';
@Component({
selector: 'app-bisq-transaction',
templateUrl: './bisq-transaction.component.html',
styleUrls: ['./bisq-transaction.component.scss']
})
export class BisqTransactionComponent implements OnInit {
export class BisqTransactionComponent implements OnInit, OnDestroy {
bisqTx: BisqTransaction;
latestBlock$: Observable<Block>;
txId: string;
isLoading = true;
subscription: Subscription;
constructor(
private route: ActivatedRoute,
private apiService: ApiService,
private bisqApiService: BisqApiService,
private stateService: StateService,
) { }
ngOnInit(): void {
this.route.paramMap.pipe(
this.subscription = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.isLoading = true;
this.txId = params.get('id') || '';
if (history.state.bsqTx) {
return of(history.state.bsqTx);
if (history.state.data) {
return of(history.state.data);
}
return this.apiService.getBisqTransaction$(this.txId);
return this.bisqApiService.getTransaction$(this.txId);
})
)
.subscribe((tx) => {
this.isLoading = false;
this.bisqTx = tx;
});
this.latestBlock$ = this.stateService.blocks$.pipe(map((([block]) => block)));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}