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;
+  }
 }