diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json index cac5d2e61..781973055 100644 --- a/backend/mempool-config.sample.json +++ b/backend/mempool-config.sample.json @@ -153,7 +153,7 @@ ] }, "MEMPOOL_SERVICES": { - "API": "https://mempool.space/api", + "API": "https://mempool.space/api/v1/services", "ACCELERATIONS": false }, "FIAT_PRICE": { 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 edc206407..91de5ca03 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 @@ -156,7 +156,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnDestroy { let tooltip = `${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}
`; if (ticks[0].data[1] > 10_000_000) { - tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1] / 100_000_000, this.locale, '1.0-0')} BTC
`; + tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1] / 100_000_000, this.locale, '1.0-8')} BTC
`; } else { tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.0-0')} sats
`; } diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html index 7893fda2c..52573c437 100644 --- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.html +++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.html @@ -1,5 +1,7 @@
- +
+
No featured assets
+
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss index 0ff049d16..32c560af4 100644 --- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss +++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss @@ -47,3 +47,9 @@ .ticker { color: grey; } + +.symbol { + color: grey; + font-size: 1.5rem; + font-style: italic; +} \ No newline at end of file diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts index d80cb6636..a9bf305f6 100644 --- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts +++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { ApiService } from '../../../services/api.service'; +import { StateService } from '../../../services/state.service'; @Component({ selector: 'app-assets-featured', @@ -12,10 +13,11 @@ export class AssetsFeaturedComponent implements OnInit { constructor( private apiService: ApiService, + private stateService: StateService, ) { } ngOnInit(): void { - this.featuredAssets$ = this.apiService.listFeaturedAssets$(); + this.featuredAssets$ = this.apiService.listFeaturedAssets$(this.stateService.network); } } 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 f0b3b5499..1ef0d1686 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 @@ -61,10 +61,10 @@ {{ activeFilters.rbf }} - +
- Accelerated + Accelerated {{ filter.label }} diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss index 60e2f53a3..51edee1e8 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss @@ -9,8 +9,8 @@ justify-content: space-between; padding: 10px 15px; text-align: left; - min-width: 320px; - max-width: 320px; + min-width: 340px; + max-width: 340px; pointer-events: none; z-index: 11; diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts index a11a48ee3..f163e74fc 100644 --- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts +++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts @@ -61,8 +61,8 @@ export class BlockOverviewTooltipComponent implements OnChanges { this.vsize = this.tx.vsize || 1; this.feeRate = this.fee / this.vsize; this.effectiveRate = this.tx.rate; - this.acceleration = this.tx.acc; const txFlags = BigInt(this.tx.flags) || 0n; + this.acceleration = this.tx.acc || (txFlags & TransactionFlags.acceleration); this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05 || (txFlags && (txFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n); this.filters = this.tx.flags ? toFilters(txFlags).filter(f => f.tooltip) : []; diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html index 1461b0c59..0865708af 100644 --- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html +++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html @@ -56,7 +56,7 @@
-
+ diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html index 8011c7e6f..d1de5f076 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.html +++ b/frontend/src/app/components/difficulty/difficulty.component.html @@ -1,7 +1,15 @@ -
Difficulty Adjustment
+
Difficulty Adjustment
+
Halving Countdown
-
+
+ difficulty + | + halving +
+
@@ -76,6 +84,52 @@
+ +
+
+
+
+
+
+ {{ ((210000 - epochData.blocksUntilHalving) / 2100).toFixed(2) }}% +
+
+
+
+
+ +
+
+ New subsidy +
+
+
+
+ {{ epochData.blocksUntilHalving | number }} +
+
+ Blocks remaining + Block remaining +
+
+
+
+ {{ epochData.timeUntilHalving | date }} +
+
+ +
+ +
+ +
+ +
+
+
+
+ +
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index 1da1591d0..3b591dc2d 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -168,7 +168,7 @@ white-space: nowrap; } -.epoch-progress { +.epoch-progress, .halving-progress { width: 100%; height: 22px; margin-bottom: 12px; @@ -212,4 +212,43 @@ } .blocks-behind { color: #D81B60; +} + +.halving-progress { + position: relative; + .background, .remaining { + position: absolute; + top: 0; + bottom: 0; + height: 100%; + } + .background { + background: linear-gradient(to right, #105fb0, #9339f4); + left: 0; + right: 0; + } + .remaining { + background: #2d3348; + right: 0; + } + .label { + position: relative; + margin: auto; + } +} + +.widget-toggler { + font-size: 12px; + position: absolute; + top: -20px; + right: 3px; + text-align: right; +} + +.toggler-option { + text-decoration: none; +} + +.inactive { + color: #ffffff66; } \ No newline at end of file diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts index d37667312..13f61dc5e 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.ts +++ b/frontend/src/app/components/difficulty/difficulty.component.ts @@ -51,6 +51,10 @@ export class DifficultyComponent implements OnInit { isLoadingWebSocket$: Observable; difficultyEpoch$: Observable; + mode: 'difficulty' | 'halving' = 'difficulty'; + userSelectedMode: boolean = false; + + now: number = Date.now(); epochStart: number; currentHeight: number; currentIndex: number; @@ -101,6 +105,11 @@ export class DifficultyComponent implements OnInit { const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000); const newEpochStart = Math.floor(this.stateService.latestBlockHeight / EPOCH_BLOCK_LENGTH) * EPOCH_BLOCK_LENGTH; const newExpectedHeight = Math.floor(newEpochStart + da.expectedBlocks); + this.now = new Date().getTime(); + + if (blocksUntilHalving < da.remainingBlocks && !this.userSelectedMode) { + this.mode = 'halving'; + } if (newEpochStart !== this.epochStart || newExpectedHeight !== this.expectedHeight || this.currentHeight !== this.stateService.latestBlockHeight) { this.epochStart = newEpochStart; @@ -194,6 +203,12 @@ export class DifficultyComponent implements OnInit { return shapes; } + setMode(mode: 'difficulty' | 'halving'): boolean { + this.mode = mode; + this.userSelectedMode = true; + return false; + } + @HostListener('pointerdown', ['$event']) onPointerDown(event): void { if (this.epochSvgElement?.nativeElement?.contains(event.target)) { diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index d23688e05..f4924f255 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -339,6 +339,9 @@ export class HashrateChartComponent implements OnInit { const newMin = Math.floor(value.min / selectedPowerOfTen.divider / 10); return newMin * selectedPowerOfTen.divider * 10; }, + max: (value) => { + return value.max; + }, type: 'value', axisLabel: { color: 'rgb(110, 112, 121)', @@ -357,11 +360,18 @@ export class HashrateChartComponent implements OnInit { }, }, { - min: (value) => { - return value.min * 0.9; - }, type: 'value', position: 'right', + min: (_) => { + const firstYAxisMin = this.chartInstance.getModel().getComponent('yAxis', 0).axis.scale.getExtent()[0]; + const selectedPowerOfTen: any = selectPowerOfTen(firstYAxisMin); + const newMin = Math.floor(firstYAxisMin / selectedPowerOfTen.divider / 10) + return 600 / 2 ** 32 * newMin * selectedPowerOfTen.divider * 10; + }, + max: (_) => { + const firstYAxisMax = this.chartInstance.getModel().getComponent('yAxis', 0).axis.scale.getExtent()[1]; + return 600 / 2 ** 32 * firstYAxisMax; + }, axisLabel: { color: 'rgb(110, 112, 121)', formatter: (val): string => { diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss index 92fdc2ef3..8bd6763e5 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -32,6 +32,7 @@ } .chart { + margin-top: 10px; margin-bottom: 20px; @media (max-width: 768px) { margin-bottom: 10px; diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 27a705054..8274bf441 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -65,7 +65,9 @@ export class PoolComponent implements OnInit { .pipe( switchMap((data) => { this.isLoading = false; - this.prepareChartOptions(data.map(val => [val.timestamp * 1000, val.avgHashrate])); + const hashrate = data.map(val => [val.timestamp * 1000, val.avgHashrate]); + const share = data.map(val => [val.timestamp * 1000, val.share * 100]); + this.prepareChartOptions(hashrate, share); return [slug]; }), catchError(() => { @@ -130,9 +132,9 @@ export class PoolComponent implements OnInit { ); } - prepareChartOptions(data) { + prepareChartOptions(hashrate, share) { let title: object; - if (data.length <= 1) { + if (hashrate.length <= 1) { title = { textStyle: { color: 'grey', @@ -177,26 +179,57 @@ export class PoolComponent implements OnInit { }, borderColor: '#000', formatter: function (ticks: any[]) { - let hashratePowerOfTen: any = selectPowerOfTen(1); - let hashrate = ticks[0].data[1]; - - hashratePowerOfTen = selectPowerOfTen(ticks[0].data[1], 10); - hashrate = ticks[0].data[1] / hashratePowerOfTen.divider; + let hashrateString = ''; + let dominanceString = ''; + for (const tick of ticks) { + if (tick.seriesIndex === 0) { + let hashratePowerOfTen = selectPowerOfTen(tick.data[1], 10); + let hashrateData = tick.data[1] / hashratePowerOfTen.divider; + hashrateString = `${tick.marker} ${tick.seriesName}: ${formatNumber(hashrateData, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s
`; + } else if (tick.seriesIndex === 1) { + dominanceString = `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-2')}%`; + } + } + return ` ${ticks[0].axisValueLabel}
- ${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(hashrate, this.locale, '1.0-0')} ${hashratePowerOfTen.unit}H/s
+ ${hashrateString} + ${dominanceString} `; }.bind(this) }, - xAxis: data.length <= 1 ? undefined : { + xAxis: hashrate.length <= 1 ? undefined : { type: 'time', splitNumber: (this.isMobile()) ? 5 : 10, axisLabel: { hideOverlap: true, } }, - yAxis: data.length <= 1 ? undefined : [ + legend: { + data: [ + { + name: $localize`:mining.hashrate:Hashrate`, + inactiveColor: 'rgb(110, 112, 121)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + itemStyle: { + color: '#FFB300', + }, + }, + { + name: $localize`:mining.pool-dominance:Pool Dominance`, + inactiveColor: 'rgb(110, 112, 121)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + }, + ], + }, + yAxis: hashrate.length <= 1 ? undefined : [ { min: (value) => { return value.min * 0.9; @@ -214,21 +247,45 @@ export class PoolComponent implements OnInit { show: false, } }, - ], - series: data.length <= 1 ? undefined : [ { - zlevel: 0, - name: 'Hashrate', + type: 'value', + axisLabel: { + color: 'rgb(110, 112, 121)', + formatter: (val) => { + return `${val}%` + } + }, + splitLine: { + show: false, + } + } + ], + series: hashrate.length <= 1 ? undefined : [ + { + zlevel: 1, + name: $localize`:mining.hashrate:Hashrate`, showSymbol: false, symbol: 'none', - data: data, + data: hashrate, type: 'line', lineStyle: { width: 2, }, }, + { + zlevel: 0, + name: $localize`:mining.pool-dominance:Pool Dominance`, + showSymbol: false, + symbol: 'none', + data: share, + type: 'line', + yAxisIndex: 1, + lineStyle: { + width: 2, + }, + } ], - dataZoom: data.length <= 1 ? undefined : [{ + dataZoom: hashrate.length <= 1 ? undefined : [{ type: 'inside', realtime: true, zoomLock: true, diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 0110c5456..0963014bd 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -74,8 +74,7 @@ Audit - Coinbase - Accelerated + Coinbase Expected in Block Seen in Mempool Not seen in Mempool diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss index 046cf9a45..ed7b79636 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs.component.scss @@ -269,7 +269,7 @@ h3 { .position-container { position: absolute; left: 50%; - bottom: 150px; + bottom: 158px; } #divider { diff --git a/frontend/src/app/docs/code-template/code-template.component.html b/frontend/src/app/docs/code-template/code-template.component.html index d97074ada..7d169a19f 100644 --- a/frontend/src/app/docs/code-template/code-template.component.html +++ b/frontend/src/app/docs/code-template/code-template.component.html @@ -33,7 +33,7 @@
  • Python -
    Code Example
    +
    Code Example
    • diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 2d5ec03d4..cd4e71385 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -228,8 +228,9 @@ export class ApiService { return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/liquid/reserves/utxos/emergency-spent/stats'); } - listFeaturedAssets$(): Observable { - return this.httpClient.get(this.apiBaseUrl + '/api/v1/assets/featured'); + listFeaturedAssets$(network: string = 'liquid'): Observable { + if (network === 'liquid') return this.httpClient.get(this.apiBaseUrl + '/api/v1/assets/featured'); + return of([]); } getAssetGroup$(id: string): Observable {