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

Merge branch 'master' into simon/remove-sponsor

Browse Source
This commit is contained in:
wiz
2022-08-13 20:16:17 +09:00
committed by GitHub
parent 1008ab6222 927a54e4d9
commit 8200d54c20
50 changed files with 7177 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/address/address-preview.component.html
View File

@@ -44,7 +44,7 @@
<div class="w-100 d-block d-md-none"></div>
<div class="col-md qrcode-col">
<div class="qr-wrapper">
<app-qrcode [data]="address.address" [size]="370"></app-qrcode>
<app-qrcode [data]="address.address" [size]="448"></app-qrcode>
</div>
</div>
</div>

17
frontend/src/app/components/address/address-preview.component.scss
View File

@@ -1,5 +1,5 @@
h1 {
font-size: 42px;
font-size: 52px;
margin: 0;
}
@@ -11,23 +11,26 @@ h1 {
}
.qrcode-col {
width: 420px;
min-width: 420px;
width: 468px;
min-width: 468px;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
padding: 0;
margin-left: 2px;
margin-right: 15px;
}
.table {
font-size: 24px;
font-size: 32px;
::ng-deep .symbol {
font-size: 18px;
font-size: 24px;
}
}
.address-link {
font-size: 20px;
font-size: 24px;
margin-bottom: 0.5em;
display: flex;
flex-direction: row;
@@ -35,7 +38,7 @@ h1 {
.truncated-address {
text-overflow: ellipsis;
overflow: hidden;
max-width: calc(505px - 4em);
max-width: calc(640px - 4em);
display: inline-block;
white-space: nowrap;
}

6
frontend/src/app/components/address/address-preview.component.ts
View File

@@ -44,7 +44,6 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.openGraphService.setPreviewLoading();
this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.addressLoadingStatus$ = this.route.paramMap
@@ -56,6 +55,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.mainSubscription = this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
this.openGraphService.waitFor('address-data');
this.error = undefined;
this.isLoadingAddress = true;
this.loadedConfirmedTxCount = 0;
@@ -73,6 +73,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.isLoadingAddress = false;
this.error = err;
console.log(err);
this.openGraphService.fail('address-data');
return of(null);
})
);
@@ -90,7 +91,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
this.address = address;
this.updateChainStats();
this.isLoadingAddress = false;
this.openGraphService.setPreviewReady();
this.openGraphService.waitOver('address-data');
})
)
.subscribe(() => {},
@@ -98,6 +99,7 @@ export class AddressPreviewComponent implements OnInit, OnDestroy {
console.log(error);
this.error = error;
this.isLoadingAddress = false;
this.openGraphService.fail('address-data');
}
);
}

