link to merkle branch first tx

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

@@ -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">

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 {

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();
   }