Codebase Linting

.eslintrc.json

@@ -25,6 +25,7 @@
       "rules": {
         "deprecation/deprecation": "error",
         "@angular-eslint/prefer-on-push-component-change-detection": "off",
+        "@angular-eslint/prefer-standalone-component": "off",
         "@angular-eslint/sort-ngmodule-metadata-arrays": "off",
         "@angular-eslint/use-component-view-encapsulation": "off",
         "@angular-eslint/use-injectable-provided-in": "off",
@@ -196,12 +197,14 @@
         "@angular-eslint/template/click-events-have-key-events": "off",
         "@angular-eslint/template/conditional-complexity": "off",
         "@angular-eslint/template/cyclomatic-complexity": "off",
+        "@angular-eslint/template/elements-content": "off",
         "@angular-eslint/template/i18n": "off",
         "@angular-eslint/template/no-autofocus": "off",
         "@angular-eslint/template/no-call-expression": "off",
         "@angular-eslint/template/no-inline-styles": "off",
         "@angular-eslint/template/no-interpolation-in-attributes": "off",
         "@angular-eslint/template/no-positive-tabindex": "off",
+        "@angular-eslint/template/prefer-ngsrc": "off",
         "@angular-eslint/template/use-track-by-function": "off"
       }
     }

frontend/runtime.6cda503defd68eb5.js

