feature: setup currentAmount selector for the form based on if LN or not. set up submit handler

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 {
             <CurrencyIcon currency={currency} crypto={crypto} />
           </label>
           <input
-            type='text'
+            type='number'
+            min='0'
             ref={input => 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 {
             <input
               type='text'
               placeholder='Payment request or bitcoin address'
-              value={payform.payInput}
+              value={payInput}
               onChange={event => setPayInput(event.target.value)}
               id='paymentRequest'
             />

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;
   }
 

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) => {

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) {

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())

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