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)
+ }
}
}