From e1623b92341a4b1b74784271757808d1766467f6 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 22 Mar 2022 15:16:15 +0900
Subject: [PATCH 1/5] 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 @@
     </table>
 
     <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
-      [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5" [pageSize]="15" [(page)]="page"
+      [collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
       (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
     </ngb-pagination>
   </div>
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<number> = new BehaviorSubject(this.fromBlockHeight);
   skeletonLines: number[] = [];

From 7c1155ec93b3b28f6d9e8d8a56b21cbd9ce3b178 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 22 Mar 2022 15:43:04 +0900
Subject: [PATCH 2/5] 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 @@
-<div class="container-xl" [class]="widget ? 'widget' : ''">
+<div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
 
   <div class="clearfix"></div>
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 f1bb742341508fcadb92bcd4278be9fee822a188 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 24 Mar 2022 18:03:12 +0900
Subject: [PATCH 3/5] 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 27d2127d468fd43f0781b333b3caa75012aa5523 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 25 Mar 2022 10:08:20 +0900
Subject: [PATCH 4/5] 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<any>;
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<any>;
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 c5837ab9df1ba1424375eae3eb170f1d9748b985 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 25 Mar 2022 11:38:36 +0900
Subject: [PATCH 5/5] 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 @@
       <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
         ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">
-          {{ rewardStats.rewardPerTx | amountShortener }}
+          {{ rewardStats.rewardPerTx | amountShortener: 2 }}
           <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
         </div>
         <span class="fiat">
@@ -29,7 +29,7 @@
       <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
       <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
         ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
-        <div class="fee-text">{{ rewardStats.feePerTx | amountShortener }}
+        <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}
           <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
         </div>
         <span class="fiat">
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' },