feature(step 2): style step 2

app/components/ChannelForm/ChannelForm.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
 import StepOne from './StepOne'
+import StepTwo from './StepTwo'
 import Footer from './Footer'
 
 import styles from './ChannelForm.scss'
@@ -12,19 +13,19 @@ const ChannelForm = ({
   closeChannelForm,
   changeStep,
   setNodeKey,
+  setLocalAmount,
   channelFormHeader,
   channelFormProgress,
   peers
 }) => {
   const renderStep = () => {
     const { step } = channelform
-    console.log('setNodeKey: ', setNodeKey)
 
     switch (step) {
       case 1:
         return <StepOne peers={peers} changeStep={changeStep} setNodeKey={setNodeKey} />
       case 2:
-        return 'Step Two'
+        return <StepTwo local_amt={channelform.local_amt} setLocalAmount={setLocalAmount} />
       case 3:
         return 'Step 3'
       default:

app/components/ChannelForm/StepTwo.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AutosizeInput from 'react-input-autosize'
+import CurrencyIcon from 'components/CurrencyIcon'
+import styles from './StepTwo.scss'
+
+class StepTwo extends Component {
+  render() {
+    const { local_amt, setLocalAmount } = this.props
+    console.log('local_amt: ', local_amt)
+    return (
+      <div className={styles.container}>
+        <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={local_amt}
+          onChange={event => setLocalAmount(event.target.value)}
+          id='amount'
+          style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }}
+        />
+      </div>
+    )
+  }
+}
+
+StepTwo.propTypes = {}
+
+export default StepTwo

app/components/ChannelForm/StepTwo.scss

@@ -0,0 +1,39 @@
+@import '../../variables.scss';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 50px;
+  padding: 20px;
+
+  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

@@ -4,8 +4,8 @@ import { createSelector } from 'reselect'
 const initialState = {
   isOpen: false,
   node_key: '',
-  local_amt: '',
-  push_amt: '',
+  local_amt: 0,
+  push_amt: 0,
 
   step: 1
 }
@@ -16,6 +16,7 @@ export const OPEN_CHANNEL_FORM = 'OPEN_CHANNEL_FORM'
 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 CHANGE_STEP = 'CHANGE_STEP'
 
@@ -43,6 +44,13 @@ export function setNodeKey(node_key) {
   }
 }
 
+export function setLocalAmount(local_amt) {
+  return {
+    type: SET_LOCAL_AMOUNT,
+    local_amt
+  }
+}
+
 export function changeStep(step) {
   return {
     type: CHANGE_STEP,
@@ -64,6 +72,7 @@ const ACTION_HANDLERS = {
   [CLOSE_CHANNEL_FORM]: state => ({ ...state, isOpen: false }),
   
   [SET_NODE_KEY]: (state, { node_key }) => ({ ...state, node_key }),
+  [SET_LOCAL_AMOUNT]: (state, { local_amt }) => ({ ...state, local_amt }),
   
   [CHANGE_STEP]: (state, { step }) => ({ ...state, step }),
 

app/routes/channels/components/Channels.js

@@ -35,7 +35,6 @@ class Channels extends Component {
 
       channelFormProps
     } = this.props
-    console.log('channelFormProps: ', channelFormProps)
 
     return (
       <div className={styles.container}>

app/routes/channels/containers/ChannelsContainer.js

@@ -11,6 +11,7 @@ import {
   openChannelForm,
   changeStep,
   setNodeKey,
+  setLocalAmount,
   closeChannelForm,
   channelFormSelectors
 } from 'reducers/channelform'
@@ -27,6 +28,7 @@ const mapDispatchToProps = {
   openChannelForm,
   closeChannelForm,
   setNodeKey,
+  setLocalAmount,
   changeStep,
 
 
@@ -50,6 +52,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     closeChannelForm: dispatchProps.closeChannelForm,
     changeStep: dispatchProps.changeStep,
     setNodeKey: dispatchProps.setNodeKey,
+    setLocalAmount: dispatchProps.setLocalAmount,
 
     channelform: stateProps.channelform,
     channelFormHeader: stateProps.channelFormHeader,

package.json

@@ -213,6 +213,7 @@
     "react-dom": "^15.6.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-inlinesvg": "^0.6.2",
+    "react-input-autosize": "^2.0.1",
     "react-modal": "^2.2.2",
     "react-moment": "^0.6.0",
     "react-redux": "^5.0.5",

yarn.lock

@@ -2286,6 +2286,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.3, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.5.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 create-react-class@^15.5.3:
   version "15.5.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.3.tgz#fb0f7cae79339e9a179e194ef466efa3923820fe"
@@ -7120,6 +7128,13 @@ react-inlinesvg@^0.6.2:
     httpplease "^0.16"
     once "^1.4"
 
+react-input-autosize@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.0.1.tgz#e92190497b4026c2780ad0f2fd703c835ba03e33"
+  dependencies:
+    create-react-class "^15.5.2"
+    prop-types "^15.5.8"
+
 react-modal@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"