diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js index fe2cbf02..71bf5c30 100644 --- a/app/components/ChannelForm/ChannelForm.js +++ b/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 case 3: - return 'Step 3' + return default: return 'Confirm Step' } diff --git a/app/components/ChannelForm/StepThree.js b/app/components/ChannelForm/StepThree.js new file mode 100644 index 00000000..28585b85 --- /dev/null +++ b/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 ( +
+
+

Push Amount

+

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.

+
+ +
+ + 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 }} + /> +
+
+ ) + } +} + +StepThree.propTypes = {} + +export default StepThree diff --git a/app/components/ChannelForm/StepThree.scss b/app/components/ChannelForm/StepThree.scss new file mode 100644 index 00000000..129c193f --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js index 8e573405..a78d9278 100644 --- a/app/reducers/channelform.js +++ b/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 }), diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js index 84f749dc..5ee5cb05 100644 --- a/app/routes/channels/containers/ChannelsContainer.js +++ b/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,