feat(ui): integrate new request forms

app/components/Form/Form.js

@@ -1,12 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import X from 'components/Icon/X'
 import { Modal } from 'components/UI'
 import Pay from 'containers/Pay'
-import Request from './Request'
+import Request from 'containers/Request'
 import styles from './Form.scss'
 
-const Form = ({ formType, formProps, closeForm }) => {
+const Form = ({ formType, closeForm }) => {
   if (!formType) {
     return null
   }
@@ -24,12 +23,9 @@ const Form = ({ formType, formProps, closeForm }) => {
     case 'REQUEST_FORM':
       return (
         <div className={styles.container}>
-          <div className={styles.closeContainer}>
+          <Modal onClose={closeForm}>
-            <span onClick={closeForm}>
+            <Request width={9 / 16} mx="auto" />
-              <X />
+          </Modal>
-            </span>
-          </div>
-          <Request {...formProps} />
         </div>
       )
   }

app/containers/App.js

@@ -147,8 +147,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     onRequestSubmit: () =>
       dispatchProps.createInvoice(
         stateProps.requestform.amount,
-        stateProps.requestform.memo,
+        stateProps.ticker.currency,
-        stateProps.ticker.currency
+        stateProps.requestform.memo
       )
   }
 

app/containers/Request.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import { Request } from 'components/Request'
+import { tickerSelectors, setCurrency, setFiatTicker } from 'reducers/ticker'
+import { createInvoice } from 'reducers/invoice'
+
+const mapStateToProps = state => ({
+  cryptoName: tickerSelectors.cryptoName(state),
+  currentTicker: tickerSelectors.currentTicker(state),
+  cryptoCurrency: state.ticker.currency,
+  cryptoCurrencyTicker: tickerSelectors.currencyName(state),
+  cryptoCurrencies: state.ticker.currencyFilters,
+  fiatCurrencies: state.ticker.fiatTickers,
+  fiatCurrency: state.ticker.fiatTicker,
+  isProcessing: state.invoice.invoiceLoading,
+  payReq: state.invoice.invoice
+})
+
+const mapDispatchToProps = {
+  createInvoice,
+  setCryptoCurrency: setCurrency,
+  setFiatCurrency: setFiatTicker
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Request)

app/lib/lnd/methods/invoicesController.js

@@ -9,7 +9,7 @@ import pushinvoices from '../push/subscribeinvoice'
  */
 export function addInvoice(lnd, { memo, value, private: privateInvoice }) {
   return new Promise((resolve, reject) => {
-    lnd.addInvoice({ memo, value, private: privateInvoice }, (err, data) => {
+    lnd.addInvoice({ memo, value, private: privateInvoice, expiry: 600 }, (err, data) => {
       if (err) {
         return reject(err)
       }

app/reducers/invoice.js

@@ -1,15 +1,11 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
-import { push } from 'react-router-redux'
 import db from 'store/db'
 
 import { showNotification } from 'lib/utils/notifications'
 import { btc } from 'lib/utils'
 
-import { showActivityModal } from './activity'
 import { fetchBalance } from './balance'
-import { setFormType } from './form'
-import { resetRequestForm } from './requestform'
 import { setError } from './error'
 
 // ------------------------------------
@@ -104,7 +100,7 @@ export const receiveInvoices = (event, { invoices }) => dispatch => {
 }
 
 // Send IPC event for creating an invoice
-export const createInvoice = (amount, memo, currency) => async dispatch => {
+export const createInvoice = (amount, currency, memo) => async dispatch => {
   // backend needs value in satoshis no matter what currency we are using
   const value = btc.convert(currency, 'sats', amount)
 
@@ -125,22 +121,13 @@ export const createInvoice = (amount, memo, currency) => async dispatch => {
 
 // Receive IPC event for newly created invoice
 export const createdInvoice = (event, invoice) => dispatch => {
-  // Close the form modal once the payment was succesful
-  dispatch(setFormType(null))
-
   decorateInvoice(invoice)
 
   // Add new invoice to invoices list
   dispatch({ type: INVOICE_SUCCESSFUL, invoice })
 
-  // Reset the payment form
+  // Set current invoice to newly created invoice.
-  dispatch(resetRequestForm())
+  dispatch(setInvoice(invoice.payment_request))
-
-  // Transition to wallet route
-  dispatch(push('/'))
-
-  // Set invoice modal to newly created invoice
-  dispatch(showActivityModal('INVOICE', invoice.payment_request))
 }
 
 export const invoiceFailed = (event, { error }) => dispatch => {
@@ -215,14 +202,7 @@ invoiceSelectors.invoices = createSelector(
   invoicesSelector,
   invoicesSearchTextSelector,
   (invoices, invoicesSearchText) =>
-    invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
+    invoices.filter(invoice => invoice.memo && invoice.memo.includes(invoicesSearchText))
-)
-
-invoiceSelectors.invoices = createSelector(
-  invoicesSelector,
-  invoicesSearchTextSelector,
-  (invoices, invoicesSearchText) =>
-    invoices.filter(invoice => invoice.memo.includes(invoicesSearchText))
 )
 
 export { invoiceSelectors }

test/unit/components/Form.spec.js

@@ -4,20 +4,34 @@ import Adapter from 'enzyme-adapter-react-16'
 
 import Form from 'components/Form'
 import Pay from 'containers/Pay'
-import Request from 'components/Form/Request'
+import Request from 'containers/Request'
 
 configure({ adapter: new Adapter() })
 
 const requestFormProps = {
-  requestform: {},
+  cryptoCurrency: 'btc',
-  ticker: {},
+  cryptoCurrencyTicker: 'BTC',
-  currencyFilters: [],
+  cryptoCurrencies: [],
-  currencyName: '',
+  currentTicker: [],
-  requestFiatAmount: '',
+  cryptoName: 'Bitcoin',
-  setRequestAmount: () => {},
+  fiatCurrency: 'USD',
-  setRequestMemo: () => {},
+  fiatCurrencies: [],
-  setCurrency: () => {},
+  createInvoice: jest.fn(),
-  onRequestSubmit: () => {}
+  setCryptoCurrency: jest.fn(),
+  setFiatCurrency: jest.fn()
+}
+
+const payFormProps = {
+  cryptoCurrency: 'btc',
+  cryptoCurrencyTicker: 'BTC',
+  cryptoCurrencies: [],
+  currentTicker: [],
+  cryptoName: 'Bitcoin',
+  fiatCurrency: 'USD',
+  fiatCurrencies: [],
+  createInvoice: jest.fn(),
+  setCryptoCurrency: jest.fn(),
+  setFiatCurrency: jest.fn()
 }
 
 const defaultProps = {
@@ -28,7 +42,7 @@ const defaultProps = {
 
 describe('Form', () => {
   describe('should show pay form when formType is PAY_FORM', () => {
-    const props = { ...defaultProps, formType: 'PAY_FORM' }
+    const props = { ...defaultProps, formType: 'PAY_FORM', formProps: payFormProps }
     const el = shallow(<Form {...props} />)
     it('should contain Pay', () => {
       expect(el.find(Pay)).toHaveLength(1)