From 31d280f7298dc9366b0c2b7f09f9a693241934a0 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Fri, 6 May 2022 16:31:25 +0400
Subject: [PATCH] Adding Lightning wrapper component

---
 .../lightning/channel/channel.component.html  |  8 +++--
 .../lightning-wrapper.component.html          |  1 +
 .../lightning-wrapper.component.scss          |  0
 .../lightning-wrapper.component.ts            | 16 ++++++++++
 .../src/app/lightning/lightning.module.ts     |  2 ++
 .../app/lightning/lightning.routing.module.ts | 29 +++++++++++++------
 6 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.html
 create mode 100644 frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.scss
 create mode 100644 frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.ts

diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index 76db429e3..649773b41 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -16,9 +16,13 @@
         <div class="col-md">
           <table class="table table-borderless table-striped">
             <tbody>
+              <tr>
+                <td i18n="address.total-sent">Created</td>
+                <td><app-time-since [dateString]="channel.created"></app-time-since></td>
+              </tr>
               <tr>
                 <td i18n="address.total-sent">Last update</td>
-                <td>{{ channel.updated_at | date:'yyyy-MM-dd HH:mm' }}</td>
+                <td><app-time-since [dateString]="channel.updated_at"></app-time-since></td>
               </tr>
               <tr>
                 <td i18n="address.total-sent">Transaction ID</td>
@@ -38,7 +42,7 @@
             <tbody>
               <tr>
                 <td i18n="address.total-received">Capacity</td>
-                <td><app-sats [satoshis]="channel.capacity"></app-sats></td>
+                <td><app-sats [satoshis]="channel.capacity"></app-sats>&nbsp; <app-fiat [value]="channel.capacity" digitsInfo="1.2-2"></app-fiat></td>
               </tr>
             </tbody>
           </table>
diff --git a/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.html b/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.html
new file mode 100644
index 000000000..0680b43f9
--- /dev/null
+++ b/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.scss b/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.ts b/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.ts
new file mode 100644
index 000000000..40bcc83bc
--- /dev/null
+++ b/frontend/src/app/lightning/lightning-wrapper/lightning-wrapper.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { WebsocketService } from 'src/app/services/websocket.service';
+
+@Component({
+  selector: 'app-lightning-wrapper',
+  templateUrl: './lightning-wrapper.component.html',
+  styleUrls: ['./lightning-wrapper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LightningWrapperComponent {
+
+  constructor(
+    private websocketService: WebsocketService,
+  ) { }
+
+}
diff --git a/frontend/src/app/lightning/lightning.module.ts b/frontend/src/app/lightning/lightning.module.ts
index 3cdf2a281..ffb1fd356 100644
--- a/frontend/src/app/lightning/lightning.module.ts
+++ b/frontend/src/app/lightning/lightning.module.ts
@@ -10,6 +10,7 @@ import { NodeComponent } from './node/node.component';
 import { LightningRoutingModule } from './lightning.routing.module';
 import { ChannelsListComponent } from './channels-list/channels-list.component';
 import { ChannelComponent } from './channel/channel.component';
+import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component';
 @NgModule({
   declarations: [
     LightningDashboardComponent,
@@ -18,6 +19,7 @@ import { ChannelComponent } from './channel/channel.component';
     NodeComponent,
     ChannelsListComponent,
     ChannelComponent,
+    LightningWrapperComponent,
   ],
   imports: [
     CommonModule,
diff --git a/frontend/src/app/lightning/lightning.routing.module.ts b/frontend/src/app/lightning/lightning.routing.module.ts
index c04e34f23..e56a527f9 100644
--- a/frontend/src/app/lightning/lightning.routing.module.ts
+++ b/frontend/src/app/lightning/lightning.routing.module.ts
@@ -1,21 +1,32 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LightningDashboardComponent } from './lightning-dashboard/lightning-dashboard.component';
+import { LightningWrapperComponent } from './lightning-wrapper/lightning-wrapper.component';
 import { NodeComponent } from './node/node.component';
 import { ChannelComponent } from './channel/channel.component';
 
 const routes: Routes = [
     {
       path: '',
-      component: LightningDashboardComponent,
-    },
-    {
-      path: 'node/:public_key',
-      component: NodeComponent,
-    },
-    {
-      path: 'channel/:short_id',
-      component: ChannelComponent,
+      component: LightningWrapperComponent,
+      children: [
+        {
+          path: '',
+          component: LightningDashboardComponent,
+        },
+        {
+          path: 'node/:public_key',
+          component: NodeComponent,
+        },
+        {
+          path: 'channel/:short_id',
+          component: ChannelComponent,
+        },
+        {
+          path: '**',
+          redirectTo: ''
+        }
+      ]
     },
     {
       path: '**',