machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5015 from mempool/natsoni/add-toggle-sats

Browse Source 
Add an option to display values as sats
This commit is contained in:
softsimon 2024-04-26 12:58:52 +07:00 committed by GitHub
commit fd8df2a035
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/app/components/amount/amount.component.html
View File

@ -1,4 +1,4 @@
<ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin"> <ng-container *ngIf="!noFiat && (viewAmountMode$ | async) === 'fiat' && (conversions$ | async) as conversions; else viewFiatVin">
<span class="fiat" *ngIf="blockConversion; else noblockconversion"> <span class="fiat" *ngIf="blockConversion; else noblockconversion">
{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ {{ addPlus && satoshis >= 0 ? '+' : '' }}{{
( (
@ -20,10 +20,28 @@
<ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default"> <ng-template [ngIf]="(network === 'liquid' || network === 'liquidtestnet') && (satoshis === undefined || satoshis === null)" [ngIfElse]="default">
<span i18n="shared.confidential">Confidential</span> <span i18n="shared.confidential">Confidential</span>
</ng-template> </ng-template>
<ng-template #default>&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }} <ng-template #default>
<span class="symbol"><ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template> @if ((viewAmountMode$ | async) === 'btc' || (viewAmountMode$ | async) === 'fiat') {
<ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template> &lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis / 100000000 | number : digitsInfo }}
<ng-template [ngIf]="network === 'testnet'">t</ng-template> <span class="symbol">
<ng-template [ngIf]="network === 'signet'">s</ng-template>BTC</span> <ng-container *ngTemplateOutlet="prefix"></ng-container>BTC
</span>
} @else {
@if (digitsInfo === '1.8-8') {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | number }}
} @else {
&lrm;{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ satoshis | amountShortener : satoshis < 1000 && satoshis > -1000 ? 0 : 1 }}
}
<span class="symbol">
<ng-container *ngTemplateOutlet="prefix"></ng-container>sats
</span>
}
</ng-template> </ng-template>
</ng-template> </ng-template>
<ng-template #prefix>
<ng-template [ngIf]="network === 'liquid' && !forceBtc">L-</ng-template>
<ng-template [ngIf]="network === 'liquidtestnet'">tL-</ng-template>
<ng-template [ngIf]="network === 'testnet'">t</ng-template>
<ng-template [ngIf]="network === 'signet'">s</ng-template>
</ng-template>

4
frontend/src/app/components/amount/amount.component.ts
View File

