ECL Page Layout Base

src/app/eclair/home/home.component.ts

@@ -14,7 +14,7 @@ import { ApiCallStatusPayload } from '../../shared/models/apiCallsPayload';
 import { SelNodeChild } from '../../shared/models/RTLconfig';
 
 import { RTLState } from '../../store/rtl.state';
-import { allChannelsInfo, eclnNodeSettings, fees, nodeInfoStatus, onchainBalance } from '../store/ecl.selector';
+import { allChannelsInfo, eclNodeSettings, fees, nodeInfoStatus, onchainBalance } from '../store/ecl.selector';
 
 export interface Tile {
   id: string;
@@ -117,7 +117,7 @@ export class ECLHomeComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((nodeSettings) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/on-chain/on-chain.component.ts

@@ -9,7 +9,7 @@ import { ECLOnChainSendModalComponent } from './on-chain-send-modal/on-chain-sen
 import { SelNodeChild } from '../../shared/models/RTLconfig';
 import { RTLState } from '../../store/rtl.state';
 import { openAlert } from '../../store/rtl.actions';
-import { eclnNodeSettings, onchainBalance } from '../store/ecl.selector';
+import { eclNodeSettings, onchainBalance } from '../store/ecl.selector';
 import { OnChainBalance } from '../../shared/models/eclModels';
 import { ApiCallStatusPayload } from '../../shared/models/apiCallsPayload';
 
@@ -40,7 +40,7 @@ export class ECLOnChainComponent implements OnInit, OnDestroy {
           this.activeLink = linkFound ? linkFound.link : this.links[0].link;
         }
       });
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[1])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[1])).
       subscribe((nodeSettings) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/peers-channels/channels/channels-tables/channels-tables.component.ts

@@ -11,7 +11,7 @@ import { SelNodeChild } from '../../../../shared/models/RTLconfig';
 
 import { RTLState } from '../../../../store/rtl.state';
 import { openAlert } from '../../../../store/rtl.actions';
-import { allChannelsInfo, eclNodeInformation, eclnNodeSettings, onchainBalance, peers } from '../../../store/ecl.selector';
+import { allChannelsInfo, eclNodeInformation, eclNodeSettings, onchainBalance, peers } from '../../../store/ecl.selector';
 import { ApiCallStatusPayload } from '../../../../shared/models/apiCallsPayload';
 
 @Component({
@@ -49,7 +49,7 @@ export class ECLChannelsTablesComponent implements OnInit, OnDestroy {
         this.numOfInactiveChannels = (allChannelsSelector.channelsStatus && allChannelsSelector.channelsStatus.inactive && allChannelsSelector.channelsStatus.inactive.channels) ? allChannelsSelector.channelsStatus.inactive.channels : 0;
         this.logger.info(allChannelsSelector);
       });
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[2])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[2])).
       subscribe((nodeSettings: SelNodeChild | null) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/store/ecl.actions.ts

@@ -4,6 +4,7 @@ import { ECLActions } from '../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../shared/models/apiCallsPayload';
 import { SelNodeChild } from '../../shared/models/RTLconfig';
 import { GetInfo, Channel, Fees, Peer, LightningBalance, OnChainBalance, ChannelsStatus, Payments, QueryRoutes, Transaction, SendPaymentOnChain, Invoice, PaymentReceived, ChannelStateUpdate, SaveChannel, UpdateChannel, CloseChannel, GetQueryRoutes, CreateInvoice, SendPayment, PaymentRelayed } from '../../shared/models/eclModels';
+import { PageSettings } from '../../shared/models/pageSettings';
 
 export const updateECLAPICallStatus = createAction(ECLActions.UPDATE_API_CALL_STATUS_ECL, props<{ payload: ApiCallStatusPayload }>());
 
@@ -11,6 +12,12 @@ export const resetECLStore = createAction(ECLActions.RESET_ECL_STORE, props<{ pa
 
 export const setChildNodeSettingsECL = createAction(ECLActions.SET_CHILD_NODE_SETTINGS_ECL, props<{ payload: SelNodeChild }>());
 
+export const fetchPageSettings = createAction(ECLActions.FETCH_PAGE_SETTINGS_ECL);
+
+export const setPageSettings = createAction(ECLActions.SET_PAGE_SETTINGS_ECL, props<{ payload: PageSettings[] }>());
+
+export const savePageSettings = createAction(ECLActions.SAVE_PAGE_SETTINGS_ECL, props<{ payload: PageSettings[] }>());
+
 export const fetchInfoECL = createAction(ECLActions.FETCH_INFO_ECL, props<{ payload: { loadPage: string } }>());
 
 export const setInfo = createAction(ECLActions.SET_INFO_ECL, props<{ payload: GetInfo }>());

src/app/eclair/store/ecl.effects.ts

@@ -19,7 +19,7 @@ import { closeAllDialogs, closeSpinner, logout, openAlert, openSnackBar, openSpi
 import { ECLInvoiceInformationComponent } from '../transactions/invoice-information-modal/invoice-information.component';
 
 import { RTLState } from '../../store/rtl.state';
-import { fetchChannels, fetchFees, fetchInvoices, fetchOnchainBalance, fetchPayments, fetchPeers, sendPaymentStatus, setActiveChannels, setChannelsStatus, setInactiveChannels, setLightningBalance, setPeers, setPendingChannels, setQueryRoutes, updateECLAPICallStatus, updateChannelState, updateInvoice, updateRelayedPayment } from './ecl.actions';
+import { fetchChannels, fetchFees, fetchInvoices, fetchOnchainBalance, fetchPayments, fetchPeers, sendPaymentStatus, setActiveChannels, setChannelsStatus, setInactiveChannels, setLightningBalance, setPeers, setPendingChannels, setQueryRoutes, updateECLAPICallStatus, updateChannelState, updateInvoice, updateRelayedPayment, fetchPageSettings } from './ecl.actions';
 import { allAPIsCallStatus } from './ecl.selector';
 import { ApiCallsListECL } from '../../shared/models/apiCallsPayload';
 
@@ -647,6 +647,52 @@ export class ECLEffects implements OnDestroy {
     { dispatch: false }
   );
 
+  pageSettingsFetchCL = createEffect(() => this.actions.pipe(
+    ofType(ECLActions.FETCH_PAGE_SETTINGS_ECL),
+    mergeMap(() => {
+      this.store.dispatch(updateECLAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.INITIATED } }));
+      return this.httpClient.get(environment.PAGE_SETTINGS_API).pipe(
+        map((pageSettings: any) => {
+          this.logger.info(pageSettings);
+          this.store.dispatch(updateECLAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.COMPLETED } }));
+          return {
+            type: ECLActions.SET_PAGE_SETTINGS_ECL,
+            payload: pageSettings || []
+          };
+        }),
+        catchError((err: any) => {
+          this.handleErrorWithoutAlert('FetchPageSettings', UI_MESSAGES.NO_SPINNER, 'Fetching Page Settings Failed.', err);
+          return of({ type: RTLActions.VOID });
+        })
+      );
+    })
+  ));
+
+  savePageSettingsCL = createEffect(() => this.actions.pipe(
+    ofType(ECLActions.SAVE_PAGE_SETTINGS_ECL),
+    mergeMap((action: { type: string, payload: any }) => {
+      this.store.dispatch(openSpinner({ payload: UI_MESSAGES.UPDATE_PAGE_SETTINGS }));
+      this.store.dispatch(updateECLAPICallStatus({ payload: { action: 'SavePageSettings', status: APICallStatusEnum.INITIATED } }));
+      return this.httpClient.post(environment.PAGE_SETTINGS_API, action.payload).
+        pipe(
+          map((postRes: any) => {
+            this.logger.info(postRes);
+            this.store.dispatch(updateECLAPICallStatus({ payload: { action: 'SavePageSettings', status: APICallStatusEnum.COMPLETED } }));
+            this.store.dispatch(closeSpinner({ payload: UI_MESSAGES.UPDATE_PAGE_SETTINGS }));
+            this.store.dispatch(openSnackBar({ payload: 'Page Layout Updated Successfully!' }));
+            return {
+              type: ECLActions.SET_PAGE_SETTINGS_ECL,
+              payload: postRes || []
+            };
+          }),
+          catchError((err: any) => {
+            this.handleErrorWithoutAlert('SavePageSettings', UI_MESSAGES.UPDATE_PAGE_SETTINGS, 'Page Settings Update Failed.', err);
+            return of({ type: RTLActions.VOID });
+          })
+        );
+    })
+  ));
+
   setChannelsAndStatusAndBalances() {
     let channelTotal = 0;
     let totalLocalBalance = 0;
@@ -725,6 +771,7 @@ export class ECLEffects implements OnDestroy {
       newRoute = '/ecl/home';
     }
     this.router.navigate([newRoute]);
+    this.store.dispatch(fetchPageSettings());
     this.store.dispatch(fetchInvoices());
     this.store.dispatch(fetchChannels({ payload: { fetchPayments: true } }));
     this.store.dispatch(fetchFees());

src/app/eclair/store/ecl.reducers.ts

@@ -1,8 +1,10 @@
 import { createReducer, on } from '@ngrx/store';
 
 import { initECLState } from './ecl.state';
-import { addInvoice, removeChannel, removePeer, resetECLStore, setActiveChannels, setChannelsStatus, setChildNodeSettingsECL, setFees, setInactiveChannels, setInfo, setInvoices, setLightningBalance, setOnchainBalance, setPayments, setPeers, setPendingChannels, setTransactions, updateECLAPICallStatus, updateChannelState, updateInvoice, updateRelayedPayment } from './ecl.actions';
+import { addInvoice, removeChannel, removePeer, resetECLStore, setActiveChannels, setChannelsStatus, setChildNodeSettingsECL, setFees, setInactiveChannels, setInfo, setInvoices, setLightningBalance, setOnchainBalance, setPayments, setPeers, setPendingChannels, setTransactions, updateECLAPICallStatus, updateChannelState, updateInvoice, updateRelayedPayment, setPageSettings } from './ecl.actions';
 import { Channel, PaymentReceived, PaymentRelayed } from '../../shared/models/eclModels';
+import { PageSettings } from '../../shared/models/pageSettings';
+import { ECL_DEFAULT_PAGE_SETTINGS } from '../../shared/services/consts-enums-functions';
 
 export const ECLReducer = createReducer(initECLState,
   on(updateECLAPICallStatus, (state, { payload }) => {
@@ -212,6 +214,31 @@ export const ECLReducer = createReducer(initECLState,
       fees: modifiedFees,
       activeChannels: modifiedActiveChannels
     };
+  }),
+  on(setPageSettings, (state, { payload }) => {
+    const newPageSettings: PageSettings[] = [];
+    ECL_DEFAULT_PAGE_SETTINGS.forEach((defaultPage) => {
+      const pageSetting = payload.find((p) => p.pageId === defaultPage.pageId) || null;
+      if (pageSetting) {
+        const tablesSettings = JSON.parse(JSON.stringify(pageSetting.tables));
+        pageSetting.tables = []; // To maintain settings order
+        defaultPage.tables.forEach((defaultTable) => {
+          const tableSetting = tablesSettings.find((t) => t.tableId === defaultTable.tableId) || null;
+          if (tableSetting) {
+            pageSetting.tables.push(tableSetting);
+          } else {
+            pageSetting.tables.push(JSON.parse(JSON.stringify(defaultTable)));
+          }
+        });
+        newPageSettings.push(pageSetting);
+      } else {
+        newPageSettings.push(JSON.parse(JSON.stringify(defaultPage)));
+      }
+    });
+    return {
+      ...state,
+      pageSettings: newPageSettings
+    };
   })
 );
 

src/app/eclair/store/ecl.selector.ts

@@ -3,7 +3,8 @@ import { APICallStatusEnum } from '../../shared/services/consts-enums-functions'
 import { ECLState } from './ecl.state';
 
 export const eclState = createFeatureSelector<ECLState>('ecl');
-export const eclnNodeSettings = createSelector(eclState, (state: ECLState) => state.nodeSettings);
+export const eclNodeSettings = createSelector(eclState, (state: ECLState) => state.nodeSettings);
+export const eclPageSettings = createSelector(eclState, (state: ECLState) => ({ pageSettings: state.pageSettings, apiCallStatus: state.apisCallStatus.FetchPageSettings }));
 export const eclNodeInformation = createSelector(eclState, (state: ECLState) => state.information);
 export const nodeInfoStatus = createSelector(eclState, (state: ECLState) => ({ information: state.information, apiCallStatus: state.apisCallStatus.FetchInfo }));
 export const apiCallStatusNodeInfo = createSelector(eclState, (state: ECLState) => state.apisCallStatus.FetchInfo);

src/app/eclair/store/ecl.state.ts

@@ -1,11 +1,13 @@
 import { SelNodeChild } from '../../shared/models/RTLconfig';
 import { GetInfo, Channel, Fees, OnChainBalance, LightningBalance, Peer, ChannelsStatus, Payments, Transaction, Invoice } from '../../shared/models/eclModels';
 import { ApiCallsListECL } from '../../shared/models/apiCallsPayload';
-import { APICallStatusEnum, UserPersonaEnum } from '../../shared/services/consts-enums-functions';
+import { APICallStatusEnum, ECL_DEFAULT_PAGE_SETTINGS, UserPersonaEnum } from '../../shared/services/consts-enums-functions';
+import { PageSettings } from '../../shared/models/pageSettings';
 
 export interface ECLState {
   apisCallStatus: ApiCallsListECL;
   nodeSettings: SelNodeChild | null;
+  pageSettings: PageSettings[];
   information: GetInfo;
   fees: Fees;
   activeChannels: Channel[];
@@ -22,6 +24,7 @@ export interface ECLState {
 
 export const initECLState: ECLState = {
   apisCallStatus: {
+    FetchPageSettings: { status: APICallStatusEnum.UN_INITIATED },
     FetchInfo: { status: APICallStatusEnum.UN_INITIATED },
     FetchFees: { status: APICallStatusEnum.UN_INITIATED },
     FetchChannels: { status: APICallStatusEnum.UN_INITIATED },
@@ -32,6 +35,7 @@ export const initECLState: ECLState = {
     FetchTransactions: { status: APICallStatusEnum.UN_INITIATED }
   },
   nodeSettings: { userPersona: UserPersonaEnum.OPERATOR, selCurrencyUnit: 'USD', fiatConversion: false, channelBackupPath: '', currencyUnits: [] },
+  pageSettings: ECL_DEFAULT_PAGE_SETTINGS,
   information: {},
   fees: {},
   activeChannels: [],

src/app/eclair/transactions/create-invoice-modal/create-invoice.component.ts

@@ -15,7 +15,7 @@ import { CommonService } from '../../../shared/services/common.service';
 
 import { RTLState } from '../../../store/rtl.state';
 import { createInvoice } from '../../store/ecl.actions';
-import { eclNodeInformation, eclnNodeSettings } from '../../store/ecl.selector';
+import { eclNodeInformation, eclNodeSettings } from '../../store/ecl.selector';
 
 @Component({
   selector: 'rtl-ecl-create-invoices',
@@ -46,7 +46,7 @@ export class ECLCreateInvoiceComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.pageSize = this.data.pageSize;
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((nodeSettings: SelNodeChild | null) => {
         this.selNode = nodeSettings;
       });

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

@@ -22,7 +22,7 @@ import { ECLInvoiceInformationComponent } from '../invoice-information-modal/inv
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert } from '../../../store/rtl.actions';
 import { createInvoice, invoiceLookup } from '../../store/ecl.actions';
-import { eclNodeInformation, eclnNodeSettings, invoices } from '../../store/ecl.selector';
+import { eclNodeInformation, eclNodeSettings, invoices } from '../../store/ecl.selector';
 
 @Component({
   selector: 'rtl-ecl-lightning-invoices',
@@ -74,7 +74,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
   }
 
   ngOnInit() {
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((nodeSettings: SelNodeChild | null) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/transactions/payments/lightning-payments.component.ts

@@ -23,7 +23,7 @@ import { RTLEffects } from '../../../store/rtl.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert, openConfirmation } from '../../../store/rtl.actions';
 import { sendPayment } from '../../store/ecl.actions';
-import { eclNodeInformation, eclnNodeSettings, payments } from '../../store/ecl.selector';
+import { eclNodeInformation, eclNodeSettings, payments } from '../../store/ecl.selector';
 
 @Component({
   selector: 'rtl-ecl-lightning-payments',
@@ -78,7 +78,7 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   }
 
   ngOnInit() {
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((nodeSettings: SelNodeChild | null) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/transactions/send-payment-modal/send-payment.component.ts

@@ -18,7 +18,7 @@ import { DataService } from '../../../shared/services/data.service';
 import { ECLEffects } from '../../store/ecl.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { sendPayment } from '../../store/ecl.actions';
-import { allChannelsInfo, eclnNodeSettings } from '../../store/ecl.selector';
+import { allChannelsInfo, eclNodeSettings } from '../../store/ecl.selector';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 
 @Component({
@@ -47,7 +47,7 @@ export class ECLLightningSendPaymentsComponent implements OnInit, OnDestroy {
   constructor(public dialogRef: MatDialogRef<ECLLightningSendPaymentsComponent>, private store: Store<RTLState>, private eclEffects: ECLEffects, private logger: LoggerService, private commonService: CommonService, private decimalPipe: DecimalPipe, private actions: Actions, private dataService: DataService) { }
 
   ngOnInit() {
-    this.store.select(eclnNodeSettings).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(eclNodeSettings).pipe(takeUntil(this.unSubs[0])).
       subscribe((nodeSettings: SelNodeChild | null) => {
         this.selNode = nodeSettings;
       });

src/app/eclair/transactions/transactions.component.ts

@@ -8,7 +8,7 @@ import { faExchangeAlt, faChartPie } from '@fortawesome/free-solid-svg-icons';
 import { UserPersonaEnum } from '../../shared/services/consts-enums-functions';
 import { LoggerService } from '../../shared/services/logger.service';
 import { RTLState } from '../../store/rtl.state';
-import { eclnNodeSettings, allChannelsInfo } from '../store/ecl.selector';
+import { eclNodeSettings, allChannelsInfo } from '../store/ecl.selector';
 import { Channel, ChannelsStatus, LightningBalance } from '../../shared/models/eclModels';
 import { ApiCallStatusPayload } from '../../shared/models/apiCallsPayload';
 import { SelNodeChild } from '../../shared/models/RTLconfig';
@@ -41,7 +41,7 @@ export class ECLTransactionsComponent implements OnInit, OnDestroy {
         }
       });
     this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1]),
-      withLatestFrom(this.store.select(eclnNodeSettings))).
+      withLatestFrom(this.store.select(eclNodeSettings))).
       subscribe(([allChannels, nodeSettings]: [{ activeChannels: Channel[], pendingChannels: Channel[], inactiveChannels: Channel[], lightningBalance: LightningBalance, channelsStatus: ChannelsStatus, apiCallStatus: ApiCallStatusPayload }, (SelNodeChild | null)]) => {
         this.currencyUnits = nodeSettings?.currencyUnits || [];
         if (nodeSettings && nodeSettings.userPersona === UserPersonaEnum.OPERATOR) {

src/app/shared/components/node-config/page-settings/page-settings.component.ts

@@ -5,18 +5,20 @@ import { Store } from '@ngrx/store';
 import { Actions } from '@ngrx/effects';
 import { faPenRuler, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-import { APICallStatusEnum, CLNActions, CLN_DEFAULT_PAGE_SETTINGS, CLN_TABLES_DEF, LNDActions, LND_DEFAULT_PAGE_SETTINGS, LND_TABLES_DEF, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SORT_ORDERS } from '../../../services/consts-enums-functions';
+import { APICallStatusEnum, CLNActions, CLN_DEFAULT_PAGE_SETTINGS, CLN_TABLES_DEF, LNDActions, LND_DEFAULT_PAGE_SETTINGS, LND_TABLES_DEF, ECLActions, ECL_DEFAULT_PAGE_SETTINGS, ECL_TABLES_DEF, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SORT_ORDERS } from '../../../services/consts-enums-functions';
 import { LoggerService } from '../../../services/logger.service';
 import { CommonService } from '../../../services/common.service';
 import { RTLState } from '../../../../store/rtl.state';
-import { TableSetting, PageSettings } from '../../../models/pageSettings';
-import { clnNodeSettings, clnPageSettings } from '../../../../cln/store/cln.selector';
-import { savePageSettings as savePageSettingsCLN } from '../../../../cln/store/cln.actions';
 import { ApiCallStatusPayload } from '../../../models/apiCallsPayload';
 import { rootSelectedNode } from '../../../../store/rtl.selector';
 import { SelNodeChild, ConfigSettingsNode } from '../../../models/RTLconfig';
+import { TableSetting, PageSettings } from '../../../models/pageSettings';
+import { clnNodeSettings, clnPageSettings } from '../../../../cln/store/cln.selector';
 import { lndNodeSettings, lndPageSettings } from '../../../../lnd/store/lnd.selector';
+import { savePageSettings as savePageSettingsCLN } from '../../../../cln/store/cln.actions';
 import { savePageSettings as savePageSettingsLND } from '../../../../lnd/store/lnd.actions';
+import { eclNodeSettings, eclPageSettings } from '../../../../eclair/store/ecl.selector';
+import { savePageSettings as savePageSettingsECL } from '../../../../eclair/store/ecl.actions';
 
 @Component({
   selector: 'rtl-page-settings',
@@ -86,6 +88,34 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
             });
           break;
 
+        case 'ECL':
+          this.initialPageSettings = Object.assign([], ECL_DEFAULT_PAGE_SETTINGS);
+          this.defaultSettings = Object.assign([], ECL_DEFAULT_PAGE_SETTINGS);
+          this.tableFieldsDef = ECL_TABLES_DEF;
+          this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[1]),
+            withLatestFrom(this.store.select(eclNodeSettings))).
+            subscribe(([settings, nodeSettings]: [{ pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }, (SelNodeChild | null)]) => {
+              const updatedPageSettings = JSON.parse(JSON.stringify(settings.pageSettings));
+              this.errorMessage = null;
+              this.apiCallStatus = settings.apiCallStatus;
+              if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+                this.errorMessage = this.apiCallStatus.message || null;
+                this.pageSettings = updatedPageSettings;
+                this.initialPageSettings = updatedPageSettings;
+              } else {
+                this.pageSettings = updatedPageSettings;
+                this.initialPageSettings = updatedPageSettings;
+              }
+              this.logger.info(updatedPageSettings);
+            });
+          this.actions.pipe(takeUntil(this.unSubs[2]), filter((action) => action.type === ECLActions.UPDATE_API_CALL_STATUS_ECL || action.type === ECLActions.SAVE_PAGE_SETTINGS_ECL)).
+            subscribe((action: any) => {
+              if (action.type === ECLActions.UPDATE_API_CALL_STATUS_ECL && action.payload.status === APICallStatusEnum.ERROR && action.payload.action === 'SavePageSettings') {
+                this.errorMessage = JSON.parse(action.payload.message);
+              }
+            });
+          break;
+
         default:
           this.initialPageSettings = Object.assign([], LND_DEFAULT_PAGE_SETTINGS);
           this.defaultSettings = Object.assign([], LND_DEFAULT_PAGE_SETTINGS);
@@ -139,6 +169,10 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
         this.store.dispatch(savePageSettingsCLN({ payload: this.pageSettings }));
         break;
 
+      case 'ECL':
+        this.store.dispatch(savePageSettingsECL({ payload: this.pageSettings }));
+        break;
+
       default:
         this.store.dispatch(savePageSettingsLND({ payload: this.pageSettings }));
         break;

src/app/shared/models/apiCallsPayload.ts

@@ -68,6 +68,7 @@ export interface ApiCallsListECL {
   FetchFees: ApiCallStatusPayload;
   FetchChannels: ApiCallStatusPayload;
   // Non-initial calls
+  FetchPageSettings: ApiCallStatusPayload;
   FetchOnchainBalance: ApiCallStatusPayload;
   FetchPeers: ApiCallStatusPayload;
   FetchPayments: ApiCallStatusPayload;

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

@@ -536,6 +536,9 @@ export enum ECLActions {
   RESET_ECL_STORE = 'RESET_ECL_STORE',
   UPDATE_API_CALL_STATUS_ECL = 'UPDATE_API_CALL_STATUS_ECL',
   SET_CHILD_NODE_SETTINGS_ECL = 'SET_CHILD_NODE_SETTINGS_ECL',
+  FETCH_PAGE_SETTINGS_ECL = 'FETCH_PAGE_SETTINGS_ECL',
+  SET_PAGE_SETTINGS_ECL = 'SET_PAGE_SETTINGS_ECL',
+  SAVE_PAGE_SETTINGS_ECL = 'SAVE_PAGE_SETTINGS_ECL',
   FETCH_INFO_ECL = 'FETCH_INFO_ECL',
   SET_INFO_ECL = 'SET_INFO_ECL',
   FETCH_FEES_ECL = 'FETCH_FEES_ECL',
@@ -853,3 +856,27 @@ export const LND_TABLES_DEF = {
     }
   }
 };
+
+export const ECL_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
+  { pageId: 'on_chain', tables: [
+    { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['txid', 'value'],
+      columnSelection: ['txid', 'output', 'value', 'blockheight'] },
+    { tableId: 'dust_utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['txid', 'value'],
+      columnSelection: ['txid', 'output', 'value', 'blockheight'] }
+  ] }
+];
+
+export const ECL_TABLES_DEF = {
+  on_chain: {
+    utxos: {
+      maxColumns: 7,
+      allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
+    },
+    dust_utxos: {
+      maxColumns: 7,
+      allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
+    }
+  }
+};