Merge branch 'master' into lightning-scripts

backend/src/api/pools-parser.ts

@@ -108,7 +108,7 @@ class PoolsParser {
 
       if (slug === undefined) {
         // Only keep alphanumerical
-        slug = poolNames[i].replace(/[^a-z0-9]/gi,'').toLowerCase();
+        slug = poolNames[i].replace(/[^a-z0-9]/gi, '').toLowerCase();
         logger.debug(`No slug found for '${poolNames[i]}', generating it => '${slug}'`);
       }
 
@@ -135,10 +135,11 @@ class PoolsParser {
     logger.debug(`Update pools table now`);
 
     // Add new mining pools into the database
-    let queryAdd: string = 'INSERT INTO pools(name, link, regexes, addresses) VALUES ';
+    let queryAdd: string = 'INSERT INTO pools(name, link, regexes, addresses, slug) VALUES ';
     for (let i = 0; i < finalPoolDataAdd.length; ++i) {
       queryAdd += `('${finalPoolDataAdd[i].name}', '${finalPoolDataAdd[i].link}',
-      '${JSON.stringify(finalPoolDataAdd[i].regexes)}', '${JSON.stringify(finalPoolDataAdd[i].addresses)}'),`;
+      '${JSON.stringify(finalPoolDataAdd[i].regexes)}', '${JSON.stringify(finalPoolDataAdd[i].addresses)}',
+      ${JSON.stringify(finalPoolDataAdd[i].slug)}),`;
     }
     queryAdd = queryAdd.slice(0, -1) + ';';
 
@@ -180,7 +181,7 @@ class PoolsParser {
       const [rows]: any[] = await connection.query({ sql: 'SELECT name from pools where name="Unknown"', timeout: 120000 });
       if (rows.length === 0) {
         await connection.query({
-          sql: `INSERT INTO pools(name, link, regexes, addresses)
+          sql: `INSERT INTO pools(name, link, regexes, addresses, slug)
           VALUES("Unknown", "https://learnmeabitcoin.com/technical/coinbase-transaction", "[]", "[]", "unknown");
         `});
       } else {
@@ -189,7 +190,7 @@ class PoolsParser {
           regexes='[]', addresses='[]',
           slug='unknown'
           WHERE name='Unknown'
-        `)        
+        `);
       }
     } catch (e) {
       logger.err('Unable to insert "Unknown" mining pool');

frontend/src/app/components/about/about.component.html

@@ -169,7 +169,7 @@
     </div>
   </div>
 
-  <div class="community-integrations-sponsor">
+  <div class="selfhosted-integrations-sponsor">
     <h3 i18n="about.self-hosted-integrations">Self-Hosted Integrations</h3>
     <div class="wrapper">
       <a href="https://github.com/getumbrel/umbrel" target="_blank" title="Umbrel">

frontend/src/app/components/about/about.component.scss

@@ -43,6 +43,7 @@
   .alliances,
   .enterprise-sponsor,
   .community-integrations-sponsor,
+  .selfhosted-integrations-sponsor,
   .maintainers {
     margin-top: 68px;
     margin-bottom: 68px;
@@ -108,6 +109,7 @@
   .contributors,
   .community-sponsor,
   .community-integrations-sponsor,
+  .selfhosted-integrations-sponsor,
   .maintainers {
     .wrapper {
       display: inline-block;
@@ -181,3 +183,8 @@
 .no-about-margin {
   height: 10px;
 }
+
+.community-integrations-sponsor {
+  max-width: 750px;
+  margin: auto;
+}

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -25,7 +25,7 @@
           </td>
           <td class="pool text-left" [class]="widget ? 'widget' : ''">
             <div class="tooltip-custom">
-              <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.id]">
+              <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
                 <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>

frontend/src/app/components/miner/miner.component.html

@@ -4,7 +4,7 @@
 
 <ng-template #done>
   <ng-template [ngIf]="miner" [ngIfElse]="unknownMiner">
-    <a placement="bottom" [ngbTooltip]="title" [href]="url" target="_blank" class="badge badge-primary">{{ miner }}</a>
+    <a placement="bottom" [ngbTooltip]="title" [href]="url" [target]="target" class="badge badge-primary">{{ miner }}</a>
   </ng-template>
   <ng-template #unknownMiner>
     <span class="badge badge-secondary" i18n="miner.tag.unknown-miner">Unknown</span>

frontend/src/app/components/miner/miner.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { AssetsService } from 'src/app/services/assets.service';
 import { Transaction } from 'src/app/interfaces/electrs.interface';
+import { StateService } from 'src/app/services/state.service';
+import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
 
 @Component({
   selector: 'app-miner',
@@ -13,11 +15,14 @@ export class MinerComponent implements OnChanges {
   miner = '';
   title = '';
   url = '';
+  target = '_blank';
   loading = true;
 
   constructor(
     private assetsService: AssetsService,
     private cd: ChangeDetectorRef,
+    public stateService: StateService,
+    private relativeUrlPipe: RelativeUrlPipe,
   ) { }
 
   ngOnChanges() {
@@ -40,7 +45,13 @@ export class MinerComponent implements OnChanges {
         if (pools.payout_addresses[vout.scriptpubkey_address]) {
             this.miner = pools.payout_addresses[vout.scriptpubkey_address].name;
             this.title = $localize`:@@miner-identified-by-payout:Identified by payout address: '${vout.scriptpubkey_address}:PAYOUT_ADDRESS:'`;
-            this.url = pools.payout_addresses[vout.scriptpubkey_address].link;
+            const pool = pools.payout_addresses[vout.scriptpubkey_address];
+            if (this.stateService.env.MINING_DASHBOARD && pools.slugs[pool.name] !== undefined) {
+              this.url = this.relativeUrlPipe.transform(`/mining/pool/${pools.slugs[pool.name]}`);
+              this.target = '';
+            } else {
+              this.url = pool.link;
+            }
             break;
         }
 
@@ -48,9 +59,15 @@ export class MinerComponent implements OnChanges {
           if (pools.coinbase_tags.hasOwnProperty(tag)) {
             const coinbaseAscii = this.hex2ascii(this.coinbaseTransaction.vin[0].scriptsig);
             if (coinbaseAscii.indexOf(tag) > -1) {
-              this.miner = pools.coinbase_tags[tag].name;
+              const pool = pools.coinbase_tags[tag];
+              this.miner = pool.name;
               this.title = $localize`:@@miner-identified-by-coinbase:Identified by coinbase tag: '${tag}:TAG:'`;
-              this.url = pools.coinbase_tags[tag].link;
+              if (this.stateService.env.MINING_DASHBOARD && pools.slugs[pool.name] !== undefined) {
+                this.url = this.relativeUrlPipe.transform(`/mining/pool/${pools.slugs[pool.name]}`);
+                this.target = '';
+              } else {
+                this.url = pool.link;
+              }
               break;
             }
           }

frontend/src/app/components/pool/pool.component.html

@@ -9,44 +9,104 @@
 
     <div class="box">
       <div class="row">
+
         <div class="col-lg-9">
           <table class="table table-borderless table-striped" style="table-layout: fixed;">
             <tbody>
-              <tr>
-                <td class="label">Tags</td>
-                <td class="text-truncate" *ngIf="poolStats.pool.regexes.length else nodata">
-                  <div class="scrollable">
+
+              <!-- Regexes desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.tags">Tags</td>
+                <td *ngIf="poolStats.pool.regexes.length else nodata">
+                  {{ poolStats.pool.regexes }}
+                </td>
+              </tr>
+
+              <!-- Regexes mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span i18n="mining.tags" class="label">Tags</span>
+                  <div *ngIf="poolStats.pool.regexes.length else nodata" class="overflow-auto">
                     {{ poolStats.pool.regexes }}
                   </div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Addresses</td>
-                <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else nodata">
-                  <div class="scrollable">
-                    <a *ngFor="let address of poolStats.pool.addresses"
+
+              <!-- Addresses desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.addresses">Addresses</td>
+                <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-bottom: 0;">
+                  <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
+                    {{ poolStats.pool.addresses[0] }}
+                  </a>
+                  <button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
+                    type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
+                    [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
+                    <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
+                  </button>
+                  <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
+                    <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
                       [routerLink]="['/address' | relativeUrl, address]">{{
                       address }}<br></a>
                   </div>
                 </td>
-                <ng-template #nodata>
-                  <td class="right-mobile">~</td>
-                </ng-template>
+              </tr>
+
+              <!-- Addresses mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.addresses">Addresses</span>
+                  <div *ngIf="poolStats.pool.addresses.length else nodatamobile">
+                    <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
+                      class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
+                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
+                      <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
+                    </button>
+                    <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
+                      {{ poolStats.pool.addresses[0] | shortenString: 40 }}
+                    </a>
+                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
+                      <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
+                        [routerLink]="['/address' | relativeUrl, address]">{{
+                        address | shortenString: 40 }}<br></a>
+                    </div>
+                  </div>
+                </td>
               </tr>
             </tbody>
           </table>
         </div>
+
         <div class="col-lg-3">
           <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Mined Blocks</td>
+
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
                 <td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
               </tr>
-              <tr>
-                <td class="label">Empty Blocks</td>
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
+                  <div>{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</div>
+                </td>
+              </tr>
+
+              <!-- Empty blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
                 <td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
               </tr>
+              <!-- Empty blocks mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan="2">
+                  <span class="label" i18n="mining.empty-blocks">Blocks</span>
+                  <div>{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>
@@ -54,14 +114,20 @@
     </div>
   </div>
 
+  <ng-template #nodata>
+    <td>~</td>
+  </ng-template>
+  <ng-template #nodatamobile>
+    <div>~</div>
+  </ng-template>
+
   <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 
-  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll
-    [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
-    (scrolled)="loadMore()">
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
+    [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
     <thead>
       <th class="height" i18n="latest-blocks.height">Height</th>
       <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
@@ -147,7 +213,9 @@
   <div>
     <div class="mb-3" style="display:flex; position: relative">
       <div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
-      <h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div></h1>
+      <h1 class="m-0 pt-1 pt-md-0">
+        <div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div>
+      </h1>
     </div>
 
     <div class="box">
@@ -155,41 +223,88 @@
         <div class="col-lg-9">
           <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Tags</td>
-                <td class="text-truncate">
+
+              <!-- Regexes desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.tags">Tags</td>
+                <td>
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Addresses</td>
-                <td class="text-truncate">
-                  <div class="scrollable">
+
+              <!-- Regexes mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.tags">Tags</span>
+                  <div class="overflow-auto">
                     <div class="skeleton-loader"></div>
                   </div>
                 </td>
+              </tr>
+
+              <!-- Addresses desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.addresses">Addresses</td>
+                <td>
+                  <div class="skeleton-loader"></div>
+                </td>
                 <ng-template #nodata>
                   <td>~</td>
                 </ng-template>
               </tr>
+
+              <!-- Addresses mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.addresses">Addresses</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>
+
         <div class="col-lg-3">
-          <table class="table table-borderless table-striped" >
+          <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Mined Blocks</td>
-                <td class="text-truncate">
+
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
+                <td class="data">
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Empty Blocks</td>
-                <td class="text-truncate">
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
+              <!-- Empty blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
+                <td class="data">
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
+              <!-- Empty blocks mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan="2">
+                  <span class="label" i18n="mining.empty-blocks">Blocks</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>

frontend/src/app/components/pool/pool.component.scss

@@ -45,13 +45,17 @@ div.scrollable {
 }
 
 .label {
-  width: 35%;
+  width: 30%;
+  @media (max-width: 767.98px) {
+    font-weight: bold;
+  }
 }
 
 .data {
-  text-align: left;
+  text-align: right;
   padding-left: 25%;
-  @media (max-width: 991px) {
+  @media (max-width: 992px) {
+    text-align: left;
     padding-left: 12px;
   }
   @media (max-width: 450px) {
@@ -132,12 +136,6 @@ div.scrollable {
   text-align: left;
 }
 
-.right-mobile {
-  @media (max-width: 450px) {
-    text-align: right;
-  }
-}
-
 .skeleton-loader {
   max-width: 200px;
 }
@@ -151,3 +149,11 @@ div.scrollable {
     top: 600px;
   }
 }
+
+.small-button {
+  height: 20px;
+  transform: translateY(-20px);
+  font-size: 10px;
+  padding-top: 0;
+  padding-bottom: 0;
+}

frontend/src/app/components/pool/pool.component.ts

@@ -19,6 +19,8 @@ export class PoolComponent implements OnInit {
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
+  gfg = true;
+  
   formatNumber = formatNumber;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;