Decreased setting options, Add Peer from Channel Etc

Decreased setting options, Add Peer from Channel Etc
pull/260/head
Shahana Farooqui 5 years ago
parent 0f9028225d
commit 7496a8bb33

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -9,8 +9,8 @@
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest"> <link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.68b5db6d46c8a4bbf9c7.css"></head> <link rel="stylesheet" href="styles.d07dc67a35b9abcd0a53.css"></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.eee9164e2e2dec3d9bc1.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.36e09f96013a23748bb9.js"></script></body> <script src="runtime.6edf1f3a1034d9a5f4a5.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.368027beb9333dd54a43.js"></script></body>
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9e71a210a8bdc5ba9df9",6:"644c1ac5d2c628ad6ca6",7:"420d59318eed00c450bb"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]); !function(e){function r(r){for(var n,a,i=r[0],f=r[1],c=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9e71a210a8bdc5ba9df9",6:"dfa73b14c8f9ab8497d6",7:"ff5704455f365df695b2"}[e]+".js"}(e);var f=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",f.name="ChunkLoadError",f.type=n,f.request=u,t[1](f)}o[e]=void 0}};var c=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],f=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var l=f;t()}([]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -39,7 +39,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
private userIdle: UserIdleService, private router: Router, private sessionService: SessionService, private breakpointObserver: BreakpointObserver) {} private userIdle: UserIdleService, private router: Router, private sessionService: SessionService, private breakpointObserver: BreakpointObserver) {}
ngOnInit() { ngOnInit() {
this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.TabletPortrait, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge]) this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.TabletPortrait, Breakpoints.Small, Breakpoints.Medium])
.pipe(takeUntil(this.unSubs[5])) .pipe(takeUntil(this.unSubs[5]))
.subscribe((matches) => { .subscribe((matches) => {
if(matches.breakpoints[Breakpoints.XSmall]) { if(matches.breakpoints[Breakpoints.XSmall]) {
@ -51,11 +51,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
} else if(matches.breakpoints[Breakpoints.Small] || matches.breakpoints[Breakpoints.Medium]) { } else if(matches.breakpoints[Breakpoints.Small] || matches.breakpoints[Breakpoints.Medium]) {
this.commonService.setScreenSize(ScreenSizeEnum.MD); this.commonService.setScreenSize(ScreenSizeEnum.MD);
this.smallScreen = false; this.smallScreen = false;
} else if(matches.breakpoints[Breakpoints.Large] || matches.breakpoints[Breakpoints.XLarge]) {
this.commonService.setScreenSize(ScreenSizeEnum.LG);
this.smallScreen = false;
} else { } else {
this.commonService.setScreenSize(ScreenSizeEnum.MD); this.commonService.setScreenSize(ScreenSizeEnum.LG);
this.smallScreen = false; this.smallScreen = false;
} }
}); });

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card [ngClass]="{'flip': redirectedWithPeer}"> <mat-card class="mat-card-original" [ngClass]="{'flip': redirectedWithPeer}">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Open Channel</h2> <h2>Open Channel</h2>
@ -65,9 +65,9 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content fxFlex="100" fxLayout="column"> <mat-card-content fxFlex="100" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter"> <input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter">
</mat-form-field> </mat-form-field>

@ -128,8 +128,8 @@ export class CLChannelsComponent implements OnInit, OnDestroy {
yesBtnText: 'Update', yesBtnText: 'Update',
message: confirmationMsg, message: confirmationMsg,
flgShowInput: true, getInputs: [ flgShowInput: true, getInputs: [
{placeholder: 'Base Fee msat', inputType: 'number', inputValue: 1000}, {placeholder: 'Base Fee msat', inputType: 'number', inputValue: 1000, width: 50},
{placeholder: 'Fee Rate mili msat', inputType: 'number', inputValue: 1, min: 1} {placeholder: 'Fee Rate mili msat', inputType: 'number', inputValue: 1, min: 1, width: 50}
] ]
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
@ -171,8 +171,8 @@ export class CLChannelsComponent implements OnInit, OnDestroy {
message: confirmationMsg, message: confirmationMsg,
flgShowInput: true, flgShowInput: true,
getInputs: [ getInputs: [
{placeholder: 'Base Fee msat', inputType: 'number', inputValue: (this.myChanPolicy.fee_base_msat === '') ? 0 : this.myChanPolicy.fee_base_msat}, {placeholder: 'Base Fee msat', inputType: 'number', inputValue: (this.myChanPolicy.fee_base_msat === '') ? 0 : this.myChanPolicy.fee_base_msat, width: 50},
{placeholder: 'Fee Rate mili msat', inputType: 'number', inputValue: this.myChanPolicy.fee_rate_milli_msat, min: 1} {placeholder: 'Fee Rate mili msat', inputType: 'number', inputValue: this.myChanPolicy.fee_rate_milli_msat, min: 1, width: 50}
] ]
}})); }}));
}); });

@ -35,9 +35,9 @@
</mat-card> </mat-card>
</div> --> </div> -->
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content class="table-card-content"> <mat-card-content class="table-card-content">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Invoices</h2> <h2>Invoices</h2>
@ -38,9 +38,9 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content class="table-card-content"> <mat-card-content class="table-card-content">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Lookups</h2> <h2>Lookups</h2>
@ -29,7 +29,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap" *ngIf="lookupValue && flgSetLookupValue"> <div class="padding-gap" *ngIf="lookupValue && flgSetLookupValue">
<mat-card [ngClass]="{'error-border': flgLoading[0]==='error'}"> <mat-card class="mat-card-original" [ngClass]="{'error-border': flgLoading[0]==='error'}">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>{{selectedField.name}} Details</h2> <h2>{{selectedField.name}} Details</h2>

@ -84,7 +84,7 @@
</mat-card> </mat-card>
</div> </div>
<div fxFlex="100" class="padding-gap"> <div fxFlex="100" class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Receive Funds</h2> <h2>Receive Funds</h2>
@ -129,7 +129,7 @@
</mat-card> </mat-card>
</div> </div>
<div fxFlex="100" class="padding-gap"> <div fxFlex="100" class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Send Funds</h2> <h2>Send Funds</h2>
@ -171,11 +171,6 @@
(click)="resetData()">Clear</button> (click)="resetData()">Clear</button>
</div> </div>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Query Routes</h2> <h2>Query Routes</h2>
@ -38,7 +38,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content class="table-card-content"> <mat-card-content class="table-card-content">
<div perfectScrollbar class="table-container"> <div perfectScrollbar class="table-container">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar> <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Verify and Send Payments</h2> <h2>Verify and Send Payments</h2>
@ -31,9 +31,9 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content class="table-card-content"> <mat-card-content class="table-card-content">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>

