LND Pending tables fixed

backend/controllers/lnd/channels.js

@@ -72,11 +72,11 @@ export const getPendingChannels = (req, res, next) => {
         if (body.pending_open_channels && body.pending_open_channels.length > 0) {
             (_a = body.pending_open_channels) === null || _a === void 0 ? void 0 : _a.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
         }
-        if (body.pending_closing_channels && body.pending_closing_channels.length > 0) {
-            (_b = body.pending_closing_channels) === null || _b === void 0 ? void 0 : _b.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
-        }
         if (body.pending_force_closing_channels && body.pending_force_closing_channels.length > 0) {
-            (_c = body.pending_force_closing_channels) === null || _c === void 0 ? void 0 : _c.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
+            (_b = body.pending_force_closing_channels) === null || _b === void 0 ? void 0 : _b.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
+        }
+        if (body.pending_closing_channels && body.pending_closing_channels.length > 0) {
+            (_c = body.pending_closing_channels) === null || _c === void 0 ? void 0 : _c.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
         }
         if (body.waiting_close_channels && body.waiting_close_channels.length > 0) {
             (_d = body.waiting_close_channels) === null || _d === void 0 ? void 0 : _d.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));

server/controllers/lnd/channels.ts

@@ -71,12 +71,12 @@ export const getPendingChannels = (req, res, next) => {
     if (body.pending_open_channels && body.pending_open_channels.length > 0) {
       body.pending_open_channels?.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
     }
-    if (body.pending_closing_channels && body.pending_closing_channels.length > 0) {
-      body.pending_closing_channels?.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
-    }
     if (body.pending_force_closing_channels && body.pending_force_closing_channels.length > 0) {
       body.pending_force_closing_channels?.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
     }
+    if (body.pending_closing_channels && body.pending_closing_channels.length > 0) {
+      body.pending_closing_channels?.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
+    }
     if (body.waiting_close_channels && body.waiting_close_channels.length > 0) {
       body.waiting_close_channels?.map((channel) => promises.push(getAliasForChannel(req.session.selectedNode, channel.channel)));
     }

src/app/app.routing.ts

@@ -67,4 +67,4 @@ export const routes: Routes = [
 ];
 
 // Export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { enableTracing: true });
-export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes);
+export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });

src/app/cln/graph/lookups/node-lookup/node-lookup.component.scss

@@ -1,6 +1,7 @@
 div.bordered-box.table-actions-select.btn-action {
   min-width: 13rem;
   width: 13rem;
+  min-height: 3.6rem;
 }
 
 button.mat-stroked-button.btn-action-copy {

src/app/cln/graph/query-routes/query-routes.component.html

@@ -52,13 +52,11 @@
       </ng-container>
       <ng-container matColumnDef="delay">
         <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Delay </th>
-        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
+        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span></td>
-        </td>
       </ng-container>
       <ng-container matColumnDef="msatoshi">
         <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
-        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
+        <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}</span></td>
-          </span></td>
       </ng-container>
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">

src/app/cln/home/home.component.html

