Implement "true" pagination on lists cards

README.md

@@ -64,7 +64,7 @@
       - APP_CONFIG_FILE: Path for cln-application's configuration file (default: `./config.json`)
       - APP_LOG_FILE: Path for cln-application's log file (default: `./application-cln.log`)
       - APP_MODE: Mode for logging and other settings (valid values: production/development/testing, default: `production`)
-      - APP_CONNECT: Choose how to connect to CLN (valid values: COMMANDO/REST/GRPC, default: `COMMANDO`)
+      - APP_CONNECT: Choose how to connect to CLN (valid values: COMMANDO/REST, default: `COMMANDO`)
 
       # Core lightning Values
       - LIGHTNING_HOST: IP address of Core lightning node (default: `localhost`)
@@ -90,9 +90,9 @@
       - LIGHTNING_REST_CA_CERT_FILE: CA certificate file path including file name for REST TLS authentication (used by `REST` APP_CONNECT and `https` LIGHTNING_REST_PROTOCOL; default: `./ca.pem`)
 
       # CLN gRPC Values
-      - LIGHTNING_GRPC_HOST: IP address/hostname of Core Lightning GRPC interface (used if APP_CONNECT is `GRPC`, default: `localhost`)
+      - LIGHTNING_GRPC_HOST: IP address/hostname of Core Lightning GRPC interface (default: `localhost`)
       - LIGHTNING_GRPC_TOR_HOST: Tor hidden service URL for Core Lightning GRPC interface (default: ``)
-      - LIGHTNING_GRPC_PORT: Core lightning's GRPC port (used if APP_CONNECT is `GRPC`; default: `9736`)
+      - LIGHTNING_GRPC_PORT: Core lightning's GRPC port (default: `9736`)
       - LIGHTNING_GRPC_PROTO_PATH: URL to directory containing CLN gRPC protocol definitions (default: `https://github.com/ElementsProject/lightning/tree/master/cln-grpc/proto`)
       - LIGHTNING_GRPC_CLIENT_KEY_FILE: Client key file path including file name for GRPC TLS authentication (used by `GRPC` APP_CONNECT; default: `./client-key.pem`)
       - LIGHTNING_GRPC_CLIENT_CERT_FILE: Client certificate file path including file name for GRPC TLS authentication (used by `GRPC` APP_CONNECT; default: `./client.pem`)

apps/backend/source/server.ts

@@ -130,9 +130,9 @@ async function startServer() {
     server.listen({ port: APP_PORT, host: APP_HOST });
   } catch (err: any) {
     if (err.code) {
-      logger.error('Server Startup Error: ', err);
+      logger.error('Server Startup Error:', err);
     } else {
-      logger.error('Server Startup Error: ', throwApiError(err));
+      logger.error('Server Startup Error:', throwApiError(err));
     }
     process.exit(1);
   }

apps/backend/source/service/lightning.service.ts

@@ -3,14 +3,12 @@ import https from 'https';
 import axios, { AxiosHeaders } from 'axios';
 import Lnmessage from 'lnmessage';
 import { GRPCError, LightningError, ValidationError } from '../models/errors.js';
-import { GRPCService } from './grpc.service.js';
 import {
   HttpStatusCode,
   APP_CONSTANTS,
   AppConnect,
   LN_MESSAGE_CONFIG,
   REST_CONFIG,
-  GRPC_CONFIG,
 } from '../shared/consts.js';
 import { logger } from '../shared/logger.js';
 import { setEnvVariables, validateEnvVariables } from '../shared/utils.js';
@@ -46,8 +44,13 @@ export class LightningService {
           }
           break;
         case AppConnect.GRPC:
-          logger.info('GRPC connecting with config: ' + JSON.stringify(GRPC_CONFIG));
-          this.clnService = new GRPCService(GRPC_CONFIG);
+          this.clnService = null;
+          throw new ValidationError(
+            HttpStatusCode.INVALID_DATA,
+            'gRPC connection to the Lightning node is not supported. Please use the COMMANDO or REST options for APP_CONNECT.',
+          );
+          // logger.info('GRPC connecting with config: ' + JSON.stringify(GRPC_CONFIG));
+          // this.clnService = new GRPCService(GRPC_CONFIG);
           break;
         default:
           logger.info('lnMessage connecting with config: ' + JSON.stringify(LN_MESSAGE_CONFIG));
