ECL: On-chain Transactions, Invoice and Payments pagination

Done most of the UI changes to accommodate pagination on transactions, payments and invoices tables but true pagination cannot be implemented till total number of records are missing from the API response.

Once the issue ACINQ/eclair#2855 is fixed, I will uncomment pagination changes in the frontend.

Author: ShahanaFarooqui

backend/controllers/eclair/fees.js

@@ -130,6 +130,12 @@ export const getPayments = (req, res, next) => {
     options.url = req.session.selectedNode.settings.lnServerUrl + '/audit';
     const tillToday = (Math.round(new Date(Date.now()).getTime() / 1000)).toString();
     options.form = { from: 0, to: tillToday };
+    if (req.query.count) {
+        options.form.count = req.query.count;
+    }
+    if (req.query.skip) {
+        options.form.skip = req.query.skip;
+    }
     if (common.read_dummy_data) {
         common.getDummyData('Payments', req.session.selectedNode.lnImplementation).then((data) => { res.status(200).json(arrangePayments(req.session.selectedNode, data)); });
     }

backend/controllers/eclair/invoices.js

@@ -53,11 +53,18 @@ export const getInvoice = (req, res, next) => {
         return res.status(err.statusCode).json({ message: err.message, error: err.error });
     });
 };
-export const listPendingInvoicesRequestCall = (selectedNode) => {
+export const listPendingInvoicesRequestCall = (selectedNode, count, skip) => {
     logger.log({ selectedNode: selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'List Pending Invoices..' });
     options = selectedNode.authentication.options;
     options.url = selectedNode.settings.lnServerUrl + '/listpendinginvoices';
     options.form = { from: 0, to: (Math.round(new Date(Date.now()).getTime() / 1000)).toString() };
+    // Limit the number of invoices till provided count
+    if (count) {
+        options.form.count = count;
+    }
+    if (skip) {
+        options.form.skip = skip;
+    }
     return new Promise((resolve, reject) => {
         request.post(options).then((pendingInvoicesResponse) => {
             logger.log({ selectedNode: selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Pending Invoices List ', data: pendingInvoicesResponse });
@@ -74,27 +81,31 @@ export const listInvoices = (req, res, next) => {
         return res.status(options.statusCode).json({ message: options.message, error: options.error });
     }
     const tillToday = (Math.round(new Date(Date.now()).getTime() / 1000)).toString();
-    options.form = { from: 0, to: tillToday };
     const options1 = JSON.parse(JSON.stringify(options));
     options1.url = req.session.selectedNode.settings.lnServerUrl + '/listinvoices';
     options1.form = { from: 0, to: tillToday };
+    if (req.query.count) {
+        options1.form.count = req.query.count;
+    }
+    if (req.query.skip) {
+        options1.form.skip = req.query.skip;
+    }
     const options2 = JSON.parse(JSON.stringify(options));
     options2.url = req.session.selectedNode.settings.lnServerUrl + '/listpendinginvoices';
     options2.form = { from: 0, to: tillToday };
     if (common.read_dummy_data) {
-        return common.getDummyData('Invoices', req.session.selectedNode.lnImplementation).then((body) => {
-            const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
-            pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
+        return common.getDummyData('Invoices', req.session.selectedNode.lnImplementation).then(([invoices, pendingInvoicesRes]) => {
+            pendingInvoices = pendingInvoicesRes;
             return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.settings.lnServerUrl, invoice))).
                 then((values) => res.status(200).json(invoices));
         });
     }
     else {
         return Promise.all([request(options1), request(options2)]).
-            then((body) => {
-            logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Invoice', msg: 'Invoices List Received', data: body });
-            const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
-            pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
+            then(([invoices, pendingInvoicesRes]) => {
+            logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Invoice', msg: 'Invoices List Received', data: invoices });
+            // pendingInvoices will be used to get the status (paid/unpaid) of the invoice via getReceivedPaymentInfo
+            pendingInvoices = pendingInvoicesRes;
             if (invoices && invoices.length > 0) {
                 return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.settings.lnServerUrl, invoice))).
                     then((values) => {

frontend/456.52fd629b36893386.js

@@ -113,6 +113,8 @@ export const getPayments = (req, res, next) => {
   options.url = req.session.selectedNode.settings.lnServerUrl + '/audit';
   const tillToday = (Math.round(new Date(Date.now()).getTime() / 1000)).toString();
   options.form = { from: 0, to: tillToday };
+  if (req.query.count) { options.form.count = req.query.count; }
+  if (req.query.skip) { options.form.skip = req.query.skip; }
   if (common.read_dummy_data) {
     common.getDummyData('Payments', req.session.selectedNode.lnImplementation).then((data) => { res.status(200).json(arrangePayments(req.session.selectedNode, data)); });
   } else {

frontend/456.b73706bd7985d63a.js

@@ -52,11 +52,14 @@ export const getInvoice = (req, res, next) => {
   });
 };
 
-export const listPendingInvoicesRequestCall = (selectedNode: SelectedNode) => {
+export const listPendingInvoicesRequestCall = (selectedNode: SelectedNode, count?: number, skip?: number) => {
   logger.log({ selectedNode: selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'List Pending Invoices..' });
   options = selectedNode.authentication.options;
   options.url = selectedNode.settings.lnServerUrl + '/listpendinginvoices';
   options.form = { from: 0, to: (Math.round(new Date(Date.now()).getTime() / 1000)).toString() };
+  // Limit the number of invoices till provided count
+  if (count) { options.form.count = count; }
+  if (skip) { options.form.skip = skip; }
   return new Promise((resolve, reject) => {
     request.post(options).then((pendingInvoicesResponse) => {
       logger.log({ selectedNode: selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Pending Invoices List ', data: pendingInvoicesResponse });
@@ -72,26 +75,26 @@ export const listInvoices = (req, res, next) => {
   options = common.getOptions(req);
   if (options.error) { return res.status(options.statusCode).json({ message: options.message, error: options.error }); }
   const tillToday = (Math.round(new Date(Date.now()).getTime() / 1000)).toString();
-  options.form = { from: 0, to: tillToday };
   const options1 = JSON.parse(JSON.stringify(options));
   options1.url = req.session.selectedNode.settings.lnServerUrl + '/listinvoices';
   options1.form = { from: 0, to: tillToday };
+  if (req.query.count) { options1.form.count = req.query.count; }
+  if (req.query.skip) { options1.form.skip = req.query.skip; }
   const options2 = JSON.parse(JSON.stringify(options));
   options2.url = req.session.selectedNode.settings.lnServerUrl + '/listpendinginvoices';
   options2.form = { from: 0, to: tillToday };
   if (common.read_dummy_data) {
-    return common.getDummyData('Invoices', req.session.selectedNode.lnImplementation).then((body) => {
-      const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
-      pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
+    return common.getDummyData('Invoices', req.session.selectedNode.lnImplementation).then(([invoices, pendingInvoicesRes]: any[]) => {
+      pendingInvoices = pendingInvoicesRes;
       return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.settings.lnServerUrl, invoice))).
         then((values) => res.status(200).json(invoices));
     });
   } else {
     return Promise.all([request(options1), request(options2)]).
-      then((body) => {
-        logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Invoice', msg: 'Invoices List Received', data: body });
-        const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
-        pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
+      then(([invoices, pendingInvoicesRes]) => {
+        logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Invoice', msg: 'Invoices List Received', data: invoices });
+        // pendingInvoices will be used to get the status (paid/unpaid) of the invoice via getReceivedPaymentInfo
+        pendingInvoices = pendingInvoicesRes;
         if (invoices && invoices.length > 0) {
           return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.settings.lnServerUrl, invoice))).
             then((values) => {

frontend/index.html

@@ -89,7 +89,10 @@
         <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
         <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
       </table>
+      <!-- Remove below one line after paginator api is fixed -->
       <mat-paginator class="mb-1" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" />
+      <!-- Uncomment after paginator api is fixed -->
+      <!-- <mat-paginator class="mb-1" [length]="totalRecords" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" (page)="onPageChange($event)" /> -->
     </div>
   </div>
 </div>