mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2026-08-13 12:33:07 +02:00
Rebalancing and sign/verify UX
Rebalancing and sign/verify UX
This commit is contained in:
Shahana Farooqui
parent
93dc8b4d26
commit
c4bf2f9ef3
17 changed files with 127 additions and 38 deletions
File diff suppressed because one or more lines are too long
1
angular/7.7f08905f1852962f28bb.js
Normal file
1
angular/7.7f08905f1852962f28bb.js
Normal file
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="16x16" href="assets/images/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
|
||||
<link rel="stylesheet" href="styles.005cfaa29a6270e890a9.css"></head>
|
||||
<link rel="stylesheet" href="styles.08e149af9f1299f2561a.css"></head>
|
||||
<body>
|
||||
<rtl-app></rtl-app>
|
||||
<script src="runtime.bc7e3c8913fcb3cca951.js" defer></script><script src="polyfills-es5.2ae7ace69949ec0a3f00.js" nomodule defer></script><script src="polyfills.3302e98effc5e50a54c2.js" defer></script><script src="main.cb823a6e983a6812fd66.js" defer></script></body>
|
||||
<script src="runtime.f17fd705e09eeeb709a5.js" defer></script><script src="polyfills-es5.2ae7ace69949ec0a3f00.js" nomodule defer></script><script src="polyfills.3302e98effc5e50a54c2.js" defer></script><script src="main.6db34a929866588c1618.js" defer></script></body>
|
||||
</html>
|
||||
|
|
|
|||
1
angular/main.6db34a929866588c1618.js
Normal file
1
angular/main.6db34a929866588c1618.js
Normal file
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++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&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:"a69b5e7729a9d343f7d1",6:"0fc217575a57adec8f25",7:"756b75454a1b6fca6a49"}[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],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&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:"a69b5e7729a9d343f7d1",6:"0fc217575a57adec8f25",7:"7f08905f1852962f28bb"}[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()}([]);
|
||||
File diff suppressed because one or more lines are too long
1
angular/styles.08e149af9f1299f2561a.css
Normal file
1
angular/styles.08e149af9f1299f2561a.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,16 +1,18 @@
|
|||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #form="ngForm">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="5" placeholder="Message" required tabindex="1" name="message"></textarea>
|
||||
<mat-form-field fxLayout="row" fxFlex="100" fxLayoutAlign="start end">
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="1" placeholder="Message to sign" required tabindex="1" (keyup)="onMessageChange()" name="message"></textarea>
|
||||
<mat-error *ngIf="!message">Message is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large h-6">
|
||||
<p>{{signature}}</p>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2">
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="my-1">
|
||||
<button fxFlex="48" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()" type="reset">Clear Field</button>
|
||||
<button *ngIf="message === '' || signedMessage !== message" fxFlex="48" mat-flat-button color="primary" (click)="onSign()" tabindex="3" type="submit">Sign</button>
|
||||
<button *ngIf="message !== '' && signedMessage === message" fxFlex="48" mat-flat-button color="primary" tabindex="4" rtlClipboard [payload]="signature" (copied)="onCopyField($event)" type="button">Copy Signature</button>
|
||||
<button fxFlex="48" mat-flat-button color="primary" (click)="onSign()" tabindex="3" type="submit">Sign</button>
|
||||
</div>
|
||||
<mat-divider [inset]="true" class="my-2"></mat-divider>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><p>Generated Signature</p></div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="bordered-box read-only h-4 padding-gap">{{signature}}</div>
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2">
|
||||
<button fxFlex="48" mat-stroked-button color="primary" tabindex="4" rtlClipboard [payload]="signature" (copied)="onCopyField($event)" type="button">Copy Signature</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ export class SignComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
onMessageChange() {
|
||||
if (this.signedMessage !== this.message) { this.signature = ''; }
|
||||
}
|
||||
|
||||
onCopyField(payload: string) {
|
||||
this.snackBar.open('Signature copied.');
|
||||
this.logger.info('Copied Text: ' + payload);
|
||||
|
|
@ -37,6 +41,7 @@ export class SignComponent implements OnInit, OnDestroy {
|
|||
resetData() {
|
||||
this.message = '';
|
||||
this.signature = '';
|
||||
this.signedMessage = '';
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #form="ngForm">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="5" placeholder="Message" required tabindex="1" name="message"></textarea>
|
||||
<textarea autoFocus matInput [(ngModel)]="message" rows="1" placeholder="Message to verify" required tabindex="1" name="message" (keyup)="onChange()"></textarea>
|
||||
<mat-error *ngIf="!message">Message is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Signature" name="signature" [(ngModel)]="signature" tabindex="2" required #sign="ngModel">
|
||||
<input matInput placeholder="Signature provided" name="signature" [(ngModel)]="signature" tabindex="2" required #sign="ngModel" (keyup)="onChange()">
|
||||
<mat-error *ngIf="!signature">Signature is required.</mat-error>
|
||||
</mat-form-field>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="mt-1 bordered-box padding-gap-large h-6" [ngClass]="{'border-valid': verifyRes?.valid, 'border-invalid': verifyRes?.pubkey && !verifyRes?.valid}">
|
||||
<p>{{verifyRes?.pubkey}}</p>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2">
|
||||
<button fxFlex="48" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()" type="reset">Clear Field</button>
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="my-1">
|
||||
<button fxFlex="48" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()" type="reset">Clear Fields</button>
|
||||
<button fxFlex="48" mat-flat-button color="primary" (click)="onVerify()" tabindex="4" type="submit">Verify</button>
|
||||
</div>
|
||||
<div *ngIf="showVerifyStatus" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<mat-divider [inset]="true" class="my-2"></mat-divider>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
|
||||
<p *ngIf="verifyRes.valid">Pubkey Used</p>
|
||||
<p *ngIf="!verifyRes.valid" class="color-warn" fxLayoutAlign="start center"><mat-icon class="mr-1 icon-small">close</mat-icon>Invalid Signature.</p>
|
||||
</div>
|
||||
<div *ngIf="verifyRes.valid" fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="bordered-box read-only h-4 padding-gap">
|
||||
<p>{{verifyRes?.pubkey}}</p>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2" *ngIf="verifyRes.valid">
|
||||
<button fxFlex="48" mat-stroked-button color="primary" tabindex="5" rtlClipboard [payload]="verifyRes?.pubkey" (copied)="onCopyField($event)" type="button">Copy Pubkey</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { MatSnackBar } from '@angular/material';
|
||||
|
||||
import { DataService } from '../../../shared/services/data.service';
|
||||
import { LoggerService } from '../../../shared/services/logger.service';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-verify',
|
||||
|
|
@ -11,23 +13,42 @@ import { DataService } from '../../../shared/services/data.service';
|
|||
})
|
||||
export class VerifyComponent implements OnInit, OnDestroy {
|
||||
public message = '';
|
||||
public verifiedMessage = '';
|
||||
public signature = '';
|
||||
public verifiedSignature = '';
|
||||
public showVerifyStatus = false;
|
||||
public verifyRes = {pubkey: '', valid: null};
|
||||
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
|
||||
|
||||
constructor(private dataService: DataService) {}
|
||||
constructor(private dataService: DataService, private snackBar: MatSnackBar, private logger: LoggerService) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
onVerify() {
|
||||
if ((!this.message || this.message === '') || (!this.signature || this.signature === '')) { return true; }
|
||||
this.showVerifyStatus = true;
|
||||
this.verifiedMessage = this.message;
|
||||
this.verifiedSignature = this.signature;
|
||||
this.dataService.verifyMessage(this.message, this.signature).pipe(takeUntil(this.unSubs[0])).subscribe(res => { this.verifyRes = res; });
|
||||
}
|
||||
|
||||
onChange() {
|
||||
if (this.verifiedMessage !== this.message || this.verifiedSignature !== this.signature) {
|
||||
this.showVerifyStatus = false;
|
||||
this.verifyRes = {pubkey: '', valid: null};
|
||||
}
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.message = '';
|
||||
this.signature = '';
|
||||
this.verifyRes = null;
|
||||
this.showVerifyStatus = false;
|
||||
}
|
||||
|
||||
onCopyField(payload: string) {
|
||||
this.snackBar.open('Pubkey copied.');
|
||||
this.logger.info('Copied Text: ' + payload);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { Component, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { Subject, forkJoin, of } from 'rxjs';
|
||||
import { takeUntil, take, filter, concatAll, catchError } from 'rxjs/operators';
|
||||
import { Subject, forkJoin } from 'rxjs';
|
||||
import { takeUntil, take } from 'rxjs/operators';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
import { faHistory } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
|
||||
|
|
@ -59,7 +58,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
|
|||
public screenSizeEnum = ScreenSizeEnum;
|
||||
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
|
||||
|
||||
constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private decimalPipe: DecimalPipe, private actions$: Actions) {
|
||||
constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private decimalPipe: DecimalPipe) {
|
||||
this.screenSize = this.commonService.getScreenSize();
|
||||
if(this.screenSize === ScreenSizeEnum.XS) {
|
||||
this.flgSticky = false;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
<mat-card-content class="mt-5px">
|
||||
<div fxLayout="column" class="bordered-box p-2">
|
||||
<p fxLayoutAlign="start center" class="pb-1">Rebalancing for Channel: {{selChannel.chan_id}}</p>
|
||||
<mat-vertical-stepper [linear]="true" #stepper>
|
||||
<mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
|
||||
<mat-step [stepControl]="inputFormGroup">
|
||||
<form [formGroup]="inputFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
|
||||
<ng-template matStepLabel>Enter info to rebalance</ng-template>
|
||||
<ng-template matStepLabel>{{inputFormLabel}}</ng-template>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="48">
|
||||
<input autoFocus matInput (change)="filterActiveChannels()" placeholder="Amount" type="number" step="100" tabindex="1" formControlName="rebalanceAmount" required>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</mat-step>
|
||||
<mat-step [stepControl]="feeFormGroup">
|
||||
<form [formGroup]="feeFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
|
||||
<ng-template matStepLabel>Select rebalance fee</ng-template>
|
||||
<ng-template matStepLabel>{{feeFormLabel}}</ng-template>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
<div fxFlex="75" class="alert">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<strong>Number of Hops: </strong>{{queryRoute && queryRoute.routes && queryRoute.routes.length > 0 && queryRoute.routes[0].hops && queryRoute.routes[0].hops.length ? queryRoute.routes[0].hops.length : 0}}
|
||||
</span>
|
||||
</div>
|
||||
<button mat-stroked-button type="button" tabindex="4" (click)="onEstimateFee()" class="h-35px" matTooltip="Estimate Fee"><mat-icon class="mb-5px">loop</mat-icon></button>
|
||||
<button mat-stroked-button type="button" tabindex="4" (click)="onEstimateFee()" class="h-35px" matTooltip="Re-estimate Fee"><mat-icon class="mb-5px">loop</mat-icon></button>
|
||||
<button fxFlex="15" mat-stroked-button type="button" tabindex="5" class="h-35px" (click)="onUseEstimate()">Use Estimate</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
|
||||
|
|
@ -82,17 +82,18 @@
|
|||
<div fxLayout="column"><span class="foreground-secondary-text">{{paymentRequest}}</span></div>
|
||||
</mat-expansion-panel>
|
||||
<mat-progress-bar fxFlex="100" *ngIf="flgInvoiceGenerated && !flgPaymentSent" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-expansion-panel class="flat-expansion-panel" fxFlex="100">
|
||||
<mat-expansion-panel class="flat-expansion-panel" fxFlex="100" [expanded]="flgInvoiceGenerated && flgPaymentSent">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<span fxLayoutAlign="start center" fxFlex="100">{{!flgInvoiceGenerated && !flgPaymentSent ? 'Payment waiting for Invoice' : (!flgPaymentSent ? 'Processing payment...' : (paymentStatus?.error ? 'Payment failed' : 'Payment and Rebalancing successful'))}}<mat-icon *ngIf="flgPaymentSent" class="ml-1 icon-small">{{paymentStatus?.error ? 'close' : 'check'}}</mat-icon></span>
|
||||
<span fxLayoutAlign="start center" fxFlex="100">{{!flgInvoiceGenerated && !flgPaymentSent ? 'Payment waiting for Invoice' : (!flgPaymentSent ? 'Processing payment...' : (paymentStatus?.error ? 'Payment failed' : 'Payment successful'))}}<mat-icon *ngIf="flgPaymentSent" class="ml-1 icon-small">{{paymentStatus?.error ? 'close' : 'check'}}</mat-icon></span>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div fxLayout="column" *ngIf="!paymentStatus; else paymentStatusBlock"></div>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
<button mat-stroked-button color="primary" type="button" (click)="stepper.reset()" class="mr-1">Clear Field</button>
|
||||
<h4 *ngIf="flgInvoiceGenerated && flgPaymentSent" fxLayoutAlign="start" class="font-bold-500 mt-1">{{paymentStatus && paymentStatus.payment_hash ? 'Rebalance Successful.' : 'Rabalance Failed.'}}</h4>
|
||||
<div class="mt-1" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
||||
<button mat-stroked-button color="primary" type="button" (click)="flgInvoiceGenerated=false;flgPaymentSent=false;stepper.reset()" class="mr-1">Clear Fields</button>
|
||||
<button mat-flat-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, filter } from 'rxjs/operators';
|
||||
import { Actions, act } from '@ngrx/effects';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
|
@ -31,13 +32,15 @@ export class ChannelRebalanceComponent implements OnInit, OnDestroy {
|
|||
public paymentStatus: any = null;
|
||||
public flgInvoiceGenerated = false;
|
||||
public flgPaymentSent = false;
|
||||
public inputFormLabel = 'Enter info to rebalance';
|
||||
public feeFormLabel = 'Select rebalance fee';
|
||||
isLinear = false;
|
||||
inputFormGroup: FormGroup;
|
||||
feeFormGroup: FormGroup;
|
||||
statusFormGroup: FormGroup;
|
||||
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
|
||||
|
||||
constructor(public dialogRef: MatDialogRef<ChannelRebalanceComponent>, @Inject(MAT_DIALOG_DATA) public data: ChannelInformation, private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, private lndEffects: LNDEffects, private formBuilder: FormBuilder) { }
|
||||
constructor(public dialogRef: MatDialogRef<ChannelRebalanceComponent>, @Inject(MAT_DIALOG_DATA) public data: ChannelInformation, private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, private lndEffects: LNDEffects, private formBuilder: FormBuilder, private decimalPipe: DecimalPipe) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.selChannel = this.data.channel;
|
||||
|
|
@ -89,6 +92,42 @@ export class ChannelRebalanceComponent implements OnInit, OnDestroy {
|
|||
this.store.dispatch(new RTLActions.GetQueryRoutes({destPubkey: this.inputFormGroup.controls.selRebalancePeer.value.remote_pubkey, amount: this.inputFormGroup.controls.rebalanceAmount.value, outgoingChanId: this.selChannel.chan_id}));
|
||||
}
|
||||
|
||||
stepSelectionChanged(event: any) {
|
||||
switch (event.selectedIndex) {
|
||||
case 0:
|
||||
this.inputFormLabel = 'Enter info to rebalance';
|
||||
this.feeFormLabel = 'Select rebalance fee';
|
||||
break;
|
||||
|
||||
case 1:
|
||||
if (this.inputFormGroup.controls.rebalanceAmount.value || this.inputFormGroup.controls.selRebalancePeer.value.remote_alias) {
|
||||
this.inputFormLabel = 'Rebalancing Amount: ' + (this.decimalPipe.transform(this.inputFormGroup.controls.rebalanceAmount.value ? this.inputFormGroup.controls.rebalanceAmount.value : 0)) + ' Sats | Peer: ' + (this.inputFormGroup.controls.selRebalancePeer.value.remote_alias ? this.inputFormGroup.controls.selRebalancePeer.value.remote_alias : (this.inputFormGroup.controls.selRebalancePeer.value.remote_pubkey.substring(0, 15) + '...'));
|
||||
} else {
|
||||
this.inputFormLabel = 'Enter info to rebalance';
|
||||
}
|
||||
this.feeFormLabel = 'Select rebalance fee';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
if (this.inputFormGroup.controls.rebalanceAmount.value || this.inputFormGroup.controls.selRebalancePeer.value.remote_alias) {
|
||||
this.inputFormLabel = 'Rebalancing Amount: ' + (this.decimalPipe.transform(this.inputFormGroup.controls.rebalanceAmount.value ? this.inputFormGroup.controls.rebalanceAmount.value : 0)) + ' Sats | Peer: ' + (this.inputFormGroup.controls.selRebalancePeer.value.remote_alias ? this.inputFormGroup.controls.selRebalancePeer.value.remote_alias : (this.inputFormGroup.controls.selRebalancePeer.value.remote_pubkey.substring(0, 15) + '...'));
|
||||
} else {
|
||||
this.inputFormLabel = 'Enter info to rebalance';
|
||||
}
|
||||
if (this.queryRoute && this.queryRoute.routes && this.queryRoute.routes.length > 0 && (this.queryRoute.routes[0].total_fees_msat || (this.queryRoute.routes[0].hops && this.queryRoute.routes[0].hops.length))) {
|
||||
this.feeFormLabel = this.feeFormGroup.controls.selFeeLimitType.value.placeholder + ': ' + this.decimalPipe.transform(this.feeFormGroup.controls.feeLimit.value ? this.feeFormGroup.controls.feeLimit.value : 0) + ' | Hops: ' + this.queryRoute.routes[0].hops.length;
|
||||
} else {
|
||||
this.feeFormLabel = 'Select rebalance fee';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
this.inputFormLabel = 'Enter info to rebalance';
|
||||
this.feeFormLabel = 'Select rebalance fee';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onUseEstimate() {
|
||||
this.feeFormGroup.controls.selFeeLimitType.setValue(this.feeLimitTypes[0]);
|
||||
this.feeFormGroup.controls.feeLimit.setValue((this.queryRoute.routes && this.queryRoute.routes.length > 0 && this.queryRoute.routes[0].total_fees) ? this.queryRoute.routes[0].total_fees : 0);
|
||||
|
|
|
|||
|
|
@ -391,6 +391,9 @@
|
|||
border: 1px solid $foreground-divider;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
&.read-only {
|
||||
background-color: $hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel {
|
||||
|
|
@ -513,6 +516,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.color-warn {
|
||||
color: $warn-color;
|
||||
}
|
||||
|
||||
.fill-warn {
|
||||
fill: $warn-color;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border: 1px solid $foreground-secondary-text;
|
||||
color: $foreground-secondary-text;
|
||||
|
|
@ -567,4 +578,5 @@
|
|||
color: $foreground-secondary-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -762,8 +762,8 @@ body {
|
|||
height: 40rem !important;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 6rem !important;
|
||||
.h-4 {
|
||||
height: 4rem !important;
|
||||
}
|
||||
|
||||
.h-35px {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue