-
- | Median fee |
- ~{{ block?.extras?.medianFee | number:'1.0-0' }} sat/vB |
-
-
-
- | Total fees |
-
-
+ |
+ | Median fee |
+ ~{{ block?.extras?.medianFee | number:'1.0-0' }} sat/vB |
+
+
+
+ | Total fees |
+
+
+ |
+
+
+
|
-
-
-
- |
-
-
-
-
- | Miner |
-
-
- {{ block?.extras.pool.name }}
-
- |
-
-
- {{ block?.extras.pool.name }}
-
- |
+
+
+ | Miner |
+
+
+ {{ block?.extras.pool.name }}
+
+ |
+
+
+ {{ block?.extras.pool.name }}
+
+ |
+
-
diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss
index f2049a1d3..2c1f40bc5 100644
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/frontend/src/app/components/block/block-preview.component.scss
@@ -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;
}
diff --git a/frontend/src/app/components/block/block-preview.component.ts b/frontend/src/app/components/block/block-preview.component.ts
index bab4e0489..f1c7216e1 100644
--- a/frontend/src/app/components/block/block-preview.component.ts
+++ b/frontend/src/app/components/block/block-preview.component.ts
@@ -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');
+ }
}
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.html b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
index 6c2e45242..52a3e7026 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@@ -1,21 +1,20 @@
-
-
-
+
+