feature(channels): hard code new channel form

app/reducers/channels.js

@@ -3,6 +3,8 @@ import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SET_FORM = 'SET_FORM'
+
 export const SET_CHANNEL = 'SET_CHANNEL'
 
 export const GET_CHANNELS = 'GET_CHANNELS'
@@ -11,6 +13,14 @@ export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS'
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function setForm(isOpen) {
+  return {
+    type: SET_FORM,
+    isOpen
+  }
+}
+
+
 export function setChannel(channel) {
   return {
     type: SET_CHANNEL,
@@ -41,6 +51,8 @@ export const fetchChannels = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SET_FORM]: (state, { isOpen }) => ({ ...state, form: { ...state.form, isOpen } }),
+
   [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }),
 
   [GET_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
@@ -63,7 +75,13 @@ export { channelsSelectors }
 const initialState = {
   channelsLoading: false,
   channels: [],
-  channel: null
+  channel: null,
+  form: {
+    isOpen: false,
+    node_key: '',
+    local_amt: '',
+    push_amt: ''
+  }
 }
 
 export default function channelsReducer(state = initialState, action) {

app/routes/wallet/components/Wallet.js

@@ -18,9 +18,10 @@ class Wallet extends Component {
   	const {
   		info,
   		peers: { peersLoading, peers },
-  		channels: { channelsLoading, channels, channel },
+  		channels: { channelsLoading, channels, channel, form },
       channelModalOpen,
-      setChannel
+      setChannel,
+      setForm
   	} = this.props
 
     return (  
@@ -41,6 +42,8 @@ class Wallet extends Component {
               modalChannel={channel}
               setChannel={setChannel}
               channelModalOpen={channelModalOpen}
+              form={form}
+              setForm={setForm}
             />
         </section>
       </div>

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

@@ -1,6 +1,8 @@
 // @flow
 import React, { Component } from 'react'
+import { TiPlus } from 'react-icons/lib/ti'
 import ChannelModal from './components/ChannelModal'
+import ChannelForm from './components/ChannelForm'
 import Channel from './components/Channel'
 import styles from './Channels.scss'
 
@@ -11,14 +13,24 @@ class Channels extends Component {
         channels,
         modalChannel,
         setChannel,
-        channelModalOpen
+        channelModalOpen,
+        form,
+        setForm
     } = this.props
     return (
         <div className={styles.channels}>
-            <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel}>
-                <h1>yooooo</h1>
-            </ChannelModal>
-            <h3>Channels</h3>
+            <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
+            <ChannelForm form={form} setForm={setForm} />
+            <div className={styles.header}>
+                <h3>Channels</h3>
+                <div
+                    className={`${styles.openChannel} hint--top`}
+                    data-hint='Open a new channel'
+                    onClick={() => setForm(true)}
+                >
+                    <TiPlus />  
+                </div>
+            </div>
             <ul>
                 {
                     !channelsLoading && channels.length ? 

app/routes/wallet/components/components/Channels/Channels.scss

@@ -1,15 +1,45 @@
 @import '../../../../../variables.scss';
 
 .channels {
-		width: 75%;
-		margin: 50px auto;
+	width: 75%;
+	margin: 50px auto;
+
+	.header {
+		margin-bottom: 10px;
+
+		h3, .openChannel {
+			display: inline-block;
+		}
 
 		h3 {
-			text-transform: uppercase;
-			color: $darkestgrey;
-			letter-spacing: 1.6px;
-			font-size: 14px;
-			font-weight: 400;
-			margin-bottom: 10px;
+			text-align: left;
 		}
+
+		.openChannel {
+			float: right;
+			cursor: pointer;
+
+			svg {
+				padding: 3px;
+				border-radius: 50%;
+				border: 1px solid $main;
+				color: $main;
+				transition: all 0.25s;
+
+				&:hover {
+					border-color: darken($main, 10%);
+					color: darken($main, 10%);
+				}
+			}
+		}
+	}
+
+	h3 {
+		text-transform: uppercase;
+		color: $darkestgrey;
+		letter-spacing: 1.6px;
+		font-size: 14px;
+		font-weight: 400;
+		margin-bottom: 10px;
 	}
+}

app/routes/wallet/components/components/Channels/components/Channel/Channel.scss

@@ -8,6 +8,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	border-top: 1px solid $black;
+	cursor: pointer;
 
 	&:first-child {
 		border: none;

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

@@ -0,0 +1,77 @@
+// @flow
+import React, { Component } from 'react'
+import ReactModal from 'react-modal'
+import styles from './ChannelForm.scss'
+
+class ChannelForm extends Component {
+  render() {
+  	const customStyles = {
+      overlay: {
+        cursor: 'pointer',
+        overflowY: 'auto'
+      },
+      content : {
+        top: 'auto',
+        left: '20%',
+        right: '0',
+        bottom: 'auto',
+        width: '40%',
+        margin: '50px auto',
+        padding: '40px'
+      }
+    }
+    
+    const { form, setForm } = this.props
+    return (
+      <div>
+        <ReactModal
+	        isOpen={form.isOpen}
+	        contentLabel="No Overlay Click Modal"
+	        ariaHideApp={true}
+	        shouldCloseOnOverlayClick={true}
+	        onRequestClose={() => setForm(false)}
+	        parentSelector={() => document.body}
+	        style={customStyles}
+	      >
+	      	<div className={styles.form}>
+	      		<h1 className={styles.title}>Open a new channel</h1>
+	      		
+	      		<section className={styles.pubkey}>
+	      			<label>With</label>
+	      			<input
+                type='text'
+                size=''
+                placeholder='Public key'
+              />
+	      		</section>
+	      		<section className={styles.local}>
+	      			<label>Local</label>
+	      			<input
+                type='text'
+                size=''
+                placeholder='Local amount'
+              />
+	      		</section>
+	      		<section className={styles.push}>
+	      			<label>Push</label>
+	      			<input
+                type='text'
+                size=''
+                placeholder='Push amount'
+              />
+	      		</section>
+
+	      		<div className={styles.buttonGroup}>
+	      			<div className={styles.button}>
+	      				Submit
+	      			</div>
+	      		</div>
+	      	</div>
+      	</ReactModal>
+      </div>
+    )
+  }
+}
+
+
+export default ChannelForm

app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.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/components/components/Channels/components/ChannelForm/index.js

@@ -0,0 +1,3 @@
+import ChannelForm from './ChannelForm'
+
+export default ChannelForm

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

@@ -7,7 +7,8 @@ class ChannelModal extends Component {
   render() {
     const customStyles = {
       overlay: {
-        cursor: 'pointer'
+        cursor: 'pointer',
+        overflowY: 'auto'
       },
       content : {
         top: 'auto',
@@ -15,22 +16,68 @@ class ChannelModal extends Component {
         right: '0',
         bottom: 'auto',
         width: '40%',
-        margin: '50px auto'
+        margin: '50px auto',
+        padding: '40px'
       }
     }
-    const { isOpen, resetChannel, children } = this.props
+    
+    const { isOpen, resetChannel, channel } = this.props
+    
     return (
-    <ReactModal
-      isOpen={isOpen}
-      contentLabel="No Overlay Click Modal"
-      ariaHideApp={true}
-      shouldCloseOnOverlayClick={true}
-      onRequestClose={() => resetChannel(null)}
-      parentSelector={() => document.body}
-      style={customStyles}
-    >
-      {children}
-    </ReactModal>
+      <ReactModal
+        isOpen={isOpen}
+        contentLabel="No Overlay Click Modal"
+        ariaHideApp={true}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={() => resetChannel(null)}
+        parentSelector={() => document.body}
+        style={customStyles}
+      >
+        {
+          channel ?  
+            <div className={styles.channel}>
+              <header className={styles.header}>
+                <h1 data-hint='Remote public key' className='hint--top-left'>{channel.remote_pubkey}</h1>
+                <h2 data-hint='Channel point' className='hint--top-left'>{channel.channel_point}</h2>
+              </header>
+
+              <div className={styles.balances}>
+                <section className={styles.capacity}>
+                  <h3>{channel.capacity}</h3>
+                  <span>Capacity</span>
+                </section>
+                <div className={styles.balance}>
+                  <section className={styles.local}>
+                    <h4>{channel.local_balance}</h4>
+                    <span>Local</span>
+                  </section>
+                  <section className={styles.remote}>
+                    <h4>{channel.remote_balance}</h4>
+                    <span>Remote</span>
+                  </section>
+                </div>
+              </div>
+              <div className={styles.details}>
+                <dl>
+                  <dt>Sent</dt>
+                  <dd>{channel.total_satoshis_sent}</dd>
+                  <dt>Received</dt>
+                  <dd>{channel.total_satoshis_received}</dd>
+                  <dt>Updates</dt>
+                  <dd>{channel.num_updates}</dd>
+                </dl>
+              </div>
+              <div className={styles.close}>
+                <div>Close channel</div>
+              </div>
+              <footer className={styles.active}>
+                <p>{channel.active ? 'Active' : 'Not active'}</p>
+              </footer>
+            </div>
+          :
+            null
+        }
+      </ReactModal>
     )
   }
 }

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss

@@ -0,0 +1,119 @@
+@import '../../../../../../../variables.scss';
+
+.modalChannel {
+	padding: 40px;
+}
+
+.header {
+	margin-bottom: 50px;
+
+	h1 {
+		color: $black;
+		text-align: center;
+		margin-bottom: 5px;
+		font-weight: bold;
+	}
+
+	h2 {
+		color: $darkestgrey;
+		font-size: 14px;
+		text-align: center;
+	}
+}
+
+.balances {
+	.capacity {
+		text-align: center;
+		align-items: center;
+
+		h3 {
+			color: $main;
+			font-size: 40px;
+		}
+
+		span {
+			color: $black;
+			font-size: 16px;
+		}
+	}
+
+	.balance {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		.local, .remote {
+			flex: 5;
+			padding: 10px 30px;
+			text-align: center;
+
+			h4 {
+				font-size: 20px;
+				color: $main;
+			}
+
+			span {
+				color: $black;
+				font-size: 12px;
+			}
+		}
+	}
+}
+
+.details {
+	width: 75%;
+	margin: 20px auto;
+
+	dt {
+		text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+	}
+
+	dd {
+		text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+	}
+}
+
+.close {
+	text-align: center;
+
+	div {
+		width: 35%;
+		margin: 0 auto;
+		cursor: pointer;
+		height: 55px;
+		min-height: 55px;
+		text-transform: none;
+		font-size: 18px;
+		transition: opacity .2s ease-out;
+		background: $red;
+    color: $white;
+    border: none;
+    font-weight: 500;
+    padding: 0;
+    text-align: center;
+    line-height: 55px;
+    transition: all 0.25s;
+    border-radius: 5px;
+
+    &:hover {
+    	background: darken($red, 10%);
+    }
+	}
+}
+
+.active {
+	color: $darkestgrey;
+	text-align: center;
+	margin-top: 50px;
+	text-transform: uppercase;
+}

app/routes/wallet/containers/WalletContainer.js

@@ -1,7 +1,12 @@
 import { connect } from 'react-redux'
 import { fetchInfo } from '../../../reducers/info'
 import { fetchPeers } from '../../../reducers/peers'
-import { fetchChannels, setChannel, channelsSelectors } from '../../../reducers/channels'
+import {
+	fetchChannels,
+	setChannel,
+	channelsSelectors,
+	setForm
+} from '../../../reducers/channels'
 import Wallet from '../components/Wallet'
 
 const mapDispatchToProps = {
@@ -10,7 +15,9 @@ const mapDispatchToProps = {
 	fetchPeers,
 	
 	fetchChannels,
-	setChannel
+	setChannel,
+
+	setForm
 }
 
 const mapStateToProps = (state) => ({