feature(peers): design peers list

app/routes/wallet/components/Wallet.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import ReactSVG from 'react-svg'
 import { FaCircle } from 'react-icons/lib/fa'
+import Peers from './components/peers'
 import Channels from './components/channels'
 import styles from './Wallet.scss'
 
@@ -31,20 +32,19 @@ class Wallet extends Component {
         	<h1>{info.data.identity_pubkey}</h1>
         </section>
         <section className={styles.walletData}>
-        	<div className={styles.peers}>
+          <Peers
-        		<h3>Connected Peers</h3>
+            peersLoading={peersLoading}
-        		<ul>
+            peers={peers}
-        		</ul>
+          />
-        	</div>
+          <Channels
-            <Channels
+            channelsLoading={channelsLoading}
-              channelsLoading={channelsLoading}
+            channels={channels}
-              channels={channels}
+            modalChannel={channel}
-              modalChannel={channel}
+            setChannel={setChannel}
-              setChannel={setChannel}
+            channelModalOpen={channelModalOpen}
-              channelModalOpen={channelModalOpen}
+            form={form}
-              form={form}
+            setForm={setForm}
-              setForm={setForm}
+          />
-            />
         </section>
       </div>
     )

app/routes/wallet/components/Wallet.scss

@@ -2,7 +2,6 @@
 
 .wallet {
 	background: $lightgrey;
-	height: 100vh;
 }
 
 .header {

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

@@ -25,7 +25,7 @@ class Channels extends Component {
                 <h3>Channels</h3>
                 <div
                     className={`${styles.openChannel} hint--top`}
-                    data-hint='Open a new channel'
+                    data-hint='Open a channel'
                     onClick={() => setForm(true)}
                 >
                     <TiPlus />  

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

@@ -9,6 +9,11 @@
 	justify-content: space-between;
 	border-top: 1px solid $black;
 	cursor: pointer;
+	transition: all 0.25s;
+
+	&:hover {
+		opacity: 0.75;
+	}
 
 	&:first-child {
 		border: none;

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

@@ -25,49 +25,49 @@ class ChannelForm extends Component {
     return (
       <div>
         <ReactModal
-	        isOpen={form.isOpen}
+          isOpen={form.isOpen}
-	        contentLabel="No Overlay Click Modal"
+          contentLabel="No Overlay Click Modal"
-	        ariaHideApp={true}
+          ariaHideApp={true}
-	        shouldCloseOnOverlayClick={true}
+          shouldCloseOnOverlayClick={true}
-	        onRequestClose={() => setForm(false)}
+          onRequestClose={() => setForm(false)}
-	        parentSelector={() => document.body}
+          parentSelector={() => document.body}
-	        style={customStyles}
+          style={customStyles}
-	      >
+        >
-	      	<div className={styles.form}>
+          <div className={styles.form}>
-	      		<h1 className={styles.title}>Open a new channel</h1>
+            <h1 className={styles.title}>Open a new channel</h1>
-	      		
+            
-	      		<section className={styles.pubkey}>
+            <section className={styles.pubkey}>
-	      			<label>With</label>
+              <label>With</label>
-	      			<input
+              <input
                 type='text'
                 size=''
                 placeholder='Public key'
               />
-	      		</section>
+            </section>
-	      		<section className={styles.local}>
+            <section className={styles.local}>
-	      			<label>Local</label>
+              <label>$</label>
-	      			<input
+              <input
                 type='text'
                 size=''
                 placeholder='Local amount'
               />
-	      		</section>
+            </section>
-	      		<section className={styles.push}>
+            <section className={styles.push}>
-	      			<label>Push</label>
+              <label>$</label>
-	      			<input
+              <input
                 type='text'
                 size=''
                 placeholder='Push amount'
               />
-	      		</section>
+            </section>
 
-	      		<div className={styles.buttonGroup}>
+            <div className={styles.buttonGroup}>
-	      			<div className={styles.button}>
+              <div className={styles.button}>
-	      				Submit
+                Submit
-	      			</div>
+              </div>
-	      		</div>
+            </div>
-	      	</div>
+          </div>
-      	</ReactModal>
+        </ReactModal>
       </div>
     )
   }

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

@@ -0,0 +1,35 @@
+// @flow
+import React, { Component } from 'react'
+import { TiPlus } from 'react-icons/lib/ti'
+import Peer from './components/Peer'
+import styles from './Peers.scss'
+
+class Peers extends Component {
+  render() {
+    const { peersLoading, peers } = this.props
+    return (
+        <div className={styles.peers}>
+            <div className={styles.header}>
+                <h3>Peers</h3>
+                <div
+                    className={`${styles.connectPeer} hint--top`}
+                    data-hint='Connect to a peer'
+                >
+                    <TiPlus />  
+                </div>
+            </div>
+            <ul>
+                {
+                    !peersLoading && peers.length ? 
+                        peers.map(peer => <Peer key={peer.peer_id} peer={peer} />)
+                    :
+                        'Loading...'
+                }
+            </ul>
+        </div>
+    )
+  }
+}
+
+
+export default Peers

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

@@ -0,0 +1,45 @@
+@import '../../../../../variables.scss';
+
+.peers {
+	width: 75%;
+	margin: 50px auto;
+
+	.header {
+		margin-bottom: 10px;
+
+		h3, .connectPeer {
+			display: inline-block;
+		}
+
+		h3 {
+			text-align: left;
+		}
+
+		.connectPeer {
+			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/Peers/components/Peer/Peer.js

@@ -0,0 +1,19 @@
+// @flow
+import React, { Component } from 'react'
+import styles from './Peer.scss'
+
+class Peer extends Component {
+  render() {
+    const { peer } = this.props
+    console.log('peer: ', peer)
+    return (
+        <li className={styles.peer}>
+            <h4>{peer.address}</h4>
+            <h1>{peer.pub_key}</h1>
+        </li>
+    )
+  }
+}
+
+
+export default Peer

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

@@ -0,0 +1,34 @@
+@import '../../../../../../../variables.scss';
+
+.peer {
+	position: relative;
+	background: $white;
+	padding: 10px;
+	border-top: 1px solid $grey;
+	cursor: pointer;
+	transition: all 0.25s;
+
+	&:hover {
+		opacity: 0.75;
+	}
+
+	&:first-child {
+		border: none;
+	}
+
+	h4, h1 {
+		margin: 10px 0;
+	}
+
+	h4 {
+		font-size: 14px;
+		font-weight: bold;
+		color: $black;
+	}
+
+	h1 {
+		font-size: 18px;
+		font-weight: 200;
+		color: $main;
+	}
+}

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

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

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

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

resources/check.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 300 300">
+  <g>
+    <path d="M 150, 150 m -0, -150 a -150,-150 0 1,0 0,300 a -150,-150 0 1,0 0,-300" fill="none" stroke-width="19" class="circle animatable reverse" stroke-dashoffset="942.6107177734375" stroke-dasharray="942.6107177734375"></path>
+    <path fill="none" d="M 90,160 l 45,45 l 90,-95" stroke-width="19" class="check animatable" stroke-dashoffset="194.50213623046875" stroke-dasharray="194.50213623046875"></path>
+  </g>
+</svg>