@@ -100,9 +100,9 @@
                     </button>
                     <mat-menu #menuTransactions="matMenu" class="dashboard-vert-menu" xPosition="before">
                       <button mat-menu-item *ngFor="let goToOption of card.goToOptions; index as i" (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
-                    </mat-menu>            
+                    </mat-menu>
                   </ng-template>
-                </mat-tab>                
+                </mat-tab>    
               </mat-tab-group>
             </span>
             <h3 *ngSwitchDefault>Error! Unable to find information!</h3>

src/app/cln/peers-channels/connect-peer/connect-peer.component.html

@@ -11,7 +11,7 @@
         <mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
           <mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
             <form [formGroup]="peerFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
-              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>              
+              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>  
               <mat-form-field fxFlex="100">
                 <input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
                 <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>

src/app/cln/transactions/invoices/invoices-table/lightning-invoices-table.component.html

@@ -108,7 +108,7 @@
                 <mat-option (click)="onInvoiceClick(invoice)">View Info</mat-option>
                 <mat-option (click)="onRefreshInvoice(invoice)">Refresh</mat-option>
               </mat-select>
-            </div>            
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_invoice">

src/app/cln/transactions/offers/offer-bookmarks-table/offer-bookmarks-table.component.html

@@ -66,7 +66,7 @@
                 <mat-option (click)="onRePayOffer(offer)">Pay Again</mat-option>
                 <mat-option (click)="onDeleteBookmark(offer)">Delete Bookmark</mat-option>
               </mat-select>
-            </div>            
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_offer">

src/app/cln/transactions/offers/offers-table/offers-table.component.html

@@ -69,7 +69,7 @@
                 <mat-option *ngIf="offer.active" (click)="onDisableOffer(offer)">Disable Offer</mat-option>
                 <mat-option *ngIf="offer.active" (click)="onPrintOffer(offer)">Export QR code</mat-option>
               </mat-select>
-            </div>            
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_offer">

src/app/eclair/graph/lookups/node-lookup/node-lookup.component.html

@@ -39,7 +39,7 @@
         </ng-container>
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef class="pl-1">
-            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>            
+            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
           </th>
           <td mat-cell *matCellDef="let address" class="pl-1">
             <span fxLayoutAlign="end center">

src/app/eclair/graph/lookups/node-lookup/node-lookup.component.scss

@@ -1,10 +1,11 @@
 div.bordered-box.table-actions-select.btn-action {
-    min-width: 13rem;
+  min-width: 13rem;
-    width: 13rem;
+  width: 13rem;
-  }
+  min-height: 3.6rem;
+}
   
-  button.mat-stroked-button.btn-action-copy {
+button.mat-stroked-button.btn-action-copy {
-    min-width: 13rem;
+  min-width: 13rem;
-    width: 13rem;
+  width: 13rem;
-  }
+}
   

src/app/eclair/peers-channels/connect-peer/connect-peer.component.html

@@ -11,7 +11,7 @@
         <mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
           <mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
             <form [formGroup]="peerFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
-              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>              
+              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>  
               <mat-form-field fxFlex="100">
                 <input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
                 <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>

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

@@ -102,7 +102,7 @@
                 <mat-option (click)="onInvoiceClick(invoice)">View Info</mat-option>
                 <mat-option (click)="onRefreshInvoice(invoice)">Refresh</mat-option>
               </mat-select>
-            </div>            
+            </div>
           </td>
         </ng-container>
         <ng-container matColumnDef="no_invoice">

src/app/lnd/graph/lookups/node-lookup/node-lookup.component.html

@@ -47,7 +47,7 @@
         </ng-container>
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef class="pl-1">
-            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>            
+            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
           </th>
           <td mat-cell *matCellDef="let address" class="pl-1">
             <span fxLayoutAlign="end center">

src/app/lnd/graph/lookups/node-lookup/node-lookup.component.scss

@@ -1,6 +1,7 @@
 div.bordered-box.table-actions-select.btn-action {
   min-width: 13rem;
   width: 13rem;
+  min-height: 3.6rem;
 }
 
 button.mat-stroked-button.btn-action-copy {

src/app/lnd/on-chain/utxo-tables/utxos/utxos.component.html

@@ -36,7 +36,7 @@
           <td mat-cell *matCellDef="let utxo" class="pl-1">
             <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
               <span class="ellipsis-child">{{utxo.label}}</span>
-            </span>            
+            </span>
           </td>
         </ng-container>
         <ng-container matColumnDef="address_type">
@@ -52,7 +52,7 @@
           <td mat-cell *matCellDef="let utxo" class="pl-1">
             <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
               <span class="ellipsis-child">{{utxo?.address}}</span>
-            </span>            
+            </span>
           </td>
         </ng-container>
         <ng-container matColumnDef="amount_sat">

src/app/lnd/peers-channels/channels/channel-rebalance-modal/channel-rebalance.component.html

@@ -25,7 +25,7 @@
           <mat-step [stepControl]="inputFormGroup" [editable]="flgEditable">
             <form [formGroup]="inputFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
               <ng-template matStepLabel>{{inputFormLabel}}</ng-template>
-              <div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">              
+              <div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">  
                 <mat-form-field fxFlex="48">
                   <input autoFocus matInput placeholder="Amount" type="number" [step]="100" tabindex="1" formControlName="rebalanceAmount" required>
                   <mat-hint>(Local Bal: {{selChannel?.local_balance}}, Remaining: {{selChannel?.local_balance - ((inputFormGroup.controls.rebalanceAmount.value) ? inputFormGroup.controls.rebalanceAmount.value : 0)}})</mat-hint>
@@ -65,7 +65,7 @@
                     <mat-error *ngIf="feeFormGroup.controls.feeLimit.errors?.required">{{feeFormGroup.controls.selFeeLimitType.value ? feeFormGroup.controls.selFeeLimitType.value.placeholder : feeLimitTypes[0].placeholder}} is required.</mat-error>
                     <mat-error *ngIf="feeFormGroup.controls.feeLimit.errors?.min">{{feeFormGroup.controls.selFeeLimitType.value ? feeFormGroup.controls.selFeeLimitType.value.placeholder : feeLimitTypes[0].placeholder}} must be a positive number.</mat-error>
                   </mat-form-field>
-                </div>                
+                </div>    
               </div>
               <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                 <button mat-button color="primary" tabindex="8" type="submit" (click)="onRebalance()">Rebalance</button>

src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html

@@ -10,58 +10,70 @@
         <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
         <table mat-table #table fxFlex="100" [dataSource]="pendingOpenChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
           <ng-container matColumnDef="remote_alias">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_alias}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_node_pub">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_node_pub}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="channel_point">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Channel </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.channel_point}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.channel_point}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="initiator">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </th>