@ -114,7 +114,7 @@ export class CLPaymentsComponent implements OnInit, OnDestroy {
message: reorderedDecodedPayment, message: reorderedDecodedPayment,
noBtnText: 'Cancel', noBtnText: 'Cancel',
yesBtnText: 'Send', yesBtnText: 'Send',
flgShowInput: true, getInputs: [{placeholder: 'Amount (mSats)', inputType: 'number', inputValue: ''}] flgShowInput: true, getInputs: [{placeholder: 'Amount (mSats)', inputType: 'number', inputValue: '', width: 30}]
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(take(1)) .pipe(take(1))

@ -1,6 +1,6 @@
<div fxLayout="column"> <div fxLayout="column">
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-header> <mat-card-header>
<mat-card-subtitle> <mat-card-subtitle>
<h2>Connect Peer</h2> <h2>Connect Peer</h2>
@ -25,9 +25,9 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card> <mat-card class="mat-card-original">
<mat-card-content class="table-card-content"> <mat-card-content class="table-card-content">
<div fxLayout="row" fxLayoutAlign="start start"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch">
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>

@ -3,14 +3,15 @@
<h4 fxLayoutAlign="start" class="font-bold-500">Lightning</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Lightning</h4>
<div class="foreground-secondary-text">{{balances.lightning | number}} (Sats)</div> <div class="foreground-secondary-text">{{balances.lightning | number}} (Sats)</div>
</div> </div>
<div fxFlex="25" fxLayoutAlign="start start"></div>
<div fxFlex="33"> <div fxFlex="33">
<h4 fxLayoutAlign="start" class="font-bold-500">On-chain</h4> <h4 fxLayoutAlign="start" class="font-bold-500">On-chain</h4>
<div class="foreground-secondary-text">{{balances.onchain | number}} (Sats)</div> <div class="foreground-secondary-text">{{balances.onchain | number}} (Sats)</div>
</div> </div>
<div fxFlex="34" fxLayoutAlign="start start"></div>
</div> </div>
<div fxLayout="column" fxFlex="60" fxLayoutAlign="start start" *ngIf="flgInfoUpdate"> <div fxLayout="column" fxFlex="60" fxLayoutAlign="start start" *ngIf="flgInfoUpdate">
<ngx-charts-pie-chart class="balances-info-pie-chart" style="margin-top: -4rem;" <ngx-charts-pie-chart class="balances-info-pie-chart" style="margin-top: -5rem;"
[view]="graphView"
[explodeSlices]="true" [explodeSlices]="true"
[legend]="true" [legend]="true"
[legendTitle]="''" [legendTitle]="''"

@ -8,14 +8,17 @@ import { Component, OnChanges, Input } from '@angular/core';
export class BalancesInfoComponent implements OnChanges { export class BalancesInfoComponent implements OnChanges {
@Input() balances = { onchain: 0, lightning: 0 }; @Input() balances = { onchain: 0, lightning: 0 };
@Input() flgInfoUpdate = false; @Input() flgInfoUpdate = false;
@Input() cardHeight = '';
flgBalanceUpdated = false; flgBalanceUpdated = false;
totalBalances = [{'name': 'Lightning', 'value': 0}, {'name': 'On-chain', 'value': 0}]; totalBalances = [{'name': 'Lightning', 'value': 0}, {'name': 'On-chain', 'value': 0}];
maxBalanceValue = 0; maxBalanceValue = 0;
xAxisLabel = 'Balance'; xAxisLabel = 'Balance';
graphView = [200, 120];
constructor() {} constructor() {}
ngOnChanges() { ngOnChanges() {
this.graphView = [200, Math.floor(+this.cardHeight.substring(0, this.cardHeight.length-2))*2];
this.totalBalances = [{'name': 'Lightning', 'value': this.balances.lightning}, {'name': 'On-chain', 'value': this.balances.onchain}]; this.totalBalances = [{'name': 'Lightning', 'value': this.balances.lightning}, {'name': 'On-chain', 'value': this.balances.onchain}];
this.maxBalanceValue = (this.balances.lightning > this.balances.onchain) ? this.balances.lightning : this.balances.onchain; this.maxBalanceValue = (this.balances.lightning > this.balances.onchain) ? this.balances.lightning : this.balances.onchain;
Object.assign(this, this.totalBalances); Object.assign(this, this.totalBalances);

@ -19,7 +19,7 @@ export class FeeInfoComponent implements OnChanges {
this.totalFees = [{'name': 'Monthly', 'value': this.fees.month_fee_sum}, {'name': 'Weekly', 'value': this.fees.week_fee_sum}, {'name': 'Daily ', 'value': this.fees.day_fee_sum}]; this.totalFees = [{'name': 'Monthly', 'value': this.fees.month_fee_sum}, {'name': 'Weekly', 'value': this.fees.week_fee_sum}, {'name': 'Daily ', 'value': this.fees.day_fee_sum}];
let e = Math.ceil(Math.log(this.fees.month_fee_sum + 1) / Math.LN10); let e = Math.ceil(Math.log(this.fees.month_fee_sum + 1) / Math.LN10);
let m = Math.pow(10, e - 1); let m = Math.pow(10, e - 1);
this.maxFeeValue = Math.ceil(this.fees.month_fee_sum / m) * m || 100; this.maxFeeValue = (Math.ceil(this.fees.month_fee_sum / m) * m) / 5 || 100;
Object.assign(this, this.totalFees); Object.assign(this, this.totalFees);
} else { } else {
this.totalFees = [{'name': 'Monthly', 'value': 0}, {'name': 'Weekly', 'value': 0}, {'name': 'Daily', 'value': 0}]; this.totalFees = [{'name': 'Monthly', 'value': 0}, {'name': 'Weekly', 'value': 0}, {'name': 'Daily', 'value': 0}];

@ -37,7 +37,7 @@
<mat-card-content class="dashboard-card-content w-100" fxFlex="{{card.id !== 'transactions' ? 95 : 100}}"> <mat-card-content class="dashboard-card-content w-100" fxFlex="{{card.id !== 'transactions' ? 95 : 100}}">
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100"> <div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
<rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info> <rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
<rtl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [flgInfoUpdate]="flgChildInfoUpdated" [balances]="balances" [ngClass]="{'error-border': flgLoading[2]==='error' || flgLoading[5]==='error'}"></rtl-balances-info> <rtl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [cardHeight]="merchantCardHeight" [flgInfoUpdate]="flgChildInfoUpdated" [balances]="balances" [ngClass]="{'error-border': flgLoading[2]==='error' || flgLoading[5]==='error'}"></rtl-balances-info>
<rtl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'inboundLiq'" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-channel-liquidity-info> <rtl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'inboundLiq'" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-channel-liquidity-info>
<rtl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'outboundLiq'" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-channel-liquidity-info> <rtl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'outboundLiq'" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-channel-liquidity-info>
<span fxLayout="column" fxFlex="100" *ngSwitchCase="'transactions'"> <span fxLayout="column" fxFlex="100" *ngSwitchCase="'transactions'">

@ -164,8 +164,8 @@ export class HomeComponent implements OnInit, OnDestroy {
this.totalOutboundLiquidity = 0; this.totalOutboundLiquidity = 0;
this.allChannels = rtlStore.allChannels.filter(channel => channel.active === true); this.allChannels = rtlStore.allChannels.filter(channel => channel.active === true);
this.allChannelsCapacity = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels, 'balancedness'))); this.allChannelsCapacity = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels, 'balancedness')));
this.allInboundChannels = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels, 'remote_balance'))); this.allInboundChannels = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels.filter(channel => channel.remote_balance > 0), 'remote_balance')));
this.allOutboundChannels = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels, 'local_balance'))); this.allOutboundChannels = JSON.parse(JSON.stringify(this.commonService.sortDescByKey(this.allChannels.filter(channel => channel.local_balance > 0), 'local_balance')));
this.allChannels.forEach(channel => { this.allChannels.forEach(channel => {
this.totalInboundLiquidity = this.totalInboundLiquidity + +channel.remote_balance; this.totalInboundLiquidity = this.totalInboundLiquidity + +channel.remote_balance;
this.totalOutboundLiquidity = this.totalOutboundLiquidity + +channel.local_balance; this.totalOutboundLiquidity = this.totalOutboundLiquidity + +channel.local_balance;

@ -1,7 +1,7 @@
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start end" class="padding-gap-x page-title-container"> <div fxLayout="row" fxLayoutAlign="start end" class="padding-gap-x page-title-container">
<fa-icon [icon]="faSearch" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faSearch" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Lookups</span> <span class="page-title">Graph Lookups</span>
</div> </div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap">
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start"> <mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">

@ -126,7 +126,7 @@ export class OnChainSendComponent implements OnInit, OnDestroy {
noBtnText: 'Cancel', noBtnText: 'Cancel',
yesBtnText: 'Authorize And Sweep All', yesBtnText: 'Authorize And Sweep All',
flgShowInput: true, flgShowInput: true,
getInputs: [{placeholder: 'Enter Login Password', inputType: 'password', inputValue: ''}] getInputs: [{placeholder: 'Enter Login Password', inputType: 'password', inputValue: '', width: 30}]
}})); }}));
} else { } else {
this.store.dispatch(new RTLActions.OpenConfirmation({ data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {

@ -1,5 +1,5 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="page-sub-title-container w-100"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" fxFlex="100" class="page-sub-title-container w-100">
<div fxFlex="70"> <div fxFlex="70">
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Transaction History</span> <span class="page-title">Transaction History</span>
@ -50,7 +50,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

@ -32,17 +32,19 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnDestroy {
public flgSticky = false; public flgSticky = false;
public pageSize = PAGE_SIZE; public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()]; private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) { constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {
let ss = this.commonService.getScreenSize(); this.screenSize = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS) { if(this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'actions']; this.displayedColumns = ['time_stamp_str', 'amount', 'actions'];
} else if(ss === ScreenSizeEnum.SM) { } else if(this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'total_fees', 'actions']; this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'total_fees', 'actions'];
} else if(ss === ScreenSizeEnum.MD) { } else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions']; this.displayedColumns = ['time_stamp_str', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions'];
} else { } else {

@ -1,14 +1,17 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { take, takeUntil, filter } from 'rxjs/operators';
import { Actions } from '@ngrx/effects';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { MatSort } from '@angular/material'; import { MatSort } from '@angular/material';
import { Peer, GetInfo } from '../../../../shared/models/lndModels'; import { Peer, GetInfo } from '../../../../shared/models/lndModels';
import { TRANS_TYPES, ScreenSizeEnum } from '../../../../shared/services/consts-enums-functions'; import { TRANS_TYPES, ScreenSizeEnum, AlertTypeEnum, DataTypeEnum } from '../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../shared/services/logger.service'; import { LoggerService } from '../../../../shared/services/logger.service';
import { CommonService } from '../../../../shared/services/common.service'; import { CommonService } from '../../../../shared/services/common.service';
import { RTLEffects } from '../../../../store/rtl.effects';
import { LNDEffects } from '../../../store/lnd.effects';
import * as RTLActions from '../../../../store/rtl.actions'; import * as RTLActions from '../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../store/rtl.reducers'; import * as fromRTLReducer from '../../../../store/rtl.reducers';
@ -31,17 +34,19 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
public spendUnconfirmed = false; public spendUnconfirmed = false;
public isPrivate = false; public isPrivate = false;
public showAdvanced = false; public showAdvanced = false;
public peerAddress = '';
public newlyAddedPeer = '';
public screenSizeEnum = ScreenSizeEnum; public screenSizeEnum = ScreenSizeEnum;
public screenSize = ''; public screenSize = '';
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()]; private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private commonService: CommonService) { constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private commonService: CommonService, private actions$: Actions) {
this.screenSize = this.commonService.getScreenSize(); this.screenSize = this.commonService.getScreenSize();
} }
ngOnInit() { ngOnInit() {
this.store.select('lnd') this.store.select('lnd')
.pipe(takeUntil(this.unsub[0])) .pipe(takeUntil(this.unSubs[0]))
.subscribe((rtlStore) => { .subscribe((rtlStore) => {
this.information = rtlStore.information; this.information = rtlStore.information;
this.peers = rtlStore.peers; this.peers = rtlStore.peers;
@ -53,6 +58,11 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
this.totalBalance = +rtlStore.blockchainBalance.total_balance; this.totalBalance = +rtlStore.blockchainBalance.total_balance;
this.logger.info(rtlStore); this.logger.info(rtlStore);
}); });
this.actions$.pipe(takeUntil(this.unSubs[1]),
filter((action) => action.type === RTLActions.SET_PEERS))
.subscribe((action: RTLActions.SetPeers) => {
this.selectedPeer = this.newlyAddedPeer;
});
} }
onOpenChannel() { onOpenChannel() {
@ -89,11 +99,54 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
} }
addNewPeer() { addNewPeer() {
console.warn('ADD NEW PEER' + this.selectedPeer); this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM,
alertTitle: 'Add Peer',
titleMessage: 'Enter Peer Address',
message: '',
noBtnText: 'Cancel',
yesBtnText: 'Add Peer',
flgShowInput: true,
getInputs: [
{placeholder: 'Lightning Address (pubkey OR pubkey@ip:port)', inputType: DataTypeEnum.STRING, inputValue: '', width: 100}
]
}}));
this.rtlEffects.closeConfirm
.pipe(take(1))
.subscribe(confirmRes => {
if (confirmRes) {
this.peerAddress = confirmRes[0].inputValue;
const pattern = '^([a-zA-Z0-9]){1,66}@(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$';
const deviderIndex = this.peerAddress.search('@');
let pubkey = '';
let host = '';
if (new RegExp(pattern).test(this.peerAddress)) {
pubkey = this.peerAddress.substring(0, deviderIndex);
host = this.peerAddress.substring(deviderIndex + 1);
this.connectPeerWithParams(pubkey, host);
} else {
pubkey = (deviderIndex > -1) ? this.peerAddress.substring(0, deviderIndex) : this.peerAddress;
this.store.dispatch(new RTLActions.OpenSpinner('Getting Node Address...'));
this.store.dispatch(new RTLActions.FetchGraphNode(pubkey));
this.lndEffects.setGraphNode
.pipe(take(1))
.subscribe(graphNode => {
host = (undefined === graphNode.node.addresses || undefined === graphNode.node.addresses[0].addr) ? '' : graphNode.node.addresses[0].addr;
this.connectPeerWithParams(pubkey, host);
});
}
}
});
} }
connectPeerWithParams(pubkey: string, host: string) {
this.newlyAddedPeer = pubkey;
this.store.dispatch(new RTLActions.OpenSpinner('Adding Peer...'));
this.store.dispatch(new RTLActions.SaveNewPeer({pubkey: pubkey, host: host, perm: false, showOpenChannelModal: false}));
}
ngOnDestroy() { ngOnDestroy() {
this.unsub.forEach(completeSub => { this.unSubs.forEach(completeSub => {
completeSub.next(); completeSub.next();
completeSub.complete(); completeSub.complete();
}); });

@ -7,7 +7,7 @@
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" (click)="onBackupChannels({})">Backup All</button> <button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" (click)="onBackupChannels({})">Backup All</button>
</div> </div>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -43,5 +43,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>

@ -1,5 +1,5 @@
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -49,5 +49,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>

@ -1,5 +1,5 @@
<div fxLayout="column" class="padding-gap"> <div fxLayout="column" class="padding-gap">
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter"> <input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter">
@ -12,8 +12,8 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel"> <td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}"> <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span *ngIf="channel.active" class="dot green"></span> <span *ngIf="channel.active" class="dot green" matTooltip="Active" matTooltipPosition="right"></span>
<span *ngIf="!channel.active" class="dot yellow"></span> <span *ngIf="!channel.active" class="dot yellow" matTooltip="Inactive" matTooltipPosition="right"></span>
<span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span> <span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span>
</div> </div>
</td> </td>
@ -68,5 +68,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>

@ -93,9 +93,9 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
message: confirmationMsg, message: confirmationMsg,
flgShowInput: true, flgShowInput: true,
getInputs: [ getInputs: [
{placeholder: 'Base Fee (mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 1000}, {placeholder: 'Base Fee (mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 1000, width: 32},
{placeholder: 'Fee Rate (mili mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 1, min: 1}, {placeholder: 'Fee Rate (mili mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 1, min: 1, width: 32},
{placeholder: 'Time Lock Delta', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 144} {placeholder: 'Time Lock Delta', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: 144, width: 32}
] ]
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
@ -137,9 +137,9 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
message: confirmationMsg, message: confirmationMsg,
flgShowInput: true, flgShowInput: true,
getInputs: [ getInputs: [
{placeholder: 'Base Fee (mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: (this.myChanPolicy.fee_base_msat === '') ? 0 : this.myChanPolicy.fee_base_msat}, {placeholder: 'Base Fee (mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: (this.myChanPolicy.fee_base_msat === '') ? 0 : this.myChanPolicy.fee_base_msat, width: 32},
{placeholder: 'Fee Rate (mili mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: this.myChanPolicy.fee_rate_milli_msat, min: 1}, {placeholder: 'Fee Rate (mili mSat)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: this.myChanPolicy.fee_rate_milli_msat, min: 1, width: 32},
{placeholder: 'Time Lock Delta', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: this.myChanPolicy.time_lock_delta} {placeholder: 'Time Lock Delta', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: this.myChanPolicy.time_lock_delta, width: 32}
] ]
}})); }}));
}); });

