feature(peers): hard code connect peer form

app/reducers/channels.js

@@ -3,7 +3,7 @@ import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
-export const SET_FORM = 'SET_FORM'
+export const SET_CHANNEL_FORM = 'SET_CHANNEL_FORM'
 
 export const SET_CHANNEL = 'SET_CHANNEL'
 
@@ -13,9 +13,9 @@ export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS'
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function setForm(isOpen) {
+export function setChannelForm(isOpen) {
   return {
-    type: SET_FORM,
+    type: SET_CHANNEL_FORM,
     isOpen
   }
 }
@@ -51,7 +51,7 @@ export const fetchChannels = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_FORM]: (state, { isOpen }) => ({ ...state, form: { ...state.form, isOpen } }),
+  [SET_CHANNEL_FORM]: (state, { isOpen }) => ({ ...state, channelForm: { ...state.form, isOpen } }),
 
   [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }),
 
@@ -76,7 +76,7 @@ const initialState = {
   channelsLoading: false,
   channels: [],
   channel: null,
-  form: {
+  channelForm: {
     isOpen: false,
     node_key: '',
     local_amt: '',

app/reducers/peers.js

@@ -3,6 +3,8 @@ import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SET_PEER_FORM = 'SET_PEER_FORM'
+
 export const SET_PEER = 'SET_PEER'
 
 export const GET_PEERS = 'GET_PEERS'
@@ -11,6 +13,13 @@ export const RECEIVE_PEERS = 'RECEIVE_PEERS'
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function setPeerForm(isOpen) {
+  return {
+    type: SET_PEER_FORM,
+    isOpen
+  }
+}
+
 export function setPeer(peer) {
   return {
     type: SET_PEER,
@@ -41,6 +50,8 @@ export const fetchPeers = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SET_PEER_FORM]: (state, { isOpen }) => ({ ...state, peerForm: { ...state.form, isOpen } }),
+
   [SET_PEER]: (state, { peer }) => ({ ...state, peer }),
 
   [GET_PEERS]: (state) => ({ ...state, peersLoading: true }),
@@ -64,7 +75,7 @@ const initialState = {
   peersLoading: false,
   peers: [],
   peer: null,
-  form: {
+  peerForm: {
     isOpen: false,
     pub_key: '',
     address: ''

app/routes/wallet/components/Wallet.js

@@ -18,16 +18,18 @@ class Wallet extends Component {
   render() {
   	const {
   		info,
-  		peers: { peersLoading, peers, peer },
-  		channels: { channelsLoading, channels, channel, form },
+  		peers: { peersLoading, peers, peer, peerForm },
+  		channels: { channelsLoading, channels, channel, channelForm },
       setPeer,
       setChannel,
       peerModalOpen,
       channelModalOpen,
-      setForm
+      setPeerForm,
+      setChannelForm
   	} = this.props
-    console.log('props: ', this.props)
-    return (  
+    console.log('setPeerForm: ', setPeerForm)
+    console.log('setChannelForm: ', setChannelForm)
+    return (
       <div className={styles.wallet}>
         <section className={styles.header}>
         	<ReactSVG path='../resources/zap_2.svg' />
@@ -40,6 +42,8 @@ class Wallet extends Component {
             modalPeer={peer}
             setPeer={setPeer}
             peerModalOpen={peerModalOpen}
+            peerForm={peerForm}
+            setPeerForm={setPeerForm}
           />
           <Channels
             channelsLoading={channelsLoading}
@@ -47,8 +51,8 @@ class Wallet extends Component {
             modalChannel={channel}
             setChannel={setChannel}
             channelModalOpen={channelModalOpen}
-            form={form}
-            setForm={setForm}
+            channelForm={channelForm}
+            setChannelForm={setChannelForm}
           />
         </section>
       </div>

app/routes/wallet/components/components/Channels/Channels.js

@@ -14,19 +14,19 @@ class Channels extends Component {
         modalChannel,
         setChannel,
         channelModalOpen,
-        form,
-        setForm
+        channelForm,
+        setChannelForm
     } = this.props
     return (
         <div className={styles.channels}>
             <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
-            <ChannelForm form={form} setForm={setForm} />
+            <ChannelForm form={channelForm} setForm={setChannelForm} />
             <div className={styles.header}>
                 <h3>Channels</h3>
                 <div
                     className={`${styles.openChannel} hint--top`}
                     data-hint='Open a channel'
-                    onClick={() => setForm(true)}
+                    onClick={() => setChannelForm(true)}
                 >
                     <TiPlus />  
                 </div>
@@ -50,5 +50,4 @@ class Channels extends Component {
   }
 }
 
-
-export default Channels
+export default Channels

app/routes/wallet/components/components/Peers/Peers.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import { TiPlus } from 'react-icons/lib/ti'
 import PeerModal from './components/PeerModal'
+import PeerForm from './components/PeerForm'
 import Peer from './components/Peer'
 import styles from './Peers.scss'
 
@@ -13,16 +14,21 @@ class Peers extends Component {
         peer,
         setPeer,
         modalPeer,
-        peerModalOpen
+        peerModalOpen,
+        peerForm,
+        setPeerForm
     } = this.props
+
     return (
         <div className={styles.peers}>
             <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} />
+            <PeerForm form={peerForm} setForm={setPeerForm} />
             <div className={styles.header}>
                 <h3>Peers</h3>
                 <div
                     className={`${styles.connectPeer} hint--top`}
                     data-hint='Connect to a peer'
+                    onClick={() => setPeerForm(true)}
                 >
                     <TiPlus />  
                 </div>

app/routes/wallet/components/components/Peers/components/PeerForm/PeerForm.js

@@ -25,7 +25,7 @@ class PeerForm extends Component {
     return (
       <div>
         <ReactModal
-          isOpen={fosrm.isOpen}
+          isOpen={form.isOpen}
           contentLabel="No Overlay Click Modal"
           ariaHideApp={true}
           shouldCloseOnOverlayClick={true}
@@ -33,7 +33,32 @@ class PeerForm extends Component {
           parentSelector={() => document.body}
           style={customStyles}
         >
-          <h1>Peer form</h1>
+          <div className={styles.form}>
+            <h1 className={styles.title}>Connect to a peer</h1>
+            
+            <section className={styles.pubkey}>
+              <label>Pubkey</label>
+              <input
+                type='text'
+                size=''
+                placeholder='Public key'
+              />
+            </section>
+            <section className={styles.local}>
+              <label>Address</label>
+              <input
+                type='text'
+                size=''
+                placeholder='Host address'
+              />
+            </section>
+            
+            <div className={styles.buttonGroup}>
+              <div className={styles.button}>
+                Submit
+              </div>
+            </div>
+          </div>
         </ReactModal>
       </div>
     )

app/routes/wallet/components/components/Peers/components/PeerForm/PeerForm.scss

@@ -0,0 +1,69 @@
+@import '../../../../../../../variables.scss';
+
+.title {
+	text-align: center;
+	font-size: 24px;
+	color: $black;
+	margin-bottom: 50px;
+}
+
+.pubkey, .local, .push {
+	display: flex;
+	justify-content: center;
+	font-size: 18px;
+	height: auto;
+  min-height: 55px;
+  margin-bottom: 20px;
+  border: 1px solid $traditionalgrey;
+  border-radius: 6px;
+  position: relative;
+  padding: 0 20px;
+
+	label, input[type=text] {
+		font-size: inherit;
+	}
+
+	label {
+		padding-top: 19px;
+  	padding-bottom: 12px;
+  	color: $traditionalgrey;
+	}
+
+	input[type=text] {
+		width: 100%;
+		border: none;
+  	outline: 0;
+  	-webkit-appearance: none;
+  	height: 55px;
+  	padding: 0 10px;
+	}
+}
+
+.buttonGroup {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	border-radius: 6px;
+  overflow: hidden;
+
+  .button {
+  	cursor: pointer;
+		height: 55px;
+		min-height: 55px;
+		text-transform: none;
+		font-size: 18px;
+		transition: opacity .2s ease-out;
+		background: $main;
+    color: $white;
+    border: none;
+    font-weight: 500;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+    line-height: 55px;
+
+    &:first-child {
+    	border-right: 1px solid lighten($main, 20%);
+    }
+  }
+}

app/routes/wallet/containers/WalletContainer.js

@@ -3,13 +3,14 @@ import { fetchInfo } from '../../../reducers/info'
 import {
 	fetchPeers,
 	setPeer,
-	peersSelectors
+	peersSelectors,
+	setPeerForm
 } from '../../../reducers/peers'
 import {
 	fetchChannels,
 	setChannel,
 	channelsSelectors,
-	setForm
+	setChannelForm
 } from '../../../reducers/channels'
 import Wallet from '../components/Wallet'
 
@@ -22,7 +23,8 @@ const mapDispatchToProps = {
 	fetchChannels,
 	setChannel,
 
-	setForm
+	setPeerForm,
+	setChannelForm
 }
 
 const mapStateToProps = (state) => ({