Channel component

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

@@ -1 +1,66 @@
-<p>node works!</p>
+<div class="container-xl" *ngIf="(node$ | async) as node">
+  <div class="title-container mb-2">
+    <h1 i18n="shared.address" class="mb-0">{{ node.alias }}</h1>
+    <span class="tx-link">
+      <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" >
+        <span class="d-inline">{{ node.public_key | shortenString : 18 }}</span>
+      </a>
+      <app-clipboard [text]="node.public_key"></app-clipboard>
+    </span>
+  </div>
+
+  <div class="clearfix"></div>
+
+    <div class="box">
+
+      <div class="row">
+        <div class="col-md">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="address.total-received">First Seen</td>
+                <td>{{ node.first_seen | date:'yyyy-MM-dd HH:mm' }}</td>
+              </tr>
+              <tr>
+                <td i18n="address.total-sent">Updated At</td>
+                <td>{{ node.updated_at | date:'yyyy-MM-dd HH:mm' }}</td>
+              </tr>
+              <tr>
+                <td i18n="address.balance">Color</td>
+                <td><div [ngStyle]="{'color': node.color}">{{ node.color }}</div></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="w-100 d-block d-md-none"></div>
+        <div class="col-md qrcode-col">
+          <div class="qr-wrapper">
+            <app-qrcode [data]="node.public_key"></app-qrcode>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    
+    <br>
+    <h2>Channels</h2>
+
+    <app-channels-list [publicKey]="node.public_key"></app-channels-list>
+
+    <!--
+
+    <br>
+    <div class="title-tx">
+      <h2 class="text-left">
+        <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
+        <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
+        <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>
+      </h2>
+    </div>
+
+    <app-transactions-list [transactions]="transactions" [showConfirmations]="true" [address]="address.address" (loadMore)="loadMore()"></app-transactions-list>
+    -->
+
+</div>
+
+<br>

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

@@ -0,0 +1,38 @@
+.qr-wrapper {
+  background-color: #FFF;
+  padding: 10px;
+  padding-bottom: 5px;
+  display: inline-block;
+}
+
+.qrcode-col {
+  margin: 20px auto 10px;
+  text-align: center;
+  @media (min-width: 992px){
+    margin: 0px auto 0px;
+  }
+}
+
+.tx-link {
+  display: flex;
+	flex-grow: 1;
+	@media (min-width: 650px) {
+    align-self: end;
+    margin-left: 15px;
+    margin-top: 0px;
+    margin-bottom: -3px;
+	}
+	@media (min-width: 768px) {
+    margin-bottom: 4px;
+    top: 1px;
+    position: relative;
+	}
+	@media (max-width: 768px) {
+	  order: 3;
+	}
+}
+
+.title-container {
+  display: flex;
+  flex-direction: row;
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -7,10 +7,12 @@ import { LightningApiService } from '../lightning-api.service';
 @Component({
   selector: 'app-node',
   templateUrl: './node.component.html',
-  styleUrls: ['./node.component.scss']
+  styleUrls: ['./node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodeComponent implements OnInit {
   node$: Observable<any>;
+  publicKey$: Observable<string>;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -21,7 +23,7 @@ export class NodeComponent implements OnInit {
     this.node$ = this.activatedRoute.paramMap
       .pipe(
         switchMap((params: ParamMap) => {
-          return this.lightningApiService.getNode$(params.get('id'));
+          return this.lightningApiService.getNode$(params.get('public_key'));
         })
       );
   }