@@ -1 +1 @@
-(()=>{"use strict";var e,v={},m={};function r(e){var f=m[e];if(void 0!==f)return f.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(f,t,i,o)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,o]=e[n],s=!0,d=0;d<t.length;d++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[d]))?t.splice(d--,1):(s=!1,o<a&&(a=o));if(s){e.splice(n--,1);var u=i();void 0!==u&&(f=u)}}return f}o=o||0;for(var n=e.length;n>0&&e[n-1][2]>o;n--)e[n]=e[n-1];e[n]=[t,i,o]},r.d=(e,f)=>{for(var t in f)r.o(f,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:f[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((f,t)=>(r.f[t](e,f),f),[])),r.u=e=>e+"."+{125:"27f762403e737e6a",456:"23aaef1182efed12",570:"ae25223608729dbe",758:"712ca274224ed913"}[e]+".js",r.miniCssF=e=>{},r.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="RTLApp:";r.l=(t,i,o,n)=>{if(e[t])e[t].push(i);else{var a,s;if(void 0!==o)for(var d=document.getElementsByTagName("script"),u=0;u<d.length;u++){var l=d[u];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==f+o){a=l;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",f+o),a.src=r.tu(t)),e[t]=[i];var c=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,o)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)o.push(n[2]);else if(666!=i){var a=new Promise((l,c)=>n=e[i]=[l,c]);o.push(n[2]=a);var s=r.p+r.u(i),d=new Error;r.l(s,l=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var c=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;d.message="Loading chunk "+i+" failed.\n("+c+": "+p+")",d.name="ChunkLoadError",d.type=c,d.request=p,n[1](d)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var f=(i,o)=>{var d,u,[n,a,s]=o,l=0;if(n.some(p=>0!==e[p])){for(d in a)r.o(a,d)&&(r.m[d]=a[d]);if(s)var c=s(r)}for(i&&i(o);l<n.length;l++)r.o(e,u=n[l])&&e[u]&&e[u][0](),e[u]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(f.bind(null,0)),t.push=f.bind(null,t.push.bind(t))})()})();
+(()=>{"use strict";var e,v={},m={};function r(e){var f=m[e];if(void 0!==f)return f.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(f,t,i,o)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,o]=e[n],s=!0,d=0;d<t.length;d++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[d]))?t.splice(d--,1):(s=!1,o<a&&(a=o));if(s){e.splice(n--,1);var u=i();void 0!==u&&(f=u)}}return f}o=o||0;for(var n=e.length;n>0&&e[n-1][2]>o;n--)e[n]=e[n-1];e[n]=[t,i,o]},r.d=(e,f)=>{for(var t in f)r.o(f,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:f[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((f,t)=>(r.f[t](e,f),f),[])),r.u=e=>e+"."+{125:"020bb8ec6698fd7e",456:"a54c45d211d6d10c",570:"28ed94d292ccd982",758:"2801e2da6f8bba94"}[e]+".js",r.miniCssF=e=>{},r.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="RTLApp:";r.l=(t,i,o,n)=>{if(e[t])e[t].push(i);else{var a,s;if(void 0!==o)for(var d=document.getElementsByTagName("script"),u=0;u<d.length;u++){var l=d[u];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==f+o){a=l;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",f+o),a.src=r.tu(t)),e[t]=[i];var c=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,o)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)o.push(n[2]);else if(666!=i){var a=new Promise((l,c)=>n=e[i]=[l,c]);o.push(n[2]=a);var s=r.p+r.u(i),d=new Error;r.l(s,l=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var c=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;d.message="Loading chunk "+i+" failed.\n("+c+": "+p+")",d.name="ChunkLoadError",d.type=c,d.request=p,n[1](d)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var f=(i,o)=>{var d,u,[n,a,s]=o,l=0;if(n.some(p=>0!==e[p])){for(d in a)r.o(a,d)&&(r.m[d]=a[d]);if(s)var c=s(r)}for(i&&i(o);l<n.length;l++)r.o(e,u=n[l])&&e[u]&&e[u][0](),e[u]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(f.bind(null,0)),t.push=f.bind(null,t.push.bind(t))})()})();

src/app/app.component.html

@@ -16,21 +16,21 @@
       <span *ngIf="!smallScreen" class="font-size-120 font-weight-500">{{information.alias ? 'Ride The Lightning - ' + information.alias : 'Ride The Lightning'}}</span>
     </div>
     <div>
-      <rtl-top-menu></rtl-top-menu>
+      <rtl-top-menu />
     </div>
   </mat-toolbar>
   <mat-sidenav-container>
     <mat-sidenav #sideNavigation class="sidenav mat-elevation-z6" [perfectScrollbar] [opened]="flgSideNavOpened && flgLoggedIn" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'">
-      <rtl-side-navigation fxFlex="100" (ChildNavClicked)="onNavigationClicked($event)"></rtl-side-navigation>
+      <rtl-side-navigation fxFlex="100" (ChildNavClicked)="onNavigationClicked($event)" />
     </mat-sidenav>
     <mat-sidenav-content #sideNavContent [perfectScrollbar]>
       <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
-        <router-outlet #outlet="outlet"></router-outlet>
+        <router-outlet #outlet="outlet" />
       </div>
     </mat-sidenav-content>>
   </mat-sidenav-container>
   <div *ngIf="!settings.themeColor" class="rtl-spinner">
-    <mat-spinner color="accent"></mat-spinner>
+    <mat-spinner color="accent" />
     <h4>Loading RTL...</h4>
   </div>
 </div>

src/app/app.module.ts

@@ -8,12 +8,11 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
-import { UserIdleModule } from 'angular-user-idle';
+import { provideUserIdleConfig } from 'angular-user-idle';
 import { routing } from './app.routing';
 import { SharedModule } from './shared/shared.module';
 import { AppComponent } from './app.component';
 
-import { AuthGuard } from './shared/services/auth.guard';
 import { AuthInterceptor } from './shared/services/auth.interceptor';
 import { SessionService } from './shared/services/session.service';
 import { LoopService } from './shared/services/loop.service';
@@ -42,7 +41,6 @@ if (isDevMode()) { isDevEnvironemt = true; }
     routing,
     LayoutModule,
     HammerModule,
-    UserIdleModule.forRoot({ idle: (HOUR_SECONDS - 10), timeout: 10, ping: 12000 }),
     StoreModule.forRoot(
       { root: RootReducer, lnd: LNDReducer, cln: CLNReducer, ecl: ECLReducer },
       {
@@ -56,6 +54,7 @@ if (isDevMode()) { isDevEnvironemt = true; }
   ],
   declarations: [AppComponent],
   providers: [
+    provideUserIdleConfig({ idle: (HOUR_SECONDS - 10), timeout: 10, ping: 12000 }),
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     SessionService, DataService, WebSocketClientService, LoopService, CommonService, BoltzService
   ],

src/app/cln/cln-root.component.html

@@ -1,4 +1,4 @@
 <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
-  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate" />
-  <router-outlet #outlet="outlet"></router-outlet>
+  <router-outlet #outlet="outlet" />
 </div>

src/app/cln/cln-root.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router, RouterEvent } from '@angular/router';
 import { routeAnimation } from '../shared/animation/route-animation';
 
 @Component({
@@ -13,7 +13,7 @@ export class CLNRootComponent {
   loading = false;
 
   constructor(private router: Router) {
-    this.router.events.subscribe((event: Event) => {
+    this.router.events.subscribe((event: Event | RouterEvent) => {
       switch (true) {
         case event instanceof NavigationStart: {
           this.loading = true;

src/app/cln/graph/graph.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faSearch"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faSearch" />
   <span class="page-title">Graph Lookups</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/cln/graph/lookups/channel-lookup/channel-lookup.component.html

@@ -1,77 +1,77 @@
 <div *ngIf="lookupResult" fxLayout="column" class="mt-1">
-  <mat-divider></mat-divider>
+  <mat-divider />
   <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row">
     <div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch" class="mt-1 bordered-box padding-gap-large">
       <div fxLayout="column">
         <h3 *ngIf="!node1_match" class="page-title font-bold-500">Node 1</h3>
         <h3 *ngIf="node1_match" class="page-title font-bold-500">Node 1 (Your Node)</h3>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Short Channel ID</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.short_channel_id}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Active</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.active ? 'True' : 'False'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Last Update</h4>
         <span class="foreground-secondary-text">{{(lookupResult[0]?.last_update * 1000) | date:'dd/MMM/y HH:mm'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Amount (Sats)</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.amount_msat / 1000 | number:'1.0-0'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Base Fee (mSats)</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.base_fee_millisatoshi | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Fee/Millionth</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.fee_per_millionth | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Channel Flags</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.channel_flags | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Delay</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.delay | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Max Htlc (mSat)</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.htlc_maximum_msat | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Min Htlc (mSat)</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.htlc_minimum_msat | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Message Flags</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.message_flags | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Public</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.public ? 'Yes' : 'No'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Source</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.source}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Destination</h4>
         <span class="foreground-secondary-text">{{lookupResult[0]?.destination}}</span>
@@ -82,72 +82,72 @@
         <h3 *ngIf="!node2_match" class="page-title font-bold-500">Node 2</h3>
         <h3 *ngIf="node2_match" class="page-title font-bold-500">Node 2 (Your Node)</h3>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Short Channel ID</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.short_channel_id}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Active</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.active ? 'True' : 'False'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Last Update</h4>
         <span class="foreground-secondary-text">{{(lookupResult[1]?.last_update * 1000) | date:'dd/MMM/y HH:mm'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Amount (Sats)</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.amount_msat / 1000 | number:'1.0-0'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Base Fee (mSats)</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.base_fee_millisatoshi | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Fee/Millionth</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.fee_per_millionth | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Channel Flags</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.channel_flags | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Delay</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.delay | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Max Htlc (mSat)</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.htlc_maximum_msat | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Min Htlc (mSat)</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.htlc_minimum_msat | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Message Flags</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.message_flags | number}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Public</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.public ? 'Yes' : 'No'}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Source</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.source}}</span>
       </div>
-      <mat-divider class="my-1"></mat-divider>
+      <mat-divider class="my-1" />
       <div fxLayout="column">
         <h4 class="font-bold-500">Destination</h4>
         <span class="foreground-secondary-text">{{lookupResult[1]?.destination}}</span>

src/app/cln/graph/lookups/lookups.component.html

@@ -24,8 +24,8 @@
           <span class="page-title font-bold-500">{{lookupFields[selectedFieldId].name}} Details</span>
         </div>
         <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" [ngSwitch]="selectedFieldId">
-          <span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeid !== ''; else errorBlock"><rtl-cln-node-lookup [lookupResult]="nodeLookupValue"></rtl-cln-node-lookup></div></span>
+          <span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeid !== ''; else errorBlock"><rtl-cln-node-lookup [lookupResult]="nodeLookupValue" /></div></span>
-          <span *ngSwitchCase="1" fxFlex="100"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span>
+          <span *ngSwitchCase="1" fxFlex="100"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue" /></div></span>
           <span *ngSwitchDefault> fxFlex="100"<h3>Error! Unable to find details!</h3></span>
         </div>
       </div>

src/app/cln/graph/lookups/node-lookup/node-lookup.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="lookupResult" fxLayout="column" class="mt-1">
-  <mat-divider class="mb-1"></mat-divider>
+  <mat-divider class="mb-1" />
   <div fxLayout="row">
     <div fxFlex="30">
       <h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
@@ -10,7 +10,7 @@
       <span class="foreground-secondary-text w-100">{{lookupResult?.nodeid}}</span>
     </div>
   </div>
-  <mat-divider class="my-1"></mat-divider>
+  <mat-divider class="my-1" />
   <div fxLayout="row">
     <div fxFlex="30">
       <h4 fxLayoutAlign="start" class="font-bold-500">Last Update</h4>
@@ -21,7 +21,7 @@
       <span *ngFor="let featureDescription of featureDescriptions" class="foreground-secondary-text">{{featureDescription}}</span>
     </div>
   </div>
-  <mat-divider class="my-1"></mat-divider>
+  <mat-divider class="my-1" />
   <div fxLayout="column">
     <h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
     <div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>
@@ -45,7 +45,7 @@
          <td *matCellDef="let address" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onConnectNode(address)">Connect</mat-option>
               <mat-option rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy URI</mat-option>
             </mat-select>

src/app/cln/graph/query-routes/query-routes.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="column" fxFlex="100" class="padding-gap">
   <form #queryRoutesForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()">
     <div fxFlex="100" class="alert alert-warn">
-      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
       <span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
     </div>
     <mat-form-field fxLayout="column" fxFlex="69" fxLayoutAlign="start end">
@@ -21,12 +21,12 @@
   </form>
   <div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container mt-2 mb-1">
     <div fxFlex="70">
-      <fa-icon class="page-title-img mr-1" [icon]="faRoute"></fa-icon>
+      <fa-icon class="page-title-img mr-1" [icon]="faRoute" />
       <span class="page-title">Transaction Route</span>
     </div>
   </div>
   <div class="table-container mb-6" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate" />
     <table #table mat-table matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="qrHops" [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
       <ng-container matColumnDef="id">
         <th *matHeaderCellDef mat-header-cell mat-sort-header>ID</th>

src/app/cln/home/balances-info/balances-info.component.html

@@ -2,12 +2,12 @@
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
     <div class="overflow-wrap dashboard-info-value">{{balances.lightning | number:'1.0-0'}} Sats</div>
-    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}" />
   </div>
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">On-chain</h4>
     <div class="overflow-wrap dashboard-info-value">{{balances.onchain | number:'1.0-0'}} Sats</div>
-    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}" />
   </div>
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>

src/app/cln/home/channel-capacity-info/channel-capacity-info.component.html

@@ -4,14 +4,14 @@
     <div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
       <mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90"><strong class="font-weight-900 mr-5px">Local:</strong>{{channelBalances?.localBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
       <mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90">
-        <fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
+        <fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale" />
         ({{channelBalances?.balancedness || 0 | number}})
       </mat-hint>
       <mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channelBalances?.remoteBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
     </div>
-    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="{{channelBalances?.localBalance && channelBalances?.localBalance > 0 ? ((+channelBalances?.localBalance/((+channelBalances?.localBalance)+(+channelBalances?.remoteBalance)))*100) : 0}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="{{channelBalances?.localBalance && channelBalances?.localBalance > 0 ? ((+channelBalances?.localBalance/((+channelBalances?.localBalance)+(+channelBalances?.remoteBalance)))*100) : 0}}" />
   </div>
-  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
+  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider" /></div>
   <div class="channels-capacity-scroll" [perfectScrollbar]>
     <div *ngIf="activeChannels && activeChannels.length > 0;  else noChannelBlock" fxLayout="column"fxFlex="100">
       <div *ngFor="let channel of activeChannels" class="mt-2">
@@ -21,12 +21,12 @@
         <div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
           <mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Local:</strong>{{channel.to_us_msat/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
           <mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90 color-primary">
-            <fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
+            <fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale" />
             ({{channel.balancedness || 0 | number}})
           </mat-hint>
           <mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channel.to_them_msat/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
         </div>
-        <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{channel.to_us_msat && channel.to_us_msat > 0 ? ((channel.to_us_msat/((channel.to_us_msat)+(channel.to_them_msat)))*100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{channel.to_us_msat && channel.to_us_msat > 0 ? ((channel.to_us_msat/((channel.to_us_msat)+(channel.to_them_msat)))*100) : 0}}" />
       </div>
     </div>
   </div>

src/app/cln/home/channel-liquidity-info/channel-liquidity-info.component.html

@@ -2,9 +2,9 @@
   <div fxLayout="column" fxFlex="8" fxLayoutAlign="end start">
     <span class="dashboard-capacity-header this-channel-capacity">Total Capacity</span>
     <mat-hint class="font-size-90">{{totalLiquidity | number:'1.0-0'}} Sats</mat-hint>
-    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100" />
   </div>
-  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
+  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider" /></div>
   <div fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start" [perfectScrollbar]>
     <div *ngIf="activeChannels && activeChannels.length > 0;  else noChannelBlock" fxLayout="column" fxFlex="100"class="w-100">
       <div *ngFor="let channel of activeChannels" class="mt-2">
@@ -15,8 +15,8 @@
           <mat-hint *ngIf="direction === 'In'" fxFlex="100" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.to_them_msat/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
           <mat-hint *ngIf="direction === 'Out'" fxFlex="100" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.to_us_msat/1000 || 0 | number:'1.0-0'}} Sats</mat-hint>
         </div>
-        <mat-progress-bar *ngIf="direction === 'In'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((channel.to_them_msat/1000 || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar *ngIf="direction === 'In'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((channel.to_them_msat/1000 || 0)/(totalLiquidity) * 100) : 0}}" />
-        <mat-progress-bar *ngIf="direction === 'Out'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((channel.to_us_msat/1000 || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar *ngIf="direction === 'Out'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((channel.to_us_msat/1000 || 0)/(totalLiquidity) * 100) : 0}}" />
       </div>
     </div>
   </div>

src/app/cln/home/home.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR;  else merchantDashboard"fxLayout="column">
   <div fxLayout="row" fxLayoutAlign="start start" class="page-title-container mb-2">
-    <fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile" />
     <span class="page-title">{{apiCallStatusNodeInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : 'Error! Please check the server connection.'}}</span>
   </div>
   <mat-grid-list cols="10" gutterSize="20px" [rowHeight]="operatorCardHeight">
@@ -9,7 +9,7 @@
         <mat-card-header>
           <mat-card-title fxLayoutAlign="space-between center">
             <div>
-              <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+              <fa-icon class="mr-1" [icon]="card.icon" />
               <span>{{card.title}}</span>
             </div>
             <div>
@@ -36,13 +36,13 @@
             (card.id === 'fee' && (apiCallStatusFees.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
             (card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED))"
             mode="indeterminate"
-          ></mat-progress-bar>
+          />
           <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-            <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
+            <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false" />
-            <rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
+            <rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]" />
-            <rtl-cln-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [activeChannels]="activeChannelsCapacity" [errorMessage]="errorMessages[4] + ' ' + errorMessages[3]"></rtl-cln-channel-capacity-info>
+            <rtl-cln-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [activeChannels]="activeChannelsCapacity" [errorMessage]="errorMessages[4] + ' ' + errorMessages[3]" />
-            <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[4] + ' ' + errorMessages[5]"></rtl-cln-fee-info>
+            <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[4] + ' ' + errorMessages[5]" />
-            <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-channel-status-info>
+            <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[3] + ' ' + errorMessages[4]" />
             <h3 *ngSwitchDefault>Error! Unable to find information!</h3>
           </div>
         </mat-card-content>
@@ -52,7 +52,7 @@
 </div>
 <ng-template #merchantDashboard>
   <div fxLayout="row" fxLayoutAlign="start end" class="page-title-container mb-2">
-    <fa-icon class="page-title-img mr-1" [icon]="faSmile"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="faSmile" />
     <span class="page-title">Welcome {{information.alias}}! Your node is up and running.</span>
   </div>
   <mat-grid-list cols="6" gutterSize="20px" [rowHeight]="merchantCardHeight">
@@ -61,7 +61,7 @@
         <mat-card-header *ngIf="card.id !== 'transactions'">
           <mat-card-title fxLayoutAlign="space-between center">
             <div>
-              <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+              <fa-icon class="mr-1" [icon]="card.icon" />
               <span>{{card.title}}</span>
             </div>
             <div>
@@ -83,16 +83,16 @@
             (card.id === 'balance' && (apiCallStatusBalance.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
             ((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusChannels.status === apiCallStatusEnum.INITIATED)"
             mode="indeterminate"
-          ></mat-progress-bar>
+          />
           <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-            <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information"></rtl-cln-node-info>
+            <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" />
-            <rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-cln-balances-info>
+            <rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]" />
-            <rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
+            <rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[4]" />
-            <rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]"></rtl-cln-channel-liquidity-info>
+            <rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[4]" />
             <span *ngSwitchCase="'transactions'" fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
               <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" class="dashboard-tabs-group">
-                <mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'"></rtl-cln-lightning-invoices-table></mat-tab>
+                <mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'" /></mat-tab>
-                <mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'"></rtl-cln-lightning-payments></mat-tab>
+                <mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'" /></mat-tab>
               </mat-tab-group>
               <div class="underline">
                 <button mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuTransactions">

src/app/cln/liquidity-ads/liquidity-ads-list/liquidity-ads-list.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faBullhorn"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faBullhorn" />
   <span class="page-title">Liquidity Ads</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
@@ -8,7 +8,7 @@
       <div fxLayout="column" fxLayoutAlign="space-between stretch">
         <form #formAsk="ngForm" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" fxLayoutAlign.gt-sm="space-between stretch" fxLayout.gt-sm="row wrap">
           <div fxFlex.gt-xs="100" fxLayout="row" class="alert alert-warn">
-            <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+            <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
             <span>Ads should be supplemented with additional research of the node, before buying liquidity.</span>
           </div>
           <div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-1">
@@ -50,7 +50,7 @@
         </form> -->
         <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container mt-2">
           <div fxFlex="70">
-            <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
+            <fa-icon class="page-title-img mr-1" [icon]="faUsers" />
             <span class="page-title">Liquidity Providing Peers</span>
           </div>
           <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -67,7 +67,7 @@
           </div>
         </div>
         <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-          <mat-progress-bar *ngIf="listNodesCallStatus === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+          <mat-progress-bar *ngIf="listNodesCallStatus === apiCallStatusEnum.INITIATED" mode="indeterminate" />
           <table #table mat-table matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="liquidityNodes" [ngClass]="{'error-border': errorMessage !== ''}">
             <ng-container matColumnDef="alias">
               <th *matHeaderCellDef mat-header-cell mat-sort-header>Alias</th>
@@ -138,7 +138,7 @@
               <th *matHeaderCellDef mat-header-cell>
                 <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
                   <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                    <mat-select-trigger></mat-select-trigger>
+                    <mat-select-trigger />
                     <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
                   </mat-select>
                 </div>
@@ -146,7 +146,7 @@
               <td *matCellDef="let lqNode" mat-cell fxLayoutAlign="end center">
                 <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
                   <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                    <mat-select-trigger></mat-select-trigger>
+                    <mat-select-trigger />
                     <mat-option (click)="onViewLeaseInfo(lqNode)">View Info</mat-option>
                     <mat-option (click)="onOpenChannel(lqNode)">Open Channel</mat-option>
                     <mat-option (click)="viewLeaseOn(lqNode, 'LN')">View on Lnrouter</mat-option>
@@ -167,7 +167,7 @@
             <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
           </table>
         </div>
-        <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+        <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
       </div>
     </mat-card-content>
   </mat-card>

src/app/cln/liquidity-ads/open-liquidity-channel-modal/open-liquidity-channel-modal.component.html

@@ -8,7 +8,7 @@
     </mat-card-header>
     <mat-card-content class="padding-gap-x-large">
       <form #form="ngForm" fxLayout="column">
-        <ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock"></ng-container>
+        <ng-container *ngTemplateOutlet="nodeDetailsExpansionBlock" />
         <div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-sm="space-between center" fxLayout.gt-sm="row wrap">
           <mat-form-field fxLayout="column" fxFlex="30" fxLayoutAlign="start end">
             <mat-label>Requested Amount</mat-label>
@@ -36,7 +36,7 @@
           <span>Total cost to lease {{node.channel_opening_fee | number}} (Sats)</span>
         </div>
         <div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-2">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
         </div>
         <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
@@ -62,14 +62,14 @@
           <span class="foreground-secondary-text">{{node.nodeid}}</span>
         </div>
       </div>
-      <mat-divider class="w-100 my-1"></mat-divider>
+      <mat-divider class="w-100 my-1" />
       <div fxLayout="row">
         <div fxFlex="100">
           <h4 fxLayoutAlign="start" class="font-bold-500">Last Timestamp</h4>
           <span class="overflow-wrap foreground-secondary-text">{{(node.last_timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</span>
         </div>
       </div>
-      <mat-divider class="w-100 my-1"></mat-divider>
+      <mat-divider class="w-100 my-1" />
       <div fxLayout="column" fxLayoutAlign="start stretch">
         <h4 fxFlex="100" class="font-bold-500 mb-1">Addresses</h4>
         <div class="table-container">

src/app/cln/network-info/network-info.component.html

@@ -4,7 +4,7 @@
       <div fxLayout="column" fxLayoutAlign="stretch start" fxFlex="100" class="h-100">
         <div fxLayout="row" fxLayoutAlign="start start" class="w-100">
           <div fxLayout="row" fxLayoutAlign="start start" class="page-title-container pl-2">
-            <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+            <fa-icon class="mr-1" [icon]="card.icon" />
             <span>{{card.title}}</span>
           </div>
         </div>
@@ -25,14 +25,14 @@
                 (card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED) ||
                 (card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED)"
                 mode="indeterminate"
-              ></mat-progress-bar>
+              />
               <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-                <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
+                <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false" />
-                <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
+                <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]" />
-                <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
+                <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]" />
-                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
+                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]" />
-                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[6]"></rtl-cln-fee-rates>
+                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[6]" />
-                <rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
+                <rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]" />
               </div>
             </mat-card-content>
           </mat-card>
@@ -45,7 +45,7 @@
       <div fxLayout="column" fxLayoutAlign="stretch start" fxFlex="100" class="h-100">
         <div fxLayout="row" fxLayoutAlign="start start" class="w-100">
           <div fxLayout="row" fxLayoutAlign="start start" class="page-title-container pl-15px">
-            <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+            <fa-icon class="mr-1" [icon]="card.icon" />
             <span>{{card.title}}</span>
           </div>
         </div>
@@ -66,14 +66,14 @@
                 (card.id === 'feeRatesKW' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED) ||
                 (card.id === 'onChainFeeEstimates' && apiCallStatusPerKW.status === apiCallStatusEnum.INITIATED)"
                 mode="indeterminate"
-              ></mat-progress-bar>
+              />
               <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-                <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-cln-node-info>
+                <rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false" />
-                <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]"></rtl-cln-channel-status-info>
+                <rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2]" />
-                <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]"></rtl-cln-fee-info>
+                <rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1] + ' ' + errorMessages[3] + ' ' + errorMessages[4]" />
-                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
+                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKB'" class="h-100" [feeRates]="feeRatesPerKB" [feeRateStyle]="'KB'" [errorMessage]="errorMessages[5]" />
-                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[5]"></rtl-cln-fee-rates>
+                <rtl-cln-fee-rates *ngSwitchCase="'feeRatesKW'" class="h-100" [feeRates]="feeRatesPerKW" [feeRateStyle]="'KW'" [errorMessage]="errorMessages[5]" />
-                <rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]"></rtl-cln-onchain-fee-estimates>
+                <rtl-cln-onchain-fee-estimates *ngSwitchCase="'onChainFeeEstimates'" class="h-100" [feeRates]="feeRatesPerKW" [errorMessage]="errorMessages[5]" />
               </div>
             </mat-card-content>
           </mat-card>

src/app/cln/on-chain/on-chain-send-modal/on-chain-send-modal.component.html

@@ -43,7 +43,7 @@
               </mat-form-field>
             </div>
             <div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
-              <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
+              <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null" />
               <mat-form-field fxLayout="column" fxFlex="93">
                 <mat-label>Min Confirmation Blocks</mat-label>
                 <input #blocks="ngModel" matInput type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
@@ -77,7 +77,7 @@
           </mat-expansion-panel>    
         <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"></div>
         <div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
         </div>
         <div class="mt-2" fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
@@ -134,7 +134,7 @@
                 </mat-form-field>
               </div>
               <div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
-                <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
+                <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" />
                 <mat-form-field fxLayout="column" fxFlex="93">
                   <mat-label>Min Confirmation Blocks</mat-label>
                   <input matInput formControlName="minConfValue" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="sendFundFormGroup.controls.flgMinConf.value">
@@ -153,11 +153,11 @@
           <ng-template matStepLabel>{{confirmFormLabel}}</ng-template>
           <div fxLayout="column">
             <div fxFlex="100" class="w-100 alert alert-warn">
-              <fa-icon class="mt-1 mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+              <fa-icon class="mt-1 mr-1 alert-icon" [icon]="faExclamationTriangle" />
               <span>You are about to sweep all funds from RTL. Are you sure?</span>
             </div>
             <div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-              <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+              <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
               <span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
             </div>
             <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">

src/app/cln/on-chain/on-chain.component.html

@@ -1,30 +1,30 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
   <span class="page-title">On-chain Balance</span>
 </div>
 <div fxLayout="column" class="padding-gap-x mb-4">
   <mat-card>
     <mat-card-content fxLayout="column">
-      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
+      <rtl-currency-unit-converter [values]="balances" />
     </mat-card-content>
   </mat-card>
 </div>
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt" />
   <span class="page-title">On-chain Transactions</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link?.link" [routerLink]="[link?.link, selectedTable?.name]" (click)="activeLink = link?.link">{{link?.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-        <rtl-cln-utxo-tables fxLayout="row" fxFlex="100" [selectedTableIndex]="selectedTable?.id" (selectedTableIndexChange)="onSelectedTableIndexChanged($event)"></rtl-cln-utxo-tables>
+        <rtl-cln-utxo-tables fxLayout="row" fxFlex="100" [selectedTableIndex]="selectedTable?.id" (selectedTableIndexChange)="onSelectedTableIndexChanged($event)" />
       </div>
     </mat-card-content>
   </mat-card>

src/app/cln/on-chain/utxo-tables/utxo-tables.component.html

@@ -4,13 +4,13 @@
       <ng-template mat-tab-label>
         <span matBadgeOverlap="false" class="tab-badge" matBadgeColor="primary" matBadge="{{numUtxos}}">UTXOs</span>
       </ng-template>
-      <rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT"></rtl-cln-on-chain-utxos>
+      <rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="false" [dustAmount]="DUST_AMOUNT" />
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
         <span matBadgeOverlap="false" class="tab-badge" matBadge="{{numDustUtxos}}">Dust UTXOs</span>
       </ng-template>
-      <rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT"></rtl-cln-on-chain-utxos>
+      <rtl-cln-on-chain-utxos fxLayout="row" fxFlex="100" [numDustUTXOs]="numDustUtxos" [isDustUTXO]="true" [dustAmount]="DUST_AMOUNT" />
     </mat-tab>
   </mat-tab-group>
 </div>

src/app/cln/on-chain/utxo-tables/utxos/utxos.component.html

@@ -16,7 +16,7 @@
   </div>
   <div fxLayout="row" fxLayoutAlign="start start">
     <div class="table-container" fxFlex="100" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
       <table #table mat-table matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="listUTXOs" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="is_dust">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Dust/Nondust"></th>
@@ -84,7 +84,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -104,10 +104,10 @@
         <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
-      <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+      <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
     </div>
   </div>
 </div>
 <ng-template #emptySpace>
-  <mat-icon fxLayoutAlign="start center" color="warn" class="mr-1"></mat-icon>
+  <mat-icon fxLayoutAlign="start center" color="warn" class="mr-1" />
 </ng-template>

src/app/cln/peers-channels/channels/bump-fee-modal/bump-fee.component.html

@@ -10,11 +10,11 @@
         <form fxLayout="column">
           <div fxLayout="column" class="bordered-box mb-1 p-2">
             <p fxLayoutAlign="start center" class="pb-1 word-break">Bump fee for transaction id: {{bumpFeeChannel?.funding_txid}}
-              <fa-icon class="ml-1" matSuffix rtlClipboard matTooltip="Copy transaction ID" [icon]="faCopy" [payload]="bumpFeeChannel?.funding_txid" (copied)="onCopyID($event)"></fa-icon>
+              <fa-icon class="ml-1" matSuffix rtlClipboard matTooltip="Copy transaction ID" [icon]="faCopy" [payload]="bumpFeeChannel?.funding_txid" (copied)="onCopyID($event)" />
             </p>
             <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
               <div fxFlex="100" class="alert alert-info">
-                <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
                 <span fxLayout="column" fxFlex="100">Bumping fee on pending open channels is an advanced feature, attempt it only if you are familiar with the functionality of Bitcoin transactions.
                   <div>Before attempting fee bump ensure the following:</div>
                   <div class="pl-1">1: Use a Bitcoin block explorer to ensure that channel opening transaction is not confirmed.</div>
@@ -39,7 +39,7 @@
                 </mat-form-field>
               </div>
               <div *ngIf="bumpFeeError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                 <span>{{bumpFeeError}}</span>
               </div>
             </div>

src/app/cln/peers-channels/channels/channel-information-modal/channel-information.component.html

@@ -2,7 +2,7 @@
   <div fxFlex="100">
     <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start">
-        <fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faReceipt" />
         <span class="page-title">Channel Information</span>
       </div>
       <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
@@ -12,7 +12,7 @@
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Short Channel ID</h4>
-            <span class="foreground-secondary-text go-to-link" matTooltip="Go To Graph Lookup" (click)="onGoToLink()" >
+            <span tabindex="4" class="foreground-secondary-text go-to-link" matTooltip="Go To Graph Lookup" (click)="onGoToLink()" >
               {{channel.short_channel_id}}
             </span>
           </div>
@@ -21,21 +21,21 @@
             <span class="foreground-secondary-text">{{channel.alias}}</span>
           </div>
         </div>
-        <mat-divider class="my-1"></mat-divider>
+        <mat-divider class="my-1" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
             <span class="foreground-secondary-text">{{channel.channel_id}}</span>
           </div>
         </div>
-        <mat-divider class="my-1"></mat-divider>
+        <mat-divider class="my-1" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
             <span class="foreground-secondary-text">{{channel.peer_id}}</span>
           </div>
         </div>
-        <mat-divider class="my-1"></mat-divider>
+        <mat-divider class="my-1" />
         <div fxLayout="row">
           <div fxFlex="33">
             <h4 fxLayoutAlign="start" class="font-bold-500">State</h4>
@@ -50,7 +50,7 @@
             <span class="overflow-wrap foreground-secondary-text">{{channel.private ? 'Yes' : 'No'}}</span>
           </div>
         </div>
-        <mat-divider class="my-1"></mat-divider>
+        <mat-divider class="my-1" />
         <div fxLayout="row">
           <div fxFlex="33">
             <h4 fxLayoutAlign="start" class="font-bold-500">Remote Balance (Sats)</h4>
@@ -65,7 +65,7 @@
             <span class="overflow-wrap foreground-secondary-text">{{channel.total_msat / 1000 | number:'1.0-0'}}</span>
           </div>
         </div>
-        <mat-divider class="my-1"></mat-divider>
+        <mat-divider class="my-1" />
         <div *ngIf="showAdvanced">
           <div fxLayout="row">
             <div fxFlex="50">
@@ -77,7 +77,7 @@
               <span class="overflow-wrap foreground-secondary-text">{{channel.spendable_msat / 1000 | number:'1.0-0'}}</span>
             </div>
           </div>
-          <mat-divider class="my-1"></mat-divider>
+          <mat-divider class="my-1" />
           <div fxLayout="row">
             <div fxFlex="50">
               <h4 fxLayoutAlign="start" class="font-bold-500">Their Reserve (Sats)</h4>
@@ -88,14 +88,14 @@
               <span class="overflow-wrap foreground-secondary-text">{{channel.our_reserve_msat / 1000 | number:'1.0-2'}}</span>
             </div>
           </div>
-          <mat-divider class="my-1"></mat-divider>
+          <mat-divider class="my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Funding Transaction ID</h4>
               <span class="foreground-secondary-text">{{channel.funding_txid}}</span>
             </div>
           </div>
-          <mat-divider class="my-1"></mat-divider>
+          <mat-divider class="my-1" />
         </div>
         <div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
           <button mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()">

src/app/cln/peers-channels/channels/channels-tables/channel-active-htlcs-table/channel-active-htlcs-table.component.html

@@ -15,7 +15,7 @@
     </div>
   </div>
   <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <!-- Channel Group Row Start -->
       <ng-container matColumnDef="amount_msat">
@@ -113,7 +113,7 @@
         <th *matHeaderCellDef mat-header-cell class="px-2">
           <div class="bordered-box table-actions-select" fxLayoutAlign="end center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -142,5 +142,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html

@@ -14,14 +14,14 @@
       </mat-form-field>
     </div>
   </div>
-  <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100" [perfectScrollbar]>
     <table #table mat-table matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <ng-container matColumnDef="private">
         <th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
         <td *matCellDef="let channel" mat-cell>
-          <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash" /></span>
-          <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye" /></span>
         </td>
       </ng-container>
       <ng-container matColumnDef="short_channel_id">
@@ -104,14 +104,14 @@
           <div fxLayout="row">
             <mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness || 0 | number}}</mat-hint>
           </div>
-          <mat-progress-bar mode="determinate" value="{{channel.to_us_msat && channel.to_us_msat > 0 ? ((channel.to_us_msat/((channel.to_us_msat)+(channel.to_them_msat)))*100) : 0}}"></mat-progress-bar>
+          <mat-progress-bar mode="determinate" value="{{channel.to_us_msat && channel.to_us_msat > 0 ? ((channel.to_us_msat/((channel.to_us_msat)+(channel.to_them_msat)))*100) : 0}}" />
         </td>
       </ng-container>
       <ng-container matColumnDef="actions">
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelUpdate('all')">Update Fee Policy</mat-option>
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
@@ -120,7 +120,7 @@
         <td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="2" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelClick(channel, $event)">View Info</mat-option>
               <mat-option (click)="onViewRemotePolicy(channel)">View Remote Fee</mat-option>
               <mat-option (click)="onChannelUpdate(channel)">Update Fee Policy</mat-option>
@@ -142,5 +142,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html

@@ -14,14 +14,14 @@
       </mat-form-field>
     </div>
   </div>
-  <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100" [perfectScrollbar]>
     <table #table mat-table matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <ng-container matColumnDef="private">
         <th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
         <td *matCellDef="let channel" mat-cell>
-          <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash" /></span>
-          <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye" /></span>
         </td>
       </ng-container>
       <ng-container matColumnDef="alias">
@@ -98,7 +98,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -106,7 +106,7 @@
         <td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="4" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelClick(channel, $event)">View Info</mat-option>
               <mat-option *ngIf="(channel.state === 'CHANNELD_SHUTTING_DOWN' || channel.state === 'CLOSINGD_SIGEXCHANGE' || (!channel.connected && channel.state === 'CHANNELD_NORMAL'))" (click)="onChannelClose(channel)">Close Channel</mat-option>
               <mat-option *ngIf="channel.state === 'CHANNELD_AWAITING_LOCKIN'" (click)="onBumpFee(channel)">Bump Fee</mat-option>
@@ -127,5 +127,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/peers-channels/channels/channels-tables/channels-tables.component.html

@@ -21,7 +21,7 @@
       </mat-tab>
     </mat-tab-group>
     <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   </div>
 </div>

src/app/cln/peers-channels/channels/open-channel-modal/open-channel.component.html

@@ -19,7 +19,7 @@
             <mat-error *ngIf="selectedPeer.errors?.notfound">Peer not found in the list.</mat-error>
           </mat-form-field>
         </div>
-        <ng-container *ngTemplateOutlet="peerDetailsExpansionBlock"></ng-container>
+        <ng-container *ngTemplateOutlet="peerDetailsExpansionBlock" />
         <div fxLayout="column">
           <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
             <mat-form-field fxLayout="column" fxFlex="70" fxLayoutAlign="start end">
@@ -58,7 +58,7 @@
                   </mat-form-field>
                 </div>
                 <div fxFlex="42" fxLayout="row" fxLayoutAlign="start center">
-                  <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null"></mat-checkbox>
+                  <mat-checkbox fxFlex="7" tabindex="5" color="primary" name="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" [(ngModel)]="flgMinConf" (change)="flgMinConf ? selFeeRate=null : minConfValue=null" />
                   <mat-form-field fxLayout="column" fxFlex="93">
                     <mat-label>Min Confirmation Blocks</mat-label>
                     <input #blocks="ngModel" matInput type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="flgMinConf" [disabled]="!flgMinConf" [(ngModel)]="minConfValue">
@@ -83,7 +83,7 @@
           </mat-expansion-panel>    
         </div>
         <div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
         </div>
         <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
@@ -109,7 +109,7 @@
           <span class="foreground-secondary-text">{{peer.id}}</span>
         </div>
       </div>
-      <mat-divider class="w-100 my-1"></mat-divider>
+      <mat-divider class="w-100 my-1" />
       <div fxLayout="row">
         <div fxFlex="50">
           <h4 fxLayoutAlign="start" class="font-bold-500">Address</h4>

src/app/cln/peers-channels/connect-peer/connect-peer.component.html

@@ -18,7 +18,7 @@
                 <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>
               </mat-form-field>
               <div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                 <span>{{peerConnectionError}}</span>
               </div>
               <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
@@ -61,7 +61,7 @@
                     </mat-form-field>
                   </div>
                   <div fxFlex="45" fxLayout="row" fxLayoutAlign="start center">
-                    <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}"></mat-checkbox>
+                    <mat-checkbox fxFlex="7" tabindex="5" color="primary" formControlName="flgMinConf" fxLayoutAlign="stretch start" [ngClass]="{'mr-6': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM, 'mr-2': screenSize === screenSizeEnum.MD || screenSize === screenSizeEnum.LG || screenSize === screenSizeEnum.XL}" />
                     <mat-form-field fxLayout="column" fxFlex="93">
                       <mat-label>Min Confirmation Blocks</mat-label>
                       <input matInput formControlName="minConfValue" type="number" name="blocks" tabindex="8" [step]="1" [min]="0" [required]="channelFormGroup.controls.flgMinConf.value">
@@ -71,7 +71,7 @@
                 </div>
               </div>
               <div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                 <span>{{channelConnectionError}}</span>
               </div>
               <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">

src/app/cln/peers-channels/connections.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
   <span class="page-title">On-chain Balance</span>
 </div>
 <div fxLayout="column" class="padding-gap-x mb-4">
   <mat-card>
     <mat-card-content fxLayout="column">
-      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
+      <rtl-currency-unit-converter [values]="balances" />
     </mat-card-content>
   </mat-card>
 </div>
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faUsers" />
   <span class="page-title">Connections</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
@@ -29,7 +29,7 @@
         </mat-tab>
       </mat-tab-group>
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/cln/peers-channels/peers/peers.component.html

@@ -5,7 +5,7 @@
   <div fxLayout="column">
     <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
       <div fxFlex="70">
-        <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faUsers" />
         <span class="page-title">Connected Peers</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
       <table #table mat-table matSort class="overflow-x-hidden overflow-y-hidden" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="connected">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Connected"></th>
@@ -59,7 +59,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -67,7 +67,7 @@
           <td *matCellDef="let peer" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onPeerClick(peer, $event)">View Info</mat-option>
                 <mat-option (click)="onOpenChannel(peer)">Open Channel</mat-option>
                 <mat-option *ngIf="peer.connected" (click)="onPeerDetach(peer)">Disconnect</mat-option>
@@ -88,6 +88,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/cln/reports/reports.component.html

@@ -1,15 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartBar"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartBar" />
   <span class="page-title">Reports</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
-      <router-outlet></router-outlet>      
+      <router-outlet />      
     </mat-card-content>
   </mat-card>
 </div>

src/app/cln/reports/routing/routing-report.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
-  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
+  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)" />
   <div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
     <mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start center" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
       <span class="mr-2">Report By: </span>
