From d29862d513e27de245f4b47cbafcc8a90703a2e5 Mon Sep 17 00:00:00 2001
From: rodribp <rodrigobonilla177@gmail.com>
Date: Wed, 22 Jul 2026 23:10:55 -0600
Subject: [PATCH] add: view amount mode selector

---
 .../components/payment/payment.component.html | 21 ++++++++++++---
 .../components/payment/payment.component.scss | 27 +++++++++++++++++++
 .../components/payment/payment.component.ts   | 12 +++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/payment/payment.component.html b/frontend/src/app/components/payment/payment.component.html
index bf683adb7..afd592856 100644
--- a/frontend/src/app/components/payment/payment.component.html
+++ b/frontend/src/app/components/payment/payment.component.html
@@ -59,10 +59,23 @@
 </div>
 
 <ng-template #amountSection>
-  <div class="amount-col">
-    <span class="text" i18n="transaction.amount|Amount">Amount</span>
-    <app-amount [satoshis]="amount" [blockConversion]="tx.price" [noFiat]="true"></app-amount>
-    <app-fiat class="fiat" [value]="amount" [blockConversion]="tx.price"></app-fiat>
+  <div style="position: relative;">
+    @if (viewAmountMode$ | async; as mode) {
+      <div class="toggler">
+        <a href="" (click)="changeMode('btc')" class="toggler-option"
+          [class.inactive]="mode === 'sats'"><small>BTC</small></a>
+        <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
+        <a href="" (click)="changeMode('sats')" class="toggler-option"
+          [class.inactive]="mode !== 'sats'"><small>Sats</small></a>
+      </div>
+      <div class="amount-col">
+        <span class="text" i18n="transaction.amount|Amount">Amount</span>
+        <a class="amount" href="" (click)="changeMode(mode === 'sats' ? 'btc' : 'sats')">
+          <app-amount [satoshis]="amount" [blockConversion]="tx.price" [noFiat]="true"></app-amount>
+        </a>
+        <app-fiat class="fiat" [value]="amount" [blockConversion]="tx.price"></app-fiat>
+      </div>
+    }
   </div>
 </ng-template>
 
diff --git a/frontend/src/app/components/payment/payment.component.scss b/frontend/src/app/components/payment/payment.component.scss
index 9d9723ca7..61289bd1f 100644
--- a/frontend/src/app/components/payment/payment.component.scss
+++ b/frontend/src/app/components/payment/payment.component.scss
@@ -202,6 +202,33 @@
   }
 }
 
+.toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+  
+  @media (max-width: 850px) {
+    top: 2px;
+  }
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: var(--transparent-fg);
+}
+
+.amount {
+  text-decoration: none; 
+  color: white;
+  width: 100%;
+  text-align: center;
+}
+
 @keyframes pulse {
   0% {
     fill-opacity: 0.30;
diff --git a/frontend/src/app/components/payment/payment.component.ts b/frontend/src/app/components/payment/payment.component.ts
index f3b02bdbf..d41f9da46 100644
--- a/frontend/src/app/components/payment/payment.component.ts
+++ b/frontend/src/app/components/payment/payment.component.ts
@@ -19,6 +19,7 @@ import { ETA, EtaService } from '@app/services/eta.service';
 import { getRegex } from '@app/shared/regex.utils';
 import { TrackerStage } from '@components/tracker/tracker-bar.component';
 import { ApiService } from '@app/services/api.service';
+import { StorageService } from '@app/services/storage.service';
 
 @Component({
   selector: 'app-payment',
@@ -69,6 +70,8 @@ export class PaymentComponent implements OnInit, OnDestroy {
   fetchCachedTxSubscription: Subscription;
   txRbfInfoSubscription: Subscription;
   latestReplacement: string;
+  amountMode: string;
+  viewAmountMode$: Observable<'btc' | 'sats' | 'fiat'>;
 
   constructor(
     private route: ActivatedRoute,
@@ -83,12 +86,14 @@ export class PaymentComponent implements OnInit, OnDestroy {
     private seoService: SeoService,
     private miningService: MiningService,
     private etaService: EtaService,
+    private storageService: StorageService,
     private cd: ChangeDetectorRef,
     @Inject(ZONE_SERVICE) private zoneService: any,
   ) {}
 
   ngOnInit(): void {
     this.onResize();
+    this.viewAmountMode$ = this.stateService.viewAmountMode$.asObservable();
 
     if (!this.stateService.isLiquid()) {
       this.miningService.getMiningStats('1m').subscribe(stats => {
@@ -467,4 +472,11 @@ export class PaymentComponent implements OnInit, OnDestroy {
     this.txReplacedSubscription?.unsubscribe();
     this.leaveTransaction();
   }
+
+  changeMode(mode: 'btc' | 'sats'): boolean {
+    this.storageService.setValue('view-amount-mode', mode);
+    this.stateService.viewAmountMode$.next(mode);
+    this.amountMode = mode;
+    return false;
+  }
 }