LND Invoices Page Layout incomplete

LND Invoices Page Layout incomplete

src/app/lnd/store/lnd.effects.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unsafe-optional-chaining */
 import { Injectable, OnDestroy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
@@ -15,20 +16,23 @@ import { SessionService } from '../../shared/services/session.service';
 import { GetInfo, Fees, BlockchainBalance, NetworkInfo, GraphNode, Transaction, SwitchReq, ListInvoices, PendingChannelsSummary, UTXO, ListPayments, SavePeer, SaveInvoice, SaveChannel, CloseChannel, FetchInvoices, FetchPayments, SendPayment, LightningNode, GetNewAddress, ChannelsTransaction, GetQueryRoutes, QueryRoutes, InitWallet, ChannelLookup, SetRestoreChannelsList } from '../../shared/models/lndModels';
 import { InvoiceInformationComponent } from '../transactions/invoice-information-modal/invoice-information.component';
 import { ErrorMessageComponent } from '../../shared/components/data-modal/error-message/error-message.component';
-import { RTLActions, LNDActions, AlertTypeEnum, APICallStatusEnum, FEE_LIMIT_TYPES, PAGE_SIZE, UI_MESSAGES, LNDWSEventTypeEnum } from '../../shared/services/consts-enums-functions';
+import { RTLActions, LNDActions, AlertTypeEnum, APICallStatusEnum, FEE_LIMIT_TYPES, PAGE_SIZE, UI_MESSAGES, LNDWSEventTypeEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../shared/services/consts-enums-functions';
 import { closeAllDialogs, closeSpinner, logout, openAlert, openSnackBar, openSpinner, setApiUrl, setNodeData } from '../../store/rtl.actions';
 import { RTLState } from '../../store/rtl.state';
 
 import { backupChannels, fetchBalanceBlockchain, fetchClosedChannels, fetchFees, fetchInfoLND, fetchInvoices, fetchNetwork, fetchPayments, fetchPeers, fetchPendingChannels, fetchTransactions, setForwardingHistory, setPeers, setQueryRoutes, setRestoreChannelsList, updateLNDAPICallStatus, updateInvoice, fetchChannels, updatePayment, fetchPageSettings } from './lnd.actions';
-import { allAPIsCallStatus, lndNodeInformation } from './lnd.selector';
-import { ApiCallsListLND } from '../../shared/models/apiCallsPayload';
+import { allAPIsCallStatus, lndNodeInformation, lndPageSettings } from './lnd.selector';
+import { ApiCallsListLND, ApiCallStatusPayload } from '../../shared/models/apiCallsPayload';
 import { WebSocketClientService } from '../../shared/services/web-socket.service';
+import { PageSettings } from '../../shared/models/pageSettings';
 
 @Injectable()
 export class LNDEffects implements OnDestroy {
 
   dialogRef: any;
   CHILD_API_URL = API_URL + '/lnd';
+  private invoicesPageSize = PAGE_SIZE;
+  private paymentsPageSize = PAGE_SIZE;
   private flgInitialized = false;
   private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
 
@@ -706,7 +710,7 @@ export class LNDEffects implements OnDestroy {
           this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'SendPayment', status: APICallStatusEnum.COMPLETED } }));
           if (sendRes.payment_error) {
             if (action.payload.allowSelfPayment) {
-              this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: PAGE_SIZE, reversed: true } }));
+              this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
               return {
                 type: LNDActions.SEND_PAYMENT_STATUS_LND,
                 payload: sendRes
@@ -723,9 +727,9 @@ export class LNDEffects implements OnDestroy {
             this.store.dispatch(closeSpinner({ payload: action.payload.uiMessage }));
             this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'SendPayment', status: APICallStatusEnum.COMPLETED } }));
             this.store.dispatch(fetchChannels());
