diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
index 3d0bba1d..cde3b653 100644
--- a/app/components/ChannelForm/ChannelForm.js
+++ b/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
case 2:
- return 'Step Two'
+ return
case 3:
return 'Step 3'
default:
diff --git a/app/components/ChannelForm/StepTwo.js b/app/components/ChannelForm/StepTwo.js
new file mode 100644
index 00000000..1ba801a0
--- /dev/null
+++ b/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 (
+
+
+ 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 }}
+ />
+
+ )
+ }
+}
+
+StepTwo.propTypes = {}
+
+export default StepTwo
diff --git a/app/components/ChannelForm/StepTwo.scss b/app/components/ChannelForm/StepTwo.scss
new file mode 100644
index 00000000..2a1249e5
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js
index 656f20fa..4b2ba58f 100644
--- a/app/reducers/channelform.js
+++ b/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 }),
diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
index 37a0b5be..2b4b919e 100644
--- a/app/routes/channels/components/Channels.js
+++ b/app/routes/channels/components/Channels.js
@@ -35,7 +35,6 @@ class Channels extends Component {
channelFormProps
} = this.props
- console.log('channelFormProps: ', channelFormProps)
return (
diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js
index ceda9628..84f749dc 100644
--- a/app/routes/channels/containers/ChannelsContainer.js
+++ b/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,
diff --git a/package.json b/package.json
index 55d254a6..fc27b684 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index f5e2db20..8d5ab8e0 100644
--- a/yarn.lock
+++ b/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"