@ -12,7 +12,7 @@
<div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap" *ngIf="!allRestoreExists && channels && channels.data.length && channels.data.length>0"> <div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap" *ngIf="!allRestoreExists && channels && channels.data.length && channels.data.length>0">
<h4 fxFlex="100">Restore folder location: {{selNode.channelBackupPath}}/restore</h4> <h4 fxFlex="100">Restore folder location: {{selNode.channelBackupPath}}/restore</h4>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -43,5 +43,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>

@ -11,67 +11,69 @@
</button> </button>
</div> </div>
</form> </form>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2"> <div fxLayout="column" fxLayoutAlign="start stretch">
<div fxFlex="70"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container mt-2">
<fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon> <div fxFlex="70">
<span class="page-title">Connected Peers</span> <fa-icon [icon]="faUsers" class="page-title-img mr-1"></fa-icon>
</div> <span class="page-title">Connected Peers</span>
<mat-form-field fxFlex="30">
<div fxLayout="row" fxLayoutAlign="start start">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</div> </div>
</mat-form-field> <mat-form-field fxFlex="30">
</div> <div fxLayout="row" fxLayoutAlign="start start">
<div perfectScrollbar fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar> </div>
<table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}"> </mat-form-field>
<ng-container matColumnDef="alias"> </div>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th> <div perfectScrollbar class="table-container">
<td mat-cell *matCellDef="let peer"> {{peer?.alias}} </td> <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
</ng-container> <table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="pub_key"> <ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pub Key </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer"> <td mat-cell *matCellDef="let peer"> {{peer?.alias}} </td>
<div> {{peer?.pub_key}} </div> </ng-container>
</td> <ng-container matColumnDef="pub_key">
</ng-container> <th mat-header-cell *matHeaderCellDef mat-sort-header> Pub Key </th>
<ng-container matColumnDef="sat_sent"> <td mat-cell *matCellDef="let peer">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> <div> {{peer?.pub_key}} </div>
{{information?.smaller_currency_unit}} Sent </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
</ng-container>
<ng-container matColumnDef="sat_recv">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
{{information?.smaller_currency_unit}} Recv </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td>
</ng-container>
<ng-container matColumnDef="ping_time">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Ping </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="pl-3">
<div fxFlex="100" 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-option (click)="onPeerClick(peer, $event)">View Info</mat-option>
<mat-option (click)="onOpenChannel(peer)">Open Channel</mat-option>
<mat-option (click)="onPeerDetach(peer)">Disconnect</mat-option>
</mat-select>
</div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_peer"> <ng-container matColumnDef="sat_sent">
<td mat-footer-cell *matFooterCellDef colspan="4"> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
<p *ngIf="!peers.data || peers.data.length<1">No connected peers.</p> {{information?.smaller_currency_unit}} Sent </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
</ng-container>
<ng-container matColumnDef="sat_recv">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
{{information?.smaller_currency_unit}} Recv </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td>
</ng-container>
<ng-container matColumnDef="ping_time">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Ping </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span>
</td> </td>
</ng-container> </ng-container>
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers.data && peers.data.length>1}"></tr> <ng-container matColumnDef="actions">
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr> <th mat-header-cell *matHeaderCellDef class="px-3"><span fxLayoutAlign="end center">Actions</span></th>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.pub_key === newlyAddedPeer && flgAnimate) ? 'added' : 'notAdded'"></tr> <td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="pl-3">
</table> <div fxFlex="100" 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-option (click)="onPeerClick(peer, $event)">View Info</mat-option>
<mat-option (click)="onOpenChannel(peer)">Open Channel</mat-option>
<mat-option (click)="onPeerDetach(peer)">Disconnect</mat-option>
</mat-select>
</div>
</td>
</ng-container>
<ng-container matColumnDef="no_peer">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="!peers.data || peers.data.length<1">No connected peers.</p>
</td>
</ng-container>
<tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers.data && peers.data.length>1}"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.pub_key === newlyAddedPeer && flgAnimate) ? 'added' : 'notAdded'"></tr>
</table>
</div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator>
</div> </div>

