Display extension TLV data on node page

frontend/src/app/lightning/node/node.component.html

@@ -125,6 +125,28 @@
     <app-clipboard [button]="true" [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
   </div>
 
+  <div *ngIf="hasDetails" [hidden]="!showDetails" id="details" class="details mt-3">
+    <div class="box">
+      <h5 class="mb-3" i18n="node.tlv.records">TLV extension records</h5>
+      <div class="row">
+        <div class="col">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr *ngFor="let recordItem of node.custom_records | keyvalue">
+                <td class="tlv-type">{{ recordItem.key }}</td>
+                <td class="tlv-payload">{{ recordItem.value }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="hasDetails" class="text-right mt-3">
+    <button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="node.details|Node Details">Details</button>
+  </div>
+
   <div *ngIf="!error">
     <div class="row" *ngIf="node.as_number && node.active_channel_count">
       <div class="col-sm">

frontend/src/app/lightning/node/node.component.scss

@@ -72,3 +72,18 @@ app-fiat {
     height: 28px !important;
   };
 }
+
+.details tbody {
+  font-size: 12px;
+
+  .tlv-type {
+    color: #ffffff66;
+  }
+
+  .tlv-payload {
+    width: 100%;
+    word-break: break-all;
+    white-space: normal;
+    font-family: "Courier New", Courier, monospace;
+  }
+}

frontend/src/app/lightning/node/node.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
-import { catchError, map, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { LightningApiService } from '../lightning-api.service';
 import { GeolocationData } from '../../shared/components/geolocation/geolocation.component';
@@ -24,6 +24,8 @@ export class NodeComponent implements OnInit {
   channelListLoading = false;
   clearnetSocketCount = 0;
   torSocketCount = 0;
+  hasDetails = false;
+  showDetails = false;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -79,6 +81,9 @@ export class NodeComponent implements OnInit {
 
           return node;
         }),
+        tap((node) => {
+          this.hasDetails = Object.keys(node.custom_records).length > 0;
+        }),
         catchError(err => {
           this.error = err;
           return [{
@@ -89,6 +94,10 @@ export class NodeComponent implements OnInit {
       );
   }
 
+  toggleShowDetails(): void {
+    this.showDetails = !this.showDetails;
+  }
+
   changeSocket(index: number) {
     this.selectedSocketIndex = index;
   }