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

Bisq explorer is now a separate module.

Browse Source
This commit is contained in:
softsimon
2020-07-11 00:17:13 +07:00
parent 8c23eae5fe
commit 60e1b9a41e
34 changed files with 347 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/components/bisq-icon/bisq-icon.component.html
View File

@@ -1 +0,0 @@
<fa-icon [icon]="iconProp" [fixedWidth]="true" [ngStyle]="{ 'color': '#' + color }"></fa-icon>

0
frontend/src/app/components/bisq-icon/bisq-icon.component.scss
View File

81
frontend/src/app/components/bisq-icon/bisq-icon.component.ts
View File

@@ -1,81 +0,0 @@
import { Component, ChangeDetectionStrategy, OnInit, Input } from '@angular/core';
import { IconPrefix, IconName } from '@fortawesome/fontawesome-common-types';
@Component({
selector: 'app-bisq-icon',
templateUrl: './bisq-icon.component.html',
styleUrls: ['./bisq-icon.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BisqIconComponent implements OnInit {
@Input() txType: string;
iconProp: [IconPrefix, IconName] = ['fas', 'leaf'];
color: string;
constructor() { }
ngOnInit() {
switch (this.txType) {
case 'UNVERIFIED':
this.iconProp[1] = 'question';
this.color = 'ffac00';
break;
case 'INVALID':
this.iconProp[1] = 'exclamation-triangle';
this.color = 'ff4500';
break;
case 'GENESIS':
this.iconProp[1] = 'rocket';
this.color = '25B135';
break;
case 'TRANSFER_BSQ':
this.iconProp[1] = 'retweet';
this.color = 'a3a3a3';
break;
case 'PAY_TRADE_FEE':
this.iconProp[1] = 'leaf';
this.color = '689f43';
break;
case 'PROPOSAL':
this.iconProp[1] = 'file-alt';
this.color = '6c8b3b';
break;
case 'COMPENSATION_REQUEST':
this.iconProp[1] = 'money-bill';
this.color = '689f43';
break;
case 'REIMBURSEMENT_REQUEST':
this.iconProp[1] = 'money-bill';
this.color = '04a908';
break;
case 'BLIND_VOTE':
this.iconProp[1] = 'eye-slash';
this.color = '07579a';
break;
case 'VOTE_REVEAL':
this.iconProp[1] = 'eye';
this.color = '4AC5FF';
break;
case 'LOCKUP':
this.iconProp[1] = 'lock';
this.color = '0056c4';
break;
case 'UNLOCK':
this.iconProp[1] = 'lock-open';
this.color = '1d965f';
break;
case 'ASSET_LISTING_FEE':
this.iconProp[1] = 'file-alt';
this.color = '6c8b3b';
break;
case 'PROOF_OF_BURN':
this.iconProp[1] = 'file-alt';
this.color = '6c8b3b';
break;
default:
this.iconProp[1] = 'question';
this.color = 'ffac00';
}
}
}

40
frontend/src/app/components/bisq-transaction-details/bisq-transaction-details.component.html
View File

@@ -1,40 +0,0 @@
<div class="box">
<div class="row">
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Inputs</td>
<td>{{ totalInput / 100 | number: '1.2-2' }} BSQ</td>
</tr>
<tr>
<td>Outputs</td>
<td>{{ totalOutput / 100 | number: '1.2-2' }} BSQ</td>
</tr>
<tr>
<td>Burnt</td>
<td>{{ tx.burntFee / 100 | number: '1.2-2' }} BSQ</td>
</tr>
<tr>
<td>Issuance</td>
<td>{{ totalIssued / 100 | number: '1.2-2' }} BSQ</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Type</td>
<td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
</tr>
<tr>
<td>Version</td>
<td>{{ tx.txVersion }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

0
frontend/src/app/components/bisq-transaction-details/bisq-transaction-details.component.scss
View File

26
frontend/src/app/components/bisq-transaction-details/bisq-transaction-details.component.ts
View File

@@ -1,26 +0,0 @@
import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
@Component({
selector: 'app-bisq-transaction-details',
templateUrl: './bisq-transaction-details.component.html',
styleUrls: ['./bisq-transaction-details.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BisqTransactionDetailsComponent implements OnChanges {
@Input() tx: BisqTransaction;
totalInput: number;
totalOutput: number;
totalIssued: number;
constructor() { }
ngOnChanges() {
this.totalInput = this.tx.inputs.filter((input) => input.isVerified).reduce((acc, input) => acc + input.bsqAmount, 0);
this.totalOutput = this.tx.outputs.filter((output) => output.isVerified).reduce((acc, output) => acc + output.bsqAmount, 0);
this.totalIssued = this.tx.outputs
.filter((output) => output.isVerified && output.txOutputType === 'ISSUANCE_CANDIDATE_OUTPUT')
.reduce((acc, output) => acc + output.bsqAmount, 0);
}
}

60
frontend/src/app/components/bisq-transfers/bisq-transfers.component.html
View File

@@ -1,60 +0,0 @@
<div class="header-bg box">
<div class="row">
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<ng-template ngFor let-input [ngForOf]="tx.inputs" [ngForTrackBy]="trackByIndexFn">
<tr *ngIf="input.isVerified">
<td class="arrow-td">
<ng-template [ngIf]="input.spendingTxId === null" [ngIfElse]="hasPreoutput">
<i class="arrow grey"></i>
</ng-template>
<ng-template #hasPreoutput>
<a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]">
<i class="arrow red"></i>
</a>
</ng-template>
</td>
<td>
<a [routerLink]="['/address/' | relativeUrl, input.address]" title="{{ input.address }}">
<span class="d-block d-lg-none">B{{ input.address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">B{{ input.address | shortenString : 35 }}</span>
</a>
</td>
<td class="text-right nowrap">
{{ input.bsqAmount / 100 | number: '1.2-2' }} BSQ
</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<ng-template ngFor let-output [ngForOf]="tx.outputs" [ngForTrackBy]="trackByIndexFn">
<tr *ngIf="output.isVerified && output.opReturn === undefined">
<td>
<a [routerLink]="['/address/' | relativeUrl, output.address]" title="{{ output.address }}">
<span class="d-block d-lg-none">B{{ output.address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">B{{ output.address | shortenString : 35 }}</span>
</a>
</td>
<td class="text-right nowrap">
{{ output.bsqAmount / 100 | number: '1.2-2' }} BSQ
</td>
<td class="pl-1 arrow-td">
<i *ngIf="!output.spentInfo; else spent" class="arrow green"></i>
<ng-template #spent>
<a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]"><i class="arrow red"></i></a>
</ng-template>
</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
</div>
</div>

84
frontend/src/app/components/bisq-transfers/bisq-transfers.component.scss
View File

@@ -1,84 +0,0 @@
.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;
}
.scriptmessage {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.scriptmessage.longer {
max-width: 500px;
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage {
max-width: 90px !important;
}
.scriptmessage.longer {
max-width: 280px !important;
}
}

19
frontend/src/app/components/bisq-transfers/bisq-transfers.component.ts
View File

@@ -1,19 +0,0 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
@Component({
selector: 'app-bisq-transfers',
templateUrl: './bisq-transfers.component.html',
styleUrls: ['./bisq-transfers.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BisqTransfersComponent {
@Input() tx: BisqTransaction;
constructor() { }
trackByIndexFn(index: number) {
return index;
}
}

22
frontend/src/app/components/master-page/master-page.component.html
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>

15
frontend/src/app/components/transaction/transaction.component.html
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>

15
frontend/src/app/components/transaction/transaction.component.ts
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);