-            <mat-cell *matCellDef="let channel">{{channel.channel.initiator}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.initiator | camelcaseWithReplace:'initiator_'}}</td>
           </ng-container>
           <ng-container matColumnDef="commitment_type">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.commitment_type}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.commitment_type | camelcaseWithReplace:'commitment_type':'_'}}</td>
           </ng-container>
           <ng-container matColumnDef="confirmation_height">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Confirmation Height</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Confirmation Height</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.confirmation_height | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center"> {{channel.confirmation_height | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="commit_fee">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_fee | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.commit_fee | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="commit_weight">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Weight </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Weight </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_weight | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.commit_weight | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="fee_per_kw">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.fee_per_kw | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.fee_per_kw | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="capacity">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="local_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="remote_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="actions">
-            <mat-header-cell fxLayoutAlign="end center" class="pl-3 pr-4" *matHeaderCellDef>
+            <th mat-header-cell *matHeaderCellDef class="pl-2">
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
-            </mat-header-cell>
+            </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="px-3">
+            <td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
                 <mat-select placeholder="Actions" tabindex="1" class="mr-0">
                   <mat-select-trigger></mat-select-trigger>
@@ -69,7 +81,7 @@
                   <mat-option (click)="onBumpFee(channel)">Bump Fee</mat-option>
                 </mat-select>
               </div>
-            </mat-cell>
+            </td>
           </ng-container>
           <ng-container matColumnDef="no_pending_open">
             <td mat-footer-cell *matFooterCellDef colspan="4">
@@ -79,10 +91,10 @@
             </td>
           </ng-container>
           <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_open']" [ngClass]="{'display-none': pendingOpenChannels && pendingOpenChannels?.data && pendingOpenChannels?.data?.length>0}"></tr>
-          <mat-header-row *matHeaderRowDef="displayedOpenColumns"></mat-header-row>
+          <tr mat-header-row *matHeaderRowDef="displayedOpenColumns"></tr>
-          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedOpenColumns;"></mat-row>
+          <tr mat-row *matRowDef="let row; columns: displayedOpenColumns;"></tr>
         </table>
-      </div>            
+      </div>
     </mat-expansion-panel>
     <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
     <mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
@@ -92,64 +104,80 @@
       <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
         <table mat-table #table [dataSource]="pendingForceClosingChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
           <ng-container matColumnDef="closing_txid">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.closing_txid}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.closing_txid}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_alias">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_alias}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_node_pub">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_node_pub}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="channel_point">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Channel </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.channel_point}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.channel_point}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="initiator">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </th>
-            <mat-cell *matCellDef="let channel">{{channel.channel.initiator}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.initiator | camelcaseWithReplace:'initiator_'}}</td>
           </ng-container>
           <ng-container matColumnDef="commitment_type">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.commitment_type}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.commitment_type | camelcaseWithReplace:'commitment_type':'_'}}</td>
           </ng-container>
           <ng-container matColumnDef="limbo_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.limbo_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="maturity_height">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Maturity Height</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Maturity Height</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.maturity_height | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.maturity_height | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="blocks_til_maturity">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Blocks till Maturity</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Blocks till Maturity</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.blocks_til_maturity | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.blocks_til_maturity | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="recovered_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.recovered_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.recovered_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="capacity">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="local_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="remote_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="actions">
