diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
index 71bf5c30..ebd2a9cc 100644
--- a/app/components/ChannelForm/ChannelForm.js
+++ b/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
default:
- return 'Confirm Step'
+ return
}
}
diff --git a/app/components/ChannelForm/ChannelForm.scss b/app/components/ChannelForm/ChannelForm.scss
index e003bebf..b0b366b1 100644
--- a/app/components/ChannelForm/ChannelForm.scss
+++ b/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;
diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
index a3609cc5..7134e1fd 100644
--- a/app/components/ChannelForm/Footer.js
+++ b/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 (
+
+
+
changeStep(step - 1)}>
+
+
+
+
console.log('create this mf channel baby')}>
+
+
+
+
+
+ )
+ }
return (
diff --git a/app/components/ChannelForm/StepFour.js b/app/components/ChannelForm/StepFour.js
new file mode 100644
index 00000000..5b81dcec
--- /dev/null
+++ b/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 (
+
+
+
Node key
+ {node_key}
+
+
+
+
+
Local Amount
+ {local_amt}
+
+
+
Push Amount
+ {push_amt}
+
+
+
+ )
+ }
+}
+
+StepFour.propTypes = {}
+
+export default StepFour
diff --git a/app/components/ChannelForm/StepFour.scss b/app/components/ChannelForm/StepFour.scss
new file mode 100644
index 00000000..8332f5a6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js
index a78d9278..7adcbfc8 100644
--- a/app/reducers/channelform.js
+++ b/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'
}
}
)