diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 0fe496d3e..7a9b53ed0 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -4,8 +4,7 @@ import { AppPreloadingStrategy } from './app.preloading-strategy' import { StartComponent } from './components/start/start.component'; import { TransactionComponent } from './components/transaction/transaction.component'; import { BlockComponent } from './components/block/block.component'; -import { ClockMinedComponent as ClockMinedComponent } from './components/clock/clock-mined.component'; -import { ClockMempoolComponent as ClockMempoolComponent } from './components/clock/clock-mempool.component'; +import { ClockComponent } from './components/clock/clock.component'; import { AddressComponent } from './components/address/address.component'; import { MasterPageComponent } from './components/master-page/master-page.component'; import { AboutComponent } from './components/about/about.component'; @@ -358,12 +357,16 @@ let routes: Routes = [ ], }, { - path: 'clock-mined', - component: ClockMinedComponent, + path: 'clock', + redirectTo: 'clock/mempool/0' }, { - path: 'clock-mempool', - component: ClockMempoolComponent, + path: 'clock/:mode', + redirectTo: 'clock/:mode/0' + }, + { + path: 'clock/:mode/:index', + component: ClockComponent, }, { path: 'status', diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html index 8ea5acef6..69f13b6fe 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html @@ -13,10 +13,10 @@ [class.offscreen]="!static && count && i >= count" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="isSpecial(block.height)"> -  
- {{ block.height + {{ block.height }}
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 65c949b4d..87cffd228 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -27,6 +27,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { @Input() minimal: boolean = false; @Input() blockWidth: number = 125; @Input() spotlight: number = 0; + @Input() getHref?: (index, block) => string = (index, block) => `/block/${block.id}`; specialBlocks = specialBlocks; network = ''; diff --git a/frontend/src/app/components/clock/clock-mempool.component.html b/frontend/src/app/components/clock/clock-mempool.component.html deleted file mode 100644 index a8620a212..000000000 --- a/frontend/src/app/components/clock/clock-mempool.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app/components/clock/clock-mempool.component.ts b/frontend/src/app/components/clock/clock-mempool.component.ts deleted file mode 100644 index 7e99cc08b..000000000 --- a/frontend/src/app/components/clock/clock-mempool.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-clock-mempool', - templateUrl: './clock-mempool.component.html', -}) -export class ClockMempoolComponent {} diff --git a/frontend/src/app/components/clock/clock-mined.component.html b/frontend/src/app/components/clock/clock-mined.component.html deleted file mode 100644 index a3bebd4bd..000000000 --- a/frontend/src/app/components/clock/clock-mined.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app/components/clock/clock-mined.component.ts b/frontend/src/app/components/clock/clock-mined.component.ts deleted file mode 100644 index b26815ac6..000000000 --- a/frontend/src/app/components/clock/clock-mined.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-clock-mined', - templateUrl: './clock-mined.component.html', -}) -export class ClockMinedComponent {} diff --git a/frontend/src/app/components/clock/clock.component.html b/frontend/src/app/components/clock/clock.component.html index b869ef005..cff158697 100644 --- a/frontend/src/app/components/clock/clock.component.html +++ b/frontend/src/app/components/clock/clock.component.html @@ -1,14 +1,19 @@
- +
- - + +
@@ -20,12 +25,12 @@
- +
-

{{ block.height }}

+

{{ blocks[mode === 'mempool' ? 0 : blockIndex].height }}

@@ -42,13 +47,13 @@

priority rate

{{ recommendedFees.fastestFee }} sat/vB

-
-

+
+

block size

-
+

- + {{ i }} transaction {{ i }} transactions

diff --git a/frontend/src/app/components/clock/clock.component.ts b/frontend/src/app/components/clock/clock.component.ts index 285f91ff8..b1a9d2159 100644 --- a/frontend/src/app/components/clock/clock.component.ts +++ b/frontend/src/app/components/clock/clock.component.ts @@ -1,10 +1,11 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core'; -import { Observable, Subscription } from 'rxjs'; +import { Observable, Subscription, of, switchMap, tap } from 'rxjs'; import { StateService } from '../../services/state.service'; import { BlockExtended } from '../../interfaces/node-api.interface'; import { WebsocketService } from '../../services/websocket.service'; import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe'; @Component({ selector: 'app-clock', @@ -13,12 +14,14 @@ import { ActivatedRoute } from '@angular/router'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class ClockComponent implements OnInit { - @Input() mode: 'block' | 'mempool' = 'block'; hideStats: boolean = false; + mode: 'mempool' | 'mined' = 'mined'; + blockIndex: number; + pageSubscription: Subscription; blocksSubscription: Subscription; recommendedFees$: Observable; mempoolInfo$: Observable; - block: BlockExtended; + blocks: BlockExtended[] = []; clockSize: number = 300; chainWidth: number = 384; chainHeight: number = 60; @@ -41,6 +44,8 @@ export class ClockComponent implements OnInit { public stateService: StateService, private websocketService: WebsocketService, private route: ActivatedRoute, + private router: Router, + private relativeUrlPipe: RelativeUrlPipe, private cd: ChangeDetectorRef, ) { this.route.queryParams.subscribe((params) => { @@ -57,14 +62,40 @@ export class ClockComponent implements OnInit { this.blocksSubscription = this.stateService.blocks$ .subscribe(([block]) => { if (block) { - this.block = block; - this.blockStyle = this.getStyleForBlock(this.block); - this.cd.markForCheck(); + this.blocks.unshift(block); + this.blocks = this.blocks.slice(0, 16); + if (this.blocks[this.blockIndex]) { + this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]); + this.cd.markForCheck(); + } } }); this.recommendedFees$ = this.stateService.recommendedFees$; this.mempoolInfo$ = this.stateService.mempoolInfo$; + + this.pageSubscription = this.route.paramMap.pipe( + switchMap((params: ParamMap) => { + const rawMode: string = params.get('mode'); + const mode = rawMode === 'mempool' ? 'mempool' : 'mined'; + const index: number = Number.parseInt(params.get('index')); + if (mode !== rawMode || index < 0 || isNaN(index)) { + this.router.navigate([this.relativeUrlPipe.transform('/clock'), mode, index || 0]); + } + return of({ + mode, + index, + }); + }), + tap((page: { mode: 'mempool' | 'mined', index: number }) => { + this.mode = page.mode; + this.blockIndex = page.index || 0; + if (this.blocks[this.blockIndex]) { + this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]); + this.cd.markForCheck(); + } + }) + ).subscribe(); } getStyleForBlock(block: BlockExtended) { diff --git a/frontend/src/app/components/clockchain/clockchain.component.html b/frontend/src/app/components/clockchain/clockchain.component.html index 169de58d4..2f299cb3b 100644 --- a/frontend/src/app/components/clockchain/clockchain.component.html +++ b/frontend/src/app/components/clockchain/clockchain.component.html @@ -5,8 +5,20 @@
- - + +
-  
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 493a3713e..561f01585 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -28,6 +28,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { @Input() blockWidth: number = 125; @Input() count: number = null; @Input() spotlight: number = 0; + @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`; specialBlocks = specialBlocks; mempoolBlocks: MempoolBlock[] = []; diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index 172f0e7ea..1b291e978 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -12,12 +12,13 @@
-
- +
+ + + + + +