From 73dc29812fb27ae020c737b8c82546b9a8a244d0 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 26 Oct 2017 02:02:29 -0500
Subject: [PATCH] feature(step 3): basic step 3 which is push amt

---
 app/components/ChannelForm/ChannelForm.js     |  4 +-
 app/components/ChannelForm/StepThree.js       | 41 +++++++++++++
 app/components/ChannelForm/StepThree.scss     | 58 +++++++++++++++++++
 app/reducers/channelform.js                   |  9 +++
 .../channels/containers/ChannelsContainer.js  |  3 +
 5 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 app/components/ChannelForm/StepThree.js
 create mode 100644 app/components/ChannelForm/StepThree.scss

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 <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'
     }
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 (
+      <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
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,