-            this.store.dispatch(fetchPayments({ payload: { max_payments: PAGE_SIZE, reversed: true } }));
+            this.store.dispatch(fetchPayments({ payload: { max_payments: this.paymentsPageSize, reversed: true } }));
             if (action.payload.allowSelfPayment) {
-              this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: PAGE_SIZE, reversed: true } }));
+              this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
             } else {
               let msg = 'Payment Sent Successfully.';
               if (sendRes.payment_route && sendRes.payment_route.total_fees_msat) {
@@ -743,7 +747,7 @@ export class LNDEffects implements OnDestroy {
           this.logger.error('Error: ' + JSON.stringify(err));
           if (action.payload.allowSelfPayment) {
             this.handleErrorWithoutAlert('SendPayment', action.payload.uiMessage, 'Send Payment Failed.', err);
-            this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: PAGE_SIZE, reversed: true } }));
+            this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
             return of({
               type: LNDActions.SEND_PAYMENT_STATUS_LND,
               payload: { error: this.commonService.extractErrorMessage(err) }
@@ -1193,12 +1197,15 @@ export class LNDEffects implements OnDestroy {
     mergeMap(() => {
       this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.INITIATED } }));
       return this.httpClient.get(environment.PAGE_SETTINGS_API).pipe(
-        map((pageSettings: any) => {
-          this.logger.info(pageSettings);
+        map((settings: any) => {
+          this.logger.info(settings);
           this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.COMPLETED } }));
+          this.invoicesPageSize = (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices') || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')).recordsPerPage;
+          this.paymentsPageSize = (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments') || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')).recordsPerPage;
+          this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
           return {
             type: LNDActions.SET_PAGE_SETTINGS_LND,
-            payload: pageSettings || []
+            payload: settings || []
           };
         }),
         catchError((err: any) => {
@@ -1264,8 +1271,8 @@ export class LNDEffects implements OnDestroy {
     this.store.dispatch(fetchPeers());
     this.store.dispatch(fetchNetwork());
     this.store.dispatch(fetchFees()); // Fetches monthly forwarding history as well, to count total number of events
-    this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: 10, reversed: true } }));
     this.store.dispatch(fetchPayments({ payload: { max_payments: 100000, reversed: true } }));
+    // Fetching Invoices in pagesettings to get page size
     // this.store.dispatch(fetchPayments({ payload: { max_payments: 10, reversed: true } }));
     // this.store.dispatch(getAllLightningTransactions());
   }

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

@@ -30,13 +30,34 @@
       <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
       <table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
         <ng-container matColumnDef="state">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Invoice State" matTooltipPosition="right"></th>
           <td mat-cell *matCellDef="let invoice">
             <span *ngIf="invoice?.state === 'OPEN'" class="dot grey" matTooltip="Open" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'SETTLED'" class="dot green" matTooltip="Settled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'ACCEPTED'" class="dot yellow" matTooltip="Accepted" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'CANCELED'" class="dot red" matTooltip="Cancelled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
         </ng-container>
+        <ng-container matColumnDef="private">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is Private" matTooltipPosition="right"></th>
+          <td mat-cell *matCellDef="let invoice">
+            <span *ngIf="invoice.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+            <span *ngIf="!invoice.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="is_keysend">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is Keysend" matTooltipPosition="right"></th>
+          <td mat-cell *matCellDef="let invoice">
+            <span *ngIf="invoice.is_keysend" class="mr-1" matTooltip="Keysend" matTooltipPosition="right"><fa-icon [icon]="faArrowsTurnToDots"></fa-icon></span>
+            <span *ngIf="!invoice.is_keysend" class="mr-1" matTooltip="Non Keysend Invoices" matTooltipPosition="right"><fa-icon [icon]="faArrowsTurnRight"></fa-icon></span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="is_amp">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Is AMP" matTooltipPosition="right"></th>
+          <td mat-cell *matCellDef="let invoice">
+            <span *ngIf="!invoice.is_amp" class="mr-1" matTooltip="Non Atomic Payment" matTooltipPosition="right"><fa-icon [icon]="faMoneyBill1"></fa-icon></span>
+            <span *ngIf="invoice.is_amp" class="mr-1" matTooltip="Atomic Multi-path Payment" matTooltipPosition="right"><fa-icon [icon]="faBurst"></fa-icon></span>
+          </td>
+        </ng-container>
         <ng-container matColumnDef="creation_date">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
           <td mat-cell *matCellDef="let invoice">
@@ -49,11 +70,67 @@
         <ng-container matColumnDef="memo">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Memo </th>
           <td mat-cell *matCellDef="let invoice">
-            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
               <span class="ellipsis-child">{{invoice?.memo}}</span>
             </div>
           </td>
         </ng-container>
