feature(sendcoins): add onchainAmount as own field in form reducer

app/reducers/form.js

@@ -4,6 +4,7 @@ const initialState = {
   formType: 'pay',
   paymentType: '',
   amount: '0',
+  onchainAmount: '0',
   message: '',
   pubkey: '',
   payment_request: ''
@@ -13,6 +14,7 @@ const initialState = {
 // ------------------------------------
 export const SET_FORM = 'SET_FORM'
 export const SET_AMOUNT = 'SET_AMOUNT'
+export const SET_ONCHAIN_AMOUNT = 'SET_ONCHAIN_AMOUNT'
 export const SET_MESSAGE = 'SET_MESSAGE'
 export const SET_PUBKEY = 'SET_PUBKEY'
 export const SET_PAYMENT_TYPE = 'SET_PAYMENT_TYPE'
@@ -44,6 +46,13 @@ export function setAmount(amount) {
   }
 }
 
+export function setOnchainAmount(onchainAmount) {
+  return {
+    type: SET_ONCHAIN_AMOUNT,
+    onchainAmount
+  }
+}
+
 export function setMessage(message) {
   return {
     type: SET_MESSAGE,
@@ -77,6 +86,7 @@ export function resetForm() {
 const ACTION_HANDLERS = {
   [SET_FORM]: (state, { modalOpen, formType }) => ({ ...state, modalOpen, formType }),
   [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
+  [SET_ONCHAIN_AMOUNT]: (state, { onchainAmount }) => ({ ...state, onchainAmount }),
   [SET_MESSAGE]: (state, { message }) => ({ ...state, message }),
   [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }),
   [SET_PAYMENT_TYPE]: (state, { paymentType }) => ({ ...state, paymentType }),

app/routes/app/components/App.js

@@ -20,6 +20,7 @@ class App extends Component {
       invoice: { formInvoice },
       form,
       setAmount,
+      setOnchainAmount,
       setMessage,
       setPubkey,
       setPaymentRequest,
@@ -44,6 +45,7 @@ class App extends Component {
           close={() => setForm({ modalOpen: false })}
           setPaymentType={setPaymentType}
           setAmount={setAmount}
+          setOnchainAmount={setOnchainAmount}
           setMessage={setMessage}
           setPubkey={setPubkey}
           setPaymentRequest={setPaymentRequest}
@@ -80,6 +82,7 @@ App.propTypes = {
   invoice: PropTypes.object.isRequired,
   form: PropTypes.object.isRequired,
   setAmount: PropTypes.func.isRequired,
+  setOnchainAmount: PropTypes.func.isRequired,
   setMessage: PropTypes.func.isRequired,
   setPubkey: PropTypes.func.isRequired,
   setPaymentRequest: PropTypes.func.isRequired,

app/routes/app/components/components/Form/Form.js

@@ -8,9 +8,10 @@ import { btc } from '../../../../../utils'
 import styles from './Form.scss'
 
 const Form = ({
-  form: { formType, paymentType, amount, message, payment_request },
+  form: { formType, paymentType, amount, onchainAmount, message, payment_request },
   setPaymentType,
   setAmount,
+  setOnchainAmount,
   setMessage,
   setPaymentRequest,
   ticker: { currency, crypto },
@@ -35,8 +36,8 @@ const Form = ({
                 paymentType={paymentType}
                 setPaymentType={setPaymentType}
                 invoiceAmount={formInvoice.amount}
-                onchainAmount={amount}
-                setAmount={setAmount}
+                onchainAmount={onchainAmount}
+                setOnchainAmount={setOnchainAmount}
                 payment_request={payment_request}
                 setPaymentRequest={setPaymentRequest}
                 fetchInvoice={fetchInvoice}
@@ -71,6 +72,7 @@ Form.propTypes = {
   setPaymentType: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
   setAmount: PropTypes.func.isRequired,
+  setOnchainAmount: PropTypes.func.isRequired,
   setMessage: PropTypes.func.isRequired,
   setPaymentRequest: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,

app/routes/app/components/components/Form/components/Pay/Pay.js

@@ -10,7 +10,7 @@ const Pay = ({
   setPaymentType,
   invoiceAmount,
   onchainAmount,
-  setAmount,
+  setOnchainAmount,
   payment_request,
   setPaymentRequest,
   fetchInvoice,
@@ -40,8 +40,6 @@ const Pay = ({
   
   const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value))
 
-  console.log('paymentType: ', paymentType)
-  console.log('onchainAmount: ', onchainAmount)
   return (
     <div className={styles.container}>
       <section className={`${styles.amountContainer} ${paymentType === 'ln' ? styles.ln : ''}`}>
@@ -58,7 +56,7 @@ const Pay = ({
               { width: `${onchainAmount.length > 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` }
           }
           value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount}
-          onChange={event => setAmount(event.target.value)}
+          onChange={event => setOnchainAmount(event.target.value)}
           id='amount'
           readOnly={paymentType === 'ln'}
         />
@@ -126,6 +124,7 @@ Pay.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
+  setOnchainAmount: PropTypes.func.isRequired,
   setPaymentRequest: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
   payInvoice: PropTypes.func.isRequired,

app/routes/app/containers/AppContainer.js

@@ -10,6 +10,7 @@ import {
   setForm,
   setPaymentType,
   setAmount,
+  setOnchainAmount,
   setMessage,
   setPubkey,
   setPaymentRequest
@@ -21,6 +22,7 @@ const mapDispatchToProps = {
   fetchBalance,
   fetchInfo,
   setAmount,
+  setOnchainAmount,
   setMessage,
   setPubkey,
   setPaymentRequest,