@ -12,7 +12,7 @@ import { Price } from '../../services/price.service';
export class AmountComponent implements OnInit, OnDestroy { export class AmountComponent implements OnInit, OnDestroy {
conversions$: Observable<any>; conversions$: Observable<any>;
currency: string; currency: string;
viewFiat$: Observable<boolean>; viewAmountMode$: Observable<'btc' | 'sats' | 'fiat'>;
network = ''; network = '';
stateSubscription: Subscription; stateSubscription: Subscription;
@ -37,7 +37,7 @@ export class AmountComponent implements OnInit, OnDestroy {
} }
ngOnInit() { ngOnInit() {
this.viewFiat$ = this.stateService.viewFiat$.asObservable(); this.viewAmountMode$ = this.stateService.viewAmountMode$.asObservable();
this.conversions$ = this.stateService.conversions$.asObservable(); this.conversions$ = this.stateService.conversions$.asObservable();
this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
} }

9
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@ -10,6 +10,7 @@ import { filter, map, tap, switchMap, shareReplay, catchError } from 'rxjs/opera
import { BlockExtended } from '../../interfaces/node-api.interface'; import { BlockExtended } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service'; import { ApiService } from '../../services/api.service';
import { PriceService } from '../../services/price.service'; import { PriceService } from '../../services/price.service';
import { StorageService } from '../../services/storage.service';
@Component({ @Component({
selector: 'app-transactions-list', selector: 'app-transactions-list',
@ -56,6 +57,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
private assetsService: AssetsService, private assetsService: AssetsService,
private ref: ChangeDetectorRef, private ref: ChangeDetectorRef,
private priceService: PriceService, private priceService: PriceService,
private storageService: StorageService,
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
@ -271,8 +273,11 @@ export class TransactionsListComponent implements OnInit, OnChanges {
if (this.network === 'liquid' || this.network === 'liquidtestnet') { if (this.network === 'liquid' || this.network === 'liquidtestnet') {
return; return;
} }
const oldvalue = !this.stateService.viewFiat$.value; const modes = ['btc', 'sats', 'fiat'];
this.stateService.viewFiat$.next(oldvalue); const oldIndex = modes.indexOf(this.stateService.viewAmountMode$.value);
const newIndex = (oldIndex + 1) % modes.length;
this.stateService.viewAmountMode$.next(modes[newIndex] as 'btc' | 'sats' | 'fiat');
this.storageService.setValue('view-amount-mode', modes[newIndex]);
} }
trackByFn(index: number, tx: Transaction): string { trackByFn(index: number, tx: Transaction): string {

2
frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts
View File

@ -63,7 +63,7 @@ export class TxBowtieGraphTooltipComponent implements OnChanges {
this.blockConversions = {}; this.blockConversions = {};
this.inputStatus = {}; this.inputStatus = {};
}); });
this.viewFiatSubscription = this.stateService.viewFiat$.subscribe(viewFiat => this.viewFiat = viewFiat); this.viewFiatSubscription = this.stateService.viewAmountMode$.subscribe(viewFiat => this.viewFiat = viewFiat === 'fiat');
this.chainTipSubscription = this.stateService.chainTip$.subscribe(tip => this.chainTip = tip); this.chainTipSubscription = this.stateService.chainTip$.subscribe(tip => this.chainTip = tip);
} }

7
frontend/src/app/services/state.service.ts
View File

@ -136,7 +136,7 @@ export class StateService {
live2Chart$ = new Subject<OptimizedMempoolStats>(); live2Chart$ = new Subject<OptimizedMempoolStats>();
viewFiat$ = new BehaviorSubject<boolean>(false); viewAmountMode$: BehaviorSubject<'btc' | 'sats' | 'fiat'>;
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2); connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
isTabHidden$: Observable<boolean>; isTabHidden$: Observable<boolean>;
@ -151,7 +151,7 @@ export class StateService {
hideAudit: BehaviorSubject<boolean>; hideAudit: BehaviorSubject<boolean>;
fiatCurrency$: BehaviorSubject<string>; fiatCurrency$: BehaviorSubject<string>;
rateUnits$: BehaviorSubject<string>; rateUnits$: BehaviorSubject<string>;
blockDisplayMode$: BehaviorSubject<string> = new BehaviorSubject<string>('size'); blockDisplayMode$: BehaviorSubject<string>;
searchFocus$: Subject<boolean> = new Subject<boolean>(); searchFocus$: Subject<boolean> = new Subject<boolean>();
menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false); menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);
@ -262,6 +262,9 @@ export class StateService {
const blockDisplayModePreference = this.storageService.getValue('block-display-mode-preference'); const blockDisplayModePreference = this.storageService.getValue('block-display-mode-preference');
this.blockDisplayMode$ = new BehaviorSubject<string>(blockDisplayModePreference || 'size'); this.blockDisplayMode$ = new BehaviorSubject<string>(blockDisplayModePreference || 'size');
const viewAmountModePreference = this.storageService.getValue('view-amount-mode') as 'btc' | 'sats' | 'fiat';
this.viewAmountMode$ = new BehaviorSubject<'btc' | 'sats' | 'fiat'>(viewAmountModePreference || 'btc');
this.backend$.subscribe(backend => { this.backend$.subscribe(backend => {
this.backend = backend; this.backend = backend;
}); });