From 34131d40cfb427f0c087766318c79fb94b647f11 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Fri, 29 Sep 2017 18:36:09 -0500 Subject: [PATCH] feature: setup currentAmount selector for the form based on if LN or not. set up submit handler --- app/components/Form/PayForm.js | 14 ++++---- app/components/Form/PayForm.scss | 6 ++-- app/reducers/invoice.js | 3 +- app/reducers/payform.js | 41 +++++++++++++++++++---- app/reducers/payment.js | 4 +-- app/routes/app/containers/AppContainer.js | 19 +++++++++-- 6 files changed, 66 insertions(+), 21 deletions(-) diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js index 95a5b3c3..016cb702 100644 --- a/app/components/Form/PayForm.js +++ b/app/components/Form/PayForm.js @@ -10,8 +10,6 @@ class PayForm extends Component { componentDidUpdate(prevProps) { const { isOnchain, isLn, payform: { payInput }, fetchInvoice } = this.props - console.log('prevProps: ', prevProps) - console.log('props: ', this.props) // If on-chain, focus on amount to let user know it's editable if (isOnchain) { this.amountInput.focus() } // If LN go retrieve invoice details @@ -22,12 +20,13 @@ class PayForm extends Component { render() { const { - payform, + payform: { amount, payInput, invoice }, currency, crypto, isOnchain, isLn, + currentAmount, inputCaption, setPayAmount, @@ -43,16 +42,17 @@ class PayForm extends Component { this.amountInput = input} // eslint-disable-line size='' style={ isLn ? { width: '75%', fontSize: '85px' } : - { width: `${payform.amount.length > 1 ? (payform.amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (payform.amount.length ** 2)}px` } + { width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` } } - value={payform.amount} + value={currentAmount} onChange={event => setPayAmount(event.target.value)} id='amount' readOnly={isLn} @@ -86,7 +86,7 @@ class PayForm extends Component { setPayInput(event.target.value)} id='paymentRequest' /> diff --git a/app/components/Form/PayForm.scss b/app/components/Form/PayForm.scss index e89855f4..d50710ad 100644 --- a/app/components/Form/PayForm.scss +++ b/app/components/Form/PayForm.scss @@ -21,7 +21,7 @@ opacity: 0.75; } - label, input[type=text] { + label, input[type=number], input[type=text] { color: inherit; display: inline-block; vertical-align: top; @@ -43,7 +43,7 @@ } } - input[type=text] { + input[type=number],, input[type=text] { width: 100px; font-size: 180px; border: none; @@ -92,7 +92,7 @@ position: relative; padding: 0 20px; - label, input[type=text] { + label, input[type=number], input[type=text] { font-size: inherit; } diff --git a/app/reducers/invoice.js b/app/reducers/invoice.js index 06a44079..24674b20 100644 --- a/app/reducers/invoice.js +++ b/app/reducers/invoice.js @@ -1,5 +1,6 @@ import { createSelector } from 'reselect' import { ipcRenderer } from 'electron' +import { setPayInvoice } from './payform' import { showNotification } from '../notifications' import { btc, usd } from '../utils' // ------------------------------------ @@ -78,7 +79,7 @@ export const fetchInvoice = payreq => (dispatch) => { } // Receive IPC event for form invoice -export const receiveFormInvoice = (event, formInvoice) => dispatch => dispatch({ type: RECEIVE_FORM_INVOICE, formInvoice }) +export const receiveFormInvoice = (event, invoice) => dispatch => dispatch(setPayInvoice(invoice)) // Send IPC event for invoices export const fetchInvoices = () => (dispatch) => { diff --git a/app/reducers/payform.js b/app/reducers/payform.js index f2d5a1ce..f4f2dd78 100644 --- a/app/reducers/payform.js +++ b/app/reducers/payform.js @@ -1,16 +1,25 @@ import { createSelector } from 'reselect' import bitcoin from 'bitcoinjs-lib' +import { tickerSelectors } from './ticker' +import { btc } from '../utils' // Initial State const initialState = { amount: '0', - payInput: '' + payInput: '', + + invoice: { + payreq: '', + r_hash: '', + amount: '0' + } } // Constants // ------------------------------------ export const SET_PAY_AMOUNT = 'SET_PAY_AMOUNT' export const SET_PAY_INPUT = 'SET_PAY_INPUT' +export const SET_PAY_INVOICE = 'SET_PAY_INVOICE' export const RESET_FORM = 'RESET_FORM' @@ -25,13 +34,19 @@ export function setPayAmount(amount) { } export function setPayInput(payInput) { - console.log('payInput: ', payInput) return { type: SET_PAY_INPUT, payInput } } +export function setPayInvoice(invoice) { + return { + type: SET_PAY_INVOICE, + invoice + } +} + export function resetForm() { return { type: RESET_FORM @@ -44,6 +59,8 @@ export function resetForm() { const ACTION_HANDLERS = { [SET_PAY_AMOUNT]: (state, { amount }) => ({ ...state, amount }), [SET_PAY_INPUT]: (state, { payInput }) => ({ ...state, payInput }), + [SET_PAY_INVOICE]: (state, { invoice }) => ({ ...state, invoice }), + [RESET_FORM]: () => (initialState) } @@ -53,6 +70,7 @@ const ACTION_HANDLERS = { const payFormSelectors = {} const payAmountSelector = state => state.payform.amount const payInputSelector = state => state.payform.payInput +const payInvoiceSelector = state => state.payform.invoice const currencySelector = state => state.ticker.currency payFormSelectors.isOnchain = createSelector( @@ -74,16 +92,27 @@ payFormSelectors.isLn = createSelector( input => input.length === 124 ) +payFormSelectors.currentAmount = createSelector( + payFormSelectors.isLn, + payAmountSelector, + payInvoiceSelector, + currencySelector, + tickerSelectors.currentTicker, + (isLn, amount, invoice, currency, ticker) => { + if (isLn) { + return currency === 'usd' ? btc.satoshisToUsd(invoice.amount, ticker.price_usd) : btc.satoshisToBtc(invoice.amount) + } + + return amount + } +) + payFormSelectors.inputCaption = createSelector( payFormSelectors.isOnchain, payFormSelectors.isLn, payAmountSelector, currencySelector, (isOnchain, isLn, amount, currency) => { - console.log('isOnchain: ', isOnchain) - console.log('isLn: ', isLn) - console.log('amount: ', amount) - console.log('currency: ', currency) if (!isOnchain && !isLn) { return } if (isOnchain) { diff --git a/app/reducers/payment.js b/app/reducers/payment.js index 710a4a94..de69b0b6 100644 --- a/app/reducers/payment.js +++ b/app/reducers/payment.js @@ -1,6 +1,6 @@ import { createSelector } from 'reselect' import { ipcRenderer } from 'electron' -import { setForm, resetForm } from './form' +import { setForm, setFormType, resetForm } from './form' // ------------------------------------ // Constants @@ -68,7 +68,7 @@ export const payInvoice = paymentRequest => (dispatch) => { // TODO: Add payment to state, not a total re-fetch export const paymentSuccessful = () => (dispatch) => { // Close the form modal once the payment was succesful - dispatch(setForm({ modalOpen: false })) + dispatch(setFormType(null)) // Refetch payments (TODO: dont do a full refetch, rather append new tx to list) dispatch(fetchPayments()) diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index 41701c8f..0366261d 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -66,7 +66,8 @@ const mapStateToProps = state => ({ currentTicker: tickerSelectors.currentTicker(state), isOnchain: payFormSelectors.isOnchain(state), isLn: payFormSelectors.isLn(state), - inputCaption: payFormSelectors.inputCaption(state) + currentAmount: payFormSelectors.currentAmount(state), + inputCaption: payFormSelectors.inputCaption(state), }) const mergeProps = (stateProps, dispatchProps, ownProps) => { @@ -77,6 +78,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { isOnchain: stateProps.isOnchain, isLn: stateProps.isLn, + currentAmount: stateProps.currentAmount, inputCaption: stateProps.inputCaption, setPayAmount: dispatchProps.setPayAmount, @@ -85,7 +87,20 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { onPaySubmit: () => { - console.log('do submit stuff') + if (!stateProps.isOnchain && !stateProps.isLn) { return } + + if (stateProps.isOnchain) { + dispatchProps.sendCoins({ + value: stateProps.payform.amount, + addr: stateProps.payform.payInput, + currency: stateProps.ticker.currency, + rate: stateProps.currentTicker.price_usd + }) + } + + if (stateProps.isLn) { + dispatchProps.payInvoice(stateProps.payform.invoice.amount) + } } }