diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index b14cea4691..758dfee4ae 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -10,7 +10,6 @@ import { AddressGroupComponent } from '@components/address-group/address-group.c import { TrackerGuard } from '@app/route-guards'; const browserWindow = window as typeof window & { __env?: any }; -// @ts-ignore const browserWindowEnv = browserWindow.__env || {}; const testnetRoutes: Routes = browserWindowEnv.TESTNET_ENABLED ? [ @@ -313,7 +312,7 @@ const liquidTestnetRoutes: Routes = browserWindowEnv.LIQUID_TESTNET_ENABLED ? [ }, { path: '**', - redirectTo: '/signet' + redirectTo: '/testnet' }, ] }, diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts index 1bd7366348..5ece2284de 100644 --- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts @@ -55,6 +55,9 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest chartInstance: any = undefined; daysAvailable: number = 0; + private readonly totalBidBoostLabel = $localize`:@@graphs.accelerationFees.totalBidBoost:Total bid boost`; + private readonly acceleratedLabel = $localize`:@@graphs.accelerationFees.accelerated:Accelerated`; + constructor( @Inject(LOCALE_ID) public locale: string, private seoService: SeoService, @@ -182,14 +185,14 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest let tooltip = `${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}
`; for (const tick of ticks) { - if (tick.seriesName === 'Total bid boost') { + if (tick.seriesName === this.totalBidBoostLabel) { if (tick.data[1] > 10_000_000) { - tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1] / 100_000_000, this.locale, '1.0-8')} BTC
`; + tooltip += `${tick.marker} ${this.totalBidBoostLabel}: ${formatNumber(tick.data[1] / 100_000_000, this.locale, '1.0-8')} BTC
`; } else { - tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats
`; + tooltip += `${tick.marker} ${this.totalBidBoostLabel}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats
`; } - } else if (tick && tick.seriesName === 'Accelerated') { - tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}
`; + } else if (tick && tick.seriesName === this.acceleratedLabel) { + tooltip += `${tick.marker} ${this.acceleratedLabel}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}
`; } } tooltip += `` + $localize`Around block: ${ticks[0].data[2]}` + ``; @@ -219,7 +222,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest legend: { data: [ { - name: 'Total bid boost', + name: this.totalBidBoostLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -230,7 +233,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest icon: 'roundRect', }, { - name: 'Accelerated', + name: this.acceleratedLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -239,14 +242,14 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest }, ], selected: { - 'Total bid boost': true, + [this.totalBidBoostLabel]: true, }, show: !this.widget, }, yAxis: data.length === 0 ? undefined : [ { type: 'value', - name: 'Total bid boost', + name: this.totalBidBoostLabel, position: 'right', nameTextStyle: { align: 'right', @@ -267,7 +270,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest }, { type: 'value', - name: 'Accelerated', + name: this.acceleratedLabel, position: 'left', axisLabel: { color: 'rgb(110, 112, 121)', @@ -288,7 +291,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest ], series: data.length === 0 ? undefined : [ { - name: 'Total bid boost', + name: this.totalBidBoostLabel, data: data.map(h => { return [h.timestamp * 1000, h.sumBidBoost, h.avgHeight]; }), @@ -300,7 +303,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest smooth: true, }, { - name: 'Accelerated', + name: this.acceleratedLabel, yAxisIndex: 1, data: data.map(h => { return [h.timestamp * 1000, h.count, h.avgHeight]; diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index 23ff2faef9..beda9ccac1 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -110,6 +110,9 @@ export class BlockFeesGraphComponent implements OnInit { } prepareChartOptions(data) { + const feesBtcLabel = $localize`:@@graphs.blockFees.feesBtc:Fees BTC`; + const feesFiatLabel = $localize`:@@graphs.blockFees.feesFiat:Fees ${this.currency}:currency:`; + let title: object; if (data.blockFees.length === 0) { title = { @@ -165,13 +168,13 @@ export class BlockFeesGraphComponent implements OnInit { for (const tick of data) { if (tick.seriesIndex === 0) { - tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC
`; + tooltip += `${tick.marker} ${feesBtcLabel}: ${formatNumber(tick.data[1], this.locale, '1.3-3')} BTC
`; } else if (tick.seriesIndex === 1) { - tooltip += `${tick.marker} ${tick.seriesName}: ${this.fiatCurrencyPipe.transform(tick.data[1], null, this.currency) }
`; + tooltip += `${tick.marker} ${feesFiatLabel}: ${this.fiatCurrencyPipe.transform(tick.data[1], null, this.currency) }
`; } } - tooltip += `* On average around block ${data[0].data[2]}`; + tooltip += `` + $localize`:@@graphs.blockFees.avgBlock:* On average around block ${data[0].data[2]}:block:` + ``; return tooltip; }.bind(this) }, @@ -186,7 +189,7 @@ export class BlockFeesGraphComponent implements OnInit { legend: data.blockFees.length === 0 ? undefined : { data: [ { - name: 'Fees BTC', + name: feesBtcLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -194,7 +197,7 @@ export class BlockFeesGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Fees ' + this.currency, + name: feesFiatLabel, inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -239,7 +242,7 @@ export class BlockFeesGraphComponent implements OnInit { legendHoverLink: false, zlevel: 0, yAxisIndex: 0, - name: 'Fees BTC', + name: feesBtcLabel, data: data.blockFees, type: 'line', smooth: 0.25, @@ -253,7 +256,7 @@ export class BlockFeesGraphComponent implements OnInit { legendHoverLink: false, zlevel: 1, yAxisIndex: 1, - name: 'Fees ' + this.currency, + name: feesFiatLabel, data: data.blockFeesFiat, type: 'line', smooth: 0.25, diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts index 998245dfcb..12111799cc 100644 --- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts +++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts @@ -55,6 +55,13 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { zoomTimeSpan = ''; legend: { mode: 'normal' | 'fiat' | 'percentage', subsidy: boolean, fees: boolean } = { mode: 'normal', subsidy: true, fees: true }; + private readonly subsidyLabel = $localize`:@@graphs.blockFeesSubsidy.subsidy:Subsidy`; + private readonly feesLabel = $localize`:@@graphs.blockFeesSubsidy.fees:Fees`; + private readonly subsidyUsdLabel = $localize`:@@graphs.blockFeesSubsidy.subsidyUsd:Subsidy (USD)`; + private readonly feesUsdLabel = $localize`:@@graphs.blockFeesSubsidy.feesUsd:Fees (USD)`; + private readonly subsidyPercentLabel = $localize`:@@graphs.blockFeesSubsidy.subsidyPercent:Subsidy (%)`; + private readonly feesPercentLabel = $localize`:@@graphs.blockFeesSubsidy.feesPercent:Fees (%)`; + constructor( @Inject(LOCALE_ID) public locale: string, private seoService: SeoService, @@ -235,7 +242,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { legend: this.data.blockFees.length === 0 ? undefined : { data: [ { - name: 'Subsidy', + name: this.subsidyLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -243,7 +250,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Fees', + name: this.feesLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -251,7 +258,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Subsidy (USD)', + name: this.subsidyUsdLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -259,7 +266,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Fees (USD)', + name: this.feesUsdLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -267,7 +274,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Subsidy (%)', + name: this.subsidyPercentLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -275,7 +282,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Fees (%)', + name: this.feesPercentLabel, inactiveColor: 'var(--grey)', textStyle: { color: 'white', @@ -284,12 +291,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { }, ], selected: { - 'Subsidy (USD)': this.displayMode === 'fiat' && this.legend.subsidy, - 'Fees (USD)': this.displayMode === 'fiat' && this.legend.fees, - 'Subsidy': this.displayMode === 'normal' && this.legend.subsidy, - 'Fees': this.displayMode === 'normal' && this.legend.fees, - 'Subsidy (%)': this.displayMode === 'percentage' && this.legend.subsidy, - 'Fees (%)': this.displayMode === 'percentage' && this.legend.fees, + [this.subsidyUsdLabel]: this.displayMode === 'fiat' && this.legend.subsidy, + [this.feesUsdLabel]: this.displayMode === 'fiat' && this.legend.fees, + [this.subsidyLabel]: this.displayMode === 'normal' && this.legend.subsidy, + [this.feesLabel]: this.displayMode === 'normal' && this.legend.fees, + [this.subsidyPercentLabel]: this.displayMode === 'percentage' && this.legend.subsidy, + [this.feesPercentLabel]: this.displayMode === 'percentage' && this.legend.fees, }, }, yAxis: this.data.blockFees.length === 0 ? undefined : [ @@ -331,7 +338,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { ], series: this.data.blockFees.length === 0 ? undefined : [ { - name: 'Subsidy', + name: this.subsidyLabel, yAxisIndex: 0, type: 'bar', barWidth: '90%', @@ -339,7 +346,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { data: this.data.blockSubsidy, }, { - name: 'Fees', + name: this.feesLabel, yAxisIndex: 0, type: 'bar', barWidth: '90%', @@ -347,7 +354,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { data: this.data.blockFees, }, { - name: 'Subsidy (USD)', + name: this.subsidyUsdLabel, yAxisIndex: 1, type: 'bar', barWidth: '90%', @@ -355,7 +362,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { data: this.data.blockSubsidyFiat, }, { - name: 'Fees (USD)', + name: this.feesUsdLabel, yAxisIndex: 1, type: 'bar', barWidth: '90%', @@ -363,7 +370,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { data: this.data.blockFeesFiat, }, { - name: 'Subsidy (%)', + name: this.subsidyPercentLabel, yAxisIndex: 0, type: 'bar', barWidth: '90%', @@ -371,7 +378,7 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { data: this.data.blockSubsidyPercent, }, { - name: 'Fees (%)', + name: this.feesPercentLabel, yAxisIndex: 0, type: 'bar', barWidth: '90%', @@ -413,9 +420,9 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { } let mode: 'normal' | 'fiat' | 'percentage'; - if (params.name.includes('USD')) { + if (params.name === this.subsidyUsdLabel || params.name === this.feesUsdLabel) { mode = 'fiat'; - } else if (params.name.includes('%')) { + } else if (params.name === this.subsidyPercentLabel || params.name === this.feesPercentLabel) { mode = 'percentage'; } else { mode = 'normal'; @@ -424,8 +431,8 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { const switchingMode = params.selected[params.name]; this.legend.mode = mode; - this.legend.fees = switchingMode || params.selected['Fees'] || params.selected['Fees (%)'] || params.selected['Fees (USD)']; - this.legend.subsidy = switchingMode || params.selected['Subsidy'] || params.selected['Subsidy (%)'] || params.selected['Subsidy (USD)']; + this.legend.fees = switchingMode || params.selected[this.feesLabel] || params.selected[this.feesPercentLabel] || params.selected[this.feesUsdLabel]; + this.legend.subsidy = switchingMode || params.selected[this.subsidyLabel] || params.selected[this.subsidyPercentLabel] || params.selected[this.subsidyUsdLabel]; this.storageService.setValue('fees_subsidy_legend', JSON.stringify(this.legend)); if (this.displayMode === mode) { @@ -434,12 +441,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit { if (switchingMode) { this.displayMode = mode; - this.chartInstance.dispatchAction({ type: this.displayMode === 'normal' ? 'legendSelect' : 'legendUnSelect', name: 'Subsidy' }); - this.chartInstance.dispatchAction({ type: this.displayMode === 'normal' ? 'legendSelect' : 'legendUnSelect', name: 'Fees' }); - this.chartInstance.dispatchAction({ type: this.displayMode === 'fiat' ? 'legendSelect' : 'legendUnSelect', name: 'Subsidy (USD)' }); - this.chartInstance.dispatchAction({ type: this.displayMode === 'fiat' ? 'legendSelect' : 'legendUnSelect', name: 'Fees (USD)' }); - this.chartInstance.dispatchAction({ type: this.displayMode === 'percentage' ? 'legendSelect' : 'legendUnSelect', name: 'Subsidy (%)' }); - this.chartInstance.dispatchAction({ type: this.displayMode === 'percentage' ? 'legendSelect' : 'legendUnSelect', name: 'Fees (%)' }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'normal' ? 'legendSelect' : 'legendUnSelect', name: this.subsidyLabel }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'normal' ? 'legendSelect' : 'legendUnSelect', name: this.feesLabel }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'fiat' ? 'legendSelect' : 'legendUnSelect', name: this.subsidyUsdLabel }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'fiat' ? 'legendSelect' : 'legendUnSelect', name: this.feesUsdLabel }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'percentage' ? 'legendSelect' : 'legendUnSelect', name: this.subsidyPercentLabel }); + this.chartInstance.dispatchAction({ type: this.displayMode === 'percentage' ? 'legendSelect' : 'legendUnSelect', name: this.feesPercentLabel }); } }); diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 1b24fdba6c..ebfdd0824d 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -3,7 +3,7 @@ import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from ' import { Transaction } from '@interfaces/electrs.interface'; import { AccelerationDelta, HealthCheckHost, IBackendInfo, MempoolBlock, MempoolBlockUpdate, MempoolInfo, Recommendedfees, ReplacedTransaction, ReplacementInfo, StratumJob, isMempoolState } from '@interfaces/websocket.interface'; import { Acceleration, AccelerationPosition, BlockExtended, CpfpInfo, DifficultyAdjustment, MempoolPosition, OptimizedMempoolStats, RbfTree, TransactionStripped } from '@interfaces/node-api.interface'; -import { Router, NavigationStart } from '@angular/router'; +import { Router, NavigationStart, NavigationEnd } from '@angular/router'; import { isPlatformBrowser } from '@angular/common'; import { filter, map, scan, share, shareReplay } from 'rxjs/operators'; import { StorageService } from '@app/services/storage.service'; @@ -264,6 +264,9 @@ export class StateService { if (event instanceof NavigationStart) { this.setNetworkBasedonUrl(event.url); this.setLightningBasedonUrl(event.url); + } else if (event instanceof NavigationEnd) { + this.setNetworkBasedonUrl(event.urlAfterRedirects); + this.setLightningBasedonUrl(event.urlAfterRedirects); } });