CLT multi part payment sort, total and status fix (#440)

CLT Update payments lists multiple entries for a payment hash CLT multi part payment sort, total and status fix
4 years ago · 03ca93bb0c
parent c72e2ed2c0
commit 03ca93bb0c
18 changed files with 62 additions and 35 deletions
--- a/angular/6.2ac1de8468e955ce83bb.js
+++ b/angular/6.2ac1de8468e955ce83bb.js
--- a/angular/6.ffaa7252647a44b45232.js
+++ b/angular/6.ffaa7252647a44b45232.js
--- a/angular/index.html
+++ b/angular/index.html
@ -12,8 +12,8 @@
  <link rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
-<link rel="stylesheet" href="styles.7f0a84d9b012559f3600.css"></head>
+<link rel="stylesheet" href="styles.63dd7929168e9fd14a1a.css"></head>
 <body>
  <rtl-app></rtl-app>
-<script src="runtime.07b50d065ad9d6662cbb.js" defer></script><script src="polyfills-es5.2ac0d98b22574ae745b1.js" nomodule defer></script><script src="polyfills.5ae721a6ae5ab597a53d.js" defer></script><script src="main.000a76bc1ed847617608.js" defer></script></body>
+<script src="runtime.c63002fac7bc2c286197.js" defer></script><script src="polyfills-es5.2ac0d98b22574ae745b1.js" nomodule defer></script><script src="polyfills.5ae721a6ae5ab597a53d.js" defer></script><script src="main.ca73782b88fe84df47e5.js" defer></script></body>
 </html>
--- a/angular/main.ca73782b88fe84df47e5.js
+++ b/angular/main.ca73782b88fe84df47e5.js
--- a/angular/runtime.07b50d065ad9d6662cbb.js
+++ b/angular/runtime.07b50d065ad9d6662cbb.js
@ -1 +0,0 @@
-!function(e){function r(r){for(var n,u,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)u=i[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return a.push.apply(a,f||[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(a.splice(r--,1),e=u(u.s=t[0]))}return e}var n={},o={0:0},a=[];function u(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var a,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+""+({}[e]||e)+"."+{1:"9bb271dd8dffd2d994a5",6:"ffaa7252647a44b45232",7:"4a00e92294df28ac9ca1",8:"98795e7ab86361a07d2b"}[e]+".js"}(e);var c=new Error;a=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){a({type:"timeout",target:i})}),12e4);i.onerror=i.onload=a,document.head.appendChild(i)}return Promise.all(r)},u.m=e,u.c=n,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)u.d(t,n,(function(r){return e[r]}).bind(null,n));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="",u.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
--- a/angular/runtime.c63002fac7bc2c286197.js
+++ b/angular/runtime.c63002fac7bc2c286197.js
@ -0,0 +1 @@
+!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9bb271dd8dffd2d994a5",6:"2ac1de8468e955ce83bb",7:"4a00e92294df28ac9ca1",8:"98795e7ab86361a07d2b"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
--- a/angular/styles.63dd7929168e9fd14a1a.css
+++ b/angular/styles.63dd7929168e9fd14a1a.css
--- a/controllers/c-lightning/payments.js
+++ b/controllers/c-lightning/payments.js
@ -3,8 +3,9 @@ var common = require('../../common');
 var logger = require('../logger');
 var options = {};

