Merge pull request #5745 from mempool/mononaut/stratum-tweaks

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

@@ -267,7 +267,11 @@
                     <tbody>
                       <tr>
                         @for (branch of job.merkleBranches; track $index) {
-                          <td class="merkle" [style.background-color]="branch ? '#' + branch.slice(0, 6) : ''"></td>
+                          @if ($index === 0 && branch) {
+                            <a [routerLink]="['/tx' | relativeUrl, reverseHash(branch)]"><td class="merkle" [style.background-color]="branch ? '#' + branch.slice(0, 6) : ''"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 14px; color: white"></fa-icon></td></a>
+                          } @else {
+                            <td class="merkle" [style.background-color]="branch ? '#' + branch.slice(0, 6) : ''"></td>
+                          }
                         }
                         @for (_ of [].constructor(Math.max(0, 12 - job.merkleBranches.length)); track $index) {
                           <td class="merkle empty-branch"></td>

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

@@ -220,6 +220,7 @@ div.scrollable {
 
   .merkle {
     width: 100px;
+    text-align: center;
   }
 
   .empty-branch {

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

@@ -361,6 +361,10 @@ export class PoolComponent implements OnInit {
     return block.height;
   }
 
+  reverseHash(hash: string) {
+    return hash.match(/../g).reverse().join('');
+  }
+
   ngOnDestroy(): void {
     this.slugSubscription.unsubscribe();
   }

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

@@ -7,30 +7,27 @@
     <table *ngIf="poolsReady && (rows$ | async) as rows;" class="stratum-table">
       <thead>
         <tr>
-          <td class="height">Height</td>
-          <td class="reward">Reward</td>
-          <td class="tag">Coinbase Tag</td>
           <td class="merkle" [attr.colspan]="rows[0]?.merkleCells?.length || 4">
             Merkle Branches
           </td>
           <td class="pool">Pool</td>
+          <td class="tag">Coinbase Tag</td>
+          <td class="reward">Reward</td>
+          <td class="height">Height</td>
         </tr>
       </thead>
       <tbody>
         @for (row of rows; track row.job.pool) {
           <tr>
-            <td class="height">
-              {{ row.job.height }}
-            </td>
-            <td class="reward">
-              <app-amount [satoshis]="row.job.reward"></app-amount>
-            </td>
-            <td class="tag">
-              {{ row.job.tag }}
-            </td>
             @for (cell of row.merkleCells; track $index) {
               <td class="merkle" [style.background-color]="cell.hash ? '#' + cell.hash.slice(0, 6) : ''">
-                <div class="pipe-segment" [class]="pipeToClass(cell.type)"></div>
+                @if ($index === 0 && cell.hash) {
+                  <a [routerLink]="['/tx' | relativeUrl, reverseHash(cell.hash)]" class="cell-link">
+                    <div class="pipe-segment" [class]="pipeToClass(cell.type)"></div>
+                  </a>
+                } @else {
+                  <div class="pipe-segment" [class]="pipeToClass(cell.type)"></div>
+                }
               </td>
             }
             <td class="pool">
@@ -41,6 +38,15 @@
                 </a>
               }
             </td>
+            <td class="tag">
+              {{ row.job.tag }}
+            </td>
+            <td class="reward">
+              <app-amount [satoshis]="row.job.reward"></app-amount>
+            </td>
+            <td class="height">
+              {{ row.job.height }}
+            </td>
           </tr>
         }
       </tbody>

frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss

@@ -92,6 +92,36 @@ td {
       }
     }
   }
+
+  .cell-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .stratum-table {
+    td {
+      &.tag {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 650px) {
+  .stratum-table {
+    td {
+      &.reward {
+        display: none;
+      }
+    }
+  }
 }
 
 .badge {

frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts

@@ -48,14 +48,16 @@ function parseTag(scriptSig: string): string {
   return (ascii.match(/\/.*\//)?.[0] || ascii).trim();
 }
 
-function getMerkleBranchIds(merkleBranches: string[], numBranches: number): string[] {
+function getMerkleBranchIds(merkleBranches: string[], numBranches: number, poolId: number): string[] {
   let lastHash = '';
   const ids: string[] = [];
   for (let i = 0; i < numBranches; i++) {
     if (merkleBranches[i]) {
       lastHash = merkleBranches[i];
+      ids.push(`${i}-${lastHash}`);
+    } else {
+      ids.push(`${i}-${lastHash}-${poolId}`);
     }
-    ids.push(`${i}-${lastHash}`);
   }
   return ids;
 }
@@ -98,7 +100,7 @@ export class StratumList implements OnInit, OnDestroy {
     const numBranches = Math.max(...Object.values(rawJobs).map(job => job.merkleBranches.length));
     const jobs: Record<string, TaggedStratumJob> = {};
     for (const [id, job] of Object.entries(rawJobs)) {
-      jobs[id] = { ...job, tag: parseTag(job.scriptsig), merkleBranchIds: getMerkleBranchIds(job.merkleBranches, numBranches) };
+      jobs[id] = { ...job, tag: parseTag(job.scriptsig), merkleBranchIds: getMerkleBranchIds(job.merkleBranches, numBranches, job.pool) };
     }
     if (Object.keys(jobs).length === 0) {
       return [];
@@ -196,6 +198,10 @@ export class StratumList implements OnInit, OnDestroy {
     }[type];
   }
 
+  reverseHash(hash: string) {
+    return hash.match(/../g).reverse().join('');
+  }
+
   ngOnDestroy(): void {
     this.websocketService.stopTrackStratum();
   }