@@ -71,8 +74,13 @@ export class LightningService {
         return axios
           .post(method, methodParams, this.axiosConfig)
           .then((commandRes: any) => {
-            logger.info('REST response for ' + method + ': ' + JSON.stringify(commandRes.data));
-            return Promise.resolve(commandRes.data);
+            logger.info(
+              'REST response for ' +
+                method +
+                ': ' +
+                JSON.stringify(commandRes.data || commandRes.rows),
+            );
+            return Promise.resolve(commandRes.data || commandRes.rows);
           })
           .catch((err: any) => {
             logger.error('REST lightning error from ' + method + ' command');

apps/backend/tsconfig.json

@@ -15,5 +15,5 @@
     "lib": ["ES2022"]
   },
   "files": ["./source/server.ts"],
-  "include": ["./source/**/*.d.ts"]
+  "include": ["./source/**/*.ts"]
 }

apps/frontend/src/components/App/App.scss

@@ -1,5 +1,3 @@
-@import '../../styles/bootstrap-custom';
-@import '../../styles/constants';
 @import '../../styles/shared';
 
 .list-scroll-container {

apps/frontend/src/components/App/App.tsx

@@ -1,4 +1,11 @@
 import './App.scss';
+import '../shared/FiatBox/FiatBox.scss';
+import '../shared/CurrencyBox/CurrencyBox.scss';
+import '../shared/ToastMessage/ToastMessage.scss';
+import '../shared/InvalidInputMessage/InvalidInputMessage.scss';
+import '../shared/StatusAlert/StatusAlert.scss';
+import '../cln/Overview/Overview.scss';
+
 import { Container } from 'react-bootstrap';
 
 import useBreakpoint from '../../hooks/use-breakpoint';

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsGraph/AccountEventsGraph.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 .bkpr-tooltip {
   border: 1px solid $light-dark;

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsRoot.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
 
 .account-events-container {
   padding: 0 1rem;

apps/frontend/src/components/bookkeeper/AccountEvents/AccountEventsTable/AccountEventsTable.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 .account-events-table {
   padding: 0 !important;

apps/frontend/src/components/bookkeeper/BkprHome/AccountEventsInfo/AccountEventsInfo.scss

@@ -1 +1 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;

apps/frontend/src/components/bookkeeper/BkprHome/BkprHome.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
 
 [data-screensize='SM'],
 [data-screensize='XS'] {

apps/frontend/src/components/bookkeeper/BkprHome/SatsFlowInfo/SatsFlowInfo.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 [data-screensize='SM'],
 [data-screensize='XS'] {

apps/frontend/src/components/bookkeeper/BkprHome/VolumeInfo/VolumeInfo.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 [data-screensize='SM'],
 [data-screensize='XS'] {

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowGraph/SatsFlowGraph.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 .bkpr-tooltip {
   border: 1px solid $light-dark;
@@ -8,7 +8,7 @@
   box-shadow: 0px 4px 8px 0px rgba($gray-400, 0.16);
 }
 
-.sats-flow-lagend-bullet {
+.col-sats-flow-lagend .sats-flow-lagend-bullet {
   width: 12px;
   height: 12px;
   margin-right: 6px;
@@ -37,4 +37,7 @@
     color: $light-dark;
     background-color: $tooltip-bg-dark;
   }
+  .col-sats-flow-lagend .span-sats-flow-lagend {
+    color: $light-dark;
+  }
 }

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowGraph/SatsFlowGraph.tsx

@@ -55,9 +55,9 @@ const SatsFlowGraphLegend = (props: any) => {
       {payload
         .filter((entry: any) => entry.value !== 'net_inflow_msat')
         .map((entry: any, index: number) => (
-          <Col key={`item-${index}`} xs='auto' className='d-flex align-items-center'>
+          <Col key={`item-${index}`} xs='auto' className='col-sats-flow-lagend d-flex align-items-center'>
             <div className='sats-flow-lagend-bullet' style={{ backgroundColor: entry.color }}/>
-            <span>{titleCase(entry.value.replace(/_/g, ' '))}</span>
+            <span className='span-sats-flow-lagend'>{titleCase(entry.value.replace(/_/g, ' '))}</span>
           </Col>
         ))
       }

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowRoot.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
 
 .satsflow-container {
   padding: 0 1rem;

apps/frontend/src/components/bookkeeper/Volume/VolumeGraph/VolumeGraph.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants' as *;
 
 .volume-graph {
   width: 100%;
@@ -49,4 +49,7 @@
     color: $light-dark;
     background-color: $tooltip-bg-dark;
   }
+  .volume-graph-legend {
+    color: $light-dark;
+  }
 }

apps/frontend/src/components/bookkeeper/Volume/VolumeRoot.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
 
 .volume-container {
   padding: 0 1rem;

apps/frontend/src/components/cln/BTCTransaction/BTCTransaction.scss

@@ -1,4 +1,5 @@
-@import '../../../styles/constants.scss';
+@use 'sass:color';
+@use '../../../styles/constants' as *;
 
 .btc-transaction-placeholder {
   transform-origin: top left;
@@ -13,7 +14,7 @@
     cursor: pointer;
     &:hover {
       svg path {
-        stroke: darken($primary, 10%);
+        stroke: color.adjust($primary, $lightness: -10%);
       }
     }
   }
@@ -24,7 +25,7 @@
     cursor: pointer;
     &:hover {
       svg path {
-        fill: darken($primary, 10%);
+        fill: color.adjust($primary, $lightness: -10%);
       }
     }
   }

apps/frontend/src/components/cln/BTCTransaction/BTCTransaction.tsx

@@ -19,7 +19,7 @@ const TransactionDetail = ({ transaction, copyHandler, openLinkHandler }) => {
           <Col xs={12} className="fs-7 text-light">
             Blockheight
           </Col>
-          <Col xs={12} className="fs-7 overflow-x-ellipsis">
+          <Col xs={12} className="fs-7 text-dark overflow-x-ellipsis">
             {transaction.blockheight}
           </Col>
         </Row>
@@ -31,7 +31,7 @@ const TransactionDetail = ({ transaction, copyHandler, openLinkHandler }) => {
           <Col xs={12} className="fs-7 text-light">
             Description
           </Col>
-          <Col xs={12} className="pe-1 fs-7 overflow-x-ellipsis">
+          <Col xs={12} className="pe-1 fs-7 text-dark overflow-x-ellipsis">
             {transaction.description}
           </Col>
         </Row>
@@ -43,7 +43,7 @@ const TransactionDetail = ({ transaction, copyHandler, openLinkHandler }) => {
           <Col xs={12} className="fs-7 text-light">
             Transaction ID
           </Col>
-          <Col xs={10} className="pe-1 fs-7 overflow-x-ellipsis">
+          <Col xs={10} className="pe-1 fs-7 text-dark overflow-x-ellipsis">
             {transaction.txid}
           </Col>
           <Col xs={1} onClick={copyHandler} className="btc-transaction-copy" id="Transaction ID">
@@ -61,7 +61,7 @@ const TransactionDetail = ({ transaction, copyHandler, openLinkHandler }) => {
           <Col xs={12} className="fs-7 text-light">
             Payment ID
           </Col>
-          <Col xs={10} className="pe-1 fs-7 overflow-x-ellipsis">
+          <Col xs={10} className="pe-1 fs-7 text-dark overflow-x-ellipsis">
             {transaction.payment_id}
           </Col>
           <Col xs={1} onClick={copyHandler} className="btc-transaction-copy" id="Payment ID">
@@ -79,7 +79,7 @@ const TransactionDetail = ({ transaction, copyHandler, openLinkHandler }) => {
           <Col xs={12} className="fs-7 text-light">
             Outpoint
           </Col>
-          <Col xs={10} className="pe-1 fs-7 overflow-x-ellipsis">
+          <Col xs={10} className="pe-1 fs-7 text-dark overflow-x-ellipsis">
             {transaction.outpoint}
           </Col>
           <Col xs={1} onClick={copyHandler} className="btc-transaction-copy" id="Outpoint">

apps/frontend/src/components/cln/BTCTransactionsList/BTCTransactionsList.scss

@@ -1,4 +1,5 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants' as *;
+@import 'bootstrap/scss/mixins';
 
 .btc-transactions-list {
   cursor: pointer;