@@ -9,7 +9,7 @@
   </div>
   <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
     <div *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 mt-1">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar mode="indeterminate" />
       <p>Getting Forwarding History...</p>
     </div>
     <div *ngIf="apiCallStatus?.status === apiCallStatusEnum.ERROR" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 mt-1 error-border">{{errorMessage}}</div>
@@ -42,7 +42,7 @@
       </ngx-charts-bar-vertical>
     </div>
     <div class="mt-1">
-      <rtl-cln-forwarding-history *ngIf="filteredEventsBySelectedPeriod && filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'" [eventsData]="filteredEventsBySelectedPeriod" [selFilter]="eventFilterValue"></rtl-cln-forwarding-history>
+      <rtl-cln-forwarding-history *ngIf="filteredEventsBySelectedPeriod && filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'" [eventsData]="filteredEventsBySelectedPeriod" [selFilter]="eventFilterValue" />
     </div>
   </div>
 </div>

src/app/cln/reports/transactions/transactions-report.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
-  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
+  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)" />
   <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
     <div *ngIf="transactionsNonZeroReportData.length > 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 font-bold-700 mt-1" [@fadeIn]="transactionsReportSummary">
       <div *ngIf="transactionsReportSummary.paymentsSelectedPeriod" fxLayout="row" fxLayoutAlign="start stretch" fxFlex="100">