-            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>
+            <th mat-header-cell *matHeaderCellDef class="pl-2">
-              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
+              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
-            </mat-header-cell>            
+            </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
+            <td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
               <button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)" class="table-actions-button">View Info</button>          
-            </mat-cell>
+            </td>
           </ng-container>
           <ng-container matColumnDef="no_pending_force_closing">
             <td mat-footer-cell *matFooterCellDef colspan="4">
@@ -159,8 +187,8 @@
             </td>
           </ng-container>
           <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_force_closing']" [ngClass]="{'display-none': pendingForceClosingChannels && pendingForceClosingChannels?.data && pendingForceClosingChannels?.data?.length>0}"></tr>
-          <mat-header-row *matHeaderRowDef="displayedForceClosingColumns"></mat-header-row>
+          <tr mat-header-row *matHeaderRowDef="displayedForceClosingColumns"></tr>
-          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedForceClosingColumns;"></mat-row>
+          <tr mat-row *matRowDef="let row; columns: displayedForceClosingColumns;"></tr>
         </table>
       </div>
     </mat-expansion-panel>
@@ -172,48 +200,64 @@
       <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
         <table mat-table #table [dataSource]="pendingClosingChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
           <ng-container matColumnDef="closing_txid">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.closing_txid}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.closing_txid}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_alias">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_alias}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_node_pub">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_node_pub}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="channel_point">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Channel </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.channel_point}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.channel_point}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="initiator">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </th>
-            <mat-cell *matCellDef="let channel">{{channel.channel.initiator}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.initiator | camelcaseWithReplace:'initiator_'}}</td>
           </ng-container>
           <ng-container matColumnDef="commitment_type">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.commitment_type}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.commitment_type | camelcaseWithReplace:'commitment_type':'_'}}</td>
           </ng-container>
           <ng-container matColumnDef="capacity">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="local_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="remote_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="actions">
-            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>
+            <th mat-header-cell *matHeaderCellDef class="pl-2">
               <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
-            </mat-header-cell>            
+            </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
+            <td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
               <button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)" class="table-actions-button">View Info</button>          
-            </mat-cell>
+            </td>
           </ng-container>
           <ng-container matColumnDef="no_pending_closing">
             <td mat-footer-cell *matFooterCellDef colspan="4">
@@ -223,8 +267,8 @@
             </td>
           </ng-container>
           <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_closing']" [ngClass]="{'display-none': pendingClosingChannels && pendingClosingChannels?.data && pendingClosingChannels?.data?.length>0}"></tr>
-          <mat-header-row *matHeaderRowDef="displayedClosingColumns"></mat-header-row>
+          <tr mat-header-row *matHeaderRowDef="displayedClosingColumns"></tr>
-          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedClosingColumns;"></mat-row>
+          <tr mat-row *matRowDef="let row; columns: displayedClosingColumns;"></tr>
         </table>
       </div>
     </mat-expansion-panel>
@@ -236,48 +280,60 @@
       <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
         <table mat-table #table [dataSource]="pendingWaitClosingChannels" matSort [ngClass]="{'error-border bordered-box': errorMessage !== '','bordered-box': true}">
           <ng-container matColumnDef="remote_alias">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Peer </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_alias}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="remote_node_pub">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.remote_node_pub}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="channel_point">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Channel </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.channel_point}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">
+              <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
+                <span class="ellipsis-child">{{channel.channel.channel_point}}</span>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="initiator">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Initiator </th>
-            <mat-cell *matCellDef="let channel">{{channel.channel.initiator}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.initiator | camelcaseWithReplace:'initiator_'}}</td>
           </ng-container>
           <ng-container matColumnDef="commitment_type">
-            <mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Commitment Type </th>
-            <mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{channel.channel.commitment_type}}</mat-cell>
+            <td mat-cell *matCellDef="let channel">{{channel.channel.commitment_type | camelcaseWithReplace:'commitment_type':'_'}}</td>
           </ng-container>
           <ng-container matColumnDef="limbo_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.limbo_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="capacity">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="local_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="remote_balance">
