diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 360d3e34f..86930bcc7 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -190,7 +190,7 @@
- +

Flow

@@ -238,7 +238,7 @@
- +
@@ -329,7 +329,7 @@
- +

Flow

diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index c64c112b1..2be549569 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -49,12 +49,15 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { liquidUnblinding = new LiquidUnblinding(); inputIndex: number; outputIndex: number; - showFlow: boolean = true; graphExpanded: boolean = false; graphWidth: number = 1000; graphHeight: number = 360; inOutLimit: number = 150; maxInOut: number = 0; + flowPrefSubscription: Subscription; + hideFlow: boolean = this.stateService.hideFlow.value; + overrideFlowPreference: boolean = null; + flowEnabled: boolean; tooltipPosition: { x: number, y: number }; @@ -78,6 +81,12 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { (network) => (this.network = network) ); + this.setFlowEnabled(); + this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => { + this.hideFlow = !!hide; + this.setFlowEnabled(); + }); + this.timeAvg$ = timer(0, 1000) .pipe( switchMap(() => this.stateService.difficultyAdjustment$), @@ -245,11 +254,14 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.queryParamsSubscription = this.route.queryParams.subscribe((params) => { if (params.showFlow === 'false') { - this.showFlow = false; + this.overrideFlowPreference = false; + } else if (params.showFlow === 'true') { + this.overrideFlowPreference = true; } else { - this.showFlow = true; - this.setGraphSize(); + this.overrideFlowPreference = null; } + this.setFlowEnabled(); + this.setGraphSize(); }); } @@ -325,15 +337,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { } toggleGraph() { - this.showFlow = !this.showFlow; + const showFlow = !this.flowEnabled; + this.stateService.hideFlow.next(!showFlow); this.router.navigate([], { relativeTo: this.route, - queryParams: { showFlow: this.showFlow }, + queryParams: { showFlow: showFlow }, queryParamsHandling: 'merge', fragment: 'flow' }); } + setFlowEnabled() { + this.flowEnabled = (this.overrideFlowPreference != null ? this.overrideFlowPreference : !this.hideFlow); + } + expandGraph() { this.graphExpanded = true; } @@ -365,6 +382,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.txReplacedSubscription.unsubscribe(); this.blocksSubscription.unsubscribe(); this.queryParamsSubscription.unsubscribe(); + this.flowPrefSubscription.unsubscribe(); this.leaveTransaction(); } } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 9f7cc58a3..d7feb38bb 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -110,6 +110,7 @@ export class StateService { blockScrolling$: Subject = new Subject(); timeLtr: BehaviorSubject; + hideFlow: BehaviorSubject; constructor( @Inject(PLATFORM_ID) private platformId: any, @@ -159,6 +160,16 @@ export class StateService { this.timeLtr.subscribe((ltr) => { this.storageService.setValue('time-preference-ltr', ltr ? 'true' : 'false'); }); + + const savedFlowPreference = this.storageService.getValue('flow-preference'); + this.hideFlow = new BehaviorSubject(savedFlowPreference === 'hide'); + this.hideFlow.subscribe((hide) => { + if (hide) { + this.storageService.setValue('flow-preference', hide ? 'hide' : 'show'); + } else { + this.storageService.removeItem('flow-preference'); + } + }); } setNetworkBasedonUrl(url: string) { diff --git a/frontend/src/app/services/storage.service.ts b/frontend/src/app/services/storage.service.ts index f3ea694b2..73a013146 100644 --- a/frontend/src/app/services/storage.service.ts +++ b/frontend/src/app/services/storage.service.ts @@ -46,4 +46,12 @@ export class StorageService { console.log(e); } } + + removeItem(key: string): void { + try { + localStorage.removeItem(key); + } catch (e) { + console.log(e); + } + } }