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);
+ }
+ }
}