-function paymentReducer (accumulator, currentPayment) {
+function paymentReducer(accumulator, currentPayment) {
  let currPayHash = currentPayment.payment_hash;
+  if (!currentPayment.partid) { currentPayment.partid = 0; }
  if(!accumulator[currPayHash]) {
    accumulator[currPayHash] = [currentPayment];
  } else {
@ -13,20 +14,31 @@ function paymentReducer (accumulator, currentPayment) {
  return accumulator;
 }

+function summaryReducer(accumulator, mpp) {
+  if (mpp.status === 'complete') {
+    accumulator.msatoshi = accumulator.msatoshi + mpp.msatoshi;
+    accumulator.msatoshi_sent = accumulator.msatoshi_sent + mpp.msatoshi_sent;
+    accumulator.status = mpp.status;
+  }
+  return accumulator;
+}
+
 function groupBy(payments) {
  let temp = null;
  let paymentsInGroups = payments.reduce(paymentReducer, {});
-  let paymentsgrpArray = Object.keys(paymentsInGroups).map(key => paymentsInGroups[key]);
-  return paymentsgrpArray.reduce((acc, curr) => {
+  let paymentsGrpArray = Object.keys(paymentsInGroups).map(key => (paymentsInGroups[key].length && paymentsInGroups[key].length > 1) ? common.sortDescByKey(paymentsInGroups[key], 'partid') : paymentsInGroups[key]);
+  return paymentsGrpArray.reduce((acc, curr) => {
    if (curr.length && curr.length === 1) {
      temp = JSON.parse(JSON.stringify(curr));
      temp[0].is_group = false;
      temp[0].is_expanded = false;
      temp[0].total_parts = 1;
+      delete temp[0].partid;
    } else {
      temp = {};
-      temp = {is_group: true, is_expanded: false, total_parts: (curr.length ? curr.length : 0), payment_hash: curr[0].payment_hash, 
-      destination: curr[0].destination, msatoshi: curr[0].msatoshi, msatoshi_sent: curr[0].msatoshi_sent, created_at: curr[0].created_at, 
+      let paySummary = curr.reduce(summaryReducer, {msatoshi: 0, msatoshi_sent: 0, status: (curr[0] && curr[0].status) ? curr[0].status : 'failed'});
+      temp = {is_group: true, is_expanded: false, total_parts: (curr.length ? curr.length : 0), status: paySummary.status, payment_hash: curr[0].payment_hash, 
+      destination: curr[0].destination, msatoshi: paySummary.msatoshi, msatoshi_sent: paySummary.msatoshi_sent, created_at: curr[0].created_at, 
      created_at_str: curr[0].created_at_str, mpps: curr};
    }
    return acc.concat(temp);
--- a/src/app/clightning/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html
+++ b/src/app/clightning/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html
@ -37,12 +37,12 @@
      <ng-container matColumnDef="msatoshi_to_us">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Balance (Sats) </th>
        <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
-            {{channel?.msatoshi_to_us/1000 | number:'1.0-0'}} </span></td>
+            {{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
      </ng-container>
      <ng-container matColumnDef="msatoshi_to_them">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Balance (Sats) </th>
        <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
-            {{channel?.msatoshi_to_them/1000 | number:'1.0-0'}} </span></td>
+            {{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
      </ng-container>
      <ng-container matColumnDef="msatoshi_total">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Total mSatoshis </th>
--- a/src/app/clightning/routing/failed-transactions/failed-transactions.component.html
+++ b/src/app/clightning/routing/failed-transactions/failed-transactions.component.html
@ -29,11 +29,11 @@
      </ng-container>
      <ng-container matColumnDef="in_msatoshi">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
-        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:'1.0-0'}}</span></td>
+        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
      </ng-container>
      <ng-container matColumnDef="out_msatoshi">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
-        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:'1.0-0'}}</span></td>
+        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
      </ng-container>
      <ng-container matColumnDef="fee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee mSat</th>
--- a/src/app/clightning/routing/forwarding-history/forwarding-history.component.html
+++ b/src/app/clightning/routing/forwarding-history/forwarding-history.component.html
@ -29,11 +29,11 @@
      </ng-container>
      <ng-container matColumnDef="in_msatoshi">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
-        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:'1.0-0'}}</span></td>
+        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
      </ng-container>
      <ng-container matColumnDef="out_msatoshi">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
-        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:'1.0-0'}}</span></td>
+        <td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
      </ng-container>
      <ng-container matColumnDef="fee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee mSat</th>
--- a/src/app/clightning/store/cl.effects.ts
+++ b/src/app/clightning/store/cl.effects.ts
@ -37,7 +37,7 @@ export class CLEffects implements OnDestroy {
      this.store.select('cl')
      .pipe(takeUntil(this.unSubs[0]))
      .subscribe((rtlStore) => {
-        if(rtlStore.initialAPIResponseStatus[0] === 'INCOMPLETE' && rtlStore.initialAPIResponseStatus.length > 8) {
+        if(rtlStore.initialAPIResponseStatus[0] === 'INCOMPLETE' && rtlStore.initialAPIResponseStatus.length > 9) {
          rtlStore.initialAPIResponseStatus[0] = 'COMPLETE';
          this.store.dispatch(new RTLActions.CloseSpinner());
        }
@ -743,6 +743,7 @@ export class CLEffects implements OnDestroy {
    this.store.dispatch(new CLActions.FetchFeeRates('perkb'));
    this.store.dispatch(new CLActions.FetchPeers());
    this.store.dispatch(new CLActions.FetchTransactions());
+    this.store.dispatch(new CLActions.FetchPayments());
    let newRoute = this.location.path();
    if(newRoute.includes('/lnd/')) {
      newRoute = newRoute.replace('/lnd/', '/cl/');
--- a/src/app/clightning/store/cl.reducers.ts
+++ b/src/app/clightning/store/cl.reducers.ts
@ -164,8 +164,10 @@ export function CLReducer(state = initCLState, action: CLActions.CLActions) {
        allChannels: modifiedChannels
      };
    case CLActions.SET_PAYMENTS_CL:
+      newAPIStatus = [...state.initialAPIResponseStatus, 'PAYMENTS'];
      return {
        ...state,
+        initialAPIResponseStatus: newAPIStatus,
        payments: action.payload
      };
    case CLActions.SET_FORWARDING_HISTORY_CL:
--- a/src/app/clightning/transactions/invoices/lightning-invoices.component.html
+++ b/src/app/clightning/transactions/invoices/lightning-invoices.component.html
@ -52,11 +52,11 @@
        </ng-container>
        <ng-container matColumnDef="msatoshi">
          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
-          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.msatoshi/1000 | number:'1.0-0'}}</span></td>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.msatoshi/1000 | number:invoice.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
        </ng-container>
        <ng-container matColumnDef="msatoshi_received">
          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount Settled (Sats) </th>
-          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.msatoshi_received/1000 | number:'1.0-0'}}</span></td>
+          <td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.msatoshi_received/1000 | number:invoice.msatoshi_received < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
        </ng-container>
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="px-3">
--- a/src/app/clightning/transactions/payments/lightning-payments.component.html
+++ b/src/app/clightning/transactions/payments/lightning-payments.component.html
@ -30,7 +30,7 @@
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Created At</th>
          <td mat-cell *matCellDef="let payment">
            <span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-            <span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Incomplete" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+            <span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
            {{payment?.created_at_str}}
          </td>
        </ng-container>
@ -43,12 +43,12 @@
        <ng-container matColumnDef="msatoshi_sent">
          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent</th>
          <td mat-cell *matCellDef="let payment"><span
-              fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:'1.0-0'}}</span></td>
+              fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
        </ng-container>
        <ng-container matColumnDef="msatoshi">
          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Received</th>
          <td mat-cell *matCellDef="let payment"><span
-              fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:'1.0-0'}}</span></td>
+              fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
        </ng-container>
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="px-3">
@ -72,11 +72,15 @@
        <!-- Payment Group Row Start -->
        <ng-container matColumnDef="groupTotal">
          <td mat-cell *matCellDef="let payment">
-            <span fxLayoutAlign="start center" class="mpp-row-span">Total Attempts: {{payment?.total_parts}}</span>
+            <span fxLayoutAlign="start center" class="mpp-row-span">
+              <span *ngIf="payment.status === 'complete'" class="dot green mt-0" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+              <span *ngIf="payment.status !== 'complete'" class="dot yellow mt-0" matTooltip="Incomplete/Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+              Total Attempts: {{payment?.total_parts}}
+            </span>
            <ng-container *ngIf="payment.is_expanded">
              <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">
-                <span *ngIf="mpp.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-                <span *ngIf="mpp.status !== 'complete'" class="dot yellow" matTooltip="Incomplete" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+                <span *ngIf="mpp.status === 'complete'" class="dot green mt-0" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+                <span *ngIf="mpp.status !== 'complete'" class="dot yellow mt-0" matTooltip="Incomplete/Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
                {{mpp.created_at_str}}
              </span>
            </ng-container>
@ -94,20 +98,20 @@
        </ng-container>
        <ng-container matColumnDef="groupAmtSent">
          <td mat-cell *matCellDef="let payment">
-            <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi_sent/1000 | number:'1.0-0'}}</span>
+            <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span>
            <span *ngIf="payment.is_expanded">
              <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
-                {{mpp.msatoshi_sent/1000 | number:'1.0-0'}}
+                {{mpp.msatoshi_sent/1000 | number:mpp.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}
              </span>
            </span>
          </td>
        </ng-container>
        <ng-container matColumnDef="groupAmtRecv">
          <td mat-cell *matCellDef="let payment">
-            <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi/1000 | number:'1.0-0'}}</span>
+            <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span>
            <span *ngIf="payment.is_expanded">
              <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
