[redesign][ln] Receive tab

.eslintignore

@@ -17,3 +17,5 @@ app/middleware/ln/walletunlocker_grpc_pb.js
 app/middleware/ln/walletunlocker_pb.js
 app/middleware/ln/wtclient_grpc_pb.js
 app/middleware/ln/wtclient_pb.js
+app/middleware/ln/invoices_grpc_pb.js
+app/middleware/ln/invoices_pb.js

app/actions/LNActions.js

@@ -3,6 +3,11 @@ import { wallet, ln } from "wallet-preload-shim";
 import { getNextAccountAttempt } from "./ControlActions";
 import * as cfgConstants from "constants/config";
 import { isNumber } from "lodash";
+import {
+  INVOICE_STATUS_SETTLED,
+  INVOICE_STATUS_EXPIRED,
+  INVOICE_STATUS_CANCELED
+} from "constants";
 
 export const CLOSETYPE_COOPERATIVE_CLOSE = 0;
 export const CLOSETYPE_LOCAL_FORCE_CLOSE = 1;
@@ -285,7 +290,7 @@ const connectToLNWallet = (
   // Attempt to connect to the lnrpc service of the wallet. Since the underlying
   // gRPC service of the dcrlnd node is restarted after it's unlocked, we might
   // need to try a few times until we get a proper connection.
-  let lnClient, wtClient;
+  let lnClient, wtClient, inClient;
   let lastError;
   for (let i = 0; i < sleepCount; i++) {
     try {
@@ -301,7 +306,12 @@ const connectToLNWallet = (
         certPath,
         macaroonPath
       );
-
+      inClient = await ln.getLNInvoiceClient(
+        address,
+        port,
+        certPath,
+        macaroonPath
+      );
       // Force a getInfo call to ensure we're connected and the server provides
       // the Lightning service.
       await ln.getInfo(lnClient);
@@ -347,7 +357,7 @@ const connectToLNWallet = (
     );
   }
 
-  dispatch({ lnClient, wtClient, type: LNWALLET_CONNECT_SUCCESS });
+  dispatch({ lnClient, wtClient, inClient, type: LNWALLET_CONNECT_SUCCESS });
 
   return { client: lnClient, wtClient };
 };
@@ -552,9 +562,28 @@ export const addInvoice = (memo, value) => async (dispatch, getState) => {
   }
 };
 
+export const LNWALLET_CANCELINVOICE_ATTEMPT = "LNWALLET_CANCELINVOICE_ATTEMPT";
+export const LNWALLET_CANCELINVOICE_SUCCESS = "LNWALLET_CANCELINVOICE_SUCCESS";
+export const LNWALLET_CANCELINVOICE_FAILED = "LNWALLET_CANCELINVOICE_FAILED";
+
+export const cancelInvoice = (paymentHash) => async (dispatch, getState) => {
+  const inClient = getState().ln.inClient;
+  if (!inClient) return;
+
+  dispatch({ type: LNWALLET_CANCELINVOICE_ATTEMPT });
+  try {
+    await ln.cancelInvoice(inClient, paymentHash);
+    dispatch(listLatestInvoices());
+    dispatch({ type: LNWALLET_CANCELINVOICE_SUCCESS });
+  } catch (error) {
+    dispatch({ error, type: LNWALLET_CANCELINVOICE_FAILED });
+  }
+};
+
 export const LNWALLET_INVOICE_SETTLED = "LNWALLET_INVOICE_SETTLED";
 export const LNWALLET_INVOICE_OPENED = "LNWALLET_INVOICE_OPENED";
 export const LNWALLET_INVOICE_EXPIRED = "LNWALLET_INVOICE_EXPIRED";
