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

New base code for mempool blockchain explorerer

Browse Source
This commit is contained in:
Simon Lindh
2020-02-16 22:15:07 +07:00
committed by wiz
parent d296239f54
commit 43f41b8aab
204 changed files with 6959 additions and 14341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/app/components/transactions-list/transactions-list.component.html Normal file
View File

@@ -0,0 +1,87 @@
<ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
<div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
<a [routerLink]="['/tx/', tx.txid]" [state]="{ data: tx }">{{ tx.txid }}</a>
</div>
<div class="header-bg box">
<div class="row">
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vin of tx.vin">
<td class="arrow-td">
<a [routerLink]="['/tx/', vin.txid]">
<i class="arrow green"></i>
</a>
</td>
<td>
<div>
<ng-template [ngIf]="vin.is_coinbase" [ngIfElse]="regularVin">
Coinbase
</ng-template>
<ng-template #regularVin>
<a [routerLink]="['/address/', vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</a>
<div>
<app-address-labels [vin]="vin"></app-address-labels>
</div>
</ng-template>
</div>
</td>
<td class="text-right nowrap">
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vout of tx.vout; let vindex = index;">
<td>
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/', vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">{{ vout.scriptpubkey_address | shortenString : 42 }}</a>
<ng-template #scriptpubkey_type>
OP_RETURN
</ng-template>
<!--
<div>
<app-address-labels [vout]="vout"></app-address-labels>
</div>
-->
</td>
<td class="text-right nowrap">
<app-amount [satoshis]="vout.value"></app-amount>
</td>
<td class="pl-1 arrow-td">
<i *ngIf="!outspends[i]; else outspend" class="arrow grey"></i>
<ng-template #outspend>
<i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
<ng-template #spent>
<a [routerLink]="['/tx/', outspends[i][vindex].txid]"><i class="arrow red"></i></a>
</ng-template>
</ng-template>
</td>
</tr>
<tr>
<td class="text-right" colspan="4">
<span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
<button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-3">{{ latestBlock.height - tx.status.block_height + 1 }} confirmations</button>
<ng-template #unconfirmedButton>
<button type="button" class="btn btn-sm btn-danger mt-3">Unconfirmed</button>
</ng-template>
&nbsp;
</span>
<button type="button" class="btn btn-sm btn-primary mt-3" (click)="switchCurrency()">
<app-amount [satoshis]="getTotalTxOutput(tx)"></app-amount>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
</ng-container>

64
frontend/src/app/components/transactions-list/transactions-list.component.scss Normal file
View File

@@ -0,0 +1,64 @@
.header-bg {
font-size: 14px;
}
.arrow-td {
width: 22px;
}
.arrow {
display: inline-block!important;
position: relative;
width: 14px;
height: 22px;
box-sizing: content-box
}
.arrow:before {
position: absolute;
content: '';
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: calc(-1*30px/3);
width: 0;
height: 0;
border-top: 6.66px solid transparent;
border-bottom: 6.66px solid transparent
}
.arrow:after {
position: absolute;
content: '';
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: calc(30px/6);
width: calc(30px/3);
height: calc(20px/3);
background: rgba(0, 0, 0, 0);
}
.arrow.green:before {
border-left: 10px solid #28a745;
}
.arrow.green:after {
background-color:#28a745;
}
.arrow.red:before {
border-left: 10px solid #dc3545;
}
.arrow.red:after {
background-color:#dc3545;
}
.arrow.grey:before {
border-left: 10px solid #6c757d;
}
.arrow.grey:after {
background-color:#6c757d;
}

68
frontend/src/app/components/transactions-list/transactions-list.component.ts Normal file
View File

@@ -0,0 +1,68 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, forkJoin } from 'rxjs';
import { Block, Outspend } from '../../interfaces/electrs.interface';
import { ElectrsApiService } from '../../services/electrs-api.service';
@Component({
selector: 'app-transactions-list',
templateUrl: './transactions-list.component.html',
styleUrls: ['./transactions-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TransactionsListComponent implements OnInit, OnChanges {
@Input() transactions: any[];
@Input() showConfirmations = false;
@Input() transactionPage = false;
latestBlock$: Observable<Block>;
outspends: Outspend[] = [];
constructor(
private stateService: StateService,
private electrsApiService: ElectrsApiService,
private ref: ChangeDetectorRef,
) { }
ngOnInit() {
this.latestBlock$ = this.stateService.blocks$;
}
ngOnChanges() {
if (!this.transactions || !this.transactions.length) {
return;
}
const observableObject = {};
this.transactions.forEach((tx, i) => {
if (this.outspends[i]) {
return;
}
observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
});
forkJoin(observableObject)
.subscribe((outspends: any) => {
const newOutspends = [];
for (const i in outspends) {
if (outspends.hasOwnProperty(i)) {
newOutspends.push(outspends[i]);
}
}
this.outspends = this.outspends.concat(newOutspends);
this.ref.markForCheck();
});
}
getTotalTxOutput(tx: any) {
return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
}
switchCurrency() {
const oldvalue = !this.stateService.viewFiat$.value;
this.stateService.viewFiat$.next(oldvalue);
}
trackByFn(index: number) {
return index;
}
}