From 2ed49cf944a25317d5b0a37c04969b2c4d8d1b31 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 29 Dec 2022 07:38:57 -0600 Subject: [PATCH 1/3] add toggle to enable/disable block audits --- .../app/components/block/block.component.html | 29 +++++++----- .../app/components/block/block.component.scss | 7 +++ .../app/components/block/block.component.ts | 45 +++++++++++++------ frontend/src/app/services/state.service.ts | 7 +++ .../components/toggle/toggle.component.html | 8 ++-- .../components/toggle/toggle.component.scss | 5 ++- .../components/toggle/toggle.component.ts | 10 ++++- 7 files changed, 78 insertions(+), 33 deletions(-) diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 08ea04ca9..d104e2262 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -23,13 +23,20 @@
+
+ +
+
- -
@@ -54,7 +61,7 @@ Weight - + Block health - + - +
- +
-
+
-
-
+
+
Projected + (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit">
@@ -226,7 +233,7 @@
+ (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit">
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 931912e4e..039d3d2ef 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -222,4 +222,11 @@ h1 { .ng-fa-icon { margin-right: 1em; } +} + +.audit-toggle { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 1em; } \ No newline at end of file diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index f04b4ec9c..9cf499650 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -58,8 +58,9 @@ export class BlockComponent implements OnInit, OnDestroy { overviewError: any = null; webGlEnabled = true; indexingAvailable = false; - auditEnabled = true; - auditDataMissing: boolean; + auditModeEnabled: boolean = !this.stateService.hideAudit.value; + auditAvailable = true; + showAudit: boolean; isMobile = window.innerWidth <= 767.98; hoverTx: string; numMissing: number = 0; @@ -79,6 +80,7 @@ export class BlockComponent implements OnInit, OnDestroy { timeLtrSubscription: Subscription; timeLtr: boolean; childChangeSubscription: Subscription; + auditPrefSubscription: Subscription; @ViewChildren('blockGraphProjected') blockGraphProjected: QueryList; @ViewChildren('blockGraphActual') blockGraphActual: QueryList; @@ -108,7 +110,12 @@ export class BlockComponent implements OnInit, OnDestroy { }); this.indexingAvailable = (this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true); - this.auditEnabled = this.indexingAvailable; + this.setAuditAvailable(this.indexingAvailable); + + this.auditPrefSubscription = this.stateService.hideAudit.subscribe((hide) => { + this.auditModeEnabled = !hide; + this.showAudit = this.auditAvailable && this.auditModeEnabled; + }); this.txsLoadingStatus$ = this.route.paramMap .pipe( @@ -138,11 +145,11 @@ export class BlockComponent implements OnInit, OnDestroy { this.page = 1; this.error = undefined; this.fees = undefined; - this.auditDataMissing = false; + this.stateService.markBlock$.next({}); if (history.state.data && history.state.data.blockHeight) { this.blockHeight = history.state.data.blockHeight; - this.updateAuditDataMissingFromBlockHeight(this.blockHeight); + this.updateAuditAvailableFromBlockHeight(this.blockHeight); } let isBlockHeight = false; @@ -155,7 +162,7 @@ export class BlockComponent implements OnInit, OnDestroy { if (history.state.data && history.state.data.block) { this.blockHeight = history.state.data.block.height; - this.updateAuditDataMissingFromBlockHeight(this.blockHeight); + this.updateAuditAvailableFromBlockHeight(this.blockHeight); return of(history.state.data.block); } else { this.isLoadingBlock = true; @@ -217,7 +224,7 @@ export class BlockComponent implements OnInit, OnDestroy { this.apiService.getBlockAudit$(block.previousblockhash); }, 100); } - this.updateAuditDataMissingFromBlockHeight(block.height); + this.updateAuditAvailableFromBlockHeight(block.height); this.block = block; this.blockHeight = block.height; this.lastBlockHeight = this.blockHeight; @@ -369,10 +376,9 @@ export class BlockComponent implements OnInit, OnDestroy { for (const tx of blockAudit.transactions) { inBlock[tx.txid] = true; } - this.auditEnabled = true; + this.setAuditAvailable(true); } else { - this.auditEnabled = false; - this.auditDataMissing = true; + this.setAuditAvailable(false); } return blockAudit; }), @@ -381,6 +387,7 @@ export class BlockComponent implements OnInit, OnDestroy { this.error = err; this.isLoadingOverview = false; this.isLoadingAudit = false; + this.setAuditAvailable(false); return of(null); }), ).subscribe((blockAudit) => { @@ -440,6 +447,7 @@ export class BlockComponent implements OnInit, OnDestroy { this.networkChangedSubscription.unsubscribe(); this.queryParamsSubscription.unsubscribe(); this.timeLtrSubscription.unsubscribe(); + this.auditSubscription.unsubscribe(); this.unsubscribeNextBlockSubscriptions(); this.childChangeSubscription.unsubscribe(); } @@ -595,21 +603,30 @@ export class BlockComponent implements OnInit, OnDestroy { } } - updateAuditDataMissingFromBlockHeight(blockHeight: number): void { + setAuditAvailable(available: boolean): void { + this.auditAvailable = available; + this.showAudit = this.auditAvailable && this.auditModeEnabled; + } + + toggleAuditMode(event): void { + this.stateService.hideAudit.next(!event); + } + + updateAuditAvailableFromBlockHeight(blockHeight: number): void { switch (this.stateService.network) { case 'testnet': if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) { - this.auditDataMissing = true; + this.setAuditAvailable(true); } break; case 'signet': if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) { - this.auditDataMissing = true; + this.setAuditAvailable(true); } break; default: if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) { - this.auditDataMissing = true; + this.setAuditAvailable(true); } } } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 86efa57f8..091490715 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -118,6 +118,7 @@ export class StateService { blockScrolling$: Subject = new Subject(); timeLtr: BehaviorSubject; hideFlow: BehaviorSubject; + hideAudit: BehaviorSubject; constructor( @Inject(PLATFORM_ID) private platformId: any, @@ -177,6 +178,12 @@ export class StateService { this.storageService.removeItem('flow-preference'); } }); + + const savedAuditPreference = this.storageService.getValue('audit-preference'); + this.hideAudit = new BehaviorSubject(savedAuditPreference === 'hide'); + this.hideAudit.subscribe((hide) => { + this.storageService.setValue('audit-preference', hide ? 'hide' : 'show'); + }); } setNetworkBasedonUrl(url: string) { diff --git a/frontend/src/app/shared/components/toggle/toggle.component.html b/frontend/src/app/shared/components/toggle/toggle.component.html index ea67f5416..154a74baa 100644 --- a/frontend/src/app/shared/components/toggle/toggle.component.html +++ b/frontend/src/app/shared/components/toggle/toggle.component.html @@ -1,8 +1,8 @@
- {{ textLeft }}  -
diff --git a/frontend/src/app/shared/components/toggle/toggle.component.scss b/frontend/src/app/shared/components/toggle/toggle.component.scss index a9c221290..97c096042 100644 --- a/frontend/src/app/shared/components/toggle/toggle.component.scss +++ b/frontend/src/app/shared/components/toggle/toggle.component.scss @@ -22,8 +22,6 @@ right: 0; bottom: 0; background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; } .slider:before { @@ -34,6 +32,9 @@ left: 2px; bottom: 2px; background-color: white; +} + +.slider.animate, .slider.animate:before { -webkit-transition: .4s; transition: .4s; } diff --git a/frontend/src/app/shared/components/toggle/toggle.component.ts b/frontend/src/app/shared/components/toggle/toggle.component.ts index f389989d9..75d004e74 100644 --- a/frontend/src/app/shared/components/toggle/toggle.component.ts +++ b/frontend/src/app/shared/components/toggle/toggle.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, AfterViewInit } from '@angular/core'; +import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter, AfterViewInit, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'app-toggle', @@ -11,9 +11,15 @@ export class ToggleComponent implements AfterViewInit { @Input() textLeft: string; @Input() textRight: string; @Input() checked: boolean = false; + animate: boolean = false; + + constructor( + private cd: ChangeDetectorRef, + ) { } ngAfterViewInit(): void { - this.toggleStatusChanged.emit(false); + this.animate = true; + setTimeout(() => { this.cd.markForCheck()}); } onToggleStatusChanged(e): void { From d3b59bc459a03eb39520a1b3ccb5ef93e9e8ba17 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 26 Jan 2023 10:50:00 -0600 Subject: [PATCH 2/3] Remove extra space after block details when audit disabled --- frontend/src/app/components/block/block.component.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index d104e2262..ecf7180b4 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -206,9 +206,10 @@ - - -
+ + +
+
From 714700d8f104195dd009af3320b5f732312640fd Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 26 Jan 2023 11:09:23 -0600 Subject: [PATCH 3/3] change audit toggle to bootstrap button --- .../app/components/block/block.component.html | 27 +++++++++++-------- .../app/components/block/block.component.scss | 14 +++++----- .../app/components/block/block.component.ts | 4 +-- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index ecf7180b4..0f5eb9a78 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -23,15 +23,6 @@
-
- -
-
@@ -288,8 +279,22 @@
-
- +
+ +
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 039d3d2ef..97b5a24f3 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -75,14 +75,19 @@ h1 { } } -.btn-details { +.toggle-btns { position: relative; + z-index: 2; top: 7px; @media (min-width: 550px) { top: 0px; } } +.btn-audit { + margin-right: .5em; +} + .block-tx-title { display: flex; justify-content: space-between; @@ -222,11 +227,4 @@ h1 { .ng-fa-icon { margin-right: 1em; } -} - -.audit-toggle { - display: flex; - flex-direction: row; - align-items: center; - margin-right: 1em; } \ No newline at end of file diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 9cf499650..719d38528 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -608,8 +608,8 @@ export class BlockComponent implements OnInit, OnDestroy { this.showAudit = this.auditAvailable && this.auditModeEnabled; } - toggleAuditMode(event): void { - this.stateService.hideAudit.next(!event); + toggleAuditMode(): void { + this.stateService.hideAudit.next(this.auditModeEnabled); } updateAuditAvailableFromBlockHeight(blockHeight: number): void {