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

Merge branch 'master' into simon/configurable-main-module

Browse Source 
# Conflicts:
#	frontend/src/app/components/api-docs/api-docs.component.ts
#	frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
#	frontend/src/app/components/master-page/master-page.component.html
#	frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
#	frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
#	frontend/src/app/dashboard/dashboard.component.html
This commit is contained in:
softsimon
2021-08-13 17:16:14 +03:00
parent f4f96fd18e e183be1a5c
commit 9d75c47792
56 changed files with 1307 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/api-docs/code-template.component.scss
View File

@@ -91,5 +91,7 @@ pre {
padding: 30px;
code{
background-color: transparent;
white-space: break-spaces;
word-break: break-all;
}
}

2
frontend/src/app/components/block/block.component.html
View File

@@ -116,7 +116,7 @@
</tr>
<tr>
<td i18n="block.header">Block Header Hex</td>
<td><a target="_blank" href="/api/block/{{block.id}}/header"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
<td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/block/{{block.id}}/header"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
</tr>
</tbody>
</table>

14
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
View File

@@ -1,4 +1,4 @@
<div class="blocks-container" *ngIf="loadingBlocks">
<div class="blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
<a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
@@ -25,11 +25,13 @@
<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="transition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
</div>
<div class="blocks-container" *ngIf="!loadingBlocks">
<div class="flashing">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
<ng-template #loadingBlocksTemplate >
<div class="blocks-container">
<div class="flashing">
<div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >
<div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="emptyBlockStyles[i]"></div>
</div>
</div>
</div>
</div>
</ng-template>

