feat(ui): add ability to specify fallback address in LN invoices

resolves #2021

renderer/components/Request/Request.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Flex } from 'rebass'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { intlShape } from '@zap/i18n'
 import { Bar, Button, Header, Panel, Span, Text, Tooltip } from 'components/UI'
 import { Form, Label, TextArea, Toggle } from 'components/Form'
@@ -30,6 +30,7 @@ class Request extends React.Component {
     isProcessing: PropTypes.bool,
     payReq: PropTypes.string,
     showNotification: PropTypes.func.isRequired,
+    willUseFallback: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -89,9 +90,32 @@ class Request extends React.Component {
    *
    * @param  {object} values submitted form values.
    */
-  onSubmit = values => {
-    const { cryptoUnit, createInvoice } = this.props
-    createInvoice(values.amountCrypto, cryptoUnit, values.memo, values.routingHints)
+  onSubmit = async values => {
+    const {
+      cryptoUnit,
+      createInvoice,
+      willUseFallback,
+      createNewAddress,
+      intl,
+      showError,
+    } = this.props
+    try {
+      const invoiceArgs = {
+        amount: values.amountCrypto,
+        cryptoUnit,
+        memo: values.memo,
+        isPrivate: values.routingHints,
+      }
+
+      if (willUseFallback) {
+        invoiceArgs.fallbackAddress = await createNewAddress()
+      }
+
+      createInvoice(invoiceArgs)
+    } catch (e) {
+      const message = intl.formatMessage({ ...messages.add_error })
+      showError(message)
+    }
   }
 
   /**
@@ -189,6 +213,9 @@ class Request extends React.Component {
       invoice,
       payReq,
       showNotification,
+      createNewAddress,
+      showError,
+      willUseFallback,
       ...rest
     } = this.props
     const { currentStep } = this.state

renderer/containers/Request.js

@@ -5,6 +5,7 @@ import { createInvoice, invoiceSelectors } from 'reducers/invoice'
 import { showNotification } from 'reducers/notification'
 import { walletSelectors } from 'reducers/wallet'
 import { infoSelectors } from 'reducers/info'
+import { settingsSelectors } from 'reducers/settings'
 
 const mapStateToProps = state => ({
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
@@ -14,6 +15,7 @@ const mapStateToProps = state => ({
   isProcessing: state.invoice.invoiceLoading,
   payReq: state.invoice.invoice,
   invoice: invoiceSelectors.invoice(state),
+  willUseFallback: settingsSelectors.currentConfig(state).invoices.useAddressFallback,
 })
 
 const mapDispatchToProps = {

renderer/reducers/invoice.js

@@ -164,14 +164,15 @@ export const receiveInvoices = ({ invoices }) => dispatch => {
 /**
  * createInvoice - Create an invoice.
  *
- * @param {number} amount Amount
- * @param {string} cryptoUnit Crypto unit (sats, bits, btc)
- * @param {string} memo Memo
- * @param {boolean} isPrivate Set to true to include routing hints
- * @param {string} fallbackAddress on-chain address fallback
+ * @param {object} options request options
+ * @param {number} options.amount Amount
+ * @param {string} options.cryptoUnit Crypto unit (sats, bits, btc)
+ * @param {string} options.memo Memo
+ * @param {boolean} options.isPrivate Set to true to include routing hints
+ * @param {string} options.fallbackAddress on-chain address fallback
  * @returns {Function} Thunk
  */
-export const createInvoice = (amount, cryptoUnit, memo, isPrivate) => async (
+export const createInvoice = ({ amount, cryptoUnit, memo, isPrivate, fallbackAddress }) => async (
   dispatch,
   getState
 ) => {
@@ -195,6 +196,7 @@ export const createInvoice = (amount, cryptoUnit, memo, isPrivate) => async (
       memo,
       private: isPrivate || activeWalletSettings.type === 'local',
       expiry: currentConfig.invoices.expire,
+      fallback_addr: fallbackAddress,
     })
     dispatch(createInvoiceSuccess(invoice))
   } catch (error) {