From b29c4cf228b6471597a8c61dbabd5b00c656ca23 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 24 Sep 2024 17:28:46 +0000
Subject: [PATCH] refactor miner name truncation

---
 backend/src/utils/bitcoin-script.ts           |  2 +-
 .../block/block-preview.component.html        | 38 +++++++++----------
 .../app/components/block/block.component.html | 19 +++++-----
 .../app/components/block/block.component.scss | 14 ++-----
 .../blockchain-blocks.component.html          |  6 +--
 .../blockchain-blocks.component.scss          |  9 ++++-
 .../blockchain-blocks.component.ts            | 17 ---------
 .../transaction/transaction.component.html    | 20 +++++-----
 .../transaction/transaction.component.scss    | 14 ++-----
 9 files changed, 53 insertions(+), 86 deletions(-)

diff --git a/backend/src/utils/bitcoin-script.ts b/backend/src/utils/bitcoin-script.ts
index b43b7a72d..f9755fcb4 100644
--- a/backend/src/utils/bitcoin-script.ts
+++ b/backend/src/utils/bitcoin-script.ts
@@ -223,5 +223,5 @@ export function parseDATUMTemplateCreator(coinbaseRaw: string): string[] | null
   let tagString = String.fromCharCode(...tags);
   tagString = tagString.replace('\x00', '');
 
-  return tagString.split('\x0f');
+  return tagString.split('\x0f').map((name) => name.replace(/[^a-zA-Z0-9 ]/g, ''));
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index b1cafc05e..036ab8399 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -53,32 +53,28 @@
             <td i18n="block.miner">Miner</td>
             <td *ngIf="stateService.env.MINING_DASHBOARD">
               <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