@@ -35,7 +35,7 @@
       </ngx-charts-bar-vertical-2d>
     </div>
     <div class="mt-1">
-      <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [selFilter]="transactionFilterValue"></rtl-transactions-report-table>
+      <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [selFilter]="transactionFilterValue" />
     </div>
   </div>
 </div>

src/app/cln/routing/failed-transactions/failed-transactions.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start stretch" class="page-sub-title-container">
     <div fxFlex="100" class="alert alert-warn mt-1">
-      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
       <span>Maximum 1,000 failed transactions only.</span>
     </div>
     <div fxFlex="100">
@@ -22,7 +22,7 @@
     </div>
   </div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort class="overflow-auto" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="failedForwardingEvents">
       <ng-container matColumnDef="received_time">
         <th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
@@ -87,7 +87,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -108,5 +108,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/routing/forwarding-history/forwarding-history.component.html

@@ -16,7 +16,7 @@
     </div>
   </div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort class="overflow-auto" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="forwardingHistoryEvents">
       <ng-container matColumnDef="received_time">
         <th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
@@ -89,7 +89,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -110,5 +110,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/routing/forwarding-history/forwarding-history.component.ts

@@ -59,6 +59,23 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
     this.screenSize = this.commonService.getScreenSize();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.eventsData) {
+      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchForwardingHistory' };
+      this.eventsData = changes.eventsData.currentValue;
+      this.successfulEvents = this.eventsData;
+      this.totalForwardedTransactions = this.eventsData.length;
+      if (this.paginator) { this.paginator.firstPage(); }
+      if (!changes.eventsData.firstChange) {
+        this.loadForwardingEventsTable(this.successfulEvents);
+      }
+    }
+    if (changes.selFilter && !changes.selFilter.firstChange) {
+      this.selFilterBy = 'all';
+      this.applyFilter();
+    }
+  }
+
   ngOnInit() {
     this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
@@ -110,23 +127,6 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
     }, 0);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.eventsData) {
-      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchForwardingHistory' };
-      this.eventsData = changes.eventsData.currentValue;
-      this.successfulEvents = this.eventsData;
-      this.totalForwardedTransactions = this.eventsData.length;
-      if (this.paginator) { this.paginator.firstPage(); }
-      if (!changes.eventsData.firstChange) {
-        this.loadForwardingEventsTable(this.successfulEvents);
-      }
-    }
-    if (changes.selFilter && !changes.selFilter.firstChange) {
-      this.selFilterBy = 'all';
-      this.applyFilter();
-    }
-  }
-
   onForwardingEventClick(selFEvent: ForwardingEvent, event: any) {
     const reorderedFHEvent = [
       [{ key: 'status', value: 'Settled', title: 'Status', width: 50, type: DataTypeEnum.STRING },

src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="errorMessage !== ''" class="p-2 error-border my-2">{{errorMessage}}</div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start stretch" class="page-sub-title-container">
     <div fxFlex="100" class="alert alert-warn mt-1">
-      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
       <span>Maximum 1,000 local failed transactions only.</span>
     </div>
     <div fxFlex="100">
@@ -22,7 +22,7 @@
     </div>
   </div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort class="overflow-auto" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="failedLocalForwardingEvents">
       <ng-container matColumnDef="received_time">
         <th *matHeaderCellDef mat-header-cell mat-sort-header>Received Time</th>
@@ -72,7 +72,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -93,5 +93,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/cln/routing/routing-peers/routing-peers.component.html

@@ -8,7 +8,7 @@
         </div>
       </div>
       <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="table-container" [perfectScrollbar]>
-        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
         <table #tableIn mat-table matSort class="overflow-auto incoming-table" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="routingPeersIncoming">
           <ng-container matColumnDef="channel_id">
             <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
@@ -51,7 +51,7 @@
           <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
         </table>
       </div>
-      <mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+      <mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
     </div>
     <div fxLayout="column" fxFlex="49" fxLayoutAlign="end stretch">
       <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}">
@@ -70,7 +70,7 @@
         </div>
       </div>
       <div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
-        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
         <table #tableOut mat-table matSort class="overflow-auto outgoing-table" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="routingPeersOutgoing">
           <ng-container matColumnDef="channel_id">
             <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
@@ -112,7 +112,7 @@
           <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
           <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
         </table>
-        <mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+        <mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
       </div>
     </div>
   </div>

src/app/cln/routing/routing-peers/routing-peers.component.ts

@@ -59,6 +59,17 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
     this.screenSize = this.commonService.getScreenSize();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.eventsData) {
+      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchForwardingHistory' };
+      this.eventsData = changes.eventsData.currentValue;
+      this.successfulEvents = this.eventsData;
+      if (!changes.eventsData.firstChange) {
+        this.loadRoutingPeersTable(this.successfulEvents);
+      }
+    }
+  }
+
   ngOnInit() {
     this.store.pipe(take(1)).subscribe((state) => {
       if (state.cln.apisCallStatus.FetchForwardingHistoryS.status === APICallStatusEnum.UN_INITIATED && !state.cln.forwardingHistory.listForwards?.length) {
@@ -105,17 +116,6 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.eventsData) {
-      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchForwardingHistory' };
-      this.eventsData = changes.eventsData.currentValue;
-      this.successfulEvents = this.eventsData;
-      if (!changes.eventsData.firstChange) {
-        this.loadRoutingPeersTable(this.successfulEvents);
-      }
-    }
-  }
-
   applyIncomingFilter() {
     this.routingPeersIncoming.filter = this.filterIn.toLowerCase();
   }

src/app/cln/routing/routing.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="column" class="mb-2">
   <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-    <fa-icon class="page-title-img mr-1" [icon]="faMapSigns"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="faMapSigns" />
     <span class="page-title">Routing</span>
   </div>
   <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
@@ -8,12 +8,12 @@
       <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
         <div fxLayout="row" fxFlex="100">
           <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
-            <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+            <div *ngFor="let link of links" tabindex="1" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
           </nav>
-          <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>    
+          <mat-tab-nav-panel #tabPanel />    
         </div>
         <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
-          <router-outlet></router-outlet>
+          <router-outlet />
         </div>
       </mat-card-content>
     </mat-card>

src/app/cln/sign-verify-message/sign-verify-message.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faUserCheck"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faUserCheck" />
   <span class="page-title">Sign/Verify Message</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper mb-2">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/cln/sign-verify-message/sign/sign.component.html

@@ -9,7 +9,7 @@
       <button class="mr-1" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
       <button mat-flat-button color="primary" tabindex="3" type="submit" (click)="onSign()">Sign</button>
     </div>
-    <mat-divider class="my-2"></mat-divider>
+    <mat-divider class="my-2" />
     <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><p>Generated Signature</p></div>
     <div fxLayout="row" fxLayoutAlign="start center" class="signature-box bordered-box read-only">{{signature}}</div>
     <div fxLayout="row" class="mt-2">

src/app/cln/sign-verify-message/verify/verify.component.html

@@ -16,7 +16,7 @@
       <button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onVerify()">Verify</button>
     </div>
     <div *ngIf="showVerifyStatus && verifyRes.verified" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
-      <mat-divider class="my-2"></mat-divider>
+      <mat-divider class="my-2" />
       <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
         <p *ngIf="verifyRes.verified">Pubkey Used</p>
       </div>

src/app/cln/transactions/invoices/create-invoice-modal/create-invoice.component.html

@@ -35,7 +35,7 @@
           <mat-icon matTooltip="Include routing hints for private channels" matTooltipPosition="above" class="info-icon">info_outline</mat-icon>
         </div>
         <div *ngIf="invoiceError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="invoiceError !== ''">{{invoiceError}}</span>
         </div>
         <div fxLayout="row" fxFlex="100" class="mt-1" fxLayoutAlign="end center">

src/app/cln/transactions/invoices/invoice-information-modal/invoice-information.component.html

@@ -1,12 +1,12 @@
 <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
   <div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
-    <qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+    <qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
     <span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-300">N/A</span>
   </div>
   <div fxFlex="65">
     <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start">
-        <fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faReceipt" />
         <span class="page-title">
           {{screenSize === screenSizeEnum.XS ?  (newlyAdded ? 'Created' : 'Invoice') : (newlyAdded ? 'Invoice Created' : 'Invoice Information')}}
           <span *ngIf="invoice?.status === 'paid'" class="dot green ml-1" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@@ -19,13 +19,13 @@
     <mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
       <div fxLayout="column">
         <div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== '')) ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
