diff --git a/app/app.global.scss b/app/app.global.scss
index e1413042..2035ceef 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -100,3 +100,42 @@ body {
outline: 0;
}
}
+
+.buttonContainer.circleContainer {
+ display: inline-block;
+ width: auto;
+ min-width: 0;
+ background: none;
+ border: none;
+ box-shadow: none;
+}
+
+.buttonContainer .circle {
+ display: inline-block;
+ border-radius: 50px;
+}
+
+.buttonContainer .circle.small {
+ width: 50px;
+ padding: 10px 0;
+}
+
+.buttonContainer.small {
+ min-width: auto;
+ padding: 0;
+ border: none;
+ margin: 0 auto;
+ width: 80%;
+}
+
+.buttonContainer .small.active {
+ box-shadow: inset 0 1px 1px 1px #1f4b2e;
+ transform: translate(0px, 3px);
+ outline: 0;
+ background: #002280;
+}
+
+.buttonContainer.small .buttonPrimary {
+ padding: 10px 5px;
+ font-size: 15px;
+}
diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
new file mode 100644
index 00000000..3d0bba1d
--- /dev/null
+++ b/app/components/ChannelForm/ChannelForm.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactModal from 'react-modal'
+
+import StepOne from './StepOne'
+import Footer from './Footer'
+
+import styles from './ChannelForm.scss'
+
+const ChannelForm = ({
+ channelform,
+ closeChannelForm,
+ changeStep,
+ setNodeKey,
+ channelFormHeader,
+ channelFormProgress,
+ peers
+}) => {
+ const renderStep = () => {
+ const { step } = channelform
+ console.log('setNodeKey: ', setNodeKey)
+
+ switch (step) {
+ case 1:
+ return
+ case 2:
+ return 'Step Two'
+ case 3:
+ return 'Step 3'
+ default:
+ return 'Confirm Step'
+ }
+ }
+
+ return (
+ document.body}
+ className={styles.modal}
+ >
+
+ {channelFormHeader}
+
+
+
+
+ {renderStep()}
+
+
+
+
+ )
+}
+
+ChannelForm.propTypes = {}
+
+export default ChannelForm
diff --git a/app/components/ChannelForm/ChannelForm.scss b/app/components/ChannelForm/ChannelForm.scss
new file mode 100644
index 00000000..e003bebf
--- /dev/null
+++ b/app/components/ChannelForm/ChannelForm.scss
@@ -0,0 +1,36 @@
+@import '../../variables.scss';
+
+.modal {
+ width: 40%;
+ min-height: 500px;
+ margin: 50px auto;
+ position: absolute;
+ top: auto;
+ left: 20%;
+ right: 0;
+ bottom: auto;
+ background: $white;
+ outline: none;
+ z-index: -2;
+ border: 1px solid $darkgrey;
+}
+
+.header {
+ padding: 20px;
+ background: $lightgrey;
+ text-align: center;
+ font-family: 'Jigsaw Light';
+ text-transform: uppercase;
+ position: relative;
+ z-index: -2;
+}
+
+.progress {
+ transition: all 0.2s ease;
+ background: $main;
+ position: absolute;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
new file mode 100644
index 00000000..d4415521
--- /dev/null
+++ b/app/components/ChannelForm/Footer.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaArrowLeft, FaArrowRight } from 'react-icons/lib/fa'
+import styles from './Footer.scss'
+
+const Footer = ({ step }) => {
+ if ( step === 1 ) { return null }
+
+ return (
+
+ )
+}
+
+Footer.propTypes = {}
+
+export default Footer
diff --git a/app/components/ChannelForm/Footer.scss b/app/components/ChannelForm/Footer.scss
new file mode 100644
index 00000000..3c1e773a
--- /dev/null
+++ b/app/components/ChannelForm/Footer.scss
@@ -0,0 +1,8 @@
+.footer {
+ text-align: center;
+ padding-bottom: 30px;
+
+ div {
+ margin: 0 5px;
+ }
+}
\ No newline at end of file
diff --git a/app/components/ChannelForm/StepOne.js b/app/components/ChannelForm/StepOne.js
new file mode 100644
index 00000000..606b24d9
--- /dev/null
+++ b/app/components/ChannelForm/StepOne.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MdSearch } from 'react-icons/lib/md'
+import styles from './StepOne.scss'
+
+const StepOne = ({ peers, changeStep, setNodeKey }) => {
+ const peerClicked = (peer) => {
+ setNodeKey(peer.pub_key)
+ changeStep(2)
+ }
+
+ return (
+
+
+
+ console.log('event: ', event)}
+ className={`${styles.text} ${styles.input}`}
+ placeholder='Search your peers by their public key'
+ type='text'
+ id='peersSearch'
+ />
+
+
+
+ {peers.length &&
+ peers.map(peer => (
+ - peerClicked(peer)}
+ >
+
{peer.address}
+ {peer.pub_key}
+
+ )
+ )}
+
+
+ )
+}
+
+StepOne.propTypes = {}
+
+export default StepOne
diff --git a/app/components/ChannelForm/StepOne.scss b/app/components/ChannelForm/StepOne.scss
new file mode 100644
index 00000000..a54ded0c
--- /dev/null
+++ b/app/components/ChannelForm/StepOne.scss
@@ -0,0 +1,76 @@
+@import '../../variables.scss';
+
+.peers {
+ // margin-bottom: 50px;
+
+ h2 {
+ text-transform: uppercase;
+ font-weight: 200;
+ padding: 10px 0;
+ border-bottom: 1px solid $grey;
+ color: $darkestgrey;
+ }
+}
+
+.search {
+ height: 50px;
+ padding: 2px;
+ border-bottom: 1px solid $darkgrey;
+
+ .input {
+ display: inline-block;
+ vertical-align: top;
+ height: 100%;
+ }
+
+ .label {
+ width: 5%;
+ line-height: 50px;
+ font-size: 16px;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ .text {
+ width: 95%;
+ outline: 0;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ height: 50px;
+ font-size: 16px;
+ }
+}
+
+.peer {
+ position: relative;
+ background: $white;
+ padding: 10px;
+ border-top: 1px solid $grey;
+ cursor: pointer;
+ transition: all 0.25s;
+
+ &:hover {
+ opacity: 0.5;
+ }
+
+ &:first-child {
+ border: none;
+ }
+
+ h4, h1 {
+ margin: 10px 0;
+ }
+
+ h4 {
+ font-size: 12px;
+ font-weight: bold;
+ color: $black;
+ }
+
+ h1 {
+ font-size: 14px;
+ font-weight: 200;
+ color: $main;
+ }
+}
\ No newline at end of file
diff --git a/app/components/ChannelForm/index.js b/app/components/ChannelForm/index.js
new file mode 100644
index 00000000..1bcf89ef
--- /dev/null
+++ b/app/components/ChannelForm/index.js
@@ -0,0 +1,3 @@
+import ChannelForm from './ChannelForm'
+
+export default ChannelForm
\ No newline at end of file
diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js
new file mode 100644
index 00000000..656f20fa
--- /dev/null
+++ b/app/reducers/channelform.js
@@ -0,0 +1,106 @@
+import { createSelector } from 'reselect'
+
+// Initial State
+const initialState = {
+ isOpen: false,
+ node_key: '',
+ local_amt: '',
+ push_amt: '',
+
+ step: 1
+}
+
+// Constants
+// ------------------------------------
+export const OPEN_CHANNEL_FORM = 'OPEN_CHANNEL_FORM'
+export const CLOSE_CHANNEL_FORM = 'CLOSE_CHANNEL_FORM'
+
+export const SET_NODE_KEY = 'SET_NODE_KEY'
+
+export const CHANGE_STEP = 'CHANGE_STEP'
+
+export const RESET_CHANNEL_FORM = 'RESET_CHANNEL_FORM'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function openChannelForm() {
+ return {
+ type: OPEN_CHANNEL_FORM
+ }
+}
+
+export function closeChannelForm() {
+ return {
+ type: CLOSE_CHANNEL_FORM
+ }
+}
+
+export function setNodeKey(node_key) {
+ return {
+ type: SET_NODE_KEY,
+ node_key
+ }
+}
+
+export function changeStep(step) {
+ return {
+ type: CHANGE_STEP,
+ step
+ }
+}
+
+export function resetChannelForm() {
+ return {
+ type: RESET_CHANNEL_FORM
+ }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+ [OPEN_CHANNEL_FORM]: state => ({ ...state, isOpen: true }),
+ [CLOSE_CHANNEL_FORM]: state => ({ ...state, isOpen: false }),
+
+ [SET_NODE_KEY]: (state, { node_key }) => ({ ...state, node_key }),
+
+ [CHANGE_STEP]: (state, { step }) => ({ ...state, step }),
+
+ [RESET_CHANNEL_FORM]: () => (initialState)
+}
+
+const channelFormSelectors = {}
+const channelFormStepSelector = state => state.channelform.step
+
+channelFormSelectors.channelFormHeader = createSelector(
+ channelFormStepSelector,
+ step => {
+ switch (step) {
+ case 1:
+ return 'Choose a peer'
+ case 2:
+ return 'Choose your local amount'
+ case 3:
+ return 'Choose your push amount'
+ default:
+ return 'Confirm'
+ }
+ }
+)
+
+channelFormSelectors.channelFormProgress = createSelector(
+ channelFormStepSelector,
+ step => (step / 4) * 100
+)
+
+export { channelFormSelectors }
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function channelFormReducer(state = initialState, action) {
+ const handler = ACTION_HANDLERS[action.type]
+
+ return handler ? handler(state, action) : state
+}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 20e0893b..17c4855a 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -8,6 +8,7 @@ import balance from './balance'
import payment from './payment'
import peers from './peers'
import channels from './channels'
+import channelform from './channelform'
import form from './form'
import payform from './payform'
@@ -29,6 +30,7 @@ const rootReducer = combineReducers({
payment,
peers,
channels,
+ channelform,
form,
payform,
diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
index 9ab5209c..37a0b5be 100644
--- a/app/routes/channels/components/Channels.js
+++ b/app/routes/channels/components/Channels.js
@@ -5,26 +5,42 @@ import { FaAlignJustify, FaThLarge } from 'react-icons/lib/fa'
import { MdSearch } from 'react-icons/lib/md'
import Channel from 'components/Channels/Channel'
+import ChannelForm from 'components/ChannelForm'
import styles from './Channels.scss'
class Channels extends Component {
componentWillMount() {
- this.props.fetchChannels()
+ const { fetchChannels, fetchPeers } = this.props
+
+ fetchChannels()
+ fetchPeers()
}
render() {
const {
channels: { channels },
allChannels,
+
+ closeChannelForm,
+ openChannelForm,
+ channelform,
+ channelFormHeader,
+ channelFormProgress,
+
+ peers: { peers },
ticker,
- currentTicker
+ currentTicker,
+
+ channelFormProps
} = this.props
- console.log('channels: ', channels)
+ console.log('channelFormProps: ', channelFormProps)
return (
+
+
-
@@ -58,8 +74,6 @@ class Channels extends Component {
{
allChannels.map((channel, index) => {
- console.log('channel: ', channel)
-
return (
({
channels: state.channels,
+ channelform: state.channelform,
+ peers: state.peers,
ticker: state.ticker,
allChannels: channelsSelectors.allChannels(state),
- currentTicker: tickerSelectors.currentTicker(state)
+ currentTicker: tickerSelectors.currentTicker(state),
+ channelFormHeader: channelFormSelectors.channelFormHeader(state),
+ channelFormProgress: channelFormSelectors.channelFormProgress(state)
})
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Channels))
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const channelFormProps = {
+ closeChannelForm: dispatchProps.closeChannelForm,
+ changeStep: dispatchProps.changeStep,
+ setNodeKey: dispatchProps.setNodeKey,
+
+ channelform: stateProps.channelform,
+ channelFormHeader: stateProps.channelFormHeader,
+ channelFormProgress: stateProps.channelFormProgress,
+ peers: stateProps.peers.peers
+ }
+
+ return {
+ ...stateProps,
+ ...dispatchProps,
+ ...ownProps,
+
+ channelFormProps
+ }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Channels))