From 150341463e3e523b6c923b455276dce7e348710a Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 26 Oct 2017 17:04:27 -0500
Subject: [PATCH] fix(channelform): final MVP design touches

---
 app/app.global.scss                           | 10 +++++
 app/components/ChannelForm/ChannelForm.js     |  9 +++-
 app/components/ChannelForm/Footer.js          | 43 ++++++++++---------
 app/components/ChannelForm/StepThree.scss     |  2 +-
 app/components/ChannelForm/StepTwo.scss       |  2 +-
 app/reducers/channelform.js                   |  6 +++
 app/reducers/channels.js                      |  6 ++-
 .../channels/containers/ChannelsContainer.js  |  7 ++-
 8 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/app/app.global.scss b/app/app.global.scss
index df38cff3..1af35784 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -106,6 +106,16 @@ body {
   }
 }
 
+.buttonPrimary.inactive {
+  opacity: 0.5;
+  cursor: auto;
+}
+
+.buttonPrimary.inactive:active {
+  box-shadow: 0 3px 0 0 darken($main, 10%);
+  transform: none;
+}
+
 .buttonSecondary {
   background-color: $secondary;
   box-shadow: 0 3px 0 0 darken($secondary, 10%);
diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
index 8c677aa7..249abdb6 100644
--- a/app/components/ChannelForm/ChannelForm.js
+++ b/app/components/ChannelForm/ChannelForm.js
@@ -14,6 +14,7 @@ import styles from './ChannelForm.scss'
 
 const ChannelForm = ({
   channelform,
+  openChannel,
   closeChannelForm,
   changeStep,
   setNodeKey,
@@ -21,6 +22,7 @@ const ChannelForm = ({
   setPushAmount,
   channelFormHeader,
   channelFormProgress,
+  stepTwoIsValid,
   peers
 }) => {
   const renderStep = () => {
@@ -61,7 +63,12 @@ const ChannelForm = ({
         {renderStep()}
       </div>
 
-      <Footer step={channelform.step} changeStep={changeStep} />
+      <Footer
+        step={channelform.step}
+        changeStep={changeStep}
+        stepTwoIsValid={stepTwoIsValid}
+        submit={() => openChannel({ pubkey: channelform.node_key, local_amt: channelform.local_amt, push_amt: channelform.push_amt })}
+      />
     </ReactModal>
   )
 }
diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
index 32ec0628..0bf79d91 100644
--- a/app/components/ChannelForm/Footer.js
+++ b/app/components/ChannelForm/Footer.js
@@ -3,42 +3,43 @@ import PropTypes from 'prop-types'
 import { FaArrowLeft, FaArrowRight, FaCheck } from 'react-icons/lib/fa'
 import styles from './Footer.scss'
 
-const Footer = ({ step, changeStep }) => {
+const Footer = ({ step, changeStep, stepTwoIsValid, submit }) => {
   if ( step === 1 ) { return null }
 
-  if (step === 4 ) {
-    return (
-      <div className={styles.footer}>
-        <div className='buttonContainer'>
-          <div className='buttonPrimary'onClick={() => changeStep(step - 1)}>
-            Back
-          </div>
-        </div>
-        <div className='buttonContainer' onClick={() => console.log('create this mf channel baby')}>
-          <div className='buttonPrimary'>
-            Submit
-          </div>
-        </div>
-      </div>
-    )
+  // See if the next button on step 2 should be active
+  const nextIsInactive = step === 2 && !stepTwoIsValid
+  
+  // Function that's called when the user clicks "next" in the form
+  const nextFunc = () => {  
+    if (nextIsInactive) { return }
+
+    changeStep(step + 1)
   }
 
+  const rightButtonText = step === 4 ? 'Submit' : 'Next'
+  const rightButtonOnClick = step === 4 ? () => submit() : nextFunc
+
   return (
     <div className={styles.footer}>
       <div className='buttonContainer'>
-        <div className='buttonPrimary'onClick={() => changeStep(step - 1)}>
+        <div className='buttonPrimary' onClick={() => changeStep(step - 1)}>
           Back
         </div>
       </div>
-      <div className='buttonContainer' onClick={() => changeStep(step + 1)}>
-        <div className='buttonPrimary'>
-          Next
+      <div className='buttonContainer' onClick={rightButtonOnClick}>
+        <div className={`buttonPrimary ${nextIsInactive && 'inactive'}`}>
+          {rightButtonText}
         </div>
       </div>
     </div>
   )
 }
 
-Footer.propTypes = {}
+Footer.propTypes = {
+  step: PropTypes.number.isRequired,
+  changeStep: PropTypes.func.isRequired,
+  stepTwoIsValid: PropTypes.bool.isRequired,
+  submit: PropTypes.func.isRequired
+}
 
 export default Footer
diff --git a/app/components/ChannelForm/StepThree.scss b/app/components/ChannelForm/StepThree.scss
index f1591a38..0a5e6370 100644
--- a/app/components/ChannelForm/StepThree.scss
+++ b/app/components/ChannelForm/StepThree.scss
@@ -10,7 +10,7 @@
     border-bottom: 1px solid $lightgrey;
 
     h2 {
-      margin: 10px 0 20px 0;
+      margin: 0 0 20px 0;
       font-size: 28px;
     }
 
diff --git a/app/components/ChannelForm/StepTwo.scss b/app/components/ChannelForm/StepTwo.scss
index f1591a38..0a5e6370 100644
--- a/app/components/ChannelForm/StepTwo.scss
+++ b/app/components/ChannelForm/StepTwo.scss
@@ -10,7 +10,7 @@
     border-bottom: 1px solid $lightgrey;
 
     h2 {
-      margin: 10px 0 20px 0;
+      margin: 0 0 20px 0;
       font-size: 28px;
     }
 
diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js
index c0cd4d56..4ea3cb3f 100644
--- a/app/reducers/channelform.js
+++ b/app/reducers/channelform.js
@@ -90,6 +90,7 @@ const ACTION_HANDLERS = {
 
 const channelFormSelectors = {}
 const channelFormStepSelector = state => state.channelform.step
+const channelFormLocalAmountSelector = state => state.channelform.local_amt
 
 channelFormSelectors.channelFormHeader = createSelector(
   channelFormStepSelector,
@@ -112,6 +113,11 @@ channelFormSelectors.channelFormProgress = createSelector(
   step => ((step - 1) / 3) * 100
 )
 
+channelFormSelectors.stepTwoIsValid = createSelector(
+  channelFormLocalAmountSelector,
+  local_amt => local_amt > 0
+)
+
 export { channelFormSelectors }
 
 // ------------------------------------
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 74b6cf78..81d606c0 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
+import { btc } from 'utils'
 import { setError } from './error'
 // ------------------------------------
 // Constants
@@ -77,7 +78,10 @@ export const fetchChannels = () => async (dispatch) => {
 export const receiveChannels = (event, { channels, pendingChannels }) => dispatch => dispatch({ type: RECEIVE_CHANNELS, channels, pendingChannels })
 
 // Send IPC event for opening a channel
-export const openChannel = ({ pubkey, localamt, pushamt }) => (dispatch) => {
+export const openChannel = ({ pubkey, local_amt, push_amt }) => (dispatch) => {
+  const localamt = btc.btcToSatoshis(local_amt)
+  const pushamt = btc.btcToSatoshis(push_amt)
+
   dispatch(openingChannel())
   ipcRenderer.send('lnd', { msg: 'openChannel', data: { pubkey, localamt, pushamt } })
 }
diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js
index 5ee5cb05..53768eea 100644
--- a/app/routes/channels/containers/ChannelsContainer.js
+++ b/app/routes/channels/containers/ChannelsContainer.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 
 import {
   fetchChannels,
+  openChannel,
 
   channelsSelectors
 } from 'reducers/channels'
@@ -25,6 +26,7 @@ import Channels from '../components/Channels'
 
 const mapDispatchToProps = {
   fetchChannels,
+  openChannel,
   
   openChannelForm,
   closeChannelForm,
@@ -46,11 +48,13 @@ const mapStateToProps = state => ({
   allChannels: channelsSelectors.allChannels(state),
   currentTicker: tickerSelectors.currentTicker(state),
   channelFormHeader: channelFormSelectors.channelFormHeader(state),
-  channelFormProgress: channelFormSelectors.channelFormProgress(state)
+  channelFormProgress: channelFormSelectors.channelFormProgress(state),
+  stepTwoIsValid: channelFormSelectors.stepTwoIsValid(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const channelFormProps = {
+    openChannel: dispatchProps.openChannel,
     closeChannelForm: dispatchProps.closeChannelForm,
     changeStep: dispatchProps.changeStep,
     setNodeKey: dispatchProps.setNodeKey,
@@ -60,6 +64,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     channelform: stateProps.channelform,
     channelFormHeader: stateProps.channelFormHeader,
     channelFormProgress: stateProps.channelFormProgress,
+    stepTwoIsValid: stateProps.stepTwoIsValid,
     peers: stateProps.peers.peers
   }