feature(tabs): hard code tabs style

app/components/Network/PeersList.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PeersList.scss'
+
+const PeersList = ({ peers }) => (
+  <ul className={styles.peers}>
+    {
+      peers.map(peer => {
+        console.log('peer: ', peer)
+        return (
+          <li key={peer.peer_id} className={styles.peer}>
+            <span className={styles.dot} />
+            <h1>{peer.address}</h1>
+            <h4>{peer.pub_key}</h4>
+          </li>
+        )
+      })
+    }
+  </ul>
+)
+
+PeersList.propTypes = {
+  peers: PropTypes.array.isRequired
+}
+
+export default PeersList

app/components/Network/PeersList.scss

@@ -0,0 +1,46 @@
+@import '../../variables.scss';
+
+.peers {
+  color: $white;
+  margin-top: 50px;
+}
+
+.peer {
+  position: relative;
+  margin: 20px 0;
+  padding: 10px 40px;
+  cursor: pointer;
+  transition: all 0.25s;
+
+  &:hover {
+    background: darken(#353535, 10%);
+
+    .dot {
+      background: #5589F3;
+      opacity: 0.5;
+    }
+  }
+
+  .dot {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: 5%;
+    width: 10px;
+    height: 10px;
+    border: 1px solid #979797;
+    border-radius: 50%;
+
+    &.active {
+      background: #5589F3;
+    }
+  }
+
+  h1 {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+
+  h4 {
+    font-size: 8px;
+  }
+}

app/routes/network/components/Network.js

@@ -1,13 +1,98 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
+import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
+
+import LoadingBolt from 'components/LoadingBolt'
+import PeersList from 'components/Network/PeersList'
+
 import styles from './Network.scss'
 
 class Network extends Component {
+  componentWillMount() {
+    const { fetchDescribeNetwork, fetchPeers } = this.props
+
+    fetchPeers()
+    fetchDescribeNetwork()
+  }
+
   render() {
+    const {
+      fetchDescribeNetwork,
+
+      network: { nodes, edges, networkLoading },
+      peers: { peers },
+      identity_pubkey
+    } = this.props
+
+    if (!nodes.length || !edges.length) { return <span></span> }
+    if (networkLoading) return <LoadingBolt />
+
     return (
-      <div>
+      <div className={styles.container}>
-        Network
+        <section className={styles.network}>
+          <InteractiveForceGraph
+            simulationOptions={
+              {
+                height: 800,
+                width: 800,
+                strength: { 
+                  charge: -500
+                }
+              }
+            }
+            labelAttr='label'
+            onSelectNode={node => console.log('node: ', node)}
+            opacityFactor={1}
+            highlightDependencies
+            zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
+            zoom
+          >
+            <path d="M534.7054286266647, 460.3260926684966" fill="red" stroke="blue" />
+            {
+              nodes.map(node => {
+                return (
+                  <ForceGraphNode
+                    r={15}
+                    label={node.pub_key}
+                    key={node.pub_key}
+                    node={{ id: node.pub_key }}
+                    fill={identity_pubkey === node.pub_key ? 'white' : 'black'}
+                  />
+                )
+              })
+            }
+            {
+              edges.map(edge => {
+                return (
+                  <ForceGraphLink
+                    key={edge.channel_id}
+                    link={{ source: edge.node1_pub, target: edge.node2_pub }}
+                    stroke='silver'
+                    strokeWidth='5'
+                  />
+                )
+              })
+            }
+          </InteractiveForceGraph>
+        </section>
+        <section className={styles.toolbox}>
+          <ul className={styles.tabs}>
+            <li className={`${styles.tab} ${styles.peersTab}`}>
+              Peers
+            </li>
+            <li className={`${styles.tab} ${styles.channelsTab}`}>
+              Channels
+            </li>
+            <li className={`${styles.tab} ${styles.transactionsTab}`}>
+              Transactions
+            </li>
+          </ul>
+
+          <div className={styles.content}>
+            <PeersList peers={peers} />
+          </div>
+        </section>
       </div>
     )
   }

app/routes/network/components/Network.scss

@@ -0,0 +1,84 @@
+@import '../../../variables.scss';
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 1000;
+  }
+}
+
+@keyframes fadein {
+  0%   { background: $white; }
+  50%  { background: lighten($secondary, 50%); }
+  100% { background: $secondary; animation-fill-mode:forwards; }
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  animation: fadein 0.5s;
+  animation-timing-function:linear;
+  animation-fill-mode:forwards;
+  animation-iteration-count: 1;
+
+  line.active {
+    opacity: 1;
+    stroke: green;
+    stroke-width: 5;
+    stroke-dasharray: 100;
+    animation: dash 2.5s infinite linear;
+  }
+
+  circle {
+    cursor: pointer;
+  }
+}
+
+.network, .toolbox {
+  display: inline-block;
+  vertical-align: top;
+  height: 100vh;
+}
+
+.network {
+  width: 70%;
+}
+
+.toolbox {
+  width: 30%;
+  height: 100%;
+  background: #353535;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 40px;
+
+  .tab {
+    color: $white;
+    text-align: center;
+    cursor: pointer;
+    width: 100%;
+    padding: 10px 0;
+    border-bottom: 1px solid #464646;
+    transition: all 0.5s;
+
+    &:nth-child(1) {
+      border-bottom: 1px solid #588CF0;
+    }
+
+    &.peersTab {
+      border-bottom: 1px solid #588CF0; 
+    }
+
+    &.channelsTab:hover {
+      border-bottom: 1px solid #88D4A2; 
+    }
+
+    &.transactionsTab:hover {
+      border-bottom: 1px solid #FFDC53; 
+    }
+  }
+}

app/routes/network/containers/NetworkContainer.js

@@ -1,12 +1,20 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
+import { fetchDescribeNetwork } from '../../../reducers/network'
+import { fetchPeers } from '../../../reducers/peers'
+
 import Network from '../components/Network'
 
-const mapDispatchToProps = {}
+const mapDispatchToProps = {
+  fetchDescribeNetwork,
+  fetchPeers
+}
 
 const mapStateToProps = state => ({
-  network: state.network
+  network: state.network,
+  peers: state.peers,
+  identity_pubkey: state.info.data.identity_pubkey
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network))

package.json

@@ -211,6 +211,7 @@
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-router-redux": "^5.0.0-alpha.6",
+    "react-vis-force": "^0.3.1",
     "redux": "^3.7.1",
     "redux-electron-ipc": "^1.1.10",
     "redux-thunk": "^2.2.0",

yarn.lock

@@ -2528,6 +2528,31 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+d3-collection@1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
+
+d3-dispatch@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
+
+d3-force@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-quadtree@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"
+
+d3-timer@1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
+
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -5570,7 +5595,7 @@ lodash.range@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.range/-/lodash.range-3.2.0.tgz#f461e588f66683f7eadeade513e38a69a565a15d"
 
-lodash.reduce@^4.4.0:
+lodash.reduce@^4.4.0, lodash.reduce@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
 
@@ -7190,6 +7215,15 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react-vis-force@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/react-vis-force/-/react-vis-force-0.3.1.tgz#c7bc96a4e872409f5d4c0fa93fe89c94554d47b7"
+  dependencies:
+    d3-force "^1.0.2"
+    global "^4.3.0"
+    lodash.reduce "^4.6.0"
+    prop-types "^15.5.10"
+
 react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"