+export const LNWALLET_INVOICE_CANCELED = "LNWALLET_INVOICE_CANCELED";
 
 const subscribeToInvoices = () => (dispatch, getState) => {
   const client = getState().ln.client;
@@ -572,12 +601,14 @@ const subscribeToInvoices = () => (dispatch, getState) => {
     }
 
     let type = LNWALLET_INVOICE_OPENED;
-    if (inv.status === ln.INVOICE_STATUS_SETTLED) {
+    if (inv.status === INVOICE_STATUS_SETTLED) {
       type = LNWALLET_INVOICE_SETTLED;
-    } else if (inv.status === ln.INVOICE_STATUS_EXPIRED) {
+    } else if (inv.status === INVOICE_STATUS_EXPIRED) {
       // This doesn't really work. on STATUS_OPEN we need to setup a
       // timer to change the status to EXPIRED.
       type = LNWALLET_INVOICE_EXPIRED;
+    } else if (inv.status === INVOICE_STATUS_CANCELED) {
+      type = LNWALLET_INVOICE_CANCELED;
     }
 
     dispatch({ invoice: inv, invoices: newInvoices, type });
@@ -1034,3 +1065,13 @@ export const removeWatchtower = (wtPubKey) => async (dispatch, getState) => {
     dispatch({ error, type: LNWALLET_REMOVEWATCHTOWER_FAILED });
   }
 };
+
+export const LNWALLET_CHANGE_INVOICE_FILTER = "LNWALLET_CHANGE_INVOICE_FILTER";
+export const changeInvoiceFilter = (newFilter) => (dispatch) =>
+  new Promise((resolve) => {
+    dispatch({
+      invoiceFilter: newFilter,
+      type: LNWALLET_CHANGE_INVOICE_FILTER
+    });
+    resolve();
+  });

app/components/modals/LNInvoiceModal/LNInvoiceModal.jsx

@@ -0,0 +1,126 @@
+import Modal from "../Modal";
+import { FormattedMessage as T } from "react-intl";
+import { CopyableText, classNames } from "pi-ui";
+import styles from "./LNInvoiceModal.module.css";
+import {
+  Balance,
+  LNInvoiceStatus,
+  FormattedRelative,
+  DetailsTable
+} from "shared";
+import { PiUiButton } from "buttons";
+import {
+  INVOICE_STATUS_OPEN,
+  INVOICE_STATUS_SETTLED,
+  INVOICE_STATUS_CANCELED,
+  INVOICE_STATUS_EXPIRED
+} from "constants";
+import { getInvoiceDetails } from "./helpers";
+
+const LNInvoiceModal = ({
+  show,
+  onCancelModal,
+  tsDate,
+  cancelInvoiceAttempt,
+  invoice,
+  onCancelInvoice
+}) => {
+  const isCancelButtonDisabled =
+    cancelInvoiceAttempt || invoice?.status !== INVOICE_STATUS_OPEN;
+
+  return (
+    <Modal className={styles.modal} {...{ show, onCancelModal }}>
+      <div
+        className={styles.closeButton}
+        onClick={onCancelModal}
+        data-testid="lninvoice-close-button"
+      />
+      <div className={styles.title}>
+        <T id="ln.invoiceModal.title" m="Lightning Payment Request" />
+      </div>
+      <div className={styles.dataGrid}>
+        <label>
+          <T id="ln.invoiceModal.requestedAmount" m="Requested Amount" />
+        </label>
+        <label>
+          <T id="ln.invoiceModal.status" m="Status" />
+        </label>
+        <label>
+          <T id="ln.invoiceModal.date" m="Date" />
+        </label>
+        <label>
+          {invoice.status === INVOICE_STATUS_SETTLED ? (
+            <T id="ln.invoiceModal.settleDateLabel" m="Settle Date" />
+          ) : (
+            <T id="ln.invoiceModal.expirationTime" m="Expiration Time" />
+          )}
+        </label>
+        <Balance amount={invoice?.value} classNameWrapper={styles.amount} />
+        <div className={styles.status}>
+          <LNInvoiceStatus status={invoice?.status} />
+        </div>
+        <div className={styles.date}>
+          <T
+            id="ln.invoicesModal.creationDate"
+            m="{creationDate, date, medium} {creationDate, time, short}"
+            values={{ creationDate: tsDate(invoice?.creationDate) }}
+          />
+        </div>
+        {invoice.status === INVOICE_STATUS_SETTLED ? (
+          <T
+            id="ln.invoicesModal.settleDate"
+            m="{settleDate, date, medium} {settleDate, time, short}"
+            values={{ settleDate: tsDate(invoice?.settleDate) }}
+          />
+        ) : (
+          <>
+            {invoice?.creationDate + invoice?.expiry < Date.now() / 1000 ? (
+              <T id="ln.invoicesModal.expired" m="Expired " />
+            ) : (
+              <T id="ln.invoicesModal.expires" m="Expires " />
+            )}
+            <FormattedRelative
+              value={tsDate(invoice?.creationDate + invoice?.expiry)}
+            />
+          </>
+        )}
+        <div className={styles.cancelInvoiceWrapper}>
+          <PiUiButton
+            className={classNames(
+              styles.cancelInvoice,
+              isCancelButtonDisabled && styles.disabled
+            )}
+            onClick={onCancelInvoice}
+            disabled={isCancelButtonDisabled}>
+            <T id="ln.invoicesModal.cancelInvoice" m="Cancel Invoice" />
+          </PiUiButton>
+        </div>
+      </div>
+      <div className={styles.requestCodeLabel}>
+        <T
+          id="ln.invoicesModal.requestCodeLabel"
+          m="Lightning Payment Request Code (Send this to Payer)"
+        />
+      </div>
+      {invoice?.status === INVOICE_STATUS_CANCELED ||
+      invoice?.status === INVOICE_STATUS_EXPIRED ? (
+        <div className={styles.paymentRequest}>{invoice?.paymentRequest}</div>
+      ) : (
+        <CopyableText
+          tooltipPlacement="top"
+          id="paymentRequest"
+          truncate={false}>
+          {invoice?.paymentRequest}
+        </CopyableText>
+      )}
+      <DetailsTable
+        data={getInvoiceDetails(invoice, tsDate)}
+        className={styles.details}
+        title={<T id="ln.invoicesModal.details" m="Details" />}
+        expandable
+      />
+    </Modal>
+  );
+};
+
+export default LNInvoiceModal;

app/components/modals/LNInvoiceModal/LNInvoiceModal.module.css

@@ -0,0 +1,122 @@
+.modal {
+  background-image: none;
+  padding: 30px 40px;
+  width: 764px;
+  overflow-x: hidden;
+  position: relative;
+  margin: 0;
+  max-height: calc(100% - 130px);
+  display: flex;
+  flex-direction: column;
+}
+.closeButton {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  height: 10px;
+  width: 10px;
+  background-image: var(--x-grey);
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.title {
+  font-size: 28px;
+  color: var(--grey-7);
+  line-height: 35px;
+}
+.date {
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--main-dark-blue);
+}
+.dataGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--main-dark-blue);
+  align-items: center;
+  grid-row-gap: 5px;
+  margin: 19px 0 30px 0;
+}
+.dataGrid label {
+  color: var(--grey-7);
+}
+.amount {
+  font-size: 16px;
+  line-height: 22px;
+}
+.cancelInvoiceWrapper {
+  border-left: 1px solid var(--grey-3);
+  padding-left: 25px;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  grid-column: -1;
+}
+.cancelInvoice {
+  background-color: var(--grey-7) !important;
+  border-color: var(--grey-7) !important;
+}
+.cancelInvoice:hover {
+  opacity: 0.85;
+}
+.cancelInvoice.disabled {
+  background-color: var(--btn-disabled-background-color) !important;
+  border: 1px solid var(--btn-disabled-background-color) !important;
+}
+.requestCodeLabel {
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--grey-7);
+  margin-bottom: 10px;
+}
+.paymentRequest {
+  padding: 0.3rem 1rem;
+  word-break: break-all;
+  background-color: var(--copyable-text-background-color);
+  border-radius: 0.4rem;
+  color: var(--text-color);
+  font-size: var(--font-size-normal);
+  line-height: var(--spacing-2);
+}
+
+.details {
+  margin: 20px 0 0 0;
+}
+
+@media screen and (max-width: 768px) {
+  .modal {
+    width: 355px;
+    padding: 30px 20px;
+  }
+  .title {
+    font-size: 24px;
+  }
+  .dataGrid {
+    grid-template-columns: 2fr;
+  }
+  .cancelInvoiceWrapper {
+    grid-column: 2;
+    grid-row-start: initial;
+    grid-row-end: initial;
+    padding-left: 0;
+    border: none;
+    margin-top: 10px;
+  }
+  .dataGrid label {
+    grid-column: 1;
+  }
+  .amount {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .status {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  .date {
+    grid-column: 2;
+    grid-row: 3;
+  }
+}