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

Transaction view.

Browse Source
This commit is contained in:
Simon Lindh
2019-11-10 16:44:00 +08:00
parent 839fa12eb6
commit 2dbfa323fa
26 changed files with 287 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/explorer/address/address.component.html Normal file
View File

@@ -0,0 +1 @@
<p>address works!</p>

0
frontend/src/app/explorer/address/address.component.scss Normal file
View File

15
frontend/src/app/explorer/address/address.component.ts Normal file
View File

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

7
frontend/src/app/explorer/explorer.module.ts
View File

@@ -5,6 +5,7 @@ import { TransactionComponent } from './transaction/transaction.component';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { BlockComponent } from './block/block.component';
import { AddressComponent } from './address/address.component';
const routes: Routes = [
{
@@ -19,10 +20,14 @@ const routes: Routes = [
path: 'tx/:id',
component: TransactionComponent,
},
{
path: 'address/:id',
component: AddressComponent,
},
];
@NgModule({
declarations: [ExplorerComponent, TransactionComponent, BlockComponent],
declarations: [ExplorerComponent, TransactionComponent, BlockComponent, AddressComponent],
imports: [
SharedModule,
CommonModule,

144
frontend/src/app/explorer/transaction/transaction.component.html
View File

@@ -1 +1,143 @@
<p>transaction works!</p>
<div class="container">
<h1>Transaction</h1>
<ng-template [ngIf]="!isLoadingTx" [ngIfElse]="loadingTx">
<table class="table table-borderless">
<thead>
<tr class="header-bg">
<th>
{{ tx.txid }}
</th>
</tr>
</thead>
</table>
<div class="row">
<div class="col">
<table class="table table-borderless smaller-text">
<tbody>
<tr>
<td>
<div *ngFor="let vin of tx.vin">
<ng-template [ngIf]="vin.is_coinbase" [ngIfElse]="regularVin">
Coinbase
</ng-template>
<ng-template #regularVin>
<a [routerLink]="['/explorer/address/', vin.prevout.scriptpubkey_address]">{{ vin.prevout.scriptpubkey_address }}</a>
(<a [routerLink]="['/explorer/tx/', vin.txid]">tx</a>)
</ng-template>
</div>
</td>
<td class="text-right">
<div *ngFor="let vin of tx.vin">
<ng-template [ngIf]="vin.prevout">
<ng-template [ngIf]="viewFiat" [ngIfElse]="viewFiatVin">
<span class="green-color">{{ conversions.USD * (vin.prevout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-template>
<ng-template #viewFiatVin>
{{ vin.prevout.value / 100000000 }} BTC
</ng-template>
</ng-template>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-borderless smaller-text">
<tbody>
<tr>
<td>
<div *ngFor="let vout of tx.vout">
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/explorer/address/', vout.scriptpubkey_address]">{{ vout.scriptpubkey_address }}</a>
<ng-template #scriptpubkey_type>
{{ vout.scriptpubkey_type | uppercase }}
</ng-template>
</div>
</td>
<td class="text-right">
<div *ngFor="let vout of tx.vout">
<ng-template [ngIf]="viewFiat" [ngIfElse]="viewFiatVout">
<span class="green-color">{{ conversions.USD * (vout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-template>
<ng-template #viewFiatVout>
{{ vout.value / 100000000 }} BTC
</ng-template>
</div>
</td>
</tr>
<tr>
<td class="text-right" colspan="4">
<button *ngIf="tx.status.confirmed" type="button" class="btn btn-success">{{ latestBlockHeight - tx.status.block_height + 1 }} confirmations</button>
<ng-template #unconfirmedButton>
<button type="button" class="btn btn-danger">Unconfirmed</button>
</ng-template>
&nbsp;
<button type="button" class="btn btn-primary" (click)="viewFiat = !viewFiat">
<ng-template [ngIf]="viewFiat" [ngIfElse]="viewFiatButton">
<span *ngIf="conversions">{{ conversions.USD * (totalOutput / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-template>
<ng-template #viewFiatButton>
{{ totalOutput / 100000000 }} BTC
</ng-template>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<h2>Details</h2>
<br>
<div class="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Size</td>
<td>{{ tx.size | bytes }}</td>
</tr>
<tr>
<td>Weight</td>
<td>{{ tx.weight }} WU</td>
</tr>
<tr *ngIf="tx.status.confirmed">
<td>Included in block</td>
<td><a [routerLink]="['/explorer/block/', tx.status.block_hash]">#{{ tx.status.block_height }}</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-borderless table-striped" *ngIf="tx.fee">
<tbody>
<tr>
<td>Fees</td>
<td>{{ tx.fee }} <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
</tr>
<tr>
<td>Fees per vByte</td>
<td>{{ (tx.fee * 100000000) / tx.vsize | number : '1.2-2' }} sat/vB</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-template>
<ng-template #loadingTx>
<div class="text-center">
<div class="spinner-border text-light"></div>
<br><br>
</div>
</ng-template>
</div>

39
frontend/src/app/explorer/transaction/transaction.component.ts
View File

@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { MemPoolService } from 'src/app/services/mem-pool.service';
@Component({
selector: 'app-transaction',
@@ -6,10 +10,41 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./transaction.component.scss']
})
export class TransactionComponent implements OnInit {
tx: any;
isLoadingTx = true;
conversions: any;
totalOutput: number;
constructor() { }
viewFiat = false;
latestBlockHeight: number;
constructor(
private route: ActivatedRoute,
private apiService: ApiService,
private memPoolService: MemPoolService,
) { }
ngOnInit() {
}
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
const txId: string = params.get('id') || '';
return this.apiService.getTransaction$(txId);
})
)
.subscribe((tx) => {
this.tx = tx;
this.totalOutput = this.tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
this.isLoadingTx = false;
});
this.memPoolService.conversions$
.subscribe((conversions) => {
this.conversions = conversions;
});
this.memPoolService.blocks$
.subscribe((block) => {
this.latestBlockHeight = block.height;
});
}
}