+        <ng-container matColumnDef="r_preimage">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Preimage </th>
+          <td mat-cell *matCellDef="let invoice">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+              <span class="ellipsis-child">{{invoice?.r_preimage}}</span>
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="r_hash">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Preimage Hash </th>
+          <td mat-cell *matCellDef="let invoice">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+              <span class="ellipsis-child">{{invoice?.r_hash}}</span>
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="payment_addr">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Payment Address </th>
+          <td mat-cell *matCellDef="let invoice">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+              <span class="ellipsis-child">{{invoice?.payment_addr}}</span>
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="payment_request">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Payment Request </th>
+          <td mat-cell *matCellDef="let invoice">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+              <span class="ellipsis-child">{{invoice?.payment_request}}</span>
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="description_hash">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Description Hash </th>
+          <td mat-cell *matCellDef="let invoice">
+            <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+              <span class="ellipsis-child">{{invoice?.description_hash}}</span>
+            </div>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="expiry">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Expiry </th>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.expiry | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="cltv_expiry">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> CLTV Expiry </th>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.cltv_expiry | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="add_index">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Add Index </th>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.add_index | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="settle_index">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Settle Index </th>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.settle_index | number}} </span></td>
+        </ng-container>
         <ng-container matColumnDef="value">
           <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
           <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.value | number}} </span></td>

src/app/lnd/transactions/invoices/lightning-invoices.component.scss

@@ -1,6 +1,12 @@
-.mat-column-memo {
-  flex: 0 0 15%;
-  width: 15%;
+.mat-column-state, .mat-column-private,
+.mat-column-is_keysend, .mat-column-is_amp {
+  width: 2rem;
+}
+
+.mat-column-memo, .mat-column-r_preimage, .mat-column-r_hash,
+.mat-column-payment_addr, .mat-column-payment_request, .mat-column-description_hash {
+  flex: 0 0 10%;
+  width: 10%;
   & .ellipsis-parent {
     display: flex;
   }

src/app/lnd/transactions/invoices/lightning-invoices.component.ts

@@ -4,7 +4,7 @@ import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { Actions } from '@ngrx/effects';
-import { faHistory } from '@fortawesome/free-solid-svg-icons';
+import { faHistory, faEye, faEyeSlash, faBurst, faMoneyBill1, faArrowsTurnToDots, faArrowsTurnRight } from '@fortawesome/free-solid-svg-icons';
 import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -38,7 +38,13 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   @Input() calledFrom = 'transactions'; // Transactions/home
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public faEye = faEye;
+  public faEyeSlash = faEyeSlash;
   public faHistory = faHistory;
+  public faArrowsTurnToDots = faArrowsTurnToDots;
+  public faArrowsTurnRight = faArrowsTurnRight;
+  public faBurst = faBurst;
+  public faMoneyBill1 = faMoneyBill1;
   public PAGE_ID = 'transactions';
   public tableSetting: TableSetting = { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'creation_date', sortOrder: SortOrderEnum.DESCENDING };
   public selNode: SelNodeChild | null = {};
@@ -51,7 +57,7 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   public displayedColumns: any[] = [];
   public invoicePaymentReq = '';
   public invoicesData: Invoice[] = [];
-  public invoices: any;
+  public invoices: any = new MatTableDataSource<Invoice>([]);
   public information: GetInfo = {};
   public selFilter = '';
   public private = false;

src/app/shared/models/lndModels.ts

@@ -354,6 +354,9 @@ export interface Invoice {
   htlcs?: InvoiceHTLC[];
   features?: any;
   is_keysend?: boolean;
+  payment_addr?: string;
+  is_amp?: boolean;
+  amp_invoice_state?: any;
 }
 
 export interface ListInvoices {

src/app/shared/services/consts-enums-functions.ts

@@ -984,8 +984,8 @@ export const LND_TABLES_DEF = {
       allowedColumns: ['creation_date', 'payment_hash', 'fee', 'value', 'hops']
     },
     invoices: {
-      maxColumns: 5,
-      allowedColumns: ['creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat']
+      maxColumns: 9,
+      allowedColumns: ['private', 'is_keysend', 'is_amp', 'creation_date', 'settle_date', 'memo', 'r_preimage', 'r_hash', 'payment_addr', 'payment_request', 'description_hash', 'expiry', 'cltv_expiry', 'add_index', 'settle_index', 'value', 'amt_paid_sat']
     }
   },
   routing: {