feature(payform): set up payform reducer and new component

app/components/PayForm/PayForm.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from './PayForm.scss'
+
+class PayForm extends Component {
+  render() {
+    console.log('props: ', this.props)
+    return (
+      <div>
+        payform
+      </div>
+    )
+  }
+}
+
+PayForm.propTypes = {
+  
+}
+
+export default PayForm

app/components/PayForm/index.js

@@ -0,0 +1,3 @@
+import PayForm from './PayForm'
+
+export default PayForm

app/reducers/index.js

@@ -7,7 +7,10 @@ import balance from './balance'
 import payment from './payment'
 import peers from './peers'
 import channels from './channels'
+
 import form from './form'
+import payform from './payform'
+
 import invoice from './invoice'
 import modal from './modal'
 import address from './address'
@@ -22,7 +25,10 @@ const rootReducer = combineReducers({
   payment,
   peers,
   channels,
+  
   form,
+  payform,
+
   invoice,
   modal,
   address,

app/reducers/payform.js

@@ -0,0 +1,83 @@
+import { createSelector } from 'reselect'
+import bitcoin from 'bitcoinjs-lib'
+
+// Initial State
+const initialState = {
+  amount: '0',
+  payInput: ''
+}
+
+// Constants
+// ------------------------------------
+export const SET_PAY_AMOUNT = 'SET_PAY_AMOUNT'
+export const SET_PAY_INPUT = 'SET_PAY_INPUT'
+
+export const RESET_FORM = 'RESET_FORM'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function setPayAmount(amount) {
+  return {
+    type: SET_PAY_AMOUNT,
+    amount
+  }
+}
+
+export function setPayInput(payInput) {
+  return {
+    type: SET_PAY_INPUT,
+    payInput
+  }
+}
+
+export function resetForm() {
+  return {
+    type: RESET_FORM
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [SET_PAY_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
+  [SET_PAY_INPUT]: (state, { payInput }) => ({ ...state, payInput }),
+  [RESET_FORM]: () => (initialState)
+}
+
+// ------------------------------------
+// Selector
+// ------------------------------------
+const payFormSelectors = {}
+const payInputSelector = state => state.payform.payInput
+
+payFormSelectors.isOnchain = createSelector(
+  payInputSelector,
+  (input) => {
+    // TODO: work with bitcoin-js to fix p2wkh error and make testnet/mainnet dynamic
+    try {
+      bitcoin.address.toOutputScript(input, bitcoin.networks.testnet)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+)
+
+// TODO: Add more robust logic to detect a LN payment request
+payFormSelectors.isLn = createSelector(
+  payInputSelector,
+  input => input.length === 124
+)
+
+export { payFormSelectors }
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function payFormReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/routes/app/components/App.js

@@ -38,6 +38,11 @@ class App extends Component {
       currentTicker,
       isOnchain,
       isLn,
+
+      showModal,
+
+      payFormProps,
+
       children
     } = this.props
 
@@ -79,6 +84,9 @@ class App extends Component {
           setCurrency={setCurrency}
           formClicked={formType => setForm({ modalOpen: true, formType })}
           currentTicker={currentTicker}
+
+          showModal={showModal}
+          payFormProps={payFormProps}
         />
         <div className={styles.content}>
           {children}

app/routes/app/components/components/ModalRoot/ModalRoot.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { MdClose } from 'react-icons/lib/md'
+import PayForm from 'components/PayForm'
 import SuccessfulSendCoins from './SuccessfulSendCoins'
 import styles from './ModalRoot.scss'
 
 const MODAL_COMPONENTS = {
-  SUCCESSFUL_SEND_COINS: SuccessfulSendCoins
+  SUCCESSFUL_SEND_COINS: SuccessfulSendCoins,
+  PAY_FORM: PayForm
   /* other modals */
 }
 

app/routes/app/components/components/Nav.js

@@ -9,7 +9,7 @@ import CurrencyIcon from 'components/CurrencyIcon'
 import { btc, usd } from 'utils'
 import styles from './Nav.scss'
 
-const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker }) => (
+const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker, showModal, payFormProps }) => (
   <nav className={styles.nav}>
     <ul className={styles.info}>
       <li className={`${styles.currencies} ${styles.link}`}>
@@ -72,7 +72,7 @@ const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker }) => (
       </li>
     </ul>
     <div className={styles.buttons}>
-      <div className={styles.button} onClick={() => formClicked('pay')}>
+      <div className={styles.button} onClick={() => showModal('PAY_FORM', payFormProps)}>
         <span>Pay</span>
       </div>
       <div className={styles.button} onClick={() => formClicked('request')}>

app/routes/app/containers/AppContainer.js

@@ -3,7 +3,7 @@ import { fetchTicker, setCurrency, tickerSelectors } from 'reducers/ticker'
 import { fetchBalance } from 'reducers/balance'
 import { fetchInfo } from 'reducers/info'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
-import { hideModal } from 'reducers/modal'
+import { showModal, hideModal } from 'reducers/modal'
 import { payInvoice } from 'reducers/payment'
 import { sendCoins } from 'reducers/transaction'
 import { fetchChannels } from 'reducers/channels'
@@ -17,6 +17,10 @@ import {
   setPaymentRequest,
   formSelectors
 } from 'reducers/form'
+
+import { setPayAmount, setPayInput } from 'reducers/payform'
+
+
 import App from '../components/App'
 
 const mapDispatchToProps = {
@@ -36,7 +40,8 @@ const mapDispatchToProps = {
   payInvoice,
   sendCoins,
   fetchChannels,
-  fetchInvoice
+  fetchInvoice,
+  showModal
 }
 
 const mapStateToProps = state => ({
@@ -44,13 +49,31 @@ const mapStateToProps = state => ({
   balance: state.balance,
   payment: state.payment,
   transaction: state.transaction,
+  
   form: state.form,
+
   invoice: state.invoice,
   modal: state.modal,
 
   currentTicker: tickerSelectors.currentTicker(state),
   isOnchain: formSelectors.isOnchain(state),
-  isLn: formSelectors.isLn(state)
+  isLn: formSelectors.isLn(state),
+
+  // Props to pass to the payment form modal
+  payFormProps: {
+    setPayAmount,
+    setPayInput,
+    onPaySubmit: () => {
+      const isOnchain = formSelectors.isOnchain(state)
+      const isLn = formSelectors.isLn(state)
+
+      console.log('isOnchain: ', isOnchain)
+      console.log('isLn: ', isLn)
+
+      console.log('amount: ', state.payform.amount)
+      console.log('inputField: ', state.payform.inputField)
+    }
+  }
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(App)