feature(step 4): MVP mock up of step 4

app/components/ChannelForm/ChannelForm.js

@@ -5,6 +5,7 @@ import ReactModal from 'react-modal'
 import StepOne from './StepOne'
 import StepTwo from './StepTwo'
 import StepThree from './StepThree'
+import StepFour from './StepFour'
 import Footer from './Footer'
 
 import styles from './ChannelForm.scss'
@@ -31,7 +32,7 @@ const ChannelForm = ({
       case 3:
         return <StepThree push_amt={channelform.push_amt} setPushAmount={setPushAmount} />
       default:
-        return 'Confirm Step'
+        return <StepFour node_key={channelform.node_key} local_amt={channelform.local_amt} push_amt={channelform.push_amt} />
     }
   }
   

app/components/ChannelForm/ChannelForm.scss

@@ -2,7 +2,7 @@
 
 .modal {
   width: 40%;
-  min-height: 500px;
+  min-height: 600px;
   margin: 50px auto;
   position: absolute;
   top: auto;

app/components/ChannelForm/Footer.js

@@ -1,12 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaArrowLeft, FaArrowRight } from 'react-icons/lib/fa'
+import { FaArrowLeft, FaArrowRight, FaCheck } from 'react-icons/lib/fa'
 import styles from './Footer.scss'
 
 const Footer = ({ step, changeStep }) => {
   if ( step === 1 ) { return null }
 
-  if (step === 4 ) { return null }
+  if (step === 4 ) {
+    return (
+      <div className={styles.footer}>
+        <div className='buttonContainer circleContainer'>
+          <div className='buttonPrimary circle'onClick={() => changeStep(step - 1)}>
+            <FaArrowLeft />
+          </div>
+        </div>
+        <div className='buttonContainer circleContainer' onClick={() => console.log('create this mf channel baby')}>
+          <div className='buttonPrimary circle'>
+            <FaCheck />
+          </div>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className={styles.footer}>

app/components/ChannelForm/StepFour.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyIcon from 'components/CurrencyIcon'
+import styles from './StepFour.scss'
+
+class StepFour extends Component {
+  render() {
+    const { node_key, local_amt, push_amt } = this.props
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.nodekey}>
+          <h4>Node key</h4>
+          <h2>{node_key}</h2>
+        </div>
+
+        <div className={styles.amounts}>
+          <div className={styles.localamt}>
+            <h4>Local Amount</h4>
+            <h3>{local_amt}</h3>
+          </div>
+          <div className={styles.pushamt}>
+            <h4>Push Amount</h4>
+            <h3>{push_amt}</h3>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+StepFour.propTypes = {}
+
+export default StepFour

app/components/ChannelForm/StepFour.scss

@@ -0,0 +1,36 @@
+@import '../../variables.scss';
+
+.container {
+  padding: 50px;
+  
+  h4 {
+    text-transform: uppercase;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  h3 {
+    text-align: center;
+    color: $main;
+    font-size: 50px;
+  }
+}
+
+.nodekey {
+  margin-bottom: 50px;
+  padding: 20px;
+  border-bottom: 1px solid $main;
+
+  h2 {
+    font-size: 12px;
+    font-weight: bold;
+  }
+}
+
+.amounts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 50px;
+  padding: 20px;
+}

app/reducers/channelform.js

@@ -102,7 +102,7 @@ channelFormSelectors.channelFormHeader = createSelector(
       case 3:
         return 'Set your push amount'
       default:
-        return 'Confirm'
+        return 'Create your channel'
     }
   }
 )