From 6336c529edcf297909142627b5f75be7ab55fe40 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Sat, 8 Jul 2023 10:43:37 +0200
Subject: [PATCH] [lightning] show decoded features in node page

---
 .../app/lightning/node/node.component.html    | 28 ++++++++++++++++++-
 .../src/app/lightning/node/node.component.ts  |  7 ++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index c3903e915..0ed1c78c9 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -118,10 +118,36 @@
     <td i18n="lightning.features" class="text-truncate label">Features</td>
     <td class="d-flex justify-content-between">
       <span class="text-truncate w-90">{{ bits }}</span>
-      <a href="#" class="w-10">⊕</a>
+      <a href="#" class="w-10" (click)="toggleFeatures()">⊕</a>
     </td>
   </ng-template>
 
+  <div class="box mt-2" *ngIf="!error && showFeatures">
+    <div class="row">
+      <div class="col-md">
+        <div class="mb-3">
+          <h5>Raw bits</h5>
+          <span class="text-wrap w-100"><small>{{ node.featuresBits }}</small></span>
+        </div>
+        <h5>Decoded</h5>
+        <table class="table table-borderless table-striped table-fixed">
+          <thead>
+            <th style="width: 13%">Bit</th>
+            <th>Name</th>
+            <th style="width: 25%; text-align: right">Required</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let feature of node.features">
+              <td style="width: 13%">{{ feature.bit }}</td>
+              <td>{{ feature.name }}</td>
+              <td style="width: 25%; text-align: right">{{ feature.is_required }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
   <div class="input-group mt-3" *ngIf="!error && node.socketsObject.length">
     <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown"
       *ngIf="node.socketsObject.length > 1; else noDropdown">
diff --git a/frontend/src/app/lightning/node/node.component.ts b/frontend/src/app/lightning/node/node.component.ts
index 47f65007f..719136d79 100644
--- a/frontend/src/app/lightning/node/node.component.ts
+++ b/frontend/src/app/lightning/node/node.component.ts
@@ -37,7 +37,7 @@ export class NodeComponent implements OnInit {
   liquidityAd: ILiquidityAd;
   tlvRecords: CustomRecord[];
   avgChannelDistance$: Observable<number | null>;
-
+  showFeatures = false;
   kmToMiles = kmToMiles;
 
   constructor(
@@ -164,4 +164,9 @@ export class NodeComponent implements OnInit {
   onLoadingEvent(e) {
     this.channelListLoading = e;
   }
+
+  toggleFeatures() {
+    this.showFeatures = !this.showFeatures;
+    return false;
+  }
 }