[WIP] Add support for LNURL pay requests

package.json

@@ -65,6 +65,7 @@
     "html-webpack-plugin": "3.2.0",
     "husky": "2.1.0",
     "jdenticon": "2.1.0",
+    "js-lnurl": "^0.2.3",
     "less": "^3.7.1",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.4.2",

src/app/PromptRoutes.tsx

@@ -6,6 +6,7 @@ import Loader from 'components/Loader';
 import OnboardingPrompt from 'prompts/onboarding';
 import AuthorizePrompt from 'prompts/authorize';
 import PaymentPrompt from 'prompts/payment';
+import LnurlPayPrompt from 'prompts/lnurl';
 import InvoicePrompt from 'prompts/invoice';
 import SignPrompt from 'prompts/sign';
 import VerifyPrompt from 'prompts/verify';
@@ -39,6 +40,7 @@ class Routes extends React.Component<Props> {
         <Route path="/onboarding" exact component={OnboardingPrompt} />
         <Route path="/authorize" exact component={AuthorizePrompt} />
         <Route path="/payment" exact component={PaymentPrompt} />
+        <Route path="/lnurl" exact component={LnurlPayPrompt} />
         <Route path="/invoice" exact component={InvoicePrompt} />
         <Route path="/sign" exact component={SignPrompt} />
         <Route path="/verify" exact component={VerifyPrompt} />

src/app/components/AmountField/index.tsx

@@ -186,7 +186,7 @@ class AmountField extends React.Component<Props, State> {
     }
     if (minimumSats) {
       const min = new BN(minimumSats);
-      if (min.gte(valueBN)) {
+      if (min.gt(valueBN)) {
         const minAmount = `${fromBaseToUnit(min.toString(), denomination)} ${
           denominationSymbols[chain][denomination]
         }`;

src/app/components/PaymentRequest/index.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Alert } from 'antd';
+import './style.less';
+
+import Identicon from 'components/Identicon';
+import Unit from 'components/Unit';
+import { unixMoment, SHORT_FORMAT } from 'utils/time';
+import moment from 'moment';
+import Loader from 'components/Loader';
+import { PaymentRequestData } from 'modules/payment/types';
+
+import { PaymentRequestState } from 'modules/payment/types';
+
+interface Props {
+  routedRequest: PaymentRequestData | null;
+  requestData: PaymentRequestState;
+}
+
+interface State {
+  showMoreInfo: boolean;
+}
+
+const INITIAL_STATE = {
+  showMoreInfo: false,
+};
+
+export default class PaymentRequest extends React.Component<Props, State> {
+  state: State = INITIAL_STATE;
+
+  render() {
+    const { showMoreInfo } = this.state;
+    const { requestData, routedRequest } = this.props;
+
+    const expiry =
+      requestData.data &&
+      unixMoment(requestData.data.request.timestamp).add(
+        requestData.data.request.expiry,
+        'seconds',
+      );
+
+    return (
+      <div className="PaymentRequest">
+        {routedRequest ? (
+          <div className="PaymentRequest-payment">
+            <div className="PaymentRequest-payment-node">
+              <Identicon
+                pubkey={routedRequest.node.pub_key}
+                className="PaymentRequest-payment-node-avatar"
+              />
+              <div className="PaymentRequest-payment-node-info">
+                <div className="PaymentRequest-payment-node-info-alias">
+                  {routedRequest.node.alias}
+                </div>
+                <code className="PaymentRequest-payment-node-info-pubkey">
+                  {routedRequest.node.pub_key}
+                </code>
+              </div>
+            </div>
+            {routedRequest.route ? (
+              <div className="PaymentRequest-payment-details">
+                <table>
+                  <tbody>
+                    {routedRequest.request.num_satoshis && (
+                      <tr>
+                        <td>Amount</td>
+                        <td>
+                          <Unit value={routedRequest.request.num_satoshis} />
+                        </td>
+                      </tr>
+                    )}
+                    <tr>
+                      <td>Fee</td>
+                      <td>
+                        {requestData.isLoading ? (
+                          <Loader inline size="1rem" />
+                        ) : (
+                          <Unit value={routedRequest.route.total_fees} />
+                        )}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>Total</td>
+                      <td>
+                        {requestData.isLoading ? (
+                          <Loader inline size="1rem" />
+                        ) : (
+                          <Unit value={routedRequest.route.total_amt} />
+                        )}
+                      </td>
+                    </tr>
+                    {showMoreInfo && (
+                      <>
+                        <tr>
+                          <td>Hops</td>
+                          <td>{routedRequest.route.hops.length} node(s)</td>
+                        </tr>
+                        <tr>
+                          <td>Time lock</td>
+                          <td>
+                            {moment()
+                              .add(routedRequest.route.total_time_lock, 'seconds')
+                              .fromNow(true)}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>Expires</td>
+                          <td>{expiry && expiry.format(SHORT_FORMAT)}</td>
+                        </tr>
+                      </>
+                    )}
+                  </tbody>
+                </table>
+                {!showMoreInfo && (
+                  <a
+                    className="PaymentRequest-payment-details-more"
+                    onClick={() => this.setState({ showMoreInfo: true })}
+                  >
+                    More info
+                  </a>
+                )}
+              </div>
+            ) : (
+              <Alert
+                style={{ marginBottom: '1rem' }}
+                type="error"
+                message="No route available"
+                description={`
+                  There is no route between you and {requestNode.alias}.
+                  You can try opening a channel with them and trying again.
+                `}
+              />
+            )}
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}

src/app/components/PaymentRequest/style.less

@@ -0,0 +1,133 @@
+@import '~style/variables.less';
+
+.PaymentRequest {
+  &-pr {
+    margin-bottom: 1rem;
+
+    &-input {
+      font-family: @code-family;
+      font-size: 0.65rem;
+      resize: none;
+    }
+
+    &-qr {
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+    }
+  }
+
+  &-payment {
+    margin-bottom: 0.5rem;
+
+    &-node {
+      display: flex;
+      padding: 0.6rem;
+      margin-bottom: 0.5rem;
+
+      &-avatar {
+        flex-shrink: 0;
+        width: 2.8rem;
+        height: 2.8rem;
+        margin-right: 0.75rem;
+      }
+
+      &-info {
+        flex: 1;
+        min-width: 0;
+
+        &-alias {
+          font-size: 1.1rem;
+          font-weight: 500;
+          margin-bottom: 0.1rem;
+        }
+
+        &-pubkey {
+          display: block;
+          font-size: 0.8rem;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+
+    &-value {
+      padding: 0 1rem;
+      margin-bottom: 0.5rem;
+
+      // Ant overrides
+      .ant-input-group.ant-input-group-compact {
+        display: flex;
+      }
+
+      .ant-select-selection-selected-value {
+        font-size: 0.85rem;
+      }
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      table {
+        max-width: 280px;
+        width: 100%;
+        margin-bottom: 0.5rem;
+
+        tr {
+          border-bottom: 1px solid rgba(#000, 0.05);
+
+          &:last-child {
+            border: none;
+          }
+
+          td {
+            padding: 0.2rem;
+
+            &:first-child {
+              text-align: left;
+              min-width: 80px;
+              padding-right: 0.5rem;
+            }
+
+            &:last-child {
+              text-align: right;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      &-more {
+        padding: 0.5rem 0;
+      }
+    }
+  }
+
+  &-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 8rem;
+    margin-bottom: 1rem;
+    color: rgba(#000, 0.2);
+    border: 2px dashed rgba(#000, 0.08);
+    border-radius: 4px;
+  }
+
+  &-buttons {
+    display: flex;
+
+    .ant-btn {
+      &:first-child {
+        margin-right: 0.5rem;
+      }
+      &:last-child {
+        flex: 1;
+      }
+    }
+  }
+}

src/app/prompts/lnurl.less

@@ -0,0 +1,87 @@
+@import '~style/variables.less';
+
+.LnurlPayPrompt {
+  // Default ant overrides, overridden below
+  .ant-form-item-label label {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 0.1rem;
+    color: @text-color-secondary;
+  }
+
+  &-metadata {
+    margin: 0;
+    padding: 0;
+
+    &-item {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &-buttons {
+    display: flex;
+
+    .ant-btn {
+      &:first-child {
+        margin-right: 0.5rem;
+      }
+      &:last-child {
+        flex: 1;
+      }
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+
+    &-icon {
+      img {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    &-title {
+      font-size: 1.15rem;
+      margin: 0 0 0 1rem;
+    }
+  }
+
+  &-form {
+    padding: 1rem;
+
+    &-value {
+      // Ant overrides
+      .ant-input-group.ant-input-group-compact {
+        display: flex;
+      }
+
+      .ant-select-selection-selected-value {
+        font-size: 0.85rem;
+      }
+
+      .ant-form-explain {
+        display: flex;
+        font-size: 0.75rem;
+        margin: 0.2rem 0 1rem;
+
+        > span {
+          margin-right: 0.5rem;
+        }
+
+        > .is-fiat {
+          flex: 1;
+          text-align: right;
+          font-size: 0.85rem;
+        }
+      }
+    }
+  }
+}