From b2aa3909cdc6e4b1f1ffd38f8488a7d7385c4902 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Mon, 5 Nov 2018 17:58:55 +0100 Subject: [PATCH] feat(ui): integrate new request forms --- app/components/Form/Form.js | 14 ++++----- app/containers/App.js | 4 +-- app/containers/Request.js | 27 +++++++++++++++++ app/lib/lnd/methods/invoicesController.js | 2 +- app/reducers/invoice.js | 28 +++--------------- test/unit/components/Form.spec.js | 36 ++++++++++++++++------- 6 files changed, 64 insertions(+), 47 deletions(-) create mode 100644 app/containers/Request.js diff --git a/app/components/Form/Form.js b/app/components/Form/Form.js index 6378b072..a722ef97 100644 --- a/app/components/Form/Form.js +++ b/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 (
-
- - - -
- + + +
) } diff --git a/app/containers/App.js b/app/containers/App.js index 84574e85..fd97f9d2 100644 --- a/app/containers/App.js +++ b/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 ) } diff --git a/app/containers/Request.js b/app/containers/Request.js new file mode 100644 index 00000000..a1f9bf47 --- /dev/null +++ b/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) diff --git a/app/lib/lnd/methods/invoicesController.js b/app/lib/lnd/methods/invoicesController.js index 77fe392e..8bce8a3d 100644 --- a/app/lib/lnd/methods/invoicesController.js +++ b/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) } diff --git a/app/reducers/invoice.js b/app/reducers/invoice.js index f62a9c37..33ecc95f 100644 --- a/app/reducers/invoice.js +++ b/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 - dispatch(resetRequestForm()) - - // Transition to wallet route - dispatch(push('/')) - - // Set invoice modal to newly created invoice - dispatch(showActivityModal('INVOICE', invoice.payment_request)) + // Set current invoice to newly created invoice. + dispatch(setInvoice(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)) -) - -invoiceSelectors.invoices = createSelector( - invoicesSelector, - invoicesSearchTextSelector, - (invoices, invoicesSearchText) => - invoices.filter(invoice => invoice.memo.includes(invoicesSearchText)) + invoices.filter(invoice => invoice.memo && invoice.memo.includes(invoicesSearchText)) ) export { invoiceSelectors } diff --git a/test/unit/components/Form.spec.js b/test/unit/components/Form.spec.js index b9f74924..0d8fb5cc 100644 --- a/test/unit/components/Form.spec.js +++ b/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: {}, - ticker: {}, - currencyFilters: [], - currencyName: '', - requestFiatAmount: '', - setRequestAmount: () => {}, - setRequestMemo: () => {}, - setCurrency: () => {}, - onRequestSubmit: () => {} + cryptoCurrency: 'btc', + cryptoCurrencyTicker: 'BTC', + cryptoCurrencies: [], + currentTicker: [], + cryptoName: 'Bitcoin', + fiatCurrency: 'USD', + fiatCurrencies: [], + createInvoice: jest.fn(), + 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(
) it('should contain Pay', () => { expect(el.find(Pay)).toHaveLength(1)