Merge branch 'master' into nymkappa/feature/pool-slug-url

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({

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';

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>
@@ -25,7 +25,7 @@
           </td>
           <td class="pool text-left" [class]="widget ? 'widget' : ''">
             <div class="tooltip-custom">
-              <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+              <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.id]">
                 <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
                   onError="this.src = './resources/mining-pools/default.svg'">
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
@@ -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>

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[] = [];

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>;

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>;

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',
@@ -27,8 +28,6 @@ export class PoolRankingComponent implements OnInit {
   chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'svg',
-    width: 'auto',
-    height: 'auto',
   };
   chartInstance: any = undefined;
 
@@ -284,7 +283,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]);
       });
     });
   }

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[] = [];

frontend/src/app/components/reward-stats/reward-stats.component.html

@@ -2,7 +2,7 @@
   <div class="fee-estimation-container">
     <div class="item">
       <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
-      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc"
         ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
         <div class="fee-text">
           <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
@@ -14,10 +14,10 @@
     </div>
     <div class="item">
       <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
-      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc"
         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">
@@ -27,9 +27,9 @@
     </div>
     <div class="item">
       <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
-      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+      <div class="card-text" i18n-ngbTooltip="mining.average-fee"
         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">
@@ -65,55 +65,3 @@
     </div>
   </div>
 </ng-template>
-
-<!-- <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
-  <div class="item">
-    <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
-    <div class="card-text">
-      <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
-      <div class="symbol" i18n="rewardStats.totalReward-desc">were rewarded to miners</div>
-    </div>
-  </div>
-  <div class="item">
-    <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
-    <div class="card-text">
-      {{ rewardStats.rewardPerTx | amountShortener }}
-      <span class="symbol" i18n="mining.sats-per-tx">sats/tx</span>
-      <div class="symbol" i18n="mining.rewards-per-tx-desc">miners reward / tx count</div>
-    </div>
-  </div>
-  <div class="item">
-    <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
-    <div class="card-text">
-      {{ rewardStats.feePerTx | amountShortener}}
-      <span class="symbol">sats/tx</span>
-      <div class="symbol" i18n="mining.average-fee-desc">were paid per tx</div>
-    </div>
-  </div>
-</div>
-
-<ng-template #loadingReward>
-  <div class="reward-container">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
-      <div class="card-text skeleton">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
-      <div class="card-text skeleton">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
-      <div class="card-text skeleton">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
-  </div>
-</ng-template> -->

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' },

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;
@@ -655,10 +660,6 @@ h1, h2, h3 {
   margin-top: 0.75rem !important;
 }
 
-.tooltip-inner {
-  max-width: inherit;
-}
-
 .alert-mempool {
   color: #ffffff;
   background-color: #653b9c;