feature(step 3): basic step 3 which is push amt

app/components/ChannelForm/ChannelForm.js

@@ -4,6 +4,7 @@ import ReactModal from 'react-modal'
 
 import StepOne from './StepOne'
 import StepTwo from './StepTwo'
+import StepThree from './StepThree'
 import Footer from './Footer'
 
 import styles from './ChannelForm.scss'
@@ -14,6 +15,7 @@ const ChannelForm = ({
   changeStep,
   setNodeKey,
   setLocalAmount,
+  setPushAmount,
   channelFormHeader,
   channelFormProgress,
   peers
@@ -27,7 +29,7 @@ const ChannelForm = ({
       case 2:
         return <StepTwo local_amt={channelform.local_amt} setLocalAmount={setLocalAmount} />
       case 3:
-        return 'Step 3'
+        return <StepThree push_amt={channelform.push_amt} setPushAmount={setPushAmount} />
       default:
         return 'Confirm Step'
     }

app/components/ChannelForm/StepThree.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyIcon from 'components/CurrencyIcon'
+import styles from './StepThree.scss'
+
+class StepThree extends Component {
+  render() {
+    const { push_amt, setPushAmount } = this.props
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.explainer}>
+          <h2>Push Amount</h2>
+          <p>The push amount is the amount of bitcoin (if any at all) you'd like to "push" to the other side of the channel when it opens. This amount will set on the remote side as part of the initial commitment state.</p>
+        </div>
+
+        <form>
+          <label htmlFor='amount'>
+            <CurrencyIcon currency={'btc'} crypto={'btc'} />
+          </label>
+          <input
+            autoFocus
+            type='number'
+            min='0'
+            max='0.16'
+            ref={input => this.input = input}
+            size=''
+            value={push_amt}
+            onChange={event => setPushAmount(event.target.value)}
+            id='amount'
+            style={{ width: isNaN((push_amt.length + 1) * 55) ? 140 : (push_amt.length + 1) * 55 }}
+          />
+        </form>
+      </div>
+    )
+  }
+}
+
+StepThree.propTypes = {}
+
+export default StepThree

app/components/ChannelForm/StepThree.scss

@@ -0,0 +1,58 @@
+@import '../../variables.scss';
+
+.container {
+  margin-bottom: 50px;
+  padding: 20px;
+
+  .explainer {
+    margin: 20px 0 50px 0;
+    padding-bottom: 20px;
+    border-bottom: 1px solid $lightgrey;
+
+    h2 {
+      margin: 10px 0 20px 0;
+      font-size: 28px;
+    }
+
+    p {
+      line-height: 1.5;
+      font-size: 16px;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  label {
+    margin-left: -25px;
+    height: 200px;
+    color: $main;
+
+    svg {
+      width: 65px;
+      height: 65px;
+    }
+
+    svg[data-icon='ltc'] {
+      margin-right: 10px;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+  }
+  
+  input[type=number] {
+    color: $main;
+    width: 30px;
+    height: 200px;
+    font-size: 100px;
+    border: none;
+    outline: 0;
+    -webkit-appearance: none;
+  }
+}

app/reducers/channelform.js

@@ -17,6 +17,7 @@ export const CLOSE_CHANNEL_FORM = 'CLOSE_CHANNEL_FORM'
 
 export const SET_NODE_KEY = 'SET_NODE_KEY'
 export const SET_LOCAL_AMOUNT = 'SET_LOCAL_AMOUNT'
+export const SET_PUSH_AMOUNT = 'SET_PUSH_AMOUNT'
 
 export const CHANGE_STEP = 'CHANGE_STEP'
 
@@ -51,6 +52,13 @@ export function setLocalAmount(local_amt) {
   }
 }
 
+export function setPushAmount(local_amt) {
+  return {
+    type: SET_PUSH_AMOUNT,
+    push_amt
+  }
+}
+
 export function changeStep(step) {
   return {
     type: CHANGE_STEP,
@@ -73,6 +81,7 @@ const ACTION_HANDLERS = {
   
   [SET_NODE_KEY]: (state, { node_key }) => ({ ...state, node_key }),
   [SET_LOCAL_AMOUNT]: (state, { local_amt }) => ({ ...state, local_amt }),
+  [SET_PUSH_AMOUNT]: (state, { push_amt }) => ({ ...state, push_amt }),
   
   [CHANGE_STEP]: (state, { step }) => ({ ...state, step }),
 

app/routes/channels/containers/ChannelsContainer.js

@@ -12,6 +12,7 @@ import {
   changeStep,
   setNodeKey,
   setLocalAmount,
+  setPushAmount,
   closeChannelForm,
   channelFormSelectors
 } from 'reducers/channelform'
@@ -29,6 +30,7 @@ const mapDispatchToProps = {
   closeChannelForm,
   setNodeKey,
   setLocalAmount,
+  setPushAmount,
   changeStep,
 
 
@@ -53,6 +55,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     changeStep: dispatchProps.changeStep,
     setNodeKey: dispatchProps.setNodeKey,
     setLocalAmount: dispatchProps.setLocalAmount,
+    setPushAmount: dispatchProps.setPushAmount,
 
     channelform: stateProps.channelform,
     channelFormHeader: stateProps.channelFormHeader,