Display block details and taproot signaling.

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

@@ -80,6 +80,51 @@
       </div>
     </div>
 
+    <div [hidden]="!showDetails">
+      <br>
+
+      <div class="box">
+        <div class="row">
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td class="td-width" i18n="transaction.version">Version</td>
+                  <td>{{ block.version | decimal2hex }} <span class="badge ml-1" [ngClass]="{'badge-success': hasTaproot(block.version), 'badge-danger': !hasTaproot(block.version) }">Taproot</span></td>
+                </tr>
+                <tr>
+                  <td i18n="block.merkle-root">Merkle root</td>
+                  <td><p class="break-all">{{ block.merkle_root }}</p></td>
+                </tr>
+                <tr>
+                  <td i18n="block.bits">Bits</td>
+                  <td>{{ block.bits | decimal2hex }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col-sm">
+            <table class="table table-borderless table-striped">
+              <tbody>
+                <tr>
+                  <td class="td-width" i18n="block.difficulty">Difficulty</td>
+                  <td>{{ block.difficulty }}</td>
+                </tr>
+                <tr>
+                  <td i18n="block.nonce">Nonce</td>
+                  <td>{{ block.nonce | decimal2hex }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="text-right mt-3">
+      <button type="button" class="btn btn-outline-info btn-sm" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    </div>
+
     <br>
 
     <h2 class="float-left">

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

@@ -14,3 +14,9 @@
 		width: 140px;
 	}
 }
+
+
+.break-all {
+  white-space: normal;
+  word-break: break-all;
+}

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

@@ -32,6 +32,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   page = 1;
   itemsPerPage: number;
   txsLoadingStatus$: Observable<number>;
+  showDetails = false;
 
   constructor(
     private route: ActivatedRoute,
@@ -144,6 +145,14 @@ export class BlockComponent implements OnInit, OnDestroy {
 
     this.stateService.networkChanged$
       .subscribe((network) => this.network = network);
+
+    this.route.queryParams.subscribe((params) => {
+      if (params.showDetails === 'true') {
+        this.showDetails = true;
+      } else {
+        this.showDetails = false;
+      }
+    });
   }
 
   ngOnDestroy() {
@@ -175,4 +184,26 @@ export class BlockComponent implements OnInit, OnDestroy {
         this.isLoadingTransactions = false;
       });
   }
+
+  toggleShowDetails() {
+    if (this.showDetails) {
+      this.showDetails = false;
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { showDetails: false },
+        queryParamsHandling: 'merge',
+      });
+    } else {
+      this.showDetails = true;
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { showDetails: true },
+        queryParamsHandling: 'merge',
+      });
+    }
+  }
+
+  hasTaproot(version: number): boolean {
+    return (Number(version) & (1 << 2)) > 0;
+  }
 }

frontend/src/app/interfaces/electrs.interface.ts

@@ -98,7 +98,7 @@ export interface Block {
   version: number;
   timestamp: number;
   bits: number;
-  nounce: number;
+  nonce: number;
   difficulty: number;
   merkle_root: string;
   tx_count: number;

frontend/src/app/shared/pipes/decimal2hex/decimal2hex.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'decimal2hex'
+})
+export class Decimal2HexPipe implements PipeTransform {
+  transform(decimal: number): string {
+    return `0x` + decimal.toString(16);
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
 import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
 import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
 import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
+import { Decimal2HexPipe } from './pipes/decimal2hex/decimal2hex.pipe';
 import { AsmStylerPipe } from './pipes/asm-styler/asm-styler.pipe';
 import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
@@ -35,6 +36,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     WuBytesPipe,
     CeilPipe,
     ShortenStringPipe,
+    Decimal2HexPipe,
   ],
   imports: [
     CommonModule,
@@ -71,6 +73,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     WuBytesPipe,
     CeilPipe,
     ShortenStringPipe,
+    Decimal2HexPipe,
   ]
 })
 export class SharedModule {}