From ea4c09f4b4804c882ecf8faeccae1f623229ba0d Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 1 Apr 2025 08:51:05 +0000
Subject: [PATCH] more misc changes

---
 .../blockchain/blockchain.component.html      |  2 +-
 .../blockchain/blockchain.component.scss      |  5 +++--
 .../blockchain/blockchain.component.ts        | 21 +++++++++++++++++--
 frontend/src/app/services/state.service.ts    |  4 ++++
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html
index d56a115e5..6ff92f523 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -1,4 +1,4 @@
-<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" [class.flipped]="flipped && isA1()" #container>
+<div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" [class.flipped]="flipped" [class.ready-to-flip]="readyToFlip" #container>
   <div #positionContainer class="position-container" [ngClass]="network ? network : ''" [style]="positionStyle">
     <span>
       <div class="blocks-wrapper">
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<string>(1);
   lightningChanged$ = new ReplaySubject<boolean>(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 = {};