From ba04bdfddc23c6bb87a5bf77f2e0977a909b798a Mon Sep 17 00:00:00 2001 From: nymkappa Date: Tue, 22 Mar 2022 15:16:15 +0900 Subject: [PATCH 1/8] Fix blocks list pagination on mobile --- .../src/app/components/blocks-list/blocks-list.component.html | 2 +- .../src/app/components/blocks-list/blocks-list.component.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html index d0eaa25ea..d582b32fe 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.html +++ b/frontend/src/app/components/blocks-list/blocks-list.component.html @@ -91,7 +91,7 @@ diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.ts b/frontend/src/app/components/blocks-list/blocks-list.component.ts index c04403446..9da92f158 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.ts +++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts @@ -22,6 +22,7 @@ export class BlocksList implements OnInit { paginationMaxSize: number; page = 1; lastPage = 1; + maxSize = window.innerWidth <= 767.98 ? 3 : 5; blocksCount: number; fromHeightSubject: BehaviorSubject = new BehaviorSubject(this.fromBlockHeight); skeletonLines: number[] = []; From b79157d7275701d9339695094a4a60bf18132d6c Mon Sep 17 00:00:00 2001 From: nymkappa Date: Tue, 22 Mar 2022 15:43:04 +0900 Subject: [PATCH 2/8] Make sure blocks list container is at least 100vh on mobile --- .../app/components/blocks-list/blocks-list.component.html | 2 +- frontend/src/styles.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html index d582b32fe..23cf9899c 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.html +++ b/frontend/src/app/components/blocks-list/blocks-list.component.html @@ -1,4 +1,4 @@ -
+

Blocks

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 54476206c..b56d7848d 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -66,6 +66,11 @@ body { .container-xl { padding-bottom: 60px; } +.full-height { + @media (max-width: 767.98px) { + min-height: 100vh; + } +} :focus { outline: none !important; From 7742fffd22a1203f6489e5049ffb0962f0f33a9d Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 24 Mar 2022 18:03:12 +0900 Subject: [PATCH 3/8] Fix rounding issue in reward stats --- .../app/components/reward-stats/reward-stats.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.ts b/frontend/src/app/components/reward-stats/reward-stats.component.ts index dd466985e..8116f2db7 100644 --- a/frontend/src/app/components/reward-stats/reward-stats.component.ts +++ b/frontend/src/app/components/reward-stats/reward-stats.component.ts @@ -24,10 +24,11 @@ export class RewardStatsComponent implements OnInit { return this.apiService.getRewardStats$() .pipe( map((stats) => { + const precision = 100; return { totalReward: stats.totalReward, - rewardPerTx: stats.totalReward / stats.totalTx, - feePerTx: stats.totalFee / stats.totalTx, + rewardPerTx: Math.round((stats.totalReward / stats.totalTx) * precision) / precision, + feePerTx: Math.round((stats.totalFee / stats.totalTx) * precision) / precision, }; }) ); From 8c804ba28dcef8e56285d49c268bd57e72f21a81 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 25 Mar 2022 10:08:20 +0900 Subject: [PATCH 4/8] Remove unnecessary echart init option --- .../app/components/hashrate-chart/hashrate-chart.component.ts | 2 -- .../hashrates-chart-pools/hashrate-chart-pools.component.ts | 2 -- .../src/app/components/pool-ranking/pool-ranking.component.ts | 2 -- frontend/src/app/components/pool/pool.component.ts | 2 -- 4 files changed, 8 deletions(-) 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 521bee3d5..c210017fa 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -33,8 +33,6 @@ export class HashrateChartComponent implements OnInit { chartOptions: EChartsOption = {}; chartInitOptions = { renderer: 'svg', - width: 'auto', - height: 'auto', }; hashrateObservable$: Observable; diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index 280852d47..264ceb7ea 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -31,8 +31,6 @@ export class HashrateChartPoolsComponent implements OnInit { chartOptions: EChartsOption = {}; chartInitOptions = { renderer: 'svg', - width: 'auto', - height: 'auto', }; hashrateObservable$: Observable; diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 0722466fc..196d4b19c 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -27,8 +27,6 @@ export class PoolRankingComponent implements OnInit { chartOptions: EChartsOption = {}; chartInitOptions = { renderer: 'svg', - width: 'auto', - height: 'auto', }; chartInstance: any = undefined; diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index dee4a9713..5afc70cc6 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -27,8 +27,6 @@ export class PoolComponent implements OnInit { chartOptions: EChartsOption = {}; chartInitOptions = { renderer: 'svg', - width: 'auto', - height: 'auto', }; blocks: BlockExtended[] = []; From ac031d8f240f770fbac933b5d25eda064b139cd7 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 25 Mar 2022 10:57:34 +0900 Subject: [PATCH 5/8] Use relative pipe for pie chart click event --- .../src/app/components/blocks-list/blocks-list.component.html | 2 +- .../src/app/components/pool-ranking/pool-ranking.component.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html index 22693a856..c72c3281c 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.html +++ b/frontend/src/app/components/blocks-list/blocks-list.component.html @@ -25,7 +25,7 @@
- + {{ block.extras.pool.name }} diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 0722466fc..f99ee6146 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -10,6 +10,7 @@ import { StorageService } from '../..//services/storage.service'; import { MiningService, MiningStats } from '../../services/mining.service'; import { StateService } from '../../services/state.service'; import { chartColors, poolsColor } from 'src/app/app.constants'; +import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe'; @Component({ selector: 'app-pool-ranking', @@ -284,7 +285,8 @@ export class PoolRankingComponent implements OnInit { return; } this.zone.run(() => { - this.router.navigate(['/mining/pool/', e.data.data]); + const url = new RelativeUrlPipe(this.stateService).transform(`/mining/pool/${e.data.data}`); + this.router.navigate([url]); }); }); } From 1d8de2e37426e8e659731e37efc1e3ac7fd57bb0 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 25 Mar 2022 11:38:36 +0900 Subject: [PATCH 6/8] Round using AmountShortenerPipe --- .../app/components/reward-stats/reward-stats.component.html | 4 ++-- .../app/components/reward-stats/reward-stats.component.ts | 5 ++--- frontend/src/app/shared/pipes/amount-shortener.pipe.ts | 5 +++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.html b/frontend/src/app/components/reward-stats/reward-stats.component.html index 861921ca6..9a592ebae 100644 --- a/frontend/src/app/components/reward-stats/reward-stats.component.html +++ b/frontend/src/app/components/reward-stats/reward-stats.component.html @@ -17,7 +17,7 @@
- {{ rewardStats.rewardPerTx | amountShortener }} + {{ rewardStats.rewardPerTx | amountShortener: 2 }} sats/tx
@@ -29,7 +29,7 @@
Average Fee
-
{{ rewardStats.feePerTx | amountShortener }} +
{{ rewardStats.feePerTx | amountShortener: 2 }} sats/tx
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.ts b/frontend/src/app/components/reward-stats/reward-stats.component.ts index 8116f2db7..dd466985e 100644 --- a/frontend/src/app/components/reward-stats/reward-stats.component.ts +++ b/frontend/src/app/components/reward-stats/reward-stats.component.ts @@ -24,11 +24,10 @@ export class RewardStatsComponent implements OnInit { return this.apiService.getRewardStats$() .pipe( map((stats) => { - const precision = 100; return { totalReward: stats.totalReward, - rewardPerTx: Math.round((stats.totalReward / stats.totalTx) * precision) / precision, - feePerTx: Math.round((stats.totalFee / stats.totalTx) * precision) / precision, + rewardPerTx: stats.totalReward / stats.totalTx, + feePerTx: stats.totalFee / stats.totalTx, }; }) ); diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index 529c6be79..319dc2a5a 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -5,11 +5,12 @@ import { Pipe, PipeTransform } from '@angular/core'; }) export class AmountShortenerPipe implements PipeTransform { transform(num: number, ...args: number[]): unknown { + const digits = args[0] || 1; + if (num < 1000) { - return num; + return num.toFixed(digits); } - const digits = args[0] || 1; const lookup = [ { value: 1, symbol: '' }, { value: 1e3, symbol: 'k' }, From 64637c2b5ee9e2457bb82ec212fe11ba9d533e98 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 25 Mar 2022 12:31:09 +0900 Subject: [PATCH 7/8] If pool slug does not exist, generate one on the fly, avoid crash --- backend/src/api/pools-parser.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/backend/src/api/pools-parser.ts b/backend/src/api/pools-parser.ts index 5428f931d..7243eb023 100644 --- a/backend/src/api/pools-parser.ts +++ b/backend/src/api/pools-parser.ts @@ -12,6 +12,8 @@ interface Pool { } class PoolsParser { + slugWarnFlag = false; + /** * Parse the pools.json file, consolidate the data and dump it into the database */ @@ -93,7 +95,22 @@ class PoolsParser { } const finalPoolName = poolNames[i].replace(`'`, `''`); // To support single quote in names when doing db queries - const slug = poolsJson['slugs'][poolNames[i]]; + + let slug: string | undefined; + try { + slug = poolsJson['slugs'][poolNames[i]]; + } catch (e) { + if (this.slugWarnFlag === false) { + logger.warn(`pools.json does not seem to contain the 'slugs' object`); + this.slugWarnFlag = true; + } + } + + if (slug === undefined) { + // Only keep alphanumerical + slug = poolNames[i].replace(/[^a-z0-9]/gi,'').toLowerCase(); + logger.debug(`No slug found for '${poolNames[i]}', generating it => '${slug}'`); + } if (existingPools.find((pool) => pool.name === poolNames[i]) !== undefined) { finalPoolDataUpdate.push({ From 281538b23963f2e83e39a93c020c54f269c5f1a4 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 25 Mar 2022 22:15:16 +0900 Subject: [PATCH 8/8] Disable angular tooltip animation globally --- .../src/app/components/app/app.component.ts | 11 +++- .../reward-stats/reward-stats.component.html | 58 +------------------ frontend/src/styles.scss | 4 -- 3 files changed, 11 insertions(+), 62 deletions(-) diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts index 0cb6ef051..e060fae54 100644 --- a/frontend/src/app/components/app/app.component.ts +++ b/frontend/src/app/components/app/app.component.ts @@ -1,28 +1,33 @@ import { Location } from '@angular/common'; import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; -import { WebsocketService } from '../../services/websocket.service'; import { StateService } from 'src/app/services/state.service'; +import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + providers: [NgbTooltipConfig] }) export class AppComponent implements OnInit { link: HTMLElement = document.getElementById('canonical'); constructor( public router: Router, - private websocketService: WebsocketService, private stateService: StateService, private location: Location, + tooltipConfig: NgbTooltipConfig, @Inject(LOCALE_ID) private locale: string, ) { if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) { this.dir = 'rtl'; this.class = 'rtl-layout'; } + + tooltipConfig.animation = false; + tooltipConfig.container = 'body'; + tooltipConfig.triggers = 'hover'; } @HostBinding('attr.dir') dir = 'ltr'; diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.html b/frontend/src/app/components/reward-stats/reward-stats.component.html index 861921ca6..a42a2a132 100644 --- a/frontend/src/app/components/reward-stats/reward-stats.component.html +++ b/frontend/src/app/components/reward-stats/reward-stats.component.html @@ -2,7 +2,7 @@
Miners Reward
-
@@ -14,7 +14,7 @@
Reward Per Tx
-
{{ rewardStats.rewardPerTx | amountShortener }} @@ -27,7 +27,7 @@
Average Fee
-
{{ rewardStats.feePerTx | amountShortener }} sats/tx @@ -65,55 +65,3 @@
- - \ No newline at end of file diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 54476206c..ae3971276 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -655,10 +655,6 @@ h1, h2, h3 { margin-top: 0.75rem !important; } -.tooltip-inner { - max-width: inherit; -} - .alert-mempool { color: #ffffff; background-color: #653b9c;