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.
Ride-The-Lightning · May 14, 2024 · de296ec · de296ec
1 parent c31a123
commit de296ec
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 63 deletions.
diff --git a/backend/controllers/eclair/fees.js b/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)); });
     }

diff --git a/backend/controllers/eclair/invoices.js b/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) => {

diff --git a/frontend/456.52fd629b36893386.js b/frontend/456.52fd629b36893386.js
diff --git a/frontend/456.b73706bd7985d63a.js b/frontend/456.b73706bd7985d63a.js
diff --git a/frontend/index.html b/frontend/index.html
diff --git a/frontend/main.10c032ab368eb3c8.js b/frontend/main.10c032ab368eb3c8.js
diff --git a/frontend/main.d750cc46804fb3a1.js b/frontend/main.d750cc46804fb3a1.js
diff --git a/frontend/runtime.80dbd7a4768bbe74.js → frontend/runtime.07f90b3998cf8be8.js b/frontend/runtime.80dbd7a4768bbe74.js → frontend/runtime.07f90b3998cf8be8.js
diff --git a/server/controllers/eclair/fees.ts b/server/controllers/eclair/fees.ts
@@ -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 {

diff --git a/server/controllers/eclair/invoices.ts b/server/controllers/eclair/invoices.ts
@@ -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) => {

diff --git a/.../eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html b/.../eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.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>