diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index c428874ba..4f1d466a4 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -21,11 +21,12 @@
user-select: none; /* Standard */
- transition: transform 2s;
-
&.flipped {
transform: rotate(180deg);
}
+ &.ready-to-flip {
+ transition: transform 2s;
+ }
}
.position-container {
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts
index 913fd29a9..b24ef728d 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -29,7 +29,8 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
connected: boolean = true;
blockDisplayMode: 'size' | 'fees';
- flipped: boolean = false;
+ flipped: boolean = true;
+ readyToFlip: boolean = false;
dividerOffset: number | null = null;
mempoolOffset: number | null = null;
@@ -42,7 +43,22 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
public stateService: StateService,
public StorageService: StorageService,
private cd: ChangeDetectorRef,
- ) {}
+ ) {
+ if (this.StorageService.getValue('ap-flipped') !== null) {
+ this.flipped = false;
+ } else {
+ this.flipped = this.stateService.apFlipped;
+ if (this.flipped) {
+ setTimeout(() => {
+ this.flipped = false;
+ this.stateService.apFlipped = false;
+ }, 5000);
+ }
+ setTimeout(() => {
+ this.readyToFlip = true;
+ }, 500);
+ }
+ }
ngOnInit(): void {
this.onResize();
@@ -94,6 +110,7 @@ export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
toggleBlockDisplayMode(): void {
if (this.isA1()) {
this.flipped = !this.flipped;
+ this.StorageService.setValue('ap-flipped', this.flipped ? 'true' : 'false');
} else {
if (this.blockDisplayMode === 'size') this.blockDisplayMode = 'fees';
else this.blockDisplayMode = 'size';
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 7f8f81744..b1e8480c8 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -147,6 +147,8 @@ export class StateService {
mempoolSequence: number;
mempoolBlockState: { block: number, transactions: { [txid: string]: TransactionStripped} };
+ apFlipped = false;
+
backend$ = new BehaviorSubject<'esplora' | 'electrum' | 'none'>('esplora');
networkChanged$ = new ReplaySubject(1);
lightningChanged$ = new ReplaySubject(1);
@@ -254,6 +256,8 @@ export class StateService {
}
});
+ this.apFlipped = true;
+
this.liveMempoolBlockTransactions$ = this.mempoolBlockUpdate$.pipe(scan((acc: { block: number, transactions: { [txid: string]: TransactionStripped } }, change: MempoolBlockUpdate): { block: number, transactions: { [txid: string]: TransactionStripped } } => {
if (isMempoolState(change)) {
const txMap = {};