-            <mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</mat-header-cell>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance | number}}</mat-cell>
+            <td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="actions">
-            <mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>
+            <th mat-header-cell fxLayoutAlign="end center" class="pl-2" *matHeaderCellDef>
-              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
+              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>  
-            </mat-header-cell>
+            </th>
-            <mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
+            <td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
               <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)" class="table-actions-button">View Info</button>          
-            </mat-cell>
+            </td>
           </ng-container>
           <ng-container matColumnDef="no_pending_wait_closing">
             <td mat-footer-cell *matFooterCellDef colspan="4">
@@ -287,8 +343,8 @@
             </td>
           </ng-container>
           <tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_wait_closing']" [ngClass]="{'py-0': true, 'display-none': pendingWaitClosingChannels && pendingWaitClosingChannels?.data && pendingWaitClosingChannels?.data?.length>0}"></tr>
-          <mat-header-row *matHeaderRowDef="displayedWaitClosingColumns"></mat-header-row>
+          <tr mat-header-row *matHeaderRowDef="displayedWaitClosingColumns"></tr>
-          <mat-row fxLayoutAlign="stretch stretch" *matRowDef="let row; columns: displayedWaitClosingColumns;"></mat-row>
+          <tr mat-row *matRowDef="let row; columns: displayedWaitClosingColumns;"></tr>
         </table>
       </div>
     </mat-expansion-panel>

src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.scss