2
frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
import { Observable } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
import { EnterpriseService } from 'src/app/services/enterprise.service';
@Component({
selector: 'app-bisq-master-page',
@@ -18,6 +19,7 @@ export class BisqMasterPageComponent implements OnInit {
constructor(
private stateService: StateService,
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
) { }
ngOnInit() {

9
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@@ -18,6 +18,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
@Input() orientation = 'left';
@Input() flip = true;
@Output() txClickEvent = new EventEmitter<TransactionStripped>();
@Output() readyEvent = new EventEmitter();
@ViewChild('blockCanvas')
canvas: ElementRef<HTMLCanvasElement>;
@@ -37,6 +38,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
selectedTx: TxView | void;
tooltipPosition: Position;
readyNextFrame = false;
constructor(
readonly ngZone: NgZone,
readonly elRef: ElementRef,
@@ -78,6 +81,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
setup(transactions: TransactionStripped[]): void {
if (this.scene) {
this.scene.setup(transactions);
this.readyNextFrame = true;
this.start();
}
}
@@ -258,6 +262,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy {
this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize);
}
}
if (this.readyNextFrame) {
this.readyNextFrame = false;
this.readyEvent.emit();
}
}
/* LOOP */

64
frontend/src/app/components/block/block-preview.component.html
View File

@@ -30,44 +30,42 @@
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
</tr>
<ng-template [ngIf]="webGlEnabled">
<tr *ngIf="block?.extras?.medianFee != undefined">
<td class="td-width" i18n="block.median-fee">Median fee</td>
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
<ng-template [ngIf]="fees !== undefined">
<tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
<tr *ngIf="block?.extras?.medianFee != undefined">
<td class="td-width" i18n="block.median-fee">Median fee</td>
<td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
</tr>
<ng-template [ngIf]="fees !== undefined">
<tr>
<td i18n="block.total-fees|Total fees in a block">Total fees</td>
<td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
<app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</td>
<ng-template #liquidTotalFees>
<td>
<app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</td>
</ng-template>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>
</ng-template>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>
<td *ngIf="stateService.env.MINING_DASHBOARD">
<a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</a>
</td>
<td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
<span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
[class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
{{ block?.extras.pool.name }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm chart-container" *ngIf="webGlEnabled">
<div class="col-sm chart-container">
<app-block-overview-graph
#blockGraph
[isLoading]="false"
@@ -75,7 +73,7 @@
[blockLimit]="stateService.blockVSize"
[orientation]="'top'"
[flip]="false"
(txClickEvent)="onTxClick($event)"
(readyEvent)="onGraphReady()"
></app-block-overview-graph>
</div>
</div>

16
frontend/src/app/components/block/block-preview.component.scss
View File

@@ -1,23 +1,25 @@
.block-title {
margin-bottom: 0.75em;
font-size: 42px;
margin-bottom: 48px;
font-size: 52px;
::ng-deep .next-previous-blocks {
font-size: 42px;
font-size: 52px;
}
}
.table {
font-size: 24px;
font-size: 32px;
}
.chart-container {
flex-grow: 0;
flex-shrink: 0;
width: 420px;
min-width: 420px;
width: 470px;
min-width: 470px;
padding: 0;
margin-right: 15px;
}
::ng-deep .symbol {
font-size: 18px;
font-size: 24px;
}

167
frontend/src/app/components/block/block-preview.component.ts
View File

@@ -1,11 +1,168 @@
import { Component } from '@angular/core';
import { BlockComponent } from './block.component';
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap, tap, throttleTime, catchError, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
import { of, Subscription, asyncScheduler } from 'rxjs';
import { StateService } from '../../services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { OpenGraphService } from 'src/app/services/opengraph.service';
import { BlockExtended, TransactionStripped } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { BlockOverviewGraphComponent } from 'src/app/components/block-overview-graph/block-overview-graph.component';
@Component({
selector: 'app-block-preview',
templateUrl: './block-preview.component.html',
styleUrls: ['./block.component.scss', './block-preview.component.scss']
styleUrls: ['./block-preview.component.scss']
})
export class BlockPreviewComponent extends BlockComponent {
export class BlockPreviewComponent implements OnInit, OnDestroy {
network = '';
block: BlockExtended;
blockHeight: number;
blockHash: string;
isLoadingBlock = true;
strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string;
isLoadingOverview = true;
error: any;
blockSubsidy: number;
fees: number;
overviewError: any = null;
overviewSubscription: Subscription;
networkChangedSubscription: Subscription;
@ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
constructor(
private route: ActivatedRoute,
private electrsApiService: ElectrsApiService,
public stateService: StateService,
private seoService: SeoService,
private openGraphService: OpenGraphService,
private apiService: ApiService
) { }
ngOnInit() {
this.network = this.stateService.network;
const block$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.openGraphService.waitFor('block-viz');
this.openGraphService.waitFor('block-data');
const blockHash: string = params.get('id') || '';
this.block = undefined;
this.error = undefined;
this.overviewError = undefined;
this.fees = undefined;
let isBlockHeight = false;
if (/^[0-9]+$/.test(blockHash)) {
isBlockHeight = true;
} else {
this.blockHash = blockHash;
}
this.isLoadingBlock = true;
this.isLoadingOverview = true;
if (isBlockHeight) {
return this.electrsApiService.getBlockHashFromHeight$(parseInt(blockHash, 10))
.pipe(
switchMap((hash) => {
if (hash) {
this.blockHash = hash;
return this.apiService.getBlock$(hash);
} else {
return null;
}
}),
catchError((err) => {
this.error = err;
this.openGraphService.fail('block-data');
this.openGraphService.fail('block-viz');
return of(null);
}),
);
}
return this.apiService.getBlock$(blockHash);
}),
filter((block: BlockExtended | void) => block != null),
tap((block: BlockExtended) => {
this.block = block;
this.blockHeight = block.height;
this.seoService.setTitle($localize`:@@block.component.browser-title:Block ${block.height}:BLOCK_HEIGHT:: ${block.id}:BLOCK_ID:`);
this.isLoadingBlock = false;
this.setBlockSubsidy();
if (block?.extras?.reward !== undefined) {
this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
}
this.stateService.markBlock$.next({ blockHeight: this.blockHeight });
this.isLoadingOverview = true;
this.overviewError = null;
this.openGraphService.waitOver('block-data');
}),
throttleTime(50, asyncScheduler, { leading: true, trailing: true }),
shareReplay(1)
);
this.overviewSubscription = block$.pipe(
startWith(null),
pairwise(),
switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
this.openGraphService.fail('block-viz');
return of([]);
}),
switchMap((transactions) => {
return of({ transactions, direction: 'down' });
})
)
),
)
.subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
this.strippedTransactions = transactions;
this.isLoadingOverview = false;
if (this.blockGraph) {
this.blockGraph.destroy();
this.blockGraph.setup(this.strippedTransactions);
}
},
(error) => {
this.error = error;
this.isLoadingOverview = false;
this.openGraphService.fail('block-viz');
this.openGraphService.fail('block-data');
if (this.blockGraph) {
this.blockGraph.destroy();
}
});
this.networkChangedSubscription = this.stateService.networkChanged$
.subscribe((network) => this.network = network);
}
ngOnDestroy() {
if (this.overviewSubscription) {
this.overviewSubscription.unsubscribe();
}
if (this.networkChangedSubscription) {
this.networkChangedSubscription.unsubscribe();
}
}
// TODO - Refactor this.fees/this.reward for liquid because it is not
// used anymore on Bitcoin networks (we use block.extras directly)
setBlockSubsidy() {
this.blockSubsidy = 0;
}
onGraphReady(): void {
this.openGraphService.waitOver('block-viz');
}
}

