update payment list

app/actions/LNActions.js

@@ -1075,3 +1075,13 @@ export const changeInvoiceFilter = (newFilter) => (dispatch) =>
     });
     resolve();
   });
+
+export const LNWALLET_CHANGE_PAYMENT_FILTER = "LNWALLET_CHANGE_PAYMENT_FILTER";
+export const changePaymentFilter = (newFilter) => (dispatch) =>
+  new Promise((resolve) => {
+    dispatch({
+      paymentFilter: newFilter,
+      type: LNWALLET_CHANGE_PAYMENT_FILTER
+    });
+    resolve();
+  });

app/components/modals/LNPaymentModal/LNPaymentModal.jsx

@@ -1,6 +1,6 @@
 import Modal from "../Modal";
 import { FormattedMessage as T } from "react-intl";
-import { CopyableText } from "pi-ui";
+import { CopyableText, Message } from "pi-ui";
 import styles from "./LNPaymentModal.module.css";
 import { Balance, LNPaymentStatus, DetailsTable } from "shared";
 import { getPaymentDetails } from "./helpers";
@@ -10,7 +10,7 @@ const LNPaymentModal = ({ show, onCancelModal, tsDate, payment }) => (
     <div
       className={styles.closeButton}
       onClick={onCancelModal}
-      data-testid="lninvoice-close-button"
+      data-testid="lnpayment-close-button"
     />
     <div className={styles.title}>
       <T id="ln.paymentModal.title" m="Lightning Payment" />
@@ -41,15 +41,25 @@ const LNPaymentModal = ({ show, onCancelModal, tsDate, payment }) => (
       </div>
       <Balance amount={payment?.fee} classNameWrapper={styles.amount} />
     </div>
-    <div className={styles.requestCodeLabel}>
-      <T
-        id="ln.paymentModal.requestCodeLabel"
-        m="Lightning Payment Request Code"
-      />
-    </div>
-    <CopyableText tooltipPlacement="top" id="paymentRequest" truncate={false}>
-      {payment?.paymentRequest}
-    </CopyableText>
+    {payment?.paymentRequest && (
+      <>
+        <div className={styles.requestCodeLabel}>
+          <T
+            id="ln.paymentModal.requestCodeLabel"
+            m="Lightning Payment Request Code"
+          />
+        </div>
+        <CopyableText
+          tooltipPlacement="top"
+          id="paymentRequest"
+          truncate={false}>
+          {payment.paymentRequest}
+        </CopyableText>
+      </>
+    )}
+    {payment.paymentError && (
+      <Message kind="error">{payment.paymentError}</Message>
+    )}
     <DetailsTable
       data={getPaymentDetails(payment, tsDate)}
       className={styles.details}

app/components/modals/LNPaymentModal/helpers.js

@@ -10,6 +10,21 @@ export const getPaymentDetails = (payment) => {
     }
   ];
 
+  if (payment?.description) {
+    details.push({
+      label: <T id="ln.paymentModal.desc" m="Description" />,
+      value: payment.description
+    });
+  }
+
+  if (payment?.destination) {
+    details.push({
+      label: <T id="ln.paymentModal.destination" m="Destination" />,
+      value: payment.destination,
+      truncate: 40
+    });
+  }
+
   payment?.htlcsList?.forEach((htlc, index) => {
     const response = {
       label: (

app/components/shared/DetailsTable/DetailsTable.jsx

@@ -5,7 +5,7 @@ import { SmallButton } from "buttons";
 import { CopyToClipboard, TruncatedText } from "shared";
 
 const ValueField = ({ data }) => {
-  const { value, copyable, truncate  } = data;
+  const { value, copyable, truncate } = data;
   const truncatedText = truncate ? (
     <TruncatedText text={value} max={truncate} showTooltip />
   ) : (

app/components/shared/LNPaymentStatus.jsx

@@ -1,10 +1,7 @@
 import { StatusTag } from "pi-ui";
 import { defineMessages } from "react-intl";
 import { useIntl } from "react-intl";
-import {
-  PAYMENT_STATUS_CONFIRMED,
-  PAYMENT_STATUS_FAILED,
-} from "constants";
+import { PAYMENT_STATUS_PENDING, PAYMENT_STATUS_FAILED } from "constants";
 
 const messages = defineMessages({
   confirmed: {
@@ -23,18 +20,18 @@ const messages = defineMessages({
 
 const LNPaymentStatus = ({ status }) => {
   const intl = useIntl();
-  return status === PAYMENT_STATUS_CONFIRMED ? (
-    <StatusTag
-      type="greenCheck"
-      text={intl.formatMessage(messages.confirmed)}
-    />
+  return status === PAYMENT_STATUS_PENDING ? (
+    <StatusTag type="bluePending" text={intl.formatMessage(messages.pending)} />
   ) : status === PAYMENT_STATUS_FAILED ? (
     <StatusTag
       type="orangeNegativeCircled"
       text={intl.formatMessage(messages.failed)}
     />
   ) : (
-    <StatusTag type="bluePending" text={intl.formatMessage(messages.pending)} />
+    <StatusTag
+      type="greenCheck"
+      text={intl.formatMessage(messages.confirmed)}
+    />
   );
 };
 

app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.jsx

@@ -1,5 +1,5 @@
 import { FormattedMessage as T } from "react-intl";
-import { Balance } from "shared";
+import { Balance, TruncatedText } from "shared";
 import { DcrInput } from "inputs";
 import styles from "./DecodedPayRequest.module.css";
 
@@ -24,7 +24,9 @@ const DecodedPayRequest = ({ decoded, sendValue, onSendValueChanged }) => (
       <label>
         <T id="ln.paymentsTab.destLabel" m="Destination" />
       </label>
-      <div className={styles.destination}>{decoded.destination}</div>
+      <div className={styles.destination}>
+        <TruncatedText text={decoded.destination} max={10} />
+      </div>
     </div>
   </div>
 );

app/components/views/LNPage/SendTab/DecodedPayRequest/DecodedPayRequest.module.css

@@ -21,9 +21,6 @@
 }
 
 .destination {
-  max-width: 113px;
-  text-overflow: ellipsis;
-  overflow: hidden;
   font-size: 20px;
   line-height: 25px;
   color: var(--main-dark-blue);

app/components/views/LNPage/SendTab/PaymentRow/PaymentRow.module.css

@@ -20,7 +20,7 @@
 
 .value {
   padding-left: 57px;
-  background-image: var(--ln-invoice-icon);
+  background-image: var(--minus-small-icon);
   background-size: 22px 22px;
   background-position: 20px center;
   background-repeat: no-repeat;
@@ -36,10 +36,7 @@
 .value .paymentHash {
   font-size: 13px;
   line-height: 16px;
-  text-overflow: ellipsis;
-  overflow: hidden;
   color: var(--grey-5);
-  max-width: 267px;
 }
 
 .date {