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' } } )