-
+
@@ -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 {