@ -42,17 +42,19 @@ export class PeersComponent implements OnInit, OnDestroy {
public flgSticky = false; public flgSticky = false;
public pageSize = PAGE_SIZE; public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()]; private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private actions$: Actions, private commonService: CommonService) { constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private actions$: Actions, private commonService: CommonService) {
let ss = this.commonService.getScreenSize(); this.screenSize = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS) { if(this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = [ 'alias', 'actions']; this.displayedColumns = [ 'alias', 'actions'];
} else if(ss === ScreenSizeEnum.SM) { } else if(this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = [ 'alias', 'sat_sent', 'sat_recv', 'actions']; this.displayedColumns = [ 'alias', 'sat_sent', 'sat_recv', 'actions'];
} else if(ss === ScreenSizeEnum.MD) { } else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'ping_time', 'actions']; this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
} else { } else {
@ -121,7 +123,7 @@ export class PeersComponent implements OnInit, OnDestroy {
connectPeerWithParams(pubkey: string, host: string) { connectPeerWithParams(pubkey: string, host: string) {
this.newlyAddedPeer = pubkey; this.newlyAddedPeer = pubkey;
this.store.dispatch(new RTLActions.OpenSpinner('Adding Peer...')); this.store.dispatch(new RTLActions.OpenSpinner('Adding Peer...'));
this.store.dispatch(new RTLActions.SaveNewPeer({pubkey: pubkey, host: host, perm: false})); this.store.dispatch(new RTLActions.SaveNewPeer({pubkey: pubkey, host: host, perm: false, showOpenChannelModal: true}));
} }
onPeerClick(selRow: Peer, event: any) { onPeerClick(selRow: Peer, event: any) {

@ -1,5 +1,5 @@
<div fxLayout="column" fxFlex="100"> <div fxLayout="column" fxLayoutAlign="start stretch">
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container">
<div fxFlex="70"></div> <div fxFlex="70"></div>
<mat-form-field fxFlex="30"> <mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -39,5 +39,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>

@ -27,13 +27,15 @@ export class ForwardingHistoryComponent implements OnInit, OnChanges {
public flgSticky = false; public flgSticky = false;
public pageSize = PAGE_SIZE; public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>) { constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>) {
let ss = this.commonService.getScreenSize(); this.screenSize = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS || ss === ScreenSizeEnum.SM) { if(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['timestamp', 'fee', 'actions']; this.displayedColumns = ['timestamp', 'fee', 'actions'];
} else if(ss === ScreenSizeEnum.MD) { } else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions']; this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions'];
} else { } else {

@ -131,21 +131,27 @@ export class LNDEffects implements OnDestroy {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.SetPeers((postRes && postRes.length > 0) ? postRes : [])); this.store.dispatch(new RTLActions.SetPeers((postRes && postRes.length > 0) ? postRes : []));
const peerToAddChannelMessage = { if(action.payload.showOpenChannelModal) {
peer: postRes[0], const peerToAddChannelMessage = {
information: lndData.information, peer: postRes[0],
balance: lndData.blockchainBalance.total_balance || 0 information: lndData.information,
}; balance: lndData.blockchainBalance.total_balance || 0
return { };
type: RTLActions.OPEN_ALERT, return {
payload: { width: '50%', data: { type: RTLActions.OPEN_ALERT,
type: AlertTypeEnum.INFORMATION, payload: { width: '50%', data: {
alertTitle: 'Peer Connected', type: AlertTypeEnum.INFORMATION,
message: peerToAddChannelMessage, alertTitle: 'Peer Connected',
newlyAdded: true, message: peerToAddChannelMessage,
component: OpenChannelComponent newlyAdded: true,
}} component: OpenChannelComponent
}; }}
};
} else {
return {
type: RTLActions.VOID
}
}
}), }),
catchError((err: any) => { catchError((err: any) => {
this.handleErrorWithAlert('ERROR', 'Add Peer Failed', this.CHILD_API_URL + environment.PEERS_API, err); this.handleErrorWithAlert('ERROR', 'Add Peer Failed', this.CHILD_API_URL + environment.PEERS_API, err);

@ -3,7 +3,7 @@
<mat-form-field fxFlex="100" fxLayoutAlign="end start"> <mat-form-field fxFlex="100" fxLayoutAlign="end start">
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo"> <input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex="100" fxFlex.gt-sm="40" fxLayoutAlign="start end"> <mat-form-field [fxFlex]="showDetails ? '40' : '100'" fxLayoutAlign="start end">
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" step="100" min="1" tabindex="2" name="invoiceValue"> <input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" step="100" min="1" tabindex="2" name="invoiceValue">
<span matSuffix> {{information?.smaller_currency_unit}} </span> <span matSuffix> {{information?.smaller_currency_unit}} </span>
<mat-hint>{{invoiceValueHint}}</mat-hint> <mat-hint>{{invoiceValueHint}}</mat-hint>
@ -36,7 +36,7 @@
</div> </div>
</form> </form>
<div fxLayout="column" fxLayoutAlign="start stretch" *ngIf="showDetails"> <div fxLayout="column" fxLayoutAlign="start stretch" *ngIf="showDetails">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"> <div fxFlex="70">
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Invoices History</span> <span class="page-title">Invoices History</span>
@ -51,8 +51,8 @@
<ng-container matColumnDef="creation_date"> <ng-container matColumnDef="creation_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
<td mat-cell *matCellDef="let invoice"> <td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.settled" class="dot green" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span> <span *ngIf="invoice.settled" class="dot green" matTooltip="Settled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!invoice.settled" class="dot yellow"></span> <span *ngIf="!invoice.settled" class="dot yellow" matTooltip="Unsettled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
{{invoice.creation_date_str}}</td> {{invoice.creation_date_str}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="memo"> <ng-container matColumnDef="memo">
@ -69,7 +69,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-3 pr-3"><span fxLayoutAlign="end center">Actions</span></th> <th mat-header-cell *matHeaderCellDef class="pl-3 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let invoice" class="pl-3"> <td mat-cell *matCellDef="let invoice" [ngClass]="{'pl-3': screenSize !== screenSizeEnum.XS}">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onInvoiceClick(invoice, $event)">View Info</button> <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onInvoiceClick(invoice, $event)">View Info</button>
</td> </td>
</ng-container> </ng-container>
@ -82,7 +82,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo == newlyAddedInvoiceMemo && row.value == newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" class="row-invoices"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo == newlyAddedInvoiceMemo && row.value == newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" class="row-invoices"></tr>
</table> </table>
<mat-paginator [length]="totalInvoices" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [length]="totalInvoices" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

@ -18,8 +18,8 @@
</button> </button>
</div> </div>
</form> </form>
<div fxLayout="column" fxLayoutAlign="start stretch" *ngIf="showDetails"> <div fxLayout="column" fxLayoutAlign="start stretch" [ngClass]="{'display-none': !showDetails}">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2"> <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"> <div fxFlex="70">
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Payments History</span> <span class="page-title">Payments History</span>
@ -67,6 +67,6 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.payment_hash === newlyAddedPayment && flgAnimate) ? 'added' : 'notAdded'"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.payment_hash === newlyAddedPayment && flgAnimate) ? 'added' : 'notAdded'"></tr>
</table> </table>
</div> </div>
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator> <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-4"></mat-paginator>
</div> </div>
</div> </div>

@ -43,17 +43,19 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
public flgSticky = false; public flgSticky = false;
public pageSize = PAGE_SIZE; public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()]; private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects) { constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects) {
let ss = this.commonService.getScreenSize(); this.screenSize = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS) { if(this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['creation_date', 'actions']; this.displayedColumns = ['creation_date', 'actions'];
} else if(ss === ScreenSizeEnum.SM) { } else if(this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['creation_date', 'value', 'actions']; this.displayedColumns = ['creation_date', 'value', 'actions'];
} else if(ss === ScreenSizeEnum.MD) { } else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false; this.flgSticky = false;
this.displayedColumns = ['creation_date', 'fee', 'value', 'actions']; this.displayedColumns = ['creation_date', 'fee', 'value', 'actions'];
} else { } else {
@ -131,7 +133,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
yesBtnText: 'Send Payment', yesBtnText: 'Send Payment',
flgShowInput: true, flgShowInput: true,
getInputs: [ getInputs: [
{placeholder: 'Amount (Sats)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: ''} {placeholder: 'Amount (Sats)', inputType: DataTypeEnum.NUMBER.toLowerCase(), inputValue: '', width: 30}
] ]
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm

@ -6,6 +6,7 @@ import { faExchangeAlt, faChartPie } from '@fortawesome/free-solid-svg-icons';
import { LoggerService } from '../../shared/services/logger.service'; import { LoggerService } from '../../shared/services/logger.service';
import * as fromRTLReducer from '../../store/rtl.reducers'; import * as fromRTLReducer from '../../store/rtl.reducers';
import { UserPersonaEnum } from '../../shared/services/consts-enums-functions';
@Component({ @Component({
selector: 'rtl-transactions', selector: 'rtl-transactions',
@ -26,7 +27,11 @@ export class TransactionsComponent implements OnInit, OnDestroy {
.pipe(takeUntil(this.unSubs[0])) .pipe(takeUntil(this.unSubs[0]))
.subscribe((rtlStore) => { .subscribe((rtlStore) => {
this.currencyUnits = rtlStore.nodeSettings.currencyUnits; this.currencyUnits = rtlStore.nodeSettings.currencyUnits;
this.balances = [{title: 'Local Capacity', dataValue: rtlStore.totalLocalBalance, tooltip: 'Amount you can send'}, {title: 'Remote Capacity', dataValue: rtlStore.totalRemoteBalance, tooltip: 'Amount you can receive'}]; if(rtlStore.nodeSettings.userPersona === UserPersonaEnum.OPERATOR) {
this.balances = [{title: 'Local Capacity', dataValue: rtlStore.totalLocalBalance, tooltip: 'Amount you can send'}, {title: 'Remote Capacity', dataValue: rtlStore.totalRemoteBalance, tooltip: 'Amount you can receive'}];
} else {
this.balances = [{title: 'Outbound Capacity', dataValue: rtlStore.totalLocalBalance, tooltip: 'Amount you can send'}, {title: 'Inbound Capacity', dataValue: rtlStore.totalRemoteBalance, tooltip: 'Amount you can receive'}];
}
this.logger.info(rtlStore); this.logger.info(rtlStore);
}); });
} }

@ -4,126 +4,45 @@
</div> </div>
<div fxLayout="column" class="padding-gap-x settings-container"> <div fxLayout="column" class="padding-gap-x settings-container">
<mat-card> <mat-card>
<mat-card-content fxLayout="column" class="card-content-gap"> <mat-card-content fxLayout="column" class="card-content-gap mt-1">
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start center"> <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="space-between stretch">
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="start stretch" class="w-100"> <mat-form-field fxFlex="32" fxLayoutAlign="start end">
<div fxFlex="25"> <mat-select [(ngModel)]="selNode.settings.userPersona" placeholder="User Persona" tabindex="1" required name="userPersona">
<div fxFlex.gt-md="50" fxFlex="90"> <mat-option *ngFor="let userPersona of userPersonas" [value]="userPersona">
<h4>User Persona</h4> {{userPersona | titlecase}}
<mat-select [(ngModel)]="selNode.settings.userPersona" placeholder="Select User Persona" tabindex="1" required name="userPersona"> </mat-option>
<mat-option *ngFor="let userPersona of userPersonas" [value]="userPersona"> </mat-select>
{{userPersona | titlecase}} </mat-form-field>
</mat-option> <mat-form-field fxFlex="32" fxLayoutAlign="start end" *ngIf="appConfig.nodes.length && appConfig.nodes.length > 1">
</mat-select> <mat-select [(ngModel)]="appConfig.defaultNodeIndex" placeholder="Default Node" tabindex="1" required name="defaultNode">
</div> <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index">
</div> {{node.lnNode}} ({{node.lnImplementation}})
<div fxFlex="25" *ngIf="appConfig.nodes.length && appConfig.nodes.length > 1"> </mat-option>
<div fxFlex.gt-md="70" fxFlex="90"> </mat-select>
<h4>Default Node</h4> </mat-form-field>
<mat-select [(ngModel)]="appConfig.defaultNodeIndex" placeholder="Default Node" tabindex="1" required name="defaultNode"> <mat-form-field fxFlex="32" fxLayoutAlign="start end">
<mat-option *ngFor="let node of appConfig.nodes" [value]="node.index"> <mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit">
{{node.lnNode}} ({{node.lnImplementation}}) <mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
</mat-option> {{currencyUnit.id}}
</mat-select> </mat-option>
</div> </mat-select>
</div> </mat-form-field>
<div fxFlex="25">
<div fxFlex.gt-md="50" fxFlex="90">
<h4>Currency Unit</h4>
<mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit">
<mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
{{currencyUnit.id}}
</mat-option>
</mat-select>
</div>
</div>
<div fxFlex="25" *ngIf="selNode.lnImplementation !== 'CLT'">
<div fxFlex.gt-md="50" fxFlex="90">
<h4>BTC</h4>
<div fxLayoutAlign="start center">
<span class="slider-text">{{smallerCurrencyUnit}}</span>
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.satsToBTC"
(change)="toggleSettings('satsToBTC')" labelPosition="before"></mat-slide-toggle>
<span class="slider-text">{{currencyUnit}}</span>
</div>
</div>
</div>
</div>
</div> </div>
<div *ngIf="showSettingOption" fxLayout="column" fxLayout.gt-sm="row wrap" <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="start stretch" class="mt-1">
fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between" class="mt-4"> <div fxLayout="column" fxFlex="25" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="start space-between">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <h4>Mode</h4>
<mat-divider class="mb-2"></mat-divider> <mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()">
</div> <mat-radio-button *ngFor="let themeMode of themeModes" [value]="themeMode" [ngClass]="{'mr-4': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">{{themeMode.name}}
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> </mat-radio-button>
<div fxFlex="50"> </mat-radio-group>
<div fxFlex="70">
<h4>Font Size</h4>
<mat-radio-group color="primary" [(ngModel)]="selectedFontSize" (change)="chooseFontSize()">
<mat-radio-button *ngFor="let fontSize of fontSizes" [value]="fontSize">{{fontSize.name}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div fxFlex="50">
<h4>Menu</h4>
<div fxLayoutAlign="start center">
<span class="slider-text">Horizontal</span>
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.menu === 'vertical'"
(change)="toggleSettings('menu', $event)" labelPosition="before"></mat-slide-toggle>
<span class="slider-text">Vertical</span>
</div>
</div>
</div> </div>
<div *ngIf="showSettingOption && selNode?.settings?.menu === 'vertical'" fxFlex="100" fxLayout="row" <div fxLayout="column" fxFlex="9"></div>
fxLayoutAlign="space-between center"> <div fxLayout="column" fxFlex="40">
<div fxFlex="50"> <h4>Skins</h4>
<div fxFlex="70"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
<h4>Menu Type</h4> <span *ngFor="let themeColor of themeColors">
<mat-radio-group color="primary" [(ngModel)]="selectedMenuType" (change)="chooseMenuType()"> <div [class]="themeColor" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor}" (click)="changeThemeColor(themeColor)"></div>
<mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType.name}}</mat-radio-button> </span>
</mat-radio-group>
</div>
</div>
<div fxFlex="25">
<h4>Side Navigation</h4>
<div fxLayoutAlign="start center">
<span class="slider-text">Closed</span>
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavOpened"
(change)="toggleSettings('flgSidenavOpened')" labelPosition="before"></mat-slide-toggle>
<span class="slider-text">Open</span>
</div>
</div>
<div fxFlex="25">
<h4>Side Navigation</h4>
<div fxLayoutAlign="start center">
<span class="slider-text">Unpinned</span>
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavPinned"
(change)="toggleSettings('flgSidenavPinned')" labelPosition="before"></mat-slide-toggle>
<span class="slider-text">Pinned</span>
</div>
</div>
</div>
</div>
<div *ngIf="showSettingOption" fxLayout="column" fxLayoutAlign="start space-between" class="mt-4">
<mat-divider class="mb-2"></mat-divider>
<div fxLayout="row" fxLayoutAlign="space-between start">
<div fxFlex="50">
<div fxFlex="40">
<h4>Mode</h4>
<mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()">
<mat-radio-button *ngFor="let themeMode of themeModes" [value]="themeMode">{{themeMode.name}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div fxLayout="column" fxFlex="50">
<h4>Skins</h4>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
<span *ngFor="let themeColor of themeColors">
<div [class]="themeColor" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor}" (click)="changeThemeColor(themeColor)"></div>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -5,7 +5,7 @@ import { Store } from '@ngrx/store';
import { faTools } from '@fortawesome/free-solid-svg-icons'; import { faTools } from '@fortawesome/free-solid-svg-icons';
import { CURRENCY_UNITS, AlertTypeEnum, UserPersonaEnum } from '../../services/consts-enums-functions'; import { CURRENCY_UNITS, AlertTypeEnum, UserPersonaEnum, ScreenSizeEnum } from '../../services/consts-enums-functions';
import { LightningNode, Settings, RTLConfiguration, GetInfoRoot } from '../../models/RTLconfig'; import { LightningNode, Settings, RTLConfiguration, GetInfoRoot } from '../../models/RTLconfig';
import { LoggerService } from '../../services/logger.service'; import { LoggerService } from '../../services/logger.service';
import { CommonService } from '../../services/common.service'; import { CommonService } from '../../services/common.service';
@ -40,11 +40,14 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
public appConfig: RTLConfiguration; public appConfig: RTLConfiguration;
public previousSettings: Settings; public previousSettings: Settings;
public previousDefaultNode = 0; public previousDefaultNode = 0;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
unsubs: Array<Subject<void>> = [new Subject(), new Subject()]; unsubs: Array<Subject<void>> = [new Subject(), new Subject()];
@Output('done') done: EventEmitter<void> = new EventEmitter(); @Output('done') done: EventEmitter<void> = new EventEmitter();
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>) {} constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>) {
this.screenSize = this.commonService.getScreenSize();
}
ngOnInit() { ngOnInit() {
this.store.select('root') this.store.select('root')

@ -10,7 +10,7 @@
<div fxLayout="column"> <div fxLayout="column">
<p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p> <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
<div *ngIf="flgShowInput" fxLayoutAlign="space-between center"> <div *ngIf="flgShowInput" fxLayoutAlign="space-between center">
<mat-form-field *ngFor="let getInput of getInputs; index as i" [fxFlex]="(getInputs.length > 0 && getInputs.length < 3) ? 25: ((100/getInputs.length) - getInputs.length)"> <mat-form-field *ngFor="let getInput of getInputs; index as i" [fxFlex]="getInput.width">
<input matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [type]="getInput.inputType" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required> <input matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [type]="getInput.inputType" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
</mat-form-field> </mat-form-field>
</div> </div>

@ -37,7 +37,6 @@ export class ConfirmationMessageComponent implements OnInit {
this.data.titleMessage = 'Please Check Server Connection'; this.data.titleMessage = 'Please Check Server Connection';
} }
} }
this.logger.warn(this.messageObjs);
} }
onClose(dialogRes: any) { onClose(dialogRes: any) {

@ -1,120 +1,133 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start"> <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
<mat-select *ngIf="appConfig.nodes.length > 1" [value]="selNode" (selectionChange)="onNodeSelectionChange($event.value)" class="m-2 multi-node-select"> <div fxLayout="column" fxFlex="90" fxLayoutAlign="start stretch" class="w-100">
<mat-option *ngFor="let node of appConfig.nodes" [value]="node" tabindex="1"> <mat-select *ngIf="appConfig.nodes.length > 1" [value]="selNode" (selectionChange)="onNodeSelectionChange($event.value)" class="m-2 multi-node-select">
{{node.lnNode}} ({{node.lnImplementation}}) <mat-option *ngFor="let node of appConfig.nodes" [value]="node" tabindex="1">
</mat-option> {{node.lnNode}} ({{node.lnImplementation}})
</mat-select> </mat-option>
<mat-divider class="w-100 mb-1"></mat-divider> </mat-select>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'regular'"> <mat-divider class="w-100"></mat-divider>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}"> <mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'regular'">
<div (click)="onChildNavClicked(node)"> <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"> <div (click)="onChildNavClicked(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon> <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<span *ngIf="settings.menuType === 'regular'">{{node.name}}</span> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
<span *ngIf="settings.menuType === 'regular'">{{node.name}}</span>
</div>
</div> </div>
</div> </mat-tree-node>
</mat-tree-node> <mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle> <div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent"> <div fxFlex="89" fxLayoutAlign="start center">
<div fxFlex="89" fxLayoutAlign="start center"> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon> <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}</span> <span>{{node.name}}</span>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div> </div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name" <div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
fxLayoutAlign="end center"> <ng-container matTreeNodeOutlet></ng-container>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'regular' && showLogout">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'compact'">
<mat-tree-node fxLayout="row" matTreeNodeToggle fxLayoutAlign="start center" *matTreeNodeDef="let node"
(click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</div> </div>
<button fxFlex="11" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center"> </mat-nested-tree-node>
<mat-icon class="mat-icon-rtl-mirror"> </mat-tree>
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button> <mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'compact'">
</div> <mat-tree-node fxLayout="row" matTreeNodeToggle fxLayoutAlign="start center" *matTreeNodeDef="let node"
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child"> (click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
<ng-container matTreeNodeOutlet></ng-container> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
</div> <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
</mat-nested-tree-node> <span>{{node.name}}</span>
</mat-tree> </mat-tree-node>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'compact' && showLogout">
<mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node" (click)="onClick(node)"> <mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon> <div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<span>{{node.name}}</span> <div fxFlex="89" fxLayoutAlign="start center">
</mat-tree-node> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
</mat-tree> <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}</span>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'mini'"> </div>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}"> <button fxFlex="11" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
<div (click)="onChildNavClicked(node)"> <mat-icon class="mat-icon-rtl-mirror">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"> {{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon> </button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'mini'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div (click)="onChildNavClicked(node)">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<mat-icon *ngIf="!node.iconType" class="mat-icon-36" matTooltip="{{node.name}}" matTooltipPosition="right">{{node.icon}}</mat-icon>
</div>
</div>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<mat-icon *ngIf="!node.iconType" class="mat-icon-36" matTooltip="{{node.name}}" matTooltipPosition="right">{{node.icon}}</mat-icon>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div> </div>
</div> <div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
</mat-tree-node> <ng-container matTreeNodeOutlet></ng-container>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</div> </div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name" </mat-nested-tree-node>
fxLayoutAlign="end center"> </mat-tree>
<mat-icon class="mat-icon-rtl-mirror"> <mat-divider class="w-100"></mat-divider>
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon> <mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'regular'">
</button> <mat-tree-node *matTreeNodeDef="let node" (click)="onShowData(node)">
</div> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child"> <mat-icon *ngIf="!node.iconType" class="mat-icon-36" matTooltip="{{node.name}}" matTooltipPosition="right">{{node.icon}}</mat-icon>
<ng-container matTreeNodeOutlet></ng-container> <span>{{node.name}}</span>
</div> </mat-tree-node>
</mat-nested-tree-node> </mat-tree>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'mini' && showLogout"> <mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'compact'">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)" fxLayoutAlign="start center"> <mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node" (click)="onShowData(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
</mat-tree-node> <span>{{node.name}}</span>
</mat-tree> </mat-tree-node>
<mat-divider class="w-100 mt-1"></mat-divider> </mat-tree>
<mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'regular'">
<mat-tree-node *matTreeNodeDef="let node" (click)="onShowData(node)"> <mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'mini'">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon> <mat-tree-node *matTreeNodeDef="let node" (click)="onShowData(node)" fxLayoutAlign="start center">
<span>{{node.name}}</span> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
</div>
<div fxLayout="column" fxFlex="10" fxLayoutAlign="end stretch" class="w-100">
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'regular' && showLogout">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'compact'"> <mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'compact' && showLogout">
<mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node" (click)="onShowData(node)"> <mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node" (click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span> <span>{{node.name}}</span>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
<mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData" *ngIf="settings.menuType === 'mini'"> <mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'mini' && showLogout">
<mat-tree-node *matTreeNodeDef="let node" (click)="onShowData(node)" fxLayoutAlign="start center"> <mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon> <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
</div>
</div> </div>

@ -23,6 +23,7 @@ export interface InputData {
min?: number; min?: number;
max?: number; max?: number;
step?: number; step?: number;
width?: number;
} }
export interface OpenChannelAlert { export interface OpenChannelAlert {

@ -7,7 +7,7 @@ export const MENU_DATA: MenuRootNode = {
{id: 3, parentId: 0, name: 'Lightning', iconType: 'FA', icon: faBolt, link: '/lnd/peerschannels', children: [ {id: 3, parentId: 0, name: 'Lightning', iconType: 'FA', icon: faBolt, link: '/lnd/peerschannels', children: [
{id: 31, parentId: 3, name: 'Peers/Channels', iconType: 'FA', icon: faUsers, link: '/lnd/peerschannels'}, {id: 31, parentId: 3, name: 'Peers/Channels', iconType: 'FA', icon: faUsers, link: '/lnd/peerschannels'},
{id: 32, parentId: 3, name: 'Transactions', iconType: 'FA', icon: faExchangeAlt, link: '/lnd/transactions'}, {id: 32, parentId: 3, name: 'Transactions', iconType: 'FA', icon: faExchangeAlt, link: '/lnd/transactions'},
{id: 33, parentId: 3, name: 'Lookup', iconType: 'FA', icon: faSearch, link: '/lnd/lookups'}, {id: 33, parentId: 3, name: 'Graph Lookup', iconType: 'FA', icon: faSearch, link: '/lnd/lookups'},
{id: 34, parentId: 3, name: 'Routing', iconType: 'FA', icon: faProjectDiagram, link: '/lnd/routing'}, {id: 34, parentId: 3, name: 'Routing', iconType: 'FA', icon: faProjectDiagram, link: '/lnd/routing'},
{id: 35, parentId: 3, name: 'Network', iconType: 'FA', icon: faNetworkWired, link: '/lnd/network'} {id: 35, parentId: 3, name: 'Network', iconType: 'FA', icon: faNetworkWired, link: '/lnd/network'}
]}, ]},
@ -16,17 +16,20 @@ export const MENU_DATA: MenuRootNode = {
{id: 6, parentId: 0, name: 'Help', iconType: 'FA', icon: faQuestion, link: '/help'} {id: 6, parentId: 0, name: 'Help', iconType: 'FA', icon: faQuestion, link: '/help'}
], ],
CLChildren: [ CLChildren: [
{id: 1, parentId: 0, name: 'Dashboard', iconType: 'FA', icon: faTachometerAlt, link: '/cl/home'}, {id: 1, parentId: 0, name: 'Home', icon: 'home', link: '/cl/home'},
{id: 2, parentId: 0, name: 'On-chain', iconType: 'FA', icon: faLink, link: '/cl/onchain'}, {id: 2, parentId: 0, name: 'On Chain', icon: 'account_balance_wallet', link: '/cl/onchain'},
{id: 3, parentId: 0, name: 'Lightning', iconType: 'FA', icon: faBolt, link: '/cl/chnlmanage', children: [ {id: 3, parentId: 0, name: 'Peers', icon: 'group', link: '/cl/peers'},
{id: 31, parentId: 3, name: 'Peers/Channels', iconType: 'FA', icon: faUsers, link: '/cl/peers'}, {id: 4, parentId: 0, name: 'Channels', icon: 'settings_ethernet', link: '/cl/chnlmanage'},
{id: 32, parentId: 3, name: 'Transactions', iconType: 'FA', icon: faExchangeAlt, link: '/cl/chnlmanage'}, {id: 5, parentId: 0, name: 'Payments', icon: 'payment', link: '/cl/paymentsend', children: [
{id: 33, parentId: 3, name: 'Lookup', iconType: 'FA', icon: faSearch, link: '/cl/lookups'}, {id: 51, parentId: 5, name: 'Send', icon: 'send', link: '/cl/paymentsend'},
{id: 34, parentId: 3, name: 'Routing', iconType: 'FA', icon: faProjectDiagram, link: '/cl/routing'} {id: 52, parentId: 5, name: 'Query Routes', icon: 'explore', link: '/cl/queryroutes'}
]}, ]},
{id: 4, parentId: 0, name: 'Advanced', iconType: 'FA', icon: faCog, link: '/advanced'}, {id: 6, parentId: 0, name: 'Invoices', icon: 'receipt', link: '/cl/invoices'},
{id: 5, parentId: 0, name: 'Settings', iconType: 'FA', icon: faTools, link: '/settings'}, {id: 7, parentId: 0, name: 'Forwarding History', icon: 'timeline', link: '/cl/forwardinghistory'},
{id: 6, parentId: 0, name: 'Help', iconType: 'FA', icon: faQuestion, link: '/help'} {id: 9, parentId: 0, name: 'Lookups', icon: 'search', link: '/cl/lookups'},
{id: 10, parentId: 0, name: 'Node Config', icon: 'perm_data_setting', link: '/advanced'},
{id: 11, parentId: 0, name: 'Settings', icon: 'settings', link: '/settings'},
{id: 12, parentId: 0, name: 'Help', icon: 'help', link: '/help'}
] ]
}; };

@ -71,7 +71,7 @@
font-size: $small-font-size * 3; font-size: $small-font-size * 3;
} }
.mat-icon-36 { .mat-icon-36 {
font-size: $small-font-size; font-size: $small-font-size * 2;
} }
.btn-close-x { .btn-close-x {
font-size: $small-font-size * 1.5; font-size: $small-font-size * 1.5;
@ -149,7 +149,7 @@
font-size: $regular-font-size * 3; font-size: $regular-font-size * 3;
} }
.mat-icon-36 { .mat-icon-36 {
font-size: $regular-font-size; font-size: $regular-font-size * 2;
} }
.btn-close-x { .btn-close-x {
font-size: $regular-font-size * 1.5; font-size: $regular-font-size * 1.5;
@ -225,7 +225,7 @@
font-size: $large-font-size * 3; font-size: $large-font-size * 3;
} }
.mat-icon-36 { .mat-icon-36 {
font-size: $large-font-size; font-size: $large-font-size * 2;
} }
.btn-close-x { .btn-close-x {
font-size: $large-font-size * 1.5; font-size: $large-font-size * 1.5;

@ -207,6 +207,10 @@
.h-active-link { .h-active-link {
border-bottom: 2px solid white; border-bottom: 2px solid white;
} }
.mat-icon-36 {
color: $foreground-secondary-text;
}
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple), .mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) { .mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {

@ -189,6 +189,11 @@ body {
border-radius: 2px !important; border-radius: 2px !important;
} }
.mat-card-original {
padding: 1.6rem !important;
border-radius: 4px !important;
}
.mat-tab-body-wrapper, .card-content-gap { .mat-tab-body-wrapper, .card-content-gap {
padding: 1.2rem 2.4rem !important; padding: 1.2rem 2.4rem !important;
height: 100%; height: 100%;

@ -293,7 +293,7 @@ export class SetPeers implements Action {
export class SaveNewPeer implements Action { export class SaveNewPeer implements Action {
readonly type = SAVE_NEW_PEER; readonly type = SAVE_NEW_PEER;
constructor(public payload: {pubkey: string, host: string, perm: boolean}) {} constructor(public payload: {pubkey: string, host: string, perm: boolean, showOpenChannelModal: boolean}) {}
} }
export class AddPeer implements Action { export class AddPeer implements Action {

Loading…
Cancel
Save