feature(channelsList): style network channels list

app/components/Network/ChannelsList.js

@@ -0,0 +1,44 @@
+import { shell } from 'electron'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { btc } from 'utils'
+import styles from './ChannelsList.scss'
+
+const ChannelsList = ({ channels }) => (
+  <ul className={styles.channels}>
+    {
+      channels.map((channel, index) =>
+        <li key={index} className={styles.channel} onClick={() => console.log('channel clicked')}>
+          <span className={`${styles.dot}`} />
+
+          <header>
+            <h1>Capacity: {btc.satoshisToBtc(channel.capacity)}</h1>
+            <span onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>Channel Point</span>
+          </header>
+
+          <section>
+            <h4>Remote Pubkey:</h4>
+            <p>{channel.remote_pubkey.substring(0, Math.min(30, channel.remote_pubkey.length))}...</p>
+          </section>
+
+          <section className={styles.funds}>
+            <div>
+              <h4>Sent:</h4>
+              <p>{btc.satoshisToBtc(channel.total_satoshis_sent)} BTC</p>
+            </div>
+            <div>
+              <h4>Received:</h4>
+              <p>{btc.satoshisToBtc(channel.total_satoshis_received)} BTC</p>
+            </div>
+          </section>
+        </li>
+      )
+    }
+  </ul>
+)
+
+ChannelsList.propTypes = {
+  channels: PropTypes.array.isRequired
+}
+
+export default ChannelsList

app/components/Network/ChannelsList.scss

@@ -0,0 +1,78 @@
+@import '../../variables.scss';
+
+.channels {
+  color: $white;
+  margin-top: 50px;
+}
+
+.channel {
+  position: relative;
+  margin: 20px 0;
+  padding: 10px 40px;
+  cursor: pointer;
+  transition: all 0.25s;
+
+  &:hover {
+    background: darken(#353535, 10%);
+
+    .dot {
+      background: #88D4A2;
+      opacity: 0.5;
+    }
+  }
+
+  .dot {
+    position: absolute;
+    top: calc(15% - 10px);
+    left: 5%;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #979797;
+    border-radius: 50%;
+
+    &.active {
+      background: #88D4A2;
+    }
+  }
+
+  header {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    
+    h1 {
+      margin-bottom: 10px;
+    }
+
+    span {
+      font-size: 10px;
+      text-decoration: underline;
+      transition: all 0.25s;
+
+      &:hover {
+        color: #88D4A2;
+      }
+    }
+  }
+
+
+  section {
+    margin: 10px 0;
+
+    h4 {
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: 10px;
+      margin-bottom: 5px;
+    }
+  }
+
+  .funds {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+  }
+}

app/components/Network/NetworkGraph.js

@@ -44,7 +44,7 @@ class NetworkGraph extends Component {
               height: 800,
               width: 800,
               strength: { 
-                charge: -500
+                charge: -750
               }
             }
           }

app/routes/network/components/Network.js

@@ -5,14 +5,16 @@ import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis
 
 import NetworkGraph from 'components/Network/NetworkGraph'
 import PeersList from 'components/Network/PeersList'
+import ChannelsList from 'components/Network/ChannelsList'
 
 import styles from './Network.scss'
 
 class Network extends Component {
   componentWillMount() {
-    const { fetchDescribeNetwork, fetchPeers } = this.props
+    const { fetchDescribeNetwork, fetchPeers, fetchChannels } = this.props
 
     fetchPeers()
+    fetchChannels()
     fetchDescribeNetwork()
   }
 
@@ -25,6 +27,9 @@ class Network extends Component {
       selectedPeerPubkeys,
 
       peers: { peers },
+      
+      activeChannels,
+
       identity_pubkey
     } = this.props
 
@@ -34,7 +39,7 @@ class Network extends Component {
           return <PeersList peers={peers} updateSelectedPeers={updateSelectedPeers} selectedPeerPubkeys={selectedPeerPubkeys} />
           break
         case 2:
-          return <h1>channels</h1>
+          return <ChannelsList channels={activeChannels} />
           break
         case 3:
           return <h1>transactions</h1>

app/routes/network/containers/NetworkContainer.js

@@ -10,6 +10,7 @@ import {
   networkSelectors
 } from '../../../reducers/network'
 import { fetchPeers } from '../../../reducers/peers'
+import { fetchChannels, channelsSelectors } from '../../../reducers/channels'
 
 import Network from '../components/Network'
 
@@ -18,7 +19,9 @@ const mapDispatchToProps = {
   setCurrentTab,
   updateSelectedPeers,
   
-  fetchPeers
+  fetchPeers,
+
+  fetchChannels
 }
 
 const mapStateToProps = state => ({
@@ -26,7 +29,8 @@ const mapStateToProps = state => ({
   peers: state.peers,
   identity_pubkey: state.info.data.identity_pubkey,
 
-  selectedPeerPubkeys: networkSelectors.selectedPeerPubkeys(state)
+  selectedPeerPubkeys: networkSelectors.selectedPeerPubkeys(state),
+  activeChannels: channelsSelectors.activeChannels(state)
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network))