-                <ng-container *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
-                  {{ block.extras.pool.minerNames[1] }}
-                  <div class="on-pool">
-                    on
-                    <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-                    {{ block.extras.pool.name}}
-                  </div>
-                </ng-container>
-                <ng-template #centralisedPool>
-                  <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-                  {{ block.extras.pool.name }}
-                </ng-template>
+                <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
+                  @if (block.extras.pool.minerNames[1].length > 16) {
+                    {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
+                  } @else {
+                    {{ block.extras.pool.minerNames[1] }}
+                  }
+                </span>
+                <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+                {{ block.extras.pool.name }}
               </a>
             </td>
             <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
               <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
                 [class]="!block?.extras.pool.name || block?.extras.pool.slug === 'unknown' ? 'badge-secondary' : 'badge-primary'">
-                <ng-container *ngIf="block?.extras.pool.minerNames != undefined && block?.extras.pool.minerNames.length > 1 && block?.extras.pool.minerNames[1] != ''; else centralisedPool">
-                  {{ block?.extras.pool.minerNames[1] }}
-                  <div class="on-pool">
-                    on {{ block?.extras.pool.name }}
-                  </div>
-                </ng-container>
-                <ng-template #centralisedPool>
-                  {{ block?.extras.pool.name }}
-                </ng-template>
+                <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
+                  @if (block.extras.pool.minerNames[1].length > 16) {
+                    {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
+                  } @else {
+                    {{ block.extras.pool.minerNames[1] }}
+                  }
+                </span>
+                {{ block.extras.pool.name }}
               </span>
             </td>
           </tr>
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 46900179b..09c3a5d23 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -182,16 +182,15 @@
         <td i18n="block.miner">Miner</td>
         <td *ngIf="stateService.env.MINING_DASHBOARD">
           <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
-            <div class="on-pool-container" *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
-              {{ block.extras.pool.minerNames[1] }}
-              <div class="on-pool">
-                <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
-                {{ block.extras.pool.name }}
-              </div>
-            </div>
-            <ng-template #centralisedPool>
-              <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> {{ block.extras.pool.name }}
-            </ng-template>
+            <span class="miner-name" *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''">
+              @if (block.extras.pool.minerNames[1].length > 16) {
+                {{ block.extras.pool.minerNames[1].slice(0, 15) }}…
+              } @else {
+                {{ block.extras.pool.minerNames[1] }}
+              }
+            </span>
+            <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+            {{ block.extras.pool.name }}
           </a>
         </td>
         <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 6eae3fe3a..945d61366 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -81,17 +81,9 @@ h1 {
   }
 }
 
-.on-pool-container {
-  display: inline;
-  flex-direction: row;
-}
-
-.on-pool {
-  background-color: var(--bg);
-  display: inline-block;
-  margin-top: 4px;
-  padding: .25em .4em;
-  border-radius: .25rem;
+.miner-name {
+  margin-right: 4px;
+  vertical-align: top;
 }
 
 .pool-logo {
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 128d18774..a782e9588 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -60,11 +60,11 @@
           </ng-container>
         </div>
         <div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
-          <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-            <div *ngIf="block.extras.pool.minerNames != undefined && block.extras.pool.minerNames.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
+          <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [class.miner-name]="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+            <ng-container *ngIf="block.extras.pool.minerNames?.length > 1 && block.extras.pool.minerNames[1] != ''; else centralisedPool">
               <img [ngbTooltip]="block.extras.pool.name" class="pool-logo faded" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
               {{ block.extras.pool.minerNames[1] }}
-            </div>
+            </ng-container>
             <ng-template #centralisedPool>
               <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> {{ block.extras.pool.name }}
             </ng-template>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index a0111215a..5c2a5ab5a 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -187,9 +187,16 @@
 
 .badge {
   position: relative;
-  top: 15px;
+  top: 19px;
   z-index: 101;
   color: #FFF;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 145px;
+
+  &.miner-name {
+    max-width: 125px;
+  }
 }
 
 .pool-logo {
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 7846b66a2..1a7598079 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -281,15 +281,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
         if (block?.extras) {
           block.extras.minFee = this.getMinBlockFee(block);
           block.extras.maxFee = this.getMaxBlockFee(block);
-          if (block.extras.pool?.minerNames) {
-            block.extras.pool.minerNames = block.extras.pool.minerNames.map((name) => {
-              name = name.replace(/[^a-zA-Z0-9 ]/g, '');
-              if (name.length > 16) {
-                return name.slice(0, 16) + '…';
-              }
-              return name;
-            });
-          }
         }
       }
       this.blocks.push(block || {
@@ -332,14 +323,6 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
       if (block?.extras) {
         block.extras.minFee = this.getMinBlockFee(block);
         block.extras.maxFee = this.getMaxBlockFee(block);
-        if (block.extras.pool?.minerNames) {
-          block.extras.pool.minerNames = block.extras.pool.minerNames.map((name) => {
-            if (name.length > 16) {
-              return name.slice(0, 16) + '…';
-            }
-            return name;
-          });
-        }
       }
       this.blocks[blockIndex] = block;
       this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index a4524d529..ec06dd5ad 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -684,17 +684,15 @@
         @if (pool) {
           <td class="wrap-cell">
             <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;">
-              <div class="on-pool-container" *ngIf="pool.minerNames != undefined && pool.minerNames.length > 1 && pool.minerNames[1] != ''; else centralisedPool">
-                {{ pool.minerNames[1] }}
-                <div class="on-pool">
-                  <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
-                  {{ pool.name }}
-                </div>
-              </div>
-              <ng-template #centralisedPool>
-                <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
-                {{ pool.name }}
-              </ng-template>
+              <span class="miner-name" *ngIf="pool.minerNames?.length > 1 && pool.minerNames[1] != ''">
+                @if (pool.minerNames[1].length > 16) {
+                  {{ pool.minerNames[1].slice(0, 15) }}…
+                } @else {
+                  {{ pool.minerNames[1] }}
+                }
+              </span>
+              <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
+              {{ pool.name }}
             </a>
           </td>
         } @else {
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 40b813cae..42325a1b4 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -60,17 +60,9 @@
 	top: -1px;
 }
 
-.on-pool-container {
-  display: inline;
-  flex-direction: row;
-}
-
-.on-pool {
-  background-color: var(--bg);
-  display: inline-block;
-  margin-top: 4px;
-  padding: .25em .4em;
-  border-radius: .25rem;
+.miner-name {
+  margin-right: 4px;
+  vertical-align: top;
 }
 
 .pool-logo {