2
frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service';
import { merge, Observable, of} from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
import { EnterpriseService } from 'src/app/services/enterprise.service';
@Component({
selector: 'app-liquid-master-page',
@@ -20,6 +21,7 @@ export class LiquidMasterPageComponent implements OnInit {
constructor(
private stateService: StateService,
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
) { }
ngOnInit() {

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

@@ -1,21 +1,20 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<div class="preview-wrapper">
<router-outlet></router-outlet>
<footer>
<span class="footer-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
<header>
<span class="header-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="50" width="200" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
</span>
<div [ngSwitch]="network.val">
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 45px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 45px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 45px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 45px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 45px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 45px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
</div>
</footer>
</header>
<router-outlet></router-outlet>
</div>
</ng-container>

18
frontend/src/app/components/master-page-preview/master-page-preview.component.scss
View File

@@ -2,28 +2,28 @@
position: relative;
display: block;
margin: auto;
max-width: 1024px;
max-height: 512px;
padding-bottom: 64px;
max-width: 1200px;
max-height: 600px;
padding-top: 80px;
footer {
header {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 100;
min-height: 64px;
padding: 0rem 2rem;
min-height: 80px;
padding: 0rem 3rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #11131f;
text-align: start;
font-size: 1.2em;
font-size: 1.8em;
}
.footer-brand {
.header-brand {
width: 60%;
}

27
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -12,6 +12,7 @@ import { StateService } from '../../services/state.service';
import { chartColors, poolsColor } from 'src/app/app.constants';
import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
import { download } from 'src/app/shared/graphs.utils';
import { isMobile } from 'src/app/shared/common.utils';
@Component({
selector: 'app-pool-ranking',
@@ -108,21 +109,23 @@ export class PoolRankingComponent implements OnInit {
return pool;
}
isMobile() {
return (window.innerWidth <= 767.98);
}
generatePoolsChartSerieData(miningStats) {
const poolShareThreshold = this.isMobile() ? 2 : 1; // Do not draw pools which hashrate share is lower than that
let poolShareThreshold = 0.5;
if (isMobile()) {
poolShareThreshold = 2;
} else if (this.widget) {
poolShareThreshold = 1;
}
const data: object[] = [];
let totalShareOther = 0;
let totalBlockOther = 0;
let totalEstimatedHashrateOther = 0;
let edgeDistance: any = '20%';
if (this.isMobile() && this.widget) {
if (isMobile() && this.widget) {
edgeDistance = 0;
} else if (this.isMobile() && !this.widget || this.widget) {
} else if (isMobile() && !this.widget || this.widget) {
edgeDistance = 10;
}
@@ -138,7 +141,7 @@ export class PoolRankingComponent implements OnInit {
color: poolsColor[pool.name.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()],
},
value: pool.share,
name: pool.name + ((this.isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
@@ -146,7 +149,7 @@ export class PoolRankingComponent implements OnInit {
edgeDistance: edgeDistance,
},
tooltip: {
show: !this.isMobile() || !this.widget,
show: !isMobile() || !this.widget,
backgroundColor: 'rgba(17, 19, 31, 1)',
borderRadius: 4,
shadowColor: 'rgba(0, 0, 0, 0.5)',
@@ -176,7 +179,7 @@ export class PoolRankingComponent implements OnInit {
color: 'grey',
},
value: totalShareOther,
name: 'Other' + (this.isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
label: {
overflow: 'none',
color: '#b1b1b1',
@@ -210,7 +213,7 @@ export class PoolRankingComponent implements OnInit {
prepareChartOptions(miningStats) {
let pieSize = ['20%', '80%']; // Desktop
if (this.isMobile() && !this.widget) {
if (isMobile() && !this.widget) {
pieSize = ['15%', '60%'];
}
@@ -226,7 +229,7 @@ export class PoolRankingComponent implements OnInit {
series: [
{
zlevel: 0,
minShowLabelAngle: 3.6,
minShowLabelAngle: 1.8,
name: 'Mining pool',
type: 'pie',
radius: pieSize,