feature(network)

app/components/Contacts/Network.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
+import { FaAngleDown, FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import plus from 'icons/plus.svg'
+import search from 'icons/search.svg'
+import styles from './Network.scss'
+
+const Network = ({ channels, balance, currentTicker }) => {
+  console.log('channels: ', channels)
+
+  return (
+    <div className={styles.network}>
+      <header className={styles.header}>
+        <section>
+          <h2>My Network</h2>
+          <span className={styles.channelAmount}>
+            {btc.satoshisToBtc(balance.channelBalance)}BTC ≈ ${btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd).toLocaleString()}
+          </span>
+        </section>
+        <section className={styles.addChannel}>
+          <Isvg src={plus} />
+        </section>
+      </header>
+
+      <div className={styles.channels}>
+        <header className={styles.listHeader}>
+          <div>
+            <span>All <FaAngleDown /></span>
+          </div>
+          <div>
+            <span>Refresh</span>
+          </div>
+        </header>
+
+        <ul>
+          {
+            channels.channels.map(channel => {
+              console.log('channel: ', channel)
+            })
+          }
+        </ul>
+      </div>
+
+      <footer className={styles.search}>
+        <label htmlFor='search' className={`${styles.label} ${styles.input}`}>
+          <Isvg src={search} />
+        </label>
+        <input id='search' type='text' className={`${styles.text} ${styles.input}`} placeholder='search by alias or pubkey' />
+      </footer>
+    </div>
+  )
+}
+
+Network.propTypes = {}
+
+export default Network

app/components/Contacts/Network.scss

@@ -0,0 +1,124 @@
+@import '../../variables.scss';
+
+.network {
+  position: relative;
+  width: 20%;
+  display: inline-block;
+  vertical-align: top;
+  height: 100vh;
+  background: #31343f;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: #2D303B;
+  padding: 10px 20px;
+  color: $white;
+
+  h2 {
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 1.2px;
+  }
+
+  .channelAmount {
+    font-size: 10px;
+    opacity: 0.5;
+  }
+}
+
+.channels {
+  padding: 20px;
+
+  .listHeader {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    span {
+      color: white;
+      opacity: 0.5;
+      font-size: 10px;
+      cursor: pointer;
+      
+      &:nth-child(1) {
+        opacity: 1;
+      }
+    }
+  }
+
+  ul {
+    margin-top: 20px;
+  }
+
+  .channel {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: $white;
+    padding: 10px 0;
+    margin: 10px 0;
+
+    span:nth-child(1) {
+      font-size: 12px;
+    } 
+
+    .online {
+      color: $green;
+    }
+
+    .pending {
+      color: $orange;
+    }
+
+    .offline {
+      color: $darkestgrey;
+    }
+
+    svg {
+      width: 5px;
+      height: 5px;
+    }
+  }
+}
+
+.search {
+  height: 55px;
+  padding: 2px 5px;
+  border-top: 0.5px solid #ccc;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 50px;
+    font-size: 25px;
+    text-align: center;
+    cursor: pointer;
+    color: $white;
+    opacity: 0.5;
+
+    svg {
+      width: 14px;
+      height:14px;
+    }
+  }
+
+  .text {
+    width: 90%;
+    background: transparent;
+    outline: 0;
+    padding: 0 5px;
+    border: 0;
+    border-radius: 0;
+    height: 50px;
+    font-size: 12px;
+    color: $white;
+  }
+}

app/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>

app/routes/activity/components/Activity.js

@@ -21,14 +21,13 @@ class Activity extends Component {
 
   componentWillMount() {
     const {
-      fetchPayments, fetchInvoices, fetchTransactions, fetchBalance, fetchChannels
+      fetchPayments, fetchInvoices, fetchTransactions, fetchBalance
     } = this.props
 
     fetchBalance()
     fetchPayments()
     fetchInvoices()
     fetchTransactions()
-    fetchChannels()
   }
 
   renderActivity(activity) {

app/routes/activity/containers/ActivityContainer.js

@@ -22,7 +22,6 @@ import {
 } from 'reducers/activity'
 import { newAddress } from 'reducers/address'
 import { setFormType } from 'reducers/form'
-import { fetchChannels } from 'reducers/channels'
 
 import Activity from '../components/Activity'
 
@@ -39,8 +38,7 @@ const mapDispatchToProps = {
   newAddress,
   fetchBalance,
   updateSearchText,
-  setFormType,
+  setFormType
-  fetchChannels
 }
 
 const mapStateToProps = state => ({

app/routes/app/components/App.js

@@ -4,16 +4,18 @@ import GlobalError from 'components/GlobalError'
 import LoadingBolt from 'components/LoadingBolt'
 import Form from 'components/Form'
 import ModalRoot from 'components/ModalRoot'
-import Nav from 'components/Nav'
+import Network from 'components/Contacts/Network'
 import styles from './App.scss'
 
 class App extends Component {
   componentWillMount() {
-    const { fetchTicker, fetchInfo, newAddress } = this.props
+    const { fetchTicker, fetchInfo, newAddress, fetchChannels, fetchBalance } = this.props
 
     fetchTicker()
     fetchInfo()
     newAddress('np2wkh')
+    fetchChannels()
+    fetchBalance()
   }
 
   render() {
@@ -24,6 +26,9 @@ class App extends Component {
       currentTicker,
       form,
 
+      channels,
+      balance,
+
       formProps,
       closeForm,
 
@@ -52,6 +57,11 @@ class App extends Component {
         <div className={styles.content}>
           {children}
         </div>
+        <Network
+          channels={channels}
+          balance={balance}
+          currentTicker={currentTicker}
+        />
       </div>
     )
   }

app/routes/app/components/App.scss

@@ -2,7 +2,7 @@
 
 .content {
 	position: relative;
-	width: 100%;
+	width: 80%;
 	height: 100vh;
 	display: inline-block;
 	vertical-align: top;

app/routes/app/containers/AppContainer.js

@@ -17,6 +17,9 @@ import { createInvoice, fetchInvoice } from 'reducers/invoice'
 
 import { fetchBlockHeight, lndSelectors } from 'reducers/lnd'
 
+import { fetchChannels } from 'reducers/channels'
+import { fetchBalance } from 'reducers/balance'
+
 import { clearError } from 'reducers/error'
 
 
@@ -48,7 +51,10 @@ const mapDispatchToProps = {
   fetchInvoice,
 
   fetchBlockHeight,
-  clearError
+  clearError,
+
+  fetchChannels,
+  fetchBalance
 }
 
 const mapStateToProps = state => ({
@@ -59,6 +65,8 @@ const mapStateToProps = state => ({
   info: state.info,
   payment: state.payment,
   transaction: state.transaction,
+  channels: state.channels,
+  balance: state.balance,
 
   form: state.form,
   payform: state.payform,