-          <qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+          <qr-code *ngIf="((invoice?.bolt11 && invoice?.bolt11 !== '') || (invoice?.bolt12 && invoice?.bolt12 !== ''))" [value]="invoice?.bolt11 || invoice?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
           <span *ngIf="!invoice?.bolt11 && !invoice?.bolt12" class="font-size-120">QR Code Not Applicable</span>
         </div>
-        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1"></mat-divider>
+        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" />
         <div *ngIf="invoice?.warning_capacity" fxLayout="row">
           <div fxFlex="100" class="alert alert-warn">
-            <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+            <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
             <span>{{invoice?.warning_capacity}}</span>
           </div>
         </div>
@@ -50,12 +50,12 @@
               </ng-container>
               <ng-container *ngIf="invoice?.status !== 'paid'">
                 <span *ngIf="invoice?.status !== 'unpaid' || !flgVersionCompatible">-</span>
-                <mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20"></mat-spinner>
+                <mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20" />
               </ng-container>
             </span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Date Expiry</h4>
@@ -66,14 +66,14 @@
             <span class="foreground-secondary-text">{{((invoice?.paid_at * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>
+        <mat-divider class="w-100 my-1" />
       <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
             <span class="foreground-secondary-text">{{invoice?.description || '-'}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>
+        <mat-divider class="w-100 my-1" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">{{ invoice?.bolt12 ? 'Bolt12' : (invoice?.bolt11 && !invoice.label.includes('keysend-')) ? 'Bolt11' : 'Keysend' }} Invoice</h4>
@@ -81,21 +81,21 @@
           </div>
         </div>
         <div *ngIf="showAdvanced">
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Payment Hash</h4>
               <span class="overflow-wrap foreground-secondary-text">{{invoice?.payment_hash}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Label</h4>
               <span class="overflow-wrap foreground-secondary-text">{{invoice?.label}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
         </div>
         <div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
           <button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">

src/app/cln/transactions/invoices/invoices-table/lightning-invoices-table.component.html

@@ -22,7 +22,7 @@
   <div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
     <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
       <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
-        <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
         <span class="page-title">Invoices History</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>      
+      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />      
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="invoices" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="status">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
@@ -107,7 +107,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -115,7 +115,7 @@
           <td *matCellDef="let invoice" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="4" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onInvoiceClick(invoice)">View Info</mat-option>
                 <mat-option (click)="onRefreshInvoice(invoice)">Refresh</mat-option>
               </mat-select>
@@ -134,6 +134,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/cln/transactions/offers/create-offer-modal/create-offer.component.html

@@ -25,7 +25,7 @@
           </mat-form-field>
           </div>
         <div *ngIf="offerError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="offerError !== ''">{{offerError}}</span>
         </div>
         <div fxLayout="row" fxFlex="100" class="mt-1" fxLayoutAlign="end center">

src/app/cln/transactions/offers/offer-bookmarks-table/offer-bookmarks-table.component.html

@@ -3,7 +3,7 @@
   <div fxLayout="column" fxLayoutAlign="start stretch">
     <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
       <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
-        <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
         <span class="page-title">Offer Bookmarks</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -20,7 +20,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>      
+      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />      
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="offersBookmarks" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="lastUpdatedAt">
           <th *matHeaderCellDef mat-header-cell mat-sort-header>Updated At</th>
@@ -62,7 +62,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -70,7 +70,7 @@
           <td *matCellDef="let offer" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="4" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onOfferBookmarkClick(offer)">View Info</mat-option>
                 <mat-option (click)="onRePayOffer(offer)">Pay Again</mat-option>
                 <mat-option (click)="onDeleteBookmark(offer)">Delete Bookmark</mat-option>
@@ -90,6 +90,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/cln/transactions/offers/offer-information-modal/offer-information.component.html

@@ -1,12 +1,12 @@
 <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
   <div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
-    <qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+    <qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
     <span *ngIf="!offer?.bolt12 || offer?.bolt12 === ''" class="font-size-300">N/A</span>
   </div>
   <div fxFlex="65">
     <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start">
-        <fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faReceipt" />
         <span class="page-title">{{screenSize === screenSizeEnum.XS ?  (newlyAdded ? 'Created' : 'Offer') : (newlyAdded ? 'Offer Created' : 'Offer Information')}}</span>
       </div>
       <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
@@ -14,10 +14,10 @@
     <mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
       <div fxLayout="column">
         <div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="offer?.bolt12 && offer?.bolt12 !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
-          <qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+          <qr-code *ngIf="offer?.bolt12 && offer?.bolt12 !== ''" [value]="offer?.bolt12" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
           <span *ngIf="!offer?.bolt12 || offer?.bolt12 === ''" class="font-size-120">QR Code Not Applicable</span>
         </div>
-        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider>
+        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true" />
          <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Amount Requested (Sats)</h4>
@@ -32,7 +32,7 @@
             </span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
@@ -41,7 +41,7 @@
             </span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Offer</h4>
@@ -49,7 +49,7 @@
           </div>
         </div>
         <div *ngIf="showAdvanced">
-          <mat-divider *ngIf="offer?.used || offer?.single_use" class="w-100 my-1"></mat-divider>
+          <mat-divider *ngIf="offer?.used || offer?.single_use" class="w-100 my-1" />
           <div *ngIf="offer?.used || offer?.single_use" fxLayout="row">
             <div fxFlex="50">
               <h4 fxLayoutAlign="start" class="font-bold-500">Used</h4>
@@ -64,35 +64,35 @@
               </span>
             </div>
           </div>          
-          <mat-divider *ngIf="offerDecoded?.issuer" class="w-100 my-1"></mat-divider>
+          <mat-divider *ngIf="offerDecoded?.issuer" class="w-100 my-1" />
           <div *ngIf="offerDecoded?.issuer" fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Issuer</h4>
               <span class="overflow-wrap foreground-secondary-text">{{offerDecoded?.offer_issuer}}</span>
             </div>
           </div>
-          <mat-divider *ngIf="offer.label" class="w-100 my-1"></mat-divider>
+          <mat-divider *ngIf="offer.label" class="w-100 my-1" />
           <div *ngIf="offer.label" fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Label</h4>
               <span class="foreground-secondary-text">{{ offer.label }}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Offer ID</h4>
               <span class="foreground-secondary-text">{{ offerDecoded.offer_id }}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Offer Node ID</h4>
               <span class="foreground-secondary-text">{{offerDecoded?.offer_node_id}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>  
+          <mat-divider class="w-100 my-1" />  
         </div>
         <div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
           <button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">

src/app/cln/transactions/offers/offers-table/offers-table.component.html

@@ -5,7 +5,7 @@
   <div fxLayout="column" fxLayoutAlign="start stretch">
     <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
       <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
-        <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
         <span class="page-title">Offers History</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>      
+      <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />      
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="offers" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="active">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Active"></th>
@@ -65,7 +65,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -73,7 +73,7 @@
           <td *matCellDef="let offer" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="4" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onOfferClick(offer)">View Info</mat-option>
                 <mat-option *ngIf="offer.active" (click)="onDisableOffer(offer)">Disable Offer</mat-option>
                 <mat-option *ngIf="offer.active" (click)="onPrintOffer(offer)">Export QR code</mat-option>
@@ -93,6 +93,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/cln/transactions/payments/lightning-payments.component.html

@@ -17,7 +17,7 @@
   <div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
     <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
       <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
-        <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
         <span class="page-title">Payments History</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -35,7 +35,7 @@
     </div>
     <div fxLayout="row" fxLayoutAlign="start start">
       <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
         <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="payments" [ngClass]="{'error-border': errorMessage !== ''}">
           <ng-container matColumnDef="status">
             <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
@@ -106,7 +106,7 @@
             <th *matHeaderCellDef mat-header-cell>
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
                 <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                  <mat-select-trigger></mat-select-trigger>
+                  <mat-select-trigger />
                   <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
                 </mat-select>
               </div>
@@ -256,6 +256,6 @@
         </table>
       </div>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/cln/transactions/send-payment-modal/send-payment.component.html

@@ -13,9 +13,9 @@
         <mat-radio-button *ngIf="selNode.enableOffers" fxFlex="20" tabindex="3" value="{{paymentTypes.OFFER}}">Offer</mat-radio-button>
       </mat-radio-group>
       <form #sendPaymentForm="ngForm" fxLayoutAlign="space-between stretch" fxLayout="column" (submit)="onSendPayment()" (reset)="resetData()">
-        <ng-container *ngTemplateOutlet="paymentType === paymentTypes.KEYSEND ? keysendBlock : paymentType === paymentTypes.OFFER ? offerBlock : invoiceBlock"></ng-container>
+        <ng-container *ngTemplateOutlet="paymentType === paymentTypes.KEYSEND ? keysendBlock : paymentType === paymentTypes.OFFER ? offerBlock : invoiceBlock" />
         <div *ngIf="paymentError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="paymentError !== ''">{{paymentError}}</span>
         </div>
         <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">

src/app/cln/transactions/transactions.component.html

@@ -1,27 +1,27 @@
 <div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
   <span class="page-title">Lightning Balance</span>
 </div>
 <div fxLayout="column" class="padding-gap-x mb-4">
   <mat-card>
     <mat-card-content fxLayout="column">
-      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
+      <rtl-currency-unit-converter [values]="balances" />
     </mat-card-content>
   </mat-card>
 </div>
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt" />
   <span class="page-title">Lightning Transactions</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" role="tab" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/eclair/ecl-root.component.html

@@ -1,4 +1,4 @@
 <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
-  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate" />
-  <router-outlet #outlet="outlet"></router-outlet>
+  <router-outlet #outlet="outlet" />
 </div>

src/app/eclair/ecl-root.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router, RouterEvent } from '@angular/router';
 import { routeAnimation } from '../shared/animation/route-animation';
 
 @Component({
@@ -13,7 +13,7 @@ export class ECLRootComponent {
   loading = false;
 
   constructor(private router: Router) {
-    this.router.events.subscribe((event: Event) => {
+    this.router.events.subscribe((event: Event | RouterEvent) => {
       switch (true) {
         case event instanceof NavigationStart: {
           this.loading = true;

src/app/eclair/graph/graph.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row wrap" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faSearch"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faSearch" />
   <span class="page-title">Graph Lookups</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="mat-tab-body-wrapper">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/eclair/graph/lookups/lookups.component.html

@@ -23,7 +23,7 @@
           <span class="page-title font-bold-500">{{lookupFields[selectedFieldId].name}} Details</span>
         </div>
         <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" [ngSwitch]="selectedFieldId">
-          <span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeId; else errorBlock"><rtl-ecl-node-lookup [lookupResult]="nodeLookupValue"></rtl-ecl-node-lookup></div></span>
+          <span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeId; else errorBlock"><rtl-ecl-node-lookup [lookupResult]="nodeLookupValue" /></div></span>
           <!-- <span fxFlex="100" *ngSwitchCase="1"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span> -->
           <span *ngSwitchDefault> fxFlex="100"<h3>Error! Unable to find details!</h3></span>
         </div>

src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="lookupResult" fxLayout="column">
-  <mat-divider class="my-1" [inset]="true"></mat-divider>
+  <mat-divider class="my-1" [inset]="true" />
   <div fxLayout="row">
     <div fxFlex="30">
       <h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
@@ -10,7 +10,7 @@
       <span class="foreground-secondary-text w-100">{{lookupResult?.nodeId}}</span>
     </div>
   </div>
-  <mat-divider class="my-1" [inset]="true"></mat-divider>
+  <mat-divider class="my-1" [inset]="true" />
   <div fxLayout="row">
     <div fxFlex="30">
       <h4 fxLayoutAlign="start" class="font-bold-500">Date/Time</h4>
@@ -21,14 +21,14 @@
       <span *ngFor="let activeFeature of lookupResult?.features.activated | keyvalue" class="foreground-secondary-text w-100"><div>{{nodeFeaturesEnum[activeFeature.key] || activeFeature.key}}: {{activeFeature.value | titlecase}}</div></span>
     </div>
   </div>
-  <mat-divider class="my-1" [inset]="true"></mat-divider>
+  <mat-divider class="my-1" [inset]="true" />
   <div fxLayout="row">
     <div fxFlex="100">
       <h4 fxLayoutAlign="start" class="font-bold-500">Signature</h4>
       <span class="foreground-secondary-text">{{lookupResult?.signature}}</span>
     </div>
   </div>
-  <mat-divider class="my-1" [inset]="true"></mat-divider>
+  <mat-divider class="my-1" [inset]="true" />
   <div fxLayout="column">
     <h4 fxFlex="100" fxLayoutAlign="start" class="font-bold-500 mb-1">Addresses</h4>
     <div fxLayout="row" fxFlex="100" class="table-container" [perfectScrollbar]>
@@ -44,7 +44,7 @@
          <td *matCellDef="let address" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onConnectNode(address)">Connect</mat-option>
               <mat-option rtlClipboard [payload]="lookupResult?.nodeId + '@' + address" (copied)="onCopyNodeURI($event)">Copy URI</mat-option>
             </mat-select>

src/app/eclair/graph/query-routes/query-routes.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="column">
   <form #queryRoutesForm="ngForm" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()">
     <div fxFlex="100" class="alert alert-warn">
-      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+      <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
       <span>The actual routing fee on a payment can be different from the fee shown on query routes.</span>
     </div>
     <mat-form-field fxLayout="column" fxFlex="69" fxLayoutAlign="start end">
@@ -21,11 +21,11 @@
   </form>
   <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-3 mb-1">
     <div fxFlex="70" fxLayoutAlign="start center">
-      <fa-icon class="page-title-img mr-1" [icon]="faRoute"></fa-icon>
+      <fa-icon class="page-title-img mr-1" [icon]="faRoute" />
       <span class="page-title">Transaction Route</span>
     </div>
   </div>
-  <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
+  <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate" />
   <div fxLayout="row" fxFlex="100" class="padding-gap-x" fxLayoutAlign="start start">
     <div fxLayout="column" fxFlex="100">
       <div *ngFor="let qRoute of allQRoutes; index as i" fxFlex="100">

src/app/eclair/home/balances-info/balances-info.component.html

@@ -2,12 +2,12 @@
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
     <div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div>
-    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}" />
   </div>
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">On-chain</h4>
     <div class="overflow-wrap dashboard-info-value">{{balances.onchain | number}} Sats</div>
-    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}" />
   </div>
   <div>
     <h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>

src/app/eclair/home/channel-capacity-info/channel-capacity-info.component.html

@@ -4,14 +4,14 @@
     <div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
       <mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90"><strong class="font-weight-900 mr-5px">Local:</strong>{{channelBalances?.localBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
       <mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90">
-        <fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
+        <fa-icon class="mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale" />
         ({{channelBalances?.balancedness || 0 | number}})
       </mat-hint>
       <mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channelBalances?.remoteBalance || 0 | number:'1.0-0'}} Sats</mat-hint>
     </div>
-    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="{{channelBalances?.localBalance && channelBalances?.localBalance > 0 ? ((+channelBalances?.localBalance/((+channelBalances?.localBalance)+(+channelBalances?.remoteBalance)))*100) : 0}}"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="{{channelBalances?.localBalance && channelBalances?.localBalance > 0 ? ((+channelBalances?.localBalance/((+channelBalances?.localBalance)+(+channelBalances?.remoteBalance)))*100) : 0}}" />
   </div>
-  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
+  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider" /></div>
   <div class="channels-capacity-scroll" [perfectScrollbar]>
     <div *ngIf="allChannels && allChannels?.length > 0;  else noChannelBlock" fxLayout="column"fxFlex="100">
       <div *ngFor="let channel of allChannels" class="mt-2">
@@ -21,12 +21,12 @@
         <div fxLayout="row" fxLayoutAlign="space-between start" class="w-100">
           <mat-hint fxFlex="40" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Local:</strong>{{channel?.toLocal || 0 | number:'1.0-0'}} Sats</mat-hint>
           <mat-hint fxFlex="20" fxLayoutAlign="center center" class="font-size-90 color-primary">
-            <fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale"></fa-icon>
+            <fa-icon class="color-primary mr-3px" matTooltip="Balance Score" [icon]="faBalanceScale" />
             ({{channel?.balancedness || 0 | number}})
           </mat-hint>
           <mat-hint fxFlex="40" fxLayoutAlign="end center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Remote:</strong>{{channel?.toRemote || 0 | number:'1.0-0'}} Sats</mat-hint>
         </div>
-        <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{channel.toLocal && channel.toLocal > 0 ? ((+channel.toLocal/((+channel.toLocal)+(+channel.toRemote)))*100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{channel.toLocal && channel.toLocal > 0 ? ((+channel.toLocal/((+channel.toLocal)+(+channel.toRemote)))*100) : 0}}" />
       </div>
     </div>
   </div>

src/app/eclair/home/channel-liquidity-info/channel-liquidity-info.component.html

@@ -2,9 +2,9 @@
   <div fxLayout="column" fxFlex="8" fxLayoutAlign="end start">
     <span class="dashboard-capacity-header this-channel-capacity">Total Capacity</span>
     <mat-hint class="font-size-90">{{totalLiquidity | number:'1.0-0'}} Sats</mat-hint>
-    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100"></mat-progress-bar>
+    <mat-progress-bar class="dashboard-progress-bar this-channel-bar" mode="determinate" color="accent" value="100" />
   </div>
-  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider"></mat-divider></div>
+  <div fxLayout="column" fxFlex="3" fxLayoutAlign="end stretch"><mat-divider class="dashboard-divider" /></div>
   <div fxLayout="column" fxFlex.gt-sm="88" fxFlex="84" fxLayoutAlign="start start" [perfectScrollbar]>
     <div *ngIf="allChannels && allChannels.length > 0;  else noChannelBlock" fxLayout="column" fxFlex="100"class="w-100">
       <div *ngFor="let channel of allChannels" class="mt-2">
@@ -15,8 +15,8 @@
           <mat-hint *ngIf="direction === 'In'" fxFlex="100" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.toRemote || 0 | number:'1.0-0'}} Sats</mat-hint>
           <mat-hint *ngIf="direction === 'Out'" fxFlex="100" fxLayoutAlign="start center" class="font-size-90 color-primary"><strong class="font-weight-900 mr-5px">Capacity: </strong>{{channel.toLocal || 0 | number:'1.0-0'}} Sats</mat-hint>
         </div>
-        <mat-progress-bar *ngIf="direction === 'In'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.toRemote || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar *ngIf="direction === 'In'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.toRemote || 0)/(totalLiquidity) * 100) : 0}}" />
-        <mat-progress-bar *ngIf="direction === 'Out'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.toLocal || 0)/(totalLiquidity) * 100) : 0}}"></mat-progress-bar>
+        <mat-progress-bar *ngIf="direction === 'Out'" class="dashboard-progress-bar" mode="determinate" value="{{(totalLiquidity > 0) ? ((+channel.toLocal || 0)/(totalLiquidity) * 100) : 0}}" />
       </div>
     </div>
   </div>

src/app/eclair/home/home.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR;  else merchantDashboard"fxLayout="column">
   <div fxLayout="row" fxLayoutAlign="start start" class="page-title-container mb-2">
-    <fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile" />
     <span class="page-title">{{apiCallStatusNodeInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : 'Error! Please check the server connection.'}}</span>
   </div>
   <mat-grid-list cols="10" gutterSize="20px" [rowHeight]="operatorCardHeight">
@@ -9,7 +9,7 @@
         <mat-card-header>
           <mat-card-title fxLayoutAlign="space-between center">
             <div>
-              <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+              <fa-icon class="mr-1" [icon]="card.icon" />
               <span>{{card.title}}</span>
             </div>
             <div>
@@ -36,13 +36,13 @@
             ((card.id === 'capacity' || card.id === 'status') && apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED) ||
             (card.id === 'fee' && apiCallStatusFees.status === apiCallStatusEnum.INITIATED)"
             mode="indeterminate"
-          ></mat-progress-bar>
+          />
           <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-            <rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false"></rtl-ecl-node-info>
+            <rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false" />
-            <rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
+            <rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]" />
-            <rtl-ecl-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-capacity-info>
+            <rtl-ecl-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [errorMessage]="errorMessages[2]" />
-            <rtl-ecl-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1]"></rtl-ecl-fee-info>
+            <rtl-ecl-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[1]" />
-            <rtl-ecl-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-status-info>
+            <rtl-ecl-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[2]" />
             <h3 *ngSwitchDefault>Error! Unable to find information!</h3>
           </div>
         </mat-card-content>
@@ -52,7 +52,7 @@
 </div>
 <ng-template #merchantDashboard>
   <div fxLayout="row" fxLayoutAlign="start end" class="page-title-container mb-2">
-    <fa-icon class="page-title-img mr-1" [icon]="faSmile"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="faSmile" />
     <span class="page-title">Welcome {{information.alias}}! Your node is up and running.</span>
   </div>
   <mat-grid-list cols="6" gutterSize="20px" [rowHeight]="merchantCardHeight">
@@ -61,7 +61,7 @@
         <mat-card-header *ngIf="card.id !== 'transactions'">
           <mat-card-title fxLayoutAlign="space-between center">
             <div>
-              <fa-icon class="mr-1" [icon]="card.icon"></fa-icon>
+              <fa-icon class="mr-1" [icon]="card.icon" />
               <span>{{card.title}}</span>
             </div>
             <div>
@@ -84,19 +84,19 @@
             (card.id === 'balance' && (apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusOCBal.status === apiCallStatusEnum.INITIATED)) ||
             ((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusAllChannels.status === apiCallStatusEnum.INITIATED)"
             mode="indeterminate"
-          ></mat-progress-bar>
+          />
           <div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
-            <rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information"></rtl-ecl-node-info>
+            <rtl-ecl-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" />
-            <rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]"></rtl-ecl-balances-info>
+            <rtl-ecl-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[2] + ' ' + errorMessages[3]" />
-            <rtl-ecl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
+            <rtl-ecl-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [errorMessage]="errorMessages[2]" />
-            <rtl-ecl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]"></rtl-ecl-channel-liquidity-info>
+            <rtl-ecl-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]" />
             <span *ngSwitchCase="'transactions'" fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
               <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" class="dashboard-tabs-group">
                 <mat-tab label="Receive">
-                  <rtl-ecl-lightning-invoices class="h-100" [calledFrom]="'home'"></rtl-ecl-lightning-invoices>
+                  <rtl-ecl-lightning-invoices class="h-100" [calledFrom]="'home'" />
                 </mat-tab>
                 <mat-tab label="Pay">
-                  <rtl-ecl-lightning-payments [calledFrom]="'home'"></rtl-ecl-lightning-payments>
+                  <rtl-ecl-lightning-payments [calledFrom]="'home'" />
                 </mat-tab>
               </mat-tab-group>
               <div class="underline">

src/app/eclair/on-chain/on-chain-send-modal/on-chain-send-modal.component.html

@@ -33,7 +33,7 @@
         </div>
         <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"></div>
         <div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
         </div>
         <div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">

src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutAlign="start start" fxLayout.gt-sm="column" fxFlex="100" fxLayoutAlign.gt-sm="start stretch">
   <div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
     <div fxFlex="70">
-      <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+      <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
       <span class="page-title">Transaction History</span>
     </div>
     <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -19,7 +19,7 @@
   </div>
   <div fxLayout="row" fxLayoutAlign="start start">
     <div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="listTransactions" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="timestamp">
           <th *matHeaderCellDef mat-header-cell mat-sort-header>Date/Time</th>
@@ -69,7 +69,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -89,7 +89,7 @@
         <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
-      <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+      <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
     </div>
   </div>
 </div>

src/app/eclair/on-chain/on-chain.component.html

@@ -1,30 +1,30 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
   <span class="page-title">On-chain Balance</span>
 </div>
 <div fxLayout="column" class="padding-gap-x mb-4">
   <mat-card>
     <mat-card-content fxLayout="column">
-      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
+      <rtl-currency-unit-converter [values]="balances" />
     </mat-card-content>
   </mat-card>
 </div>
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faExchangeAlt" />
   <span class="page-title">On-chain Transactions</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-        <rtl-ecl-on-chain-transaction-history fxLayout="row" fxFlex="100"></rtl-ecl-on-chain-transaction-history>
+        <rtl-ecl-on-chain-transaction-history fxLayout="row" fxFlex="100" />
       </div>
     </mat-card-content>
   </mat-card>

src/app/eclair/peers-channels/channels/channel-information-modal/channel-information.component.html

@@ -2,7 +2,7 @@
   <div fxFlex="100">
     <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start">
-        <fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faReceipt" />
         <span class="page-title">Channel Information</span>
       </div>
       <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
@@ -23,28 +23,28 @@
             <span class="overflow-wrap foreground-secondary-text">{{channel.state | titlecase}}</span>
           </div>
         </div>
-        <mat-divider class="my-1" [inset]="true"></mat-divider>
+        <mat-divider class="my-1" [inset]="true" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
             <span class="foreground-secondary-text">{{channel.channelId}}</span>
           </div>
         </div>
-        <mat-divider class="my-1" [inset]="true"></mat-divider>
+        <mat-divider class="my-1" [inset]="true" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Peer Public Key</h4>
             <span class="foreground-secondary-text">{{channel.nodeId}}</span>
           </div>
         </div>
-        <mat-divider class="my-1" [inset]="true"></mat-divider>
+        <mat-divider class="my-1" [inset]="true" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">State</h4>
             <span class="overflow-wrap foreground-secondary-text">{{channel.state | titlecase}}</span>
           </div>
         </div>
-        <mat-divider class="my-1" [inset]="true"></mat-divider>
+        <mat-divider class="my-1" [inset]="true" />
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Private</h4>
@@ -55,7 +55,7 @@
             <span class="overflow-wrap foreground-secondary-text">{{channel.isInitiator ? 'Yes' : 'No'}}</span>
           </div>
         </div>
-        <mat-divider class="my-1" [inset]="true"></mat-divider>
+        <mat-divider class="my-1" [inset]="true" />
         <div *ngIf="showAdvanced && channelsType === 'open'">
           <div fxLayout="row">
             <div fxFlex="50">
@@ -67,7 +67,7 @@
               <span class="overflow-wrap foreground-secondary-text">{{channel.toRemote | number}}</span>
             </div>
           </div>
-          <mat-divider class="my-1" [inset]="true"></mat-divider>
+          <mat-divider class="my-1" [inset]="true" />
           <div fxLayout="row">
             <div fxFlex="50">
               <h4 fxLayoutAlign="start" class="font-bold-500">Base Fee (mSats)</h4>
@@ -78,7 +78,7 @@
               <span class="overflow-wrap foreground-secondary-text">{{channel.feeProportionalMillionths | number}}</span>
             </div>
           </div>
-          <mat-divider class="my-1" [inset]="true"></mat-divider>
+          <mat-divider class="my-1" [inset]="true" />
         </div>
         <div fxLayout="row" fxLayoutAlign="end center" fxFlex="100" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
           <button *ngIf="channelsType === 'open'" mat-button color="primary" type="reset" tabindex="1" class="mr-1" (click)="onShowAdvanced()">

src/app/eclair/peers-channels/channels/channel-rebalance-infographics/channel-rebalance-infographics.component.html

@@ -1,6 +1,5 @@
 <ng-container
-  *ngTemplateOutlet="stepNumber === 1 ? infoStepBlock1: stepNumber === 2 ? infoStepBlock2 : stepNumber === 3 ? infoStepBlock3 : stepNumber === 4 ? infoStepBlock4 : infoStepBlock5">
+  *ngTemplateOutlet="stepNumber === 1 ? infoStepBlock1: stepNumber === 2 ? infoStepBlock2 : stepNumber === 3 ? infoStepBlock3 : stepNumber === 4 ? infoStepBlock4 : infoStepBlock5" />
-</ng-container>
 <ng-template #infoStepBlock1>
   <div fxLayout="column" fxFlex="100"  fxLayoutAlign="space-between starts" [@sliderAnimation]="animationDirection"
     (swipe)="onSwipe($event)">

src/app/eclair/peers-channels/channels/channel-rebalance-modal/channel-rebalance.component.html

@@ -12,7 +12,7 @@
     <div fxLayout="column">
       <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="space-between stretch">
         <div fxFlex="100" class="alert alert-info">
-          <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
           <span>Circular Rebalance is a payment you make to *yourself* to affect a relative change in the balances of two channels.
             This is accomplished by sending payment out from the selected channel and receiving it back on the channel with the selected peer.
             Please note, you will be paying routing fee to balance the channels in this manner.</span>
@@ -55,7 +55,7 @@
           <form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="statusFormGroup">
             <ng-template matStepLabel>Status</ng-template>
             <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
-              <mat-progress-bar *ngIf="rebalanceStatus.invoice === ''" fxFlex="100" color="primary" mode="indeterminate"></mat-progress-bar>
+              <mat-progress-bar *ngIf="rebalanceStatus.invoice === ''" fxFlex="100" color="primary" mode="indeterminate" />
               <mat-expansion-panel class="flat-expansion-panel mb-2" fxFlex="100">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
@@ -64,7 +64,7 @@
                 </mat-expansion-panel-header>
                 <div fxLayout="column"><span class="foreground-secondary-text">{{rebalanceStatus.invoice}}</span></div>
               </mat-expansion-panel>
-              <mat-progress-bar *ngIf="!rebalanceStatus.paymentStatus?.error && !rebalanceStatus.paymentRoute && rebalanceStatus.paymentStatus?.type !== 'pending'" fxFlex="100" color="primary" mode="indeterminate"></mat-progress-bar>
+              <mat-progress-bar *ngIf="!rebalanceStatus.paymentStatus?.error && !rebalanceStatus.paymentRoute && rebalanceStatus.paymentStatus?.type !== 'pending'" fxFlex="100" color="primary" mode="indeterminate" />
               <mat-expansion-panel class="flat-expansion-panel mb-2" fxFlex="100">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
@@ -77,7 +77,7 @@
                   </span>
                 </div>
               </mat-expansion-panel>
-              <mat-progress-bar *ngIf="!rebalanceStatus.paymentStatus" fxFlex="100" color="primary" mode="indeterminate"></mat-progress-bar>
+              <mat-progress-bar *ngIf="!rebalanceStatus.paymentStatus" fxFlex="100" color="primary" mode="indeterminate" />
               <mat-expansion-panel class="flat-expansion-panel" fxFlex="100" [expanded]="!!rebalanceStatus.paymentStatus">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
@@ -101,7 +101,7 @@
   </mat-card-content>
 </div>
 <ng-template #paymentStatusBlock>
-  <ng-container *ngTemplateOutlet="rebalanceStatus.paymentStatus.error ? paymentFailedBlock : paymentSuccessfulBlock"></ng-container>
+  <ng-container *ngTemplateOutlet="rebalanceStatus.paymentStatus.error ? paymentFailedBlock : paymentSuccessfulBlock" />
 </ng-template>
 <ng-template #paymentFailedBlock>
   <div fxLayout="column"><span class="foreground-secondary-text">Error: {{rebalanceStatus.paymentStatus.error}}</span></div>
@@ -118,21 +118,21 @@
         <span class="foreground-secondary-text">{{rebalanceStatus.paymentRoute && rebalanceStatus.paymentRoute !== '' ? (rebalanceStatus.paymentRoute.split(',')?.length) : 0}}</span>
       </div>
     </div>
-    <mat-divider class="w-100 my-1"></mat-divider>
+    <mat-divider class="w-100 my-1" />
     <div fxLayout="row">
       <div fxFlex="100">
         <h4 fxLayoutAlign="start" class="font-bold-500">Payment Hash</h4>
         <span class="foreground-secondary-text">{{rebalanceStatus.paymentHash}}</span>
       </div>
     </div>
-    <mat-divider class="w-100 my-1"></mat-divider>
+    <mat-divider class="w-100 my-1" />
     <div fxLayout="row">
       <div fxFlex="100">
         <h4 fxLayoutAlign="start" class="font-bold-500">Payment ID</h4>
         <span class="foreground-secondary-text">{{rebalanceStatus.paymentDetails.paymentId}}</span>
       </div>
     </div>
-    <mat-divider class="w-100 my-1"></mat-divider>
+    <mat-divider class="w-100 my-1" />
     <div fxLayout="row">
       <div fxFlex="100">
         <h4 fxLayoutAlign="start" class="font-bold-500">Parent ID</h4>
@@ -146,14 +146,14 @@
     <mat-card-header fxLayout="row" fxFlex="8" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start"><span class="page-title"></span></div>
       <div fxFlex="5" fxLayoutAlign="end center">
-        <button tabindex="19" class="btn-close-x p-0" mat-button (click)="flgShowInfo=false;stepNumber=1;">X</button>
+        <button tabindex="22" class="btn-close-x p-0" mat-button (click)="flgShowInfo=false;stepNumber=1;">X</button>
       </div>
     </mat-card-header>
     <mat-card-content fxLayout="column" fxFlex="70" fxLayoutAlign="space-between center" class="padding-gap-x-large">
-      <rtl-ecl-channel-rebalance-infographics fxFlex="100" [animationDirection]="animationDirection" [(stepNumber)]="stepNumber"></rtl-ecl-channel-rebalance-infographics>
+      <rtl-ecl-channel-rebalance-infographics fxFlex="100" [animationDirection]="animationDirection" [(stepNumber)]="stepNumber" />
     </mat-card-content>
     <div fxLayout="row" fxFlex="10" fxLayoutAlign="center end" class="padding-gap-x-large padding-gap-bottom-large">
-      <span *ngFor="let i of [1, 2, 3, 4, 5];" fxLayoutAlign="center center" class="dots-stepper-block" (click) = "onStepChanged(i)">
+      <span *ngFor="let i of [1, 2, 3, 4, 5];" tabindex="21" fxLayoutAlign="center center" class="dots-stepper-block" (click) = "onStepChanged(i)">
         <p class="dot tiny-dot mr-0" [ngClass]="{'dot-primary': stepNumber === i, 'dot-primary-lighter': stepNumber !== i}"></p>
       </span>
     </div>

src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.html

@@ -15,13 +15,13 @@
     </div>
   </div>
   <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <ng-container matColumnDef="announceChannel">
         <th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
         <td *matCellDef="let channel" mat-cell>
-          <span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash" /></span>
-          <span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          <span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye" /></span>
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
@@ -76,14 +76,14 @@
           <div fxLayout="row">
             <mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
           </div>
-          <mat-progress-bar mode="determinate" value="{{channel.toLocal && channel.toLocal > 0 ? ((+channel.toLocal/((+channel.toLocal)+(+channel.toRemote)))*100) : 0}}"></mat-progress-bar>
+          <mat-progress-bar mode="determinate" value="{{channel.toLocal && channel.toLocal > 0 ? ((+channel.toLocal/((+channel.toLocal)+(+channel.toRemote)))*100) : 0}}" />
         </td>
       </ng-container>
       <ng-container matColumnDef="actions">
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -91,7 +91,7 @@
         <td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="2" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelClick(channel, $event)">View Info</mat-option>
               <mat-option (click)="onChannelClose(channel, true)">Force Close</mat-option>
             </mat-select>
@@ -110,5 +110,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/eclair/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html

@@ -15,13 +15,13 @@
     </div>
   </div>
   <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <ng-container matColumnDef="announceChannel">
         <th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
         <td *matCellDef="let channel" mat-cell>
-          <span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash" /></span>
-          <span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          <span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye" /></span>
         </td>
       </ng-container>
       <ng-container matColumnDef="shortChannelId">
@@ -82,14 +82,14 @@
           <div fxLayout="row">
             <mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
           </div>
-          <mat-progress-bar mode="determinate" value="{{channel?.toLocal && channel?.toLocal > 0 ? ((+channel?.toLocal/((+channel?.toLocal)+(+channel?.toRemote)))*100) : 0}}"></mat-progress-bar>
+          <mat-progress-bar mode="determinate" value="{{channel?.toLocal && channel?.toLocal > 0 ? ((+channel?.toLocal/((+channel?.toLocal)+(+channel?.toRemote)))*100) : 0}}" />
         </td>
       </ng-container>
       <ng-container matColumnDef="actions">
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelUpdate('all')">Update Fee Policy</mat-option>
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
@@ -98,7 +98,7 @@
         <td *matCellDef="let channel" mat-cell fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="2" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onChannelClick(channel, $event)">View Info</mat-option>
               <mat-option (click)="onChannelUpdate(channel)">Update Fee Policy</mat-option>
               <mat-option (click)="onCircularRebalance(channel)">Circular Rebalance</mat-option>
@@ -121,5 +121,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html

@@ -15,13 +15,13 @@
     </div>
   </div>
   <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
     <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="channels" [ngClass]="{'error-border': errorMessage !== ''}">
       <ng-container matColumnDef="announceChannel">
         <th *matHeaderCellDef mat-header-cell mat-sort-header matTooltip="Private"></th>
         <td *matCellDef="let channel" mat-cell>
-          <span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash" /></span>
-          <span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          <span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye" /></span>
         </td>
       </ng-container>
       <ng-container matColumnDef="state">
@@ -66,7 +66,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -87,5 +87,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/eclair/peers-channels/channels/channels-tables/channels-tables.component.html

@@ -21,7 +21,7 @@
       </mat-tab>
     </mat-tab-group>
     <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-      <router-outlet></router-outlet>
+      <router-outlet />
     </div>
   </div>
 </div>

src/app/eclair/peers-channels/channels/open-channel-modal/open-channel.component.html

@@ -19,7 +19,7 @@
             <mat-error *ngIf="selectedPeer.errors?.notfound">Peer not found in the list.</mat-error>
           </mat-form-field>
         </div>
-        <ng-container *ngTemplateOutlet="peerDetailsExpansionBlock"></ng-container>
+        <ng-container *ngTemplateOutlet="peerDetailsExpansionBlock" />
         <div fxLayout="column">
           <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
             <mat-form-field fxLayout="column" fxFlex="70" fxLayoutAlign="start end">
@@ -53,7 +53,7 @@
           </mat-expansion-panel>    
         </div>
         <div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="channelConnectionError !== ''">{{channelConnectionError}}</span>
         </div>
         <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
@@ -79,7 +79,7 @@
           <span class="foreground-secondary-text">{{peer.nodeId}}</span>
         </div>
       </div>
-      <mat-divider class="w-100 my-1"></mat-divider>
+      <mat-divider class="w-100 my-1" />
       <div fxLayout="row">
         <div fxFlex="50">
           <h4 fxLayoutAlign="start" class="font-bold-500">Address</h4>

src/app/eclair/peers-channels/connect-peer/connect-peer.component.html

@@ -18,7 +18,7 @@
                 <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>
               </mat-form-field>
               <div *ngIf="peerConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                 <span>{{peerConnectionError}}</span>
               </div>
               <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
@@ -50,7 +50,7 @@
                 </div>
               </div>
               <div *ngIf="channelConnectionError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                 <span>{{channelConnectionError}}</span>
               </div>
               <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">

src/app/eclair/peers-channels/connections.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartPie" />
   <span class="page-title">On-chain Balance</span>
 </div>
 <div fxLayout="column" class="padding-gap-x mb-4">
   <mat-card>
     <mat-card-content fxLayout="column">
-      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
+      <rtl-currency-unit-converter [values]="balances" />
     </mat-card-content>
   </mat-card>
 </div>
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faUsers" />
   <span class="page-title">Connections</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
@@ -29,7 +29,7 @@
         </mat-tab>
       </mat-tab-group>
       <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
-        <router-outlet></router-outlet>
+        <router-outlet />
       </div>
     </mat-card-content>
   </mat-card>

src/app/eclair/peers-channels/peers/peers.component.html

@@ -5,7 +5,7 @@
   <div fxLayout="column">
     <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
       <div fxFlex="70">
-        <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faUsers" />
         <span class="page-title">Peers</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="peers" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="state">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="State"></th>
@@ -61,7 +61,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -69,7 +69,7 @@
           <td *matCellDef="let peer" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onPeerClick(peer, $event)">View Info</mat-option>
                 <mat-option (click)="onOpenChannel(peer)">Open Channel</mat-option>
                 <mat-option *ngIf="peer.state === 'CONNECTED'" (click)="onPeerDetach(peer)">Disconnect</mat-option>
@@ -90,6 +90,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/eclair/reports/reports.component.html

@@ -1,15 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-  <fa-icon class="page-title-img mr-1" [icon]="faChartBar"></fa-icon>
+  <fa-icon class="page-title-img mr-1" [icon]="faChartBar" />
   <span class="page-title">Reports</span>
 </div>
 <div fxLayout="column" class="padding-gap-x">
   <mat-card>
     <mat-card-content fxLayout="column">
       <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" [tabPanel]="tabPanel">
-        <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+        <div *ngFor="let link of links" tabindex="1" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
       </nav>
-      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+      <mat-tab-nav-panel #tabPanel />
-      <router-outlet></router-outlet>      
+      <router-outlet />      
     </mat-card-content>
   </mat-card>
 </div>

src/app/eclair/reports/routing/routing-report.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
-  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
+  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)" />
   <div fxLayout="column" fxLayoutAlign="center center" class="padding-gap-x">
     <mat-radio-group class="my-1" color="primary" name="selReportBy" fxFlex="100" fxLayoutAlign="start center" [(ngModel)]="selReportBy" (change)="onSelReportByChange()">
       <span class="mr-2">Report By: </span>
@@ -37,7 +37,7 @@
       </ngx-charts-bar-vertical>
     </div>
     <div class="mt-1">
-      <rtl-ecl-forwarding-history *ngIf="filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'"[eventsData]="filteredEventsBySelectedPeriod" [selFilter]="eventFilterValue"></rtl-ecl-forwarding-history>
+      <rtl-ecl-forwarding-history *ngIf="filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'"[eventsData]="filteredEventsBySelectedPeriod" [selFilter]="eventFilterValue" />
     </div>
   </div>
 </div>

src/app/eclair/reports/transactions/transactions-report.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x-large">
-  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)"></rtl-horizontal-scroller>
+  <rtl-horizontal-scroller (stepChanged)="onSelectionChange($event)" />
   <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
     <div *ngIf="transactionsNonZeroReportData.length > 0" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" class="font-size-120 font-bold-700 mt-1" [@fadeIn]="transactionsReportSummary">
       <div *ngIf="transactionsReportSummary.paymentsSelectedPeriod" fxLayout="row" fxLayoutAlign="start stretch" fxFlex="100">
@@ -35,7 +35,7 @@
       </ngx-charts-bar-vertical-2d>      
     </div>
     <div class="mt-1">
-      <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [selFilter]="transactionFilterValue"></rtl-transactions-report-table>
+      <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [selFilter]="transactionFilterValue" />
     </div>
   </div>
 </div>

src/app/eclair/routing/forwarding-history/forwarding-history.component.html

@@ -16,7 +16,7 @@
     </div>
   </div>
   <div *ngIf="errorMessage === ''" fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
-    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>    
+    <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />    
     <table #table mat-table fxFlex="100" matSort class="overflow-auto" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="forwardingHistoryEvents">
       <ng-container matColumnDef="type">
         <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Type (if not payment relayed)"></th>
@@ -94,7 +94,7 @@
         <th *matHeaderCellDef mat-header-cell>
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-              <mat-select-trigger></mat-select-trigger>
+              <mat-select-trigger />
               <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
             </mat-select>
           </div>
@@ -115,5 +115,5 @@
       <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
     </table>
   </div>
-  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+  <mat-paginator *ngIf="errorMessage === ''" class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
 </div>

src/app/eclair/routing/forwarding-history/forwarding-history.component.ts

@@ -56,6 +56,20 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
     this.screenSize = this.commonService.getScreenSize();
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.eventsData) {
+      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchPayments' };
+      this.eventsData = changes.eventsData.currentValue;
+      if (!changes.eventsData.firstChange) {
+        this.loadForwardingEventsTable(this.eventsData);
+      }
+    }
+    if (changes.selFilter && !changes.selFilter.firstChange) {
+      this.selFilterBy = 'all';
+      this.applyFilter();
+    }
+  }
+
   ngOnInit() {
     this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
@@ -100,20 +114,6 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
     }, 0);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.eventsData) {
-      this.apiCallStatus = { status: APICallStatusEnum.COMPLETED, action: 'FetchPayments' };
-      this.eventsData = changes.eventsData.currentValue;
-      if (!changes.eventsData.firstChange) {
-        this.loadForwardingEventsTable(this.eventsData);
-      }
-    }
-    if (changes.selFilter && !changes.selFilter.firstChange) {
-      this.selFilterBy = 'all';
-      this.applyFilter();
-    }
-  }
-
   onForwardingEventClick(selFEvent: PaymentRelayed, event: any) {
     const reorderedFHEvent = [
       [{ key: 'paymentHash', value: selFEvent.paymentHash, title: 'Payment Hash', width: 100, type: DataTypeEnum.STRING }],

src/app/eclair/routing/routing-peers/routing-peers.component.html

@@ -18,7 +18,7 @@
         </div>
       </div>
       <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100" class="table-container" [perfectScrollbar]>
-        <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
         <table #tableIn mat-table matSort class="overflow-auto incoming-table" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="routingPeersIncoming">
           <ng-container matColumnDef="channelId">
             <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
@@ -61,7 +61,7 @@
           <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
         </table>
       </div>
-      <mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+      <mat-paginator #paginatorIn class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
     </div>
     <div fxLayout="column" fxFlex="49" fxLayoutAlign="end stretch" class="mb-4">
       <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="page-sub-title-container w-100" [ngClass]="{'mt-2': screenSize !== screenSizeEnum.LG}">
@@ -80,7 +80,7 @@
         </div>
       </div>
       <div fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container" [perfectScrollbar]>
-        <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
         <table #tableOut mat-table matSort class="overflow-auto outgoing-table" [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="routingPeersOutgoing">
           <ng-container matColumnDef="channelId">
             <th *matHeaderCellDef mat-header-cell mat-sort-header>Channel ID</th>
@@ -122,7 +122,7 @@
           <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
           <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
         </table>
-        <mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+        <mat-paginator #paginatorOut class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
       </div>
     </div>
   </div>

src/app/eclair/routing/routing.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="column">
   <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
-    <fa-icon class="page-title-img mr-1" [icon]="faMapSigns"></fa-icon>
+    <fa-icon class="page-title-img mr-1" [icon]="faMapSigns" />
     <span class="page-title">Routing</span>
   </div>
   <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
@@ -8,12 +8,12 @@
       <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
         <div fxLayout="row" fxFlex="100">
           <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
-            <div *ngFor="let link of links" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
+            <div *ngFor="let link of links" tabindex="1" mat-tab-link class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
           </nav>
-          <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>    
+          <mat-tab-nav-panel #tabPanel />    
         </div>
         <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
-          <router-outlet></router-outlet>
+          <router-outlet />
         </div>
       </mat-card-content>
     </mat-card>

src/app/eclair/transactions/create-invoice-modal/create-invoice.component.html

@@ -32,7 +32,7 @@
           </mat-form-field>
         </div>
         <div *ngIf="invoiceError !== ''" fxFlex="100" class="alert alert-danger mt-1">
-          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
+          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
           <span *ngIf="invoiceError !== ''">{{invoiceError}}</span>
         </div>
         <div fxLayout="row" fxFlex="100" class="mt-2" fxLayoutAlign="end center">

src/app/eclair/transactions/invoice-information-modal/invoice-information.component.html

@@ -1,12 +1,12 @@
 <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
   <div fxFlex="35" class="modal-qr-code-container padding-gap-large" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
-    <qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+    <qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
     <span *ngIf="!invoice?.serialized || invoice?.serialized === ''" class="font-size-300">N/A</span>
   </div>
   <div fxFlex="65">
     <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
       <div fxFlex="95" fxLayoutAlign="start start">
-        <fa-icon class="page-title-img mr-1" [icon]="faReceipt"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faReceipt" />
         <span class="page-title">{{screenSize === screenSizeEnum.XS ?  (newlyAdded ? 'Created' : 'Invoice') : (newlyAdded ? 'Invoice Created' : 'Invoice Information')}}</span>
       </div>
       <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
@@ -14,10 +14,10 @@
     <mat-card-content class="padding-gap-x-large" [ngClass]="{'xs-scroll-y': screenSize === screenSizeEnum.XS}">
       <div fxLayout="column">
         <div fxFlex="30" class="modal-qr-code-container padding-gap" [fxLayoutAlign]="invoice?.serialized && invoice?.serialized !== '' ? 'center start' : 'center center'" [ngClass]="{'display-none': screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM}">
-          <qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'"></qr-code>
+          <qr-code *ngIf="invoice?.serialized && invoice?.serialized !== ''" [value]="invoice?.serialized" [size]="qrWidth" [errorCorrectionLevel]="'L'" />
           <span *ngIf="!invoice?.serialized || invoice?.serialized === ''" class="font-size-120">QR Code Not Applicable</span>
         </div>
-        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true"></mat-divider>
+        <mat-divider *ngIf="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM" class="my-1" [inset]="true" />
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Amount Requested</h4>
@@ -37,12 +37,12 @@
               </ng-container>
               <ng-container *ngIf="!invoice?.amountSettled">
                 <span *ngIf="invoice?.status !== 'unpaid' || !flgVersionCompatible">-</span>
-                <mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20"></mat-spinner>
+                <mat-spinner *ngIf="invoice?.status === 'unpaid' && flgVersionCompatible" [diameter]="20" />
               </ng-container>
             </span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Date Created</h4>
@@ -53,14 +53,14 @@
             <span class="overflow-wrap foreground-secondary-text">{{invoice?.status | titlecase}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
             <span class="foreground-secondary-text">{{invoice?.description || '-'}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>
+        <mat-divider class="w-100 my-1" />
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Invoice</h4>
@@ -68,7 +68,7 @@
           </div>
         </div>
         <div *ngIf="showAdvanced">
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="40">
               <h4 fxLayoutAlign="start" class="font-bold-500">Date Expiry</h4>
@@ -79,21 +79,21 @@
               <span class="overflow-wrap foreground-secondary-text">{{(invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm'}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Payment Hash</h4>
               <span class="overflow-wrap foreground-secondary-text">{{invoice?.paymentHash}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
           <div fxLayout="row">
             <div fxFlex="100">
               <h4 fxLayoutAlign="start" class="font-bold-500">Node ID</h4>
               <span class="overflow-wrap foreground-secondary-text">{{invoice?.nodeId}}</span>
             </div>
           </div>
-          <mat-divider class="w-100 my-1"></mat-divider>
+          <mat-divider class="w-100 my-1" />
         </div>
         <div fxLayout="row" fxLayoutAlign="end center" [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}">
           <button class="mr-1" mat-button color="primary" type="reset" tabindex="1" (click)="onShowAdvanced()">

src/app/eclair/transactions/invoices/lightning-invoices.component.html

@@ -22,7 +22,7 @@
   <div *ngIf="calledFrom === 'transactions'" fxLayout="column" fxLayoutAlign="start stretch">
     <div fxLayout="column" fxLayoutAlign="start stretch" fxLayout.gt-sm="row wrap" class="page-sub-title-container mt-1">
       <div fxFlex="70" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start center">
-        <fa-icon class="page-title-img mr-1" [icon]="faHistory"></fa-icon>
+        <fa-icon class="page-title-img mr-1" [icon]="faHistory" />
         <span class="page-title">Invoices History</span>
       </div>
       <div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div fxLayout="column" fxFlex="100" class="table-container" [perfectScrollbar]>
-      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
+      <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate" />
       <table #table mat-table fxFlex="100" matSort [matSortActive]="tableSetting.sortBy" [matSortDirection]="tableSetting.sortOrder" [dataSource]="invoices" [ngClass]="{'error-border': errorMessage !== ''}">
         <ng-container matColumnDef="status">
           <th *matHeaderCellDef mat-header-cell mat-sort-header arrowPosition="before" matTooltip="Status"></th>
@@ -101,7 +101,7 @@
           <th *matHeaderCellDef mat-header-cell>
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="1" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
               </mat-select>
             </div>
@@ -109,7 +109,7 @@
           <td *matCellDef="let invoice" mat-cell fxLayoutAlign="end center">
             <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
               <mat-select placeholder="Actions" tabindex="4" class="mr-0">
-                <mat-select-trigger></mat-select-trigger>
+                <mat-select-trigger />
                 <mat-option (click)="onInvoiceClick(invoice)">View Info</mat-option>
                 <mat-option (click)="onRefreshInvoice(invoice)">Refresh</mat-option>
               </mat-select>
@@ -128,6 +128,6 @@
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
     </div>
-    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true"></mat-paginator>
+    <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
   </div>
 </div>

src/app/eclair/transactions/payment-information-modal/payment-information.component.html

@@ -18,42 +18,42 @@
             <span class="foreground-secondary-text">{{(payment.firstPartTimestamp) | date:'dd/MMM/y HH:mm'}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">ID</h4>
             <span class="foreground-secondary-text">{{payment.id}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Payment Hash</h4>
             <span class="foreground-secondary-text">{{payment.paymentHash}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Payment Preimage</h4>
             <span class="foreground-secondary-text">{{payment.paymentPreimage}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Recipient Node</h4>
             <span class="foreground-secondary-text">{{payment.recipientNodeAlias}}</span>
           </div>
         </div>
-        <mat-divider class="w-100 my-1"></mat-divider>   
+        <mat-divider class="w-100 my-1" />   
         <div *ngIf="description" fxLayout="row">
           <div fxFlex="100">
             <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
             <span class="foreground-secondary-text">{{description}}</span>
           </div>
         </div>
-        <mat-divider *ngIf="description" class="w-100 my-1"></mat-divider>   
+        <mat-divider *ngIf="description" class="w-100 my-1" />   
         <div fxLayout="row">
           <div fxFlex="100">
             <mat-accordion>
@@ -75,14 +75,14 @@
                       <span class="foreground-secondary-text">{{(part.timestamp) | date:'dd/MMM/y HH:mm'}}</span>
                     </div>
                   </div>
-                  <mat-divider class="w-100 my-1"></mat-divider>
+                  <mat-divider class="w-100 my-1" />
                   <div fxLayout="row">
                     <div fxFlex="100">
                       <h4 fxLayoutAlign="start" class="font-bold-500">ID</h4>
                       <span class="overflow-wrap foreground-secondary-text">{{part.id}}</span>
                     </div>
                   </div>
-                  <mat-divider class="w-100 my-1"></mat-divider>
+                  <mat-divider class="w-100 my-1" />
                   <div fxLayout="row">
                     <div fxFlex="100">
                       <h4 fxLayoutAlign="start" class="font-bold-500">To Channel</h4>