@@ -1,9 +1,9 @@
-.mat-column-channel_point, .mat-column-remote_alias, .mat-column-remote_node_pub,
+.mat-column-channel_point, .mat-column-remote_alias, .mat-column-remote_node_pub, .mat-column-closing_txid {
-.mat-column-commitment_type, .mat-column-closing_txid {
+  flex: 0 0 15%;
-  flex: 1 1 10%;
+  width: 15%;
-  white-space: nowrap;
+  & .ellipsis-parent {
-  overflow: hidden;  
+    display: flex;
-  text-overflow: ellipsis;
+  }
 }
 
 tr.mat-footer-row td.mat-footer-cell {

src/app/lnd/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.ts

@@ -5,7 +5,7 @@ import { Store } from '@ngrx/store';
 
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { Channel, GetInfo, PendingChannels, PendingOpenChannel } from '../../../../../shared/models/lndModels';
+import { Channel, GetInfo, PendingChannels, PendingClosingChannel, PendingForceClosingChannel, PendingOpenChannel, WaitingCloseChannel } from '../../../../../shared/models/lndModels';
 import { AlertTypeEnum, APICallStatusEnum, DataTypeEnum, LND_DEFAULT_PAGE_SETTINGS, PAGE_SIZE, ScreenSizeEnum, SortOrderEnum } from '../../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPayload';
 import { SelNodeChild } from '../../../../../shared/models/RTLconfig';
@@ -37,16 +37,16 @@ export class ChannelPendingTableComponent implements OnInit, AfterViewInit, OnDe
   public pendingChannels: PendingChannels = {};
   public displayedOpenColumns: any[] = [];
   public pendingOpenChannelsLength = 0;
-  public pendingOpenChannels: any;
+  public pendingOpenChannels: any = new MatTableDataSource<PendingOpenChannel>([]);
   public displayedForceClosingColumns: any[] = [];
   public pendingForceClosingChannelsLength = 0;
-  public pendingForceClosingChannels: any;
+  public pendingForceClosingChannels: any = new MatTableDataSource<PendingForceClosingChannel>([]);
   public displayedClosingColumns: any[] = [];
   public pendingClosingChannelsLength = 0;
-  public pendingClosingChannels: any;
+  public pendingClosingChannels: any = new MatTableDataSource<PendingClosingChannel>([]);
   public displayedWaitClosingColumns: any[] = [];
   public pendingWaitClosingChannelsLength = 0;
-  public pendingWaitClosingChannels: any;
+  public pendingWaitClosingChannels: any = new MatTableDataSource<WaitingCloseChannel>([]);
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
   public errorMessage = '';

src/app/lnd/peers-channels/connect-peer/connect-peer.component.html

@@ -11,7 +11,7 @@
         <mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
           <mat-step [stepControl]="peerFormGroup" [editable]="flgEditable">
             <form [formGroup]="peerFormGroup" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1">
-              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>              
+              <ng-template matStepLabel>{{peerFormLabel}}</ng-template>  
               <mat-form-field fxFlex="100">
                 <input autoFocus matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" formControlName="peerAddress" tabindex="1" required>
                 <mat-error *ngIf="peerFormGroup.controls.peerAddress.errors?.required">Address is required.</mat-error>

src/app/lnd/routing/routing-peers/routing-peers.component.html

@@ -30,7 +30,7 @@
           </ng-container>
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef class="pr-3">
-              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
+              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>  
             </th>
             <td mat-cell *matCellDef="let rPeer" class="pl-2" fxLayoutAlign="end center">
               <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')" class="table-actions-button">View Info</button>

src/app/shared/components/data-modal/alert-message/alert-message.component.html

@@ -68,7 +68,7 @@
                 <span fxFlex="100" class="foreground-secondary-text">&nbsp;</span>
               </ng-template>
               <mat-divider class="w-100 my-1"></mat-divider>
-            </div>                
+            </div>    
           </div>
         </div>
       </div>

src/app/shared/components/data-modal/confirmation-message/confirmation-message.component.html

@@ -37,7 +37,7 @@
                   <span fxFlex="100" class="foreground-secondary-text">&nbsp;</span>
                 </ng-template>
                 <mat-divider class="w-100 my-1"></mat-divider>
-              </div>                
+              </div>    
             </div>
           </div>
         </div>
@@ -45,7 +45,7 @@
           <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
           <div fxLayout="row wrap" fxLayoutAlign="space-between center">
             <ng-container *ngFor="let getInput of getInputs; index as i">
-              <mat-form-field *ngIf="!getInput.advancedField || showAdvanced" [fxFlex]="getInput.width">                              
+              <mat-form-field *ngIf="!getInput.advancedField || showAdvanced" [fxFlex]="getInput.width">                  
                 <input matInput [autoFocus]="i === 0" [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [step]="getInput.step" [type]="getInput.inputType | lowercase" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
                 <mat-error *ngIf="!getInput.inputValue">{{getInput.placeholder}} is required.</mat-error>
                 <mat-hint>{{getInput.hintFunction ? getInput.hintFunction(getInput.inputValue) : getInput.hintText}}</mat-hint>

src/app/shared/components/data-modal/two-factor-auth/two-factor-auth.component.html

@@ -31,7 +31,7 @@
                 <fa-icon [icon]="faInfoCircle" class="mt-1 mr-1 alert-icon"></fa-icon>
                 <span>You can use a compatible authentication app to get an authentication code when you log in to RTL. e.g.: Google Authenticator.</span>
               </div>
-              <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">              
+              <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">  
                 <mat-form-field fxFlex="100">
                   <input autoFocus matInput placeholder="Secret Code" type="text" tabindex="4" formControlName="secret" required>
                   <fa-icon [icon]="faCopy" matSuffix rtlClipboard [payload]="secretFormGroup?.controls?.secret?.value" (copied)="onCopySecret($event)"></fa-icon>
@@ -47,7 +47,7 @@
             <form [formGroup]="tokenFormGroup" fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1">
               <ng-template matStepLabel>{{tokenFormLabel}}</ng-template>
               <div fxLayout="column" *ngIf="!flgValidated || !isTokenValid">
-                <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">              
+                <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">  
                   <mat-form-field fxFlex="100">
                     <input autoFocus matInput placeholder="Token" type="text" tabindex="7" formControlName="token" required>
                     <mat-error *ngIf="tokenFormGroup?.controls?.token?.errors?.required">Token is required.</mat-error>

src/app/shared/components/ln-services/boltz/swap-modal/swap-modal.component.html

@@ -16,7 +16,7 @@
               <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
                 <rtl-boltz-service-info [serviceInfo]="serviceInfo" [direction]="direction"></rtl-boltz-service-info>
               </div>
-              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">              
+              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">  
                 <mat-form-field fxFlex="48">
                   <input autoFocus matInput placeholder="Amount" type="number" [step]="1000" tabindex="1" formControlName="amount" required>
                   <mat-hint>Range: {{serviceInfo?.limits?.minimal | number}}-{{serviceInfo?.limits?.maximal | number}}</mat-hint>

src/app/shared/components/ln-services/loop/loop-modal/loop-modal.component.html

@@ -22,7 +22,7 @@
                 <rtl-loop-quote [quote]="minQuote" [termCaption]="'min'" [panelExpanded]="false" [showPanel]="true"></rtl-loop-quote>
                 <rtl-loop-quote [quote]="maxQuote" [termCaption]="'max'" [panelExpanded]="false" [showPanel]="true"></rtl-loop-quote>
               </div>
-              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">              
+              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">  
                 <mat-form-field [fxFlex]="direction === LoopTypeEnum.LOOP_OUT ? '35' : '48'">
                   <input autoFocus matInput placeholder="Amount" type="number" [step]="1000" tabindex="1" formControlName="amount" required>
                   <mat-hint>Range: {{minQuote.amount | number}}-{{maxQuote.amount | number}}</mat-hint>
@@ -42,7 +42,7 @@
                   <mat-error *ngIf="inputFormGroup.controls.routingFeePercent.errors?.min">Percentage must be a positive number.</mat-error>
                 </mat-form-field>
               </div>
-              <div fxLayout="row wrap" fxFlex="100" *ngIf="direction === LoopTypeEnum.LOOP_OUT" fxLayoutAlign="start center" class="mt-1">              
+              <div fxLayout="row wrap" fxFlex="100" *ngIf="direction === LoopTypeEnum.LOOP_OUT" fxLayoutAlign="start center" class="mt-1">  
                 <mat-slide-toggle tabindex="4" color="primary" formControlName="fast" fxFlex="none">Fast</mat-slide-toggle>
                 <mat-icon matTooltip="Swap immediately (Might end up paying a higher on-chain fee)" matTooltipPosition="above" class="info-icon" fxFlex="none">info_outline</mat-icon>
               </div>

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

@@ -1,11 +1,11 @@
-<div [perfectScrollbar] fxLayout="column" fxFlex="100">
+<div [perfectScrollbar] fxLayout="column" fxFlex="100" id="head">
   <form fxLayout="column" fxLayoutAlign="start stretch" class="settings-container page-sub-title-container mt-1" #form="ngForm">
     <div fxLayout="row">
       <fa-icon [icon]="faPenRuler" class="page-title-img mr-1"></fa-icon>
       <span class="page-title">Grid Settings</span>
     </div>
     <ng-container *ngIf="errorMessage && errorMessage.page === 'unknown'" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
-    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" [ngClass]="{'error-border': errorMessage?.page === page.pageId}" expanded="false" *ngFor="let page of pageSettings">
+    <mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" [ngClass]="{'error-border': errorMessage?.page === page.pageId}" expanded="true" *ngFor="let page of pageSettings">
       <mat-expansion-panel-header>
         <mat-panel-title>{{page.pageId | camelcaseWithReplace:'_'}}</mat-panel-title>
       </mat-expansion-panel-header>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { combineLatest, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { filter, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { Actions } from '@ngrx/effects';

src/app/shared/models/lndModels.ts

@@ -131,6 +131,7 @@ export interface WaitingCloseChannel {
   channel?: PendingChannel;
   limbo_balance?: string;
   commitments?: any;
+  closing_txid?: string;
 }
 
 export interface PendingChannels {

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

@@ -964,7 +964,7 @@ export const LND_TABLES_DEF = {
     },
     pending_waiting_close: {
       maxColumns: 7,
-      allowedColumns: ['remote_alias', 'remote_node_pub', 'channel_point', 'initiator', 'commitment_type', 'limbo_balance', 'capacity', 'local_balance', 'remote_balance']
+      allowedColumns: ['closing_txid', 'remote_alias', 'remote_node_pub', 'channel_point', 'initiator', 'commitment_type', 'limbo_balance', 'capacity', 'local_balance', 'remote_balance']
     },
     closed: {
       maxColumns: 7,

src/app/shared/theme/styles/theme-color.scss

@@ -277,8 +277,9 @@
 
   .table-actions-select {
     padding: 0.5rem 1rem;
-    margin: 0.7rem 0;
+    margin: 0.9rem 0;
     min-width: 10rem;
+    min-height: 3.6rem;
     width: 10rem;
     float: right;
     & .mat-select-placeholder {