-                {{mpp.msatoshi/1000 | number:'1.0-0'}}
+                {{mpp.msatoshi/1000 | number:mpp.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}
              </span>
            </span>
          </td>
@ -115,11 +119,11 @@
        <ng-container matColumnDef="groupAction">
          <td mat-cell *matCellDef="let payment" class="px-3">
            <span fxLayoutAlign="end center">
-              <button mat-stroked-button class="btn-mpp-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide Attemps' : 'Show Attemps'}}</button>
+              <button mat-flat-button class="btn-mpp-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
            </span>
            <div *ngIf="payment.is_expanded">
              <div *ngFor="let mpp of payment?.mpps; index as i" fxLayoutAlign="end center">
-                <button mat-stroked-button class="btn-mpp-info" color="primary" type="button" tabindex="6" (click)="onPaymentClick(mpp)">View Part {{mpp.partid ? mpp.partid : 0}}</button>
+                <button mat-stroked-button class="btn-mpp-info" color="primary" type="button" tabindex="6" (click)="onPaymentClick(mpp)">View {{mpp.partid ? mpp.partid : 0}}</button>
              </div>
            </div>
          </td>
--- a/src/app/clightning/transactions/payments/lightning-payments.component.scss
+++ b/src/app/clightning/transactions/payments/lightning-payments.component.scss
@ -12,8 +12,13 @@
 .mat-column-groupAction {
  min-height: 4.8rem;

+  & .btn-mpp-expand {
+    width: 9rem; 
+  }
+
  & .btn-mpp-info {
-    margin-top: 0.5rem;  
+    margin-top: 0.5rem; 
+    width: 9rem; 
  }
 }

--- a/src/app/clightning/transactions/payments/lightning-payments.component.ts
+++ b/src/app/clightning/transactions/payments/lightning-payments.component.ts
@ -78,7 +78,6 @@ export class CLLightningPaymentsComponent implements OnInit, OnDestroy {
  }

  ngOnInit() {
-    this.store.dispatch(new CLActions.FetchPayments());    
    this.store.select('cl')
    .pipe(takeUntil(this.unSubs[0]))
    .subscribe((rtlStore) => {
@ -243,7 +242,7 @@ export class CLLightningPaymentsComponent implements OnInit, OnDestroy {
      [{key: 'msatoshi', value: selPayment.msatoshi, title: 'Amount (mSats)', width: 50, type: DataTypeEnum.NUMBER},
        {key: 'msatoshi_sent', value: selPayment.msatoshi_sent, title: 'Amount Sent (mSats)', width: 50, type: DataTypeEnum.NUMBER}]
    ];
-    if (selPayment.partid) {
+    if (selPayment.hasOwnProperty('partid')) {
      reorderedPayment.unshift(
        [{key: 'payment_hash', value: selPayment.payment_hash, title: 'Payment Hash', width: 80, type: DataTypeEnum.STRING},
        {key: 'partid', value: selPayment.partid, title: 'Part ID', width: 20, type: DataTypeEnum.STRING}]);
--- a/src/app/shared/theme/styles/root.scss
+++ b/src/app/shared/theme/styles/root.scss
@ -262,6 +262,10 @@ body {
  margin: 2px 0 !important;
 }

+.mt-0 {
+  margin-top: 0 !important;
+}
+
 .mt-1 {
  margin-top: 1rem !important;
 }
				`@ -1 +0,0 @@`
				!function(e){function r(r){for(var n,u,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)u=i[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return a.push.apply(a,f\|\|[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(a.splice(r--,1),e=u(u.s=t[0]))}return e}var n={},o={0:0},a=[];function u(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var a,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+""+({}[e]\|\|e)+"."+{1:"9bb271dd8dffd2d994a5",6:"ffaa7252647a44b45232",7:"4a00e92294df28ac9ca1",8:"98795e7ab86361a07d2b"}[e]+".js"}(e);var c=new Error;a=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){a({type:"timeout",target:i})}),12e4);i.onerror=i.onload=a,document.head.appendChild(i)}return Promise.all(r)},u.m=e,u.c=n,u.d=function(e,r,t){u.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)u.d(t,n,(function(r){return e[r]}).bind(null,n));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="",u.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp\|\|[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
				`@ -0,0 +1 @@`
				!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f\|\|[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]\|\|e)+"."+{1:"9bb271dd8dffd2d994a5",6:"2ac1de8468e955ce83bb",7:"4a00e92294df28ac9ca1",8:"98795e7ab86361a07d2b"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp\|\|[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);