Merge pull request #3933 from mempool/nymkappa/feature-bits

Show raw and decoded lightning node features

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

@@ -21,7 +21,6 @@
   </div>
 
   <div class="box" *ngIf="!error">
-
     <div class="row">
       <div class="col-md">
         <table class="table table-borderless table-striped table-fixed">
@@ -59,6 +58,9 @@
               <td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
               <td class="direction-ltr">{{ avgDistance | amountShortener: 1 }} <span class="symbol">km</span> <span class="separator">·</span>{{ kmToMiles(avgDistance) | amountShortener: 1 }} <span class="symbol">mi</span></td>
             </tr>
+            <tr *ngIf="!node.geolocation" class="d-none d-md-table-row">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -100,11 +102,50 @@
                 </td>
               </ng-template>
             </tr>
+            <tr *ngIf="node.geolocation && node.featuresBits">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
+            </tr>
+            <tr *ngIf="!node.geolocation && node.featuresBits" class="d-table-row d-md-none">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
+  </div>
 
+  <ng-template #featurebits let-bits="bits">
+    <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>
+      <button type="button" class="btn btn-outline-info btn-xs" (click)="toggleFeatures()" i18n="transaction.details|Transaction Details">Details</button>
+    </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">

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

frontend/src/styles.scss

@@ -1164,3 +1164,10 @@ app-master-page, app-liquid-master-page, app-bisq-master-page {
 app-global-footer {
   margin-top: auto;
 }
+
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 0.5;
+  border-radius: 0.2rem;
+}