36
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { Subscription } from 'rxjs';
import { Observable, Subscription } from 'rxjs';
import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@@ -13,18 +13,19 @@ import { Router } from '@angular/router';
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
network = '';
blocks: Block[] = this.mountEmptyBlocks();
blocks: Block[] = [];
emptyBlocks: Block[] = this.mountEmptyBlocks();
markHeight: number;
blocksSubscription: Subscription;
networkSubscriotion: Subscription;
networkSubscription: Subscription;
tabHiddenSubscription: Subscription;
markBlockSubscription: Subscription;
loadingBlocks$: Observable<boolean>;
blockStyles = [];
emptyBlockStyles = [];
interval: any;
tabHidden = false;
loadingBlocks = false;
feeRounding = '1.0-0';
arrowVisible = false;
arrowLeftPx = 30;
blocksFilled = false;
@@ -48,18 +49,16 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
if (this.stateService.network === 'liquid') {
this.feeRounding = '1.0-1';
}
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.networkSubscriotion = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.emptyBlocks.forEach((b) => this.emptyBlockStyles.push(this.getStyleForEmptyBlock(b)));
this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed]) => {
if (this.blocks.some((b) => b.height === block.height)) {
return;
}
this.loadingBlocks = true;
if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
this.blocks = [];
this.blocksFilled = false;
@@ -128,7 +127,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.blocksSubscription.unsubscribe();
this.networkSubscriotion.unsubscribe();
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
clearInterval(this.interval);
@@ -187,6 +186,21 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
)`,
};
}
getStyleForEmptyBlock(block: Block) {
let addLeft = 0;
if (block.stage === 1) {
block.stage = 2;
addLeft = -205;
}
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
};
}
mountEmptyBlocks() {
const emptyBlocks = [];
for (let i = 0; i < this.stateService.env.KEEP_BLOCKS_AMOUNT; i++) {

4
frontend/src/app/components/master-page/master-page.component.html
View File

@@ -20,8 +20,8 @@
<button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button>
<button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
<h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
<a href="https://bisq.markets" ngbDropdownItem *ngIf="env.BISQ_ENABLED && env.OFFICIAL_MEMPOOL_SPACE" class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
<button ngbDropdownItem *ngIf="env.BISQ_ENABLED && !env.OFFICIAL_MEMPOOL_SPACE" class="mainnet" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
<a href="https://bisq.markets" ngbDropdownItem *ngIf="env.BISQ_ENABLED && env.OFFICIAL_MEMPOOL_SPACE" class="bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
<button ngbDropdownItem *ngIf="env.BISQ_ENABLED && !env.OFFICIAL_MEMPOOL_SPACE" class="bisq" [class.active]="network.val === 'bisq'" routerLink="/bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
<a href="https://liquid.network" ngbDropdownItem *ngIf="env.LIQUID_ENABLED && env.OFFICIAL_MEMPOOL_SPACE" class="liquid" [class.active]="network.val === 'liquid'"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
<button ngbDropdownItem *ngIf="env.LIQUID_ENABLED && !env.OFFICIAL_MEMPOOL_SPACE" class="liquid" [class.active]="network.val === 'liquid'" routerLink="/liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
</div>

88
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@@ -1,47 +1,51 @@
<div class="mempool-blocks-container">
<div class="flashing" *ngIf="(timeAvg$ | async) as timeAvg;">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
<a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
<div class="block-body">
<div class="fees">
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
<div class="fee-span">
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
<div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
<div class="transaction-count">
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</div>
<div class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
<ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
<app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
</ng-template>
<ng-template #timeDiffMainnet>
<app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
</ng-template>
</div>
<ng-template #mergedBlock>
<div class="time-difference">
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
<div class="mempool-blocks-container" *ngIf="(timeAvg$ | async) as timeAvg;">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
<a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
<div class="block-body">
<div class="fees">
~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
</ng-template>
<div class="fee-span">
{{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
</div>
<div class="block-size" [innerHTML]="projectedBlock.blockSize | bytes: 2">&lrm;</div>
<div class="transaction-count">
<ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
<ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
<ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
</div>
<div class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
<ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
<app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
</ng-template>
<ng-template #timeDiffMainnet>
<app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time-until>
</ng-template>
</div>
<ng-template #mergedBlock>
<div class="time-difference">
<b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
</div>
</ng-template>
</div>
<span class="animated-border"></span>
</div>
<span class="animated-border"></span>
</div>
</ng-template>
</ng-template>
</div>
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
</div>
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
</div>
</ng-container>
<div class="mempool-blocks-container" *ngIf="loadingMempoolBlocks === true">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]"></div>
</ng-template>
<ng-template #loadingBlocks>
<div class="mempool-blocks-container">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
</ng-template>
</div>
</div>
</div>
</ng-template>

29
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@@ -3,7 +3,7 @@ import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer }
import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
import { take, map, switchMap } from 'rxjs/operators';
import { take, map, switchMap, share } from 'rxjs/operators';
import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
@Component({
@@ -14,13 +14,17 @@ import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlocks: MempoolBlock[] = [];
mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlocks$: Observable<MempoolBlock[]>;
timeAvg$: Observable<number>;
loadingBlocks$: Observable<boolean>;
mempoolBlocksFull: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlocksFull: MempoolBlock[] = [];
mempoolBlockStyles = [];
mempoolEmptyBlockStyles = [];
markBlocksSubscription: Subscription;
isLoadingWebsocketSubscription: Subscription;
blockSubscription: Subscription;
networkSubscription: Subscription;
network = '';
@@ -30,7 +34,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
blockPadding = 30;
arrowVisible = false;
tabHidden = false;
loadingMempoolBlocks = true;
feeRounding = '1.0-0';
rightPosition = 0;
@@ -53,12 +56,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
if (this.stateService.network === 'liquid') {
this.feeRounding = '1.0-1';
}
this.mempoolEmptyBlocks.forEach((b) => {
this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
});
this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks);
this.mempoolBlocks.map(() => {
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
});
this.reduceMempoolBlocksToFitScreen(this.mempoolBlocks);
this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
this.mempoolBlocks$ = merge(
of(true),
@@ -109,8 +118,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
} else {
timeAvgMins += Math.abs(timeAvgDiff);
}
this.loadingMempoolBlocks = false;
return timeAvgMins * 60 * 1000;
})
);
@@ -234,6 +242,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
};
}
getStyleForMempoolEmptyBlock(index: number) {
return {
'right': 40 + index * 155 + 'px',
'background': '#554b45',
};
}
calculateTransactionPosition() {
if ((!this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
this.arrowVisible = false;
@@ -286,7 +301,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
blockSize: 0,
blockVSize: 0,
feeRange: [],
index: 0,
index: i,
medianFee: 0,
nTx: 0,
totalFees: 0

2
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -218,7 +218,7 @@
</tr>
<tr>
<td i18n="transaction.hex">Transaction Hex</td>
<td><a target="_blank" href="/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
<td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
</tr>
</tbody>
</table>

8
frontend/src/app/components/transaction/transaction.component.scss
View File

@@ -16,15 +16,13 @@
}
}
h1{
font-size: 1.75rem;
margin-top: 2px;
margin-bottom: 0;
float: left;
@media (min-width: 375px){
margin-top: 0px;
font-size: 2rem;
margin-top: 2px;
@media (min-width: 768px){
margin-top: -8px;
}
}