GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

add: view amount mode selector

Browse source
This commit is contained in:
rodribp 2026-07-22 23:10:55 -06:00
parent 1ed4b8b5fe
commit d29862d513
No known key found for this signature in database
GPG key ID: DBB99FAE51E608F0
3 changed files with 56 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/app/components/payment/payment.component.html
View file

@ -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>

27
frontend/src/app/components/payment/payment.component.scss
View file

@ -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;

12
frontend/src/app/components/payment/payment.component.ts
View file

@ -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;
}
}