diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html index 44f7b840e..85abafee0 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html @@ -64,9 +64,10 @@ {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ - Fee per vByte + Fee per vByte + Fee per weight unit - {{ tx.fee / (tx.weight / 4) | feeRounding }} sat/vB +   diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index cbf33933c..66a594643 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core'; import { EChartsOption } from 'echarts'; -import { Observable } from 'rxjs'; +import { Observable, Subscription, combineLatest } from 'rxjs'; import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; @@ -76,10 +76,11 @@ export class BlockFeeRatesGraphComponent implements OnInit { } }); - this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges - .pipe( - startWith(this.radioGroupForm.controls.dateSpan.value), - switchMap((timespan) => { + this.statsObservable$ = combineLatest([ + this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)), + this.stateService.rateUnits$ + ]).pipe( + switchMap(([timespan, rateUnits]) => { this.storageService.setValue('miningWindowPreference', timespan); this.timespan = timespan; this.isLoading = true; @@ -135,8 +136,8 @@ export class BlockFeeRatesGraphComponent implements OnInit { this.prepareChartOptions({ legends: legends, - series: series, - }); + series: series + }, rateUnits === 'wu'); this.isLoading = false; }), map((response) => { @@ -150,7 +151,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { ); } - prepareChartOptions(data) { + prepareChartOptions(data, weightMode) { this.chartOptions = { color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'], animation: false, @@ -181,7 +182,11 @@ export class BlockFeeRatesGraphComponent implements OnInit { let tooltip = `${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}
`; for (const rate of data.reverse()) { - tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte
`; + if (weightMode) { + tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1] / 4} sats/WU
`; + } else { + tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte
`; + } } if (['24h', '3d'].includes(this.timespan)) { @@ -231,9 +236,12 @@ export class BlockFeeRatesGraphComponent implements OnInit { axisLabel: { color: 'rgb(110, 112, 121)', formatter: (val) => { + if (weightMode) { + val /= 4; + } const selectedPowerOfTen: any = selectPowerOfTen(val); const newVal = Math.round(val / selectedPowerOfTen.divider); - return `${newVal}${selectedPowerOfTen.unit} s/vB`; + return `${newVal}${selectedPowerOfTen.unit} s/${weightMode ? 'WU': 'vB'}`; }, }, splitLine: { diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html index 795958fe3..eece860f8 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html @@ -25,19 +25,23 @@ Fee rate - {{ feeRate | feeRounding }} sat/vB + Effective fee rate - {{ effectiveRate | feeRounding }} sat/vB + - + Virtual size + + Weight + + Audit status diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html index 29da36373..401f38487 100644 --- a/frontend/src/app/components/block/block-preview.component.html +++ b/frontend/src/app/components/block/block-preview.component.html @@ -34,7 +34,7 @@ Median fee - ~{{ block?.extras?.medianFee | number:'1.0-0' }} sat/vB + ~ diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index aa441ad9a..5acabf7d1 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -121,11 +121,11 @@ Fee span - {{ block?.extras?.minFee | number:'1.0-0' }} - {{ block?.extras?.maxFee | number:'1.0-0' }} sat/vB + - Median fee - ~{{ block?.extras?.medianFee | number:'1.0-0' }} sat/vB + ~
- ~{{ block?.extras?.medianFee | number:feeRounding }} sat/vB + ~
@@ -32,8 +31,9 @@
- {{ block.extras.minFee | number:feeRounding }} - {{ block.extras.maxFee | number:feeRounding }} sat/vB + + - +
diff --git a/frontend/src/app/components/clock/clock.component.html b/frontend/src/app/components/clock/clock.component.html index cff158697..373653b7e 100644 --- a/frontend/src/app/components/clock/clock.component.html +++ b/frontend/src/app/components/clock/clock.component.html @@ -45,7 +45,9 @@

priority rate

-

{{ recommendedFees.fastestFee }} sat/vB

+

+ +

diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts index 823d271a1..f275588a1 100644 --- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts +++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts @@ -1,16 +1,17 @@ -import { OnChanges } from '@angular/core'; +import { OnChanges, OnDestroy } from '@angular/core'; import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { TransactionStripped } from '../../interfaces/websocket.interface'; import { StateService } from '../../services/state.service'; import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe'; import { selectPowerOfTen } from '../../bitcoin.utils'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-fee-distribution-graph', templateUrl: './fee-distribution-graph.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FeeDistributionGraphComponent implements OnInit, OnChanges { +export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy { @Input() feeRange: number[]; @Input() vsize: number; @Input() transactions: TransactionStripped[]; @@ -25,6 +26,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges { data: number[][]; labelInterval: number = 50; + rateUnitSub: Subscription; + weightMode: boolean = false; mempoolVsizeFeesOptions: any; mempoolVsizeFeesInitOptions = { renderer: 'svg' @@ -35,8 +38,13 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges { private vbytesPipe: VbytesPipe, ) { } - ngOnInit(): void { - this.mountChart(); + ngOnInit() { + this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => { + this.weightMode = rateUnits === 'wu'; + if (this.data) { + this.mountChart(); + } + }); } ngOnChanges(): void { @@ -122,8 +130,9 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges { }, axisLabel: { formatter: (value: number): string => { - const selectedPowerOfTen = selectPowerOfTen(value); - const newVal = Math.round(value / selectedPowerOfTen.divider); + const unitValue = this.weightMode ? value / 4 : value; + const selectedPowerOfTen = selectPowerOfTen(unitValue); + const newVal = Math.round(unitValue / selectedPowerOfTen.divider); return `${newVal}${selectedPowerOfTen.unit}`; }, } @@ -138,10 +147,11 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges { textShadowBlur: 0, formatter: (label: { data: number[] }): string => { const value = label.data[1]; - const selectedPowerOfTen = selectPowerOfTen(value); - const newVal = Math.round(value / selectedPowerOfTen.divider); + const unitValue = this.weightMode ? value / 4 : value; + const selectedPowerOfTen = selectPowerOfTen(unitValue); + const newVal = Math.round(unitValue / selectedPowerOfTen.divider); return `${newVal}${selectedPowerOfTen.unit}`; - }, + } }, showAllSymbol: false, smooth: true, @@ -162,4 +172,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges { }] }; } + + ngOnDestroy(): void { + this.rateUnitSub.unsubscribe(); + } } diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html index 1aea85429..580307df5 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -13,23 +13,23 @@
-
{{ recommendedFees.economyFee }} sat/vB
+
-
{{ recommendedFees.hourFee }} sat/vB
+
-
{{ recommendedFees.halfHourFee }} sat/vB
+
-
{{ recommendedFees.fastestFee }} sat/vB
+
diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html index c8d28824f..cc5d1f9b9 100644 --- a/frontend/src/app/components/footer/footer.component.html +++ b/frontend/src/app/components/footer/footer.component.html @@ -10,7 +10,8 @@
 
-
‎{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vB/s
+
‎{{ mempoolInfoData.vBytesPerSecond | ceil | number }} vB/s
+
‎{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} WU/s
 diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts index d721469b7..219811e9c 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts @@ -1,9 +1,11 @@ -import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core'; +import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core'; import { EChartsOption } from 'echarts'; import { OnChanges } from '@angular/core'; import { StorageService } from '../../services/storage.service'; import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils'; import { formatNumber } from '@angular/common'; +import { StateService } from '../../services/state.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-incoming-transactions-graph', @@ -18,7 +20,7 @@ import { formatNumber } from '@angular/common'; `], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { +export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, OnDestroy { @Input() data: any; @Input() theme: string; @Input() height: number | string = '200'; @@ -35,14 +37,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { }; windowPreference: string; chartInstance: any = undefined; + weightMode: boolean = false; + rateUnitSub: Subscription; constructor( @Inject(LOCALE_ID) private locale: string, private storageService: StorageService, + private stateService: StateService, ) { } ngOnInit() { this.isLoading = true; + + this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => { + this.weightMode = rateUnits === 'wu'; + if (this.data) { + this.mountChart(); + } + }); } ngOnChanges(): void { @@ -118,7 +130,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { itemFormatted += `
${colorSpan(item.color)}
-
${formatNumber(item.value[1], this.locale, '1.0-0')}vB/s
+
${formatNumber(this.weightMode ? item.value[1] * 4 : item.value[1], this.locale, '1.0-0')} ${this.weightMode ? 'WU' : 'vB'}/s
`; } }); @@ -147,6 +159,9 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { type: 'value', axisLabel: { fontSize: 11, + formatter: (value) => { + return this.weightMode ? value * 4 : value; + } }, splitLine: { lineStyle: { @@ -250,4 +265,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges { this.mempoolStatsChartOption.backgroundColor = 'none'; this.chartInstance.setOption(this.mempoolStatsChartOption); } + + ngOnDestroy(): void { + this.rateUnitSub.unsubscribe(); + } } diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.html b/frontend/src/app/components/mempool-block/mempool-block.component.html index 7d5b18ccb..b089a6d74 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.html +++ b/frontend/src/app/components/mempool-block/mempool-block.component.html @@ -14,11 +14,15 @@ Median fee - ~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB + ~ Fee span - {{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB + + + - + + Total fees diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 5f09e0267..9c5c338c0 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -13,10 +13,12 @@
- ~{{ projectedBlock.medianFee | number:feeRounding }} sat/vB + ~
- {{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} sat/vB + + - +
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 4ab8c33fc..6c9795c89 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core'; import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe'; +import { WuBytesPipe } from '../../shared/pipes/bytes-pipe/wubytes.pipe'; import { formatNumber } from '@angular/common'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { StateService } from '../../services/state.service'; @@ -48,9 +49,11 @@ export class MempoolGraphComponent implements OnInit, OnChanges { chartColorsOrdered = chartColors; inverted: boolean; chartInstance: any = undefined; + weightMode: boolean = false; constructor( private vbytesPipe: VbytesPipe, + private wubytesPipe: WuBytesPipe, private stateService: StateService, private storageService: StorageService, @Inject(LOCALE_ID) private locale: string, diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html new file mode 100644 index 000000000..016d1b555 --- /dev/null +++ b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.scss b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts new file mode 100644 index 000000000..a7d94cec2 --- /dev/null +++ b/frontend/src/app/components/rate-unit-selector/rate-unit-selector.component.ts @@ -0,0 +1,45 @@ +import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { StorageService } from '../../services/storage.service'; +import { StateService } from '../../services/state.service'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-rate-unit-selector', + templateUrl: './rate-unit-selector.component.html', + styleUrls: ['./rate-unit-selector.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class RateUnitSelectorComponent implements OnInit, OnDestroy { + rateUnitForm: UntypedFormGroup; + rateUnitSub: Subscription; + units = [ + { name: 'vb', label: 'sat/vB' }, + { name: 'wu', label: 'sat/WU' }, + ]; + + constructor( + private formBuilder: UntypedFormBuilder, + private stateService: StateService, + private storageService: StorageService, + ) { } + + ngOnInit() { + this.rateUnitForm = this.formBuilder.group({ + rateUnits: ['vb'] + }); + this.rateUnitSub = this.stateService.rateUnits$.subscribe((units) => { + this.rateUnitForm.get('rateUnits')?.setValue(units); + }); + } + + changeUnits() { + const newUnits = this.rateUnitForm.get('rateUnits')?.value; + this.storageService.setValue('rate-unit-preference', newUnits); + this.stateService.rateUnits$.next(newUnits); + } + + ngOnDestroy(): void { + this.rateUnitSub.unsubscribe(); + } +} diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html index 1ce224760..68f8a1caf 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html @@ -21,10 +21,14 @@ Fee {{ rbfInfo.tx.fee | number }} sat - + Virtual size + + Weight + + Status diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html index e9d531cb8..ce5a9678f 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.html @@ -31,7 +31,7 @@ >
- {{ cell.replacement.tx.fee / (cell.replacement.tx.vsize) | feeRounding }} sat/vB +
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss index 97388b98e..3745360a5 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss @@ -126,11 +126,6 @@ } } - .symbol::ng-deep { - display: block; - margin-top: -0.5em; - } - &.selected { .shape-border { background: #9339f4; diff --git a/frontend/src/app/components/transaction/transaction-preview.component.html b/frontend/src/app/components/transaction/transaction-preview.component.html index e3a49d9b6..679138b14 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.html +++ b/frontend/src/app/components/transaction/transaction-preview.component.html @@ -33,7 +33,7 @@

- {{ tx.feePerVsize | feeRounding }} sat/vB +

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 216114cd0..25707b007 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -137,7 +137,8 @@ Type TXID - Virtual size + Virtual size + Weight Fee rate @@ -149,8 +150,9 @@ - - {{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} sat/vB + + + @@ -160,8 +162,9 @@ - - {{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | feeRounding }} sat/vB + + + @@ -171,8 +174,9 @@ - - {{ cpfpTx.fee / (cpfpTx.weight / 4) | feeRounding }} sat/vB + + + @@ -475,7 +479,7 @@ Fee rate - {{ tx.feePerVsize | feeRounding }} sat/vB +   @@ -486,7 +490,7 @@ Effective fee rate
- {{ tx.effectiveFeePerVsize | feeRounding }} sat/vB + diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index c509a799d..a758f3c94 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -290,8 +290,8 @@
- {{ tx.fee / (tx.weight / 4) | feeRounding }} sat/vB  – {{ tx.fee | number }} +  – {{ tx.fee | number }} sat
Show more inputs to reveal fee data
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index e5504c84a..620678a28 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -132,7 +132,7 @@ Confidential - {{ transaction.fee / transaction.vsize | feeRounding }} sat/vB + @@ -188,7 +188,7 @@
Minimum fee
Purging

- < {{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | feeRounding }} sat/vB + <

@@ -229,7 +229,8 @@
 
-
‎{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s
+
‎{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s
+
‎{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} WU/s
 diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 738893bbc..0c5f5a5d9 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -133,6 +133,7 @@ export class StateService { hideFlow: BehaviorSubject; hideAudit: BehaviorSubject; fiatCurrency$: BehaviorSubject; + rateUnits$: BehaviorSubject; constructor( @Inject(PLATFORM_ID) private platformId: any, @@ -225,6 +226,9 @@ export class StateService { const fiatPreference = this.storageService.getValue('fiat-preference'); this.fiatCurrency$ = new BehaviorSubject(fiatPreference || 'USD'); + + const rateUnitPreference = this.storageService.getValue('rate-unit-preference'); + this.rateUnits$ = new BehaviorSubject(rateUnitPreference || 'vb'); } setNetworkBasedonUrl(url: string) { diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.html b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html new file mode 100644 index 000000000..bd684369c --- /dev/null +++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.html @@ -0,0 +1,4 @@ + + {{ fee / (weight / 4) | feeRounding:rounding }} sat/vB + {{ fee / weight | feeRounding:rounding }} sat/WU + \ No newline at end of file diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.scss b/frontend/src/app/shared/components/fee-rate/fee-rate.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts new file mode 100644 index 000000000..4d65ef0c2 --- /dev/null +++ b/frontend/src/app/shared/components/fee-rate/fee-rate.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { StateService } from '../../../services/state.service'; + +@Component({ + selector: 'app-fee-rate', + templateUrl: './fee-rate.component.html', + styleUrls: ['./fee-rate.component.scss'] +}) +export class FeeRateComponent implements OnInit { + @Input() fee: number; + @Input() weight: number = 4; + @Input() rounding: string = null; + @Input() showUnit: boolean = true; + @Input() unitClass: string = 'symbol'; + @Input() unitStyle: any; + + rateUnits$: Observable; + + constructor( + private stateService: StateService, + ) { } + + ngOnInit() { + this.rateUnits$ = this.stateService.rateUnits$; + } +} diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index 0bac1f9ff..8e5279a94 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -10,6 +10,9 @@
+
+ +

Sign In

diff --git a/frontend/src/app/shared/components/weight-directives/weight-directives.ts b/frontend/src/app/shared/components/weight-directives/weight-directives.ts new file mode 100644 index 000000000..879b6bee6 --- /dev/null +++ b/frontend/src/app/shared/components/weight-directives/weight-directives.ts @@ -0,0 +1,45 @@ +import { Directive, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core'; +import { Subscription } from 'rxjs'; +import { StateService } from '../../../services/state.service'; + +function createRateUnitDirective(checkFn: (rateUnit: string) => boolean): any { + @Directive() + class RateUnitDirective implements OnDestroy { + private subscription: Subscription; + private enabled: boolean; + private hasView: boolean = false; + + constructor( + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef, + private stateService: StateService + ) { + this.subscription = this.stateService.rateUnits$.subscribe(rateUnit => { + this.enabled = checkFn(rateUnit); + this.updateView(); + }); + } + + updateView(): void { + if (this.enabled && !this.hasView) { + this.viewContainer.createEmbeddedView(this.templateRef); + this.hasView = true; + } else if (!this.enabled && this.hasView) { + this.viewContainer.clear(); + this.hasView = false; + } + } + + ngOnDestroy(): void { + this.subscription.unsubscribe(); + } + } + + return RateUnitDirective; +} + +@Directive({ selector: '[only-vsize]' }) +export class OnlyVsizeDirective extends createRateUnitDirective(rateUnit => rateUnit !== 'wu') {} + +@Directive({ selector: '[only-weight]' }) +export class OnlyWeightDirective extends createRateUnitDirective(rateUnit => rateUnit === 'wu') {} \ No newline at end of file diff --git a/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts b/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts index 397873df2..b6566ac0a 100644 --- a/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts +++ b/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts @@ -17,7 +17,7 @@ export class WuBytesPipe implements PipeTransform { 'TWU': {max: Number.MAX_SAFE_INTEGER, prev: 'GWU'} }; - transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit): any { + transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit, plainText?: boolean): any { if (!(isNumberFinite(input) && isNumberFinite(decimal) && @@ -38,7 +38,7 @@ export class WuBytesPipe implements PipeTransform { const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal); - return WuBytesPipe.formatResult(result, to); + return WuBytesPipe.formatResult(result, to, plainText); } for (const key in WuBytesPipe.formats) { @@ -47,12 +47,15 @@ export class WuBytesPipe implements PipeTransform { const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal); - return WuBytesPipe.formatResult(result, key); + return WuBytesPipe.formatResult(result, key, plainText); } } } - static formatResult(result: number, unit: string): string { + static formatResult(result: number, unit: string, plainText: boolean): string { + if (plainText){ + return `${result} ${unit}`; + } return `${result} ${unit}`; } diff --git a/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts b/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts index 319698b23..554b0774b 100644 --- a/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts +++ b/frontend/src/app/shared/pipes/fee-rounding/fee-rounding.pipe.ts @@ -9,7 +9,11 @@ export class FeeRoundingPipe implements PipeTransform { @Inject(LOCALE_ID) private locale: string, ) {} - transform(fee: number): string { + transform(fee: number, rounding = null): string { + if (rounding) { + return formatNumber(fee, this.locale, rounding); + } + if (fee >= 100) { return formatNumber(fee, this.locale, '1.0-0') } else if (fee < 10) { diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 542d2f745..9cf780116 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -35,6 +35,7 @@ import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating. import { ReactiveFormsModule } from '@angular/forms'; import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component'; import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component'; +import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component'; import { ColoredPriceDirective } from './directives/colored-price.directive'; import { NoSanitizePipe } from './pipes/no-sanitize.pipe'; import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component'; @@ -82,6 +83,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index import { SvgImagesComponent } from '../components/svg-images/svg-images.component'; import { ChangeComponent } from '../components/change/change.component'; import { SatsComponent } from './components/sats/sats.component'; +import { FeeRateComponent } from './components/fee-rate/fee-rate.component'; import { TruncateComponent } from './components/truncate/truncate.component'; import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component'; import { TimestampComponent } from './components/timestamp/timestamp.component'; @@ -96,6 +98,8 @@ import { ClockchainComponent } from '../components/clockchain/clockchain.compone import { ClockFaceComponent } from '../components/clock-face/clock-face.component'; import { ClockComponent } from '../components/clock/clock.component'; +import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives'; + @NgModule({ declarations: [ ClipboardComponent, @@ -106,6 +110,7 @@ import { ClockComponent } from '../components/clock/clock.component'; TxFeeRatingComponent, LanguageSelectorComponent, FiatSelectorComponent, + RateUnitSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, NoSanitizePipe, @@ -171,6 +176,7 @@ import { ClockComponent } from '../components/clock/clock.component'; SvgImagesComponent, ChangeComponent, SatsComponent, + FeeRateComponent, TruncateComponent, SearchResultsComponent, TimestampComponent, @@ -184,6 +190,9 @@ import { ClockComponent } from '../components/clock/clock.component'; ClockchainComponent, ClockComponent, ClockFaceComponent, + + OnlyVsizeDirective, + OnlyWeightDirective ], imports: [ CommonModule, @@ -200,6 +209,7 @@ import { ClockComponent } from '../components/clock/clock.component'; ], providers: [ VbytesPipe, + WuBytesPipe, RelativeUrlPipe, NoSanitizePipe, ShortenStringPipe, @@ -225,6 +235,7 @@ import { ClockComponent } from '../components/clock/clock.component'; TxFeeRatingComponent, LanguageSelectorComponent, FiatSelectorComponent, + RateUnitSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, Hex2asciiPipe, @@ -284,6 +295,7 @@ import { ClockComponent } from '../components/clock/clock.component'; SvgImagesComponent, ChangeComponent, SatsComponent, + FeeRateComponent, TruncateComponent, SearchResultsComponent, TimestampComponent, @@ -297,6 +309,9 @@ import { ClockComponent } from '../components/clock/clock.component'; ClockchainComponent, ClockComponent, ClockFaceComponent, + + OnlyVsizeDirective, + OnlyWeightDirective ] }) export class SharedModule { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index aea8e8d6e..e5eb2272b 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -221,7 +221,7 @@ main { } .block-size, .blocks-container { - span { + .symbol { font-size: 16px; color: #fff !important; }