From 23713a11c25504ca216a39ea3000cf961c165dac Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 22 Jan 2025 05:06:02 +0000
Subject: [PATCH 1/4] link to merkle branch first tx

---
 frontend/src/app/components/pool/pool.component.html   |  6 +++++-
 frontend/src/app/components/pool/pool.component.scss   |  1 +
 frontend/src/app/components/pool/pool.component.ts     |  4 ++++
 .../stratum/stratum-list/stratum-list.component.html   |  8 +++++++-
 .../stratum/stratum-list/stratum-list.component.scss   | 10 ++++++++++
 .../stratum/stratum-list/stratum-list.component.ts     |  4 ++++
 6 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index faa0003c4..f98794b68 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/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>
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 31d12474f..fa94227bd 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -220,6 +220,7 @@ div.scrollable {
 
   .merkle {
     width: 100px;
+    text-align: center;
   }
 
   .empty-branch {
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 23b795613..4b4b643a2 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/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();
   }
diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
index 08d7fb0ef..41707e37f 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
@@ -30,7 +30,13 @@
             </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">
diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
index 6679f2257..15ee074c2 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
@@ -92,6 +92,16 @@ td {
       }
     }
   }
+
+  .cell-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+  }
 }
 
 .badge {
diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts
index 6f252babe..b28f4ff11 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts
@@ -196,6 +196,10 @@ export class StratumList implements OnInit, OnDestroy {
     }[type];
   }
 
+  reverseHash(hash: string) {
+    return hash.match(/../g).reverse().join('');
+  }
+
   ngOnDestroy(): void {
     this.websocketService.stopTrackStratum();
   }

From cac62765a18d25dddd1be3e090b4c57fdf2115ad Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 22 Jan 2025 09:10:22 +0000
Subject: [PATCH 2/4] fix stratum tree branch level

---
 .../stratum/stratum-list/stratum-list.component.ts        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts
index b28f4ff11..481447b07 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.ts
+++ b/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 [];

From 2e44ea3f012bf599f468f06849a8d5c2513e4152 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 22 Jan 2025 09:13:44 +0000
Subject: [PATCH 3/4] reorder stratum job table

---
 .../stratum-list/stratum-list.component.html  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
index 41707e37f..24801cf2c 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.html
@@ -7,27 +7,18 @@
     <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) : ''">
                 @if ($index === 0 && cell.hash) {
@@ -47,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>

From 363fa3d8779e07cc9d048234b31cf9d51f60b639 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 22 Jan 2025 09:16:25 +0000
Subject: [PATCH 4/4] improve stratum table layout on mobile

---
 .../stratum-list/stratum-list.component.scss  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
index 15ee074c2..3d274ef2a 100644
--- a/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
+++ b/frontend/src/app/components/stratum/stratum-list/stratum-list.component.scss
@@ -104,6 +104,26 @@ td {
   }
 }
 
+@media (max-width: 800px) {
+  .stratum-table {
+    td {
+      &.tag {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 650px) {
+  .stratum-table {
+    td {
+      &.reward {
+        display: none;
+      }
+    }
+  }
+}
+
 .badge {
   position: relative;
   color: #FFF;