From d4b5c223a55a03ab23e41b56ef271b8ae9c7651d Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 2 Jan 2018 19:31:59 -0600
Subject: [PATCH 01/22] feature(friends): create friends route and start
 implementing friends list

---
 app/components/Nav/Nav.js                     |  10 +-
 app/components/Nav/Nav.scss                   |  16 +-
 app/icons/plus.svg                            |   1 +
 app/main.dev.js                               |   2 +-
 app/reducers/channels.js                      |  10 ++
 app/routes.js                                 |   2 +
 app/routes/friends/components/Friends.js      | 138 ++++++++++++++++
 app/routes/friends/components/Friends.scss    | 147 ++++++++++++++++++
 .../friends/containers/FriendsContainer.js    |  24 +++
 app/routes/friends/index.js                   |   3 +
 10 files changed, 335 insertions(+), 18 deletions(-)
 create mode 100644 app/icons/plus.svg
 create mode 100644 app/routes/friends/components/Friends.js
 create mode 100644 app/routes/friends/components/Friends.scss
 create mode 100644 app/routes/friends/containers/FriendsContainer.js
 create mode 100644 app/routes/friends/index.js

diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js
index 1f638321..0e24e680 100644
--- a/app/components/Nav/Nav.js
+++ b/app/components/Nav/Nav.js
@@ -18,28 +18,30 @@ const Nav = ({ openPayForm, openRequestForm }) => (
     </header>
     <ul className={styles.links}>
       <NavLink exact to='/' activeClassName={styles.active} className={styles.link}>
-        <span className={styles.activeBorder} />
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={walletIcon} />
           <span>Wallet</span>
         </li>
       </NavLink>
+      <NavLink exact to='/friends' activeClassName={styles.active} className={styles.link}>
+        <li>
+          <Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} />
+          <span>Friends</span>
+        </li>
+      </NavLink>
       <NavLink exact to='/peers' activeClassName={styles.active} className={styles.link}>
-        <span className={styles.activeBorder} />
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} />
           <span>Peers</span>
         </li>
       </NavLink>
       <NavLink exact to='/channels' activeClassName={styles.active} className={styles.link}>
-        <span className={styles.activeBorder} />
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={channelsIcon} />
           <span>Channels</span>
         </li>
       </NavLink>
       <NavLink exact to='/network' activeClassName={styles.active} className={styles.link}>
-        <span className={styles.activeBorder} />
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={networkIcon} />
           <span>Network</span>
diff --git a/app/components/Nav/Nav.scss b/app/components/Nav/Nav.scss
index 1d20ed8d..028d4c63 100644
--- a/app/components/Nav/Nav.scss
+++ b/app/components/Nav/Nav.scss
@@ -136,27 +136,17 @@
 		border-left: 20px solid transparent;
 		transition: all 0.25s;
 
-		.activeBorder {
-			position: absolute;
-			left: -30px;
-			width: 10px;
-			height: 100%;
-			margin: 0;
-			background: $main;
-			transition: all 0.25s;
-		}
-
 		li {
 		  margin: 12.5px 0;
 			min-width: 200px;
 		}
 
 	  &.active {
-	  	color: $white;
+	  	color: $main;
 	  	opacity: 1.0;
 
-  		.activeBorder {
-  			left: -10px;
+  		svg g {
+  			stroke: $main;
   		}
 	  }
 
diff --git a/app/icons/plus.svg b/app/icons/plus.svg
new file mode 100644
index 00000000..703c5b7b
--- /dev/null
+++ b/app/icons/plus.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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/app/main.dev.js b/app/main.dev.js
index a37ee0eb..c1560a05 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -169,7 +169,7 @@ export const startLnd = () => {
         '--bitcoin.active',
         '--bitcoin.testnet',
         '--neutrino.active',
-        '--neutrino.connect=btcd.jackmallers.com:18333',
+        '--neutrino.connect=btcd0.lightning.computer:18333',
         '--autopilot.active',
         '--debuglevel=debug',
         '--noencryptwallet'
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 5d468a48..e6f00d23 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -293,6 +293,16 @@ channelsSelectors.activeChannels = createSelector(
   openChannels => openChannels.filter(channel => channel.active)
 )
 
+channelsSelectors.nonActiveChannels = createSelector(
+  channelsSelector,
+  openChannels => openChannels.filter(channel => !channel.active)
+)
+
+channelsSelectors.pendingOpenChannels = createSelector(
+  pendingOpenChannelsSelector,
+  pendingOpenChannels => pendingOpenChannels
+)
+
 const closingPendingChannels = createSelector(
   pendingClosedChannelsSelector,
   pendingForceClosedChannelsSelector,
diff --git a/app/routes.js b/app/routes.js
index c0bfe51b..53f26e55 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { Switch, Route } from 'react-router'
 import App from './routes/app'
 import Activity from './routes/activity'
+import Friends from './routes/friends'
 import Peers from './routes/peers'
 import Channels from './routes/channels'
 import Network from './routes/network'
@@ -12,6 +13,7 @@ export default () => (
     <Switch>
       <Route path='/peers' component={Peers} />
       <Route path='/channels' component={Channels} />
+      <Route path='/friends' component={Friends} />
       <Route path='/network' component={Network} />
       <Route path='/' component={Activity} />
     </Switch>
diff --git a/app/routes/friends/components/Friends.js b/app/routes/friends/components/Friends.js
new file mode 100644
index 00000000..d7f48bdc
--- /dev/null
+++ b/app/routes/friends/components/Friends.js
@@ -0,0 +1,138 @@
+import { shell } from 'electron'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Isvg from 'react-inlinesvg'
+import { MdSearch } from 'react-icons/lib/md'
+import { FaCircle } from 'react-icons/lib/fa'
+
+import plus from 'icons/plus.svg'
+
+import styles from './Friends.scss'
+
+class Friends extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    const { fetchChannels, fetchPeers } = this.props
+
+    fetchChannels()
+    fetchPeers()
+  }
+
+  render() {
+    const {
+      channels,
+      activeChannels,
+      nonActiveChannels,
+      pendingOpenChannels,
+
+      peers
+    } = this.props
+
+    console.log('pendingOpenChannels: ', pendingOpenChannels)
+
+    return (
+      <div className={styles.friendsContainer}>
+        <header className={styles.header}>
+          <div className={styles.titleContainer}>
+            <div className={styles.left}>
+              <h1>Friends ({activeChannels.length} online)</h1>
+            </div>
+          </div>
+          <div className={styles.newFriendContainer}>
+            <div className={`buttonPrimary ${styles.newFriendButton}`} onClick={() => (console.log('yo'))}>
+              <Isvg src={plus} />
+              <span>Add</span>
+            </div>
+          </div>
+        </header>
+
+        <div className={styles.search}>
+          <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
+            <MdSearch />
+          </label>
+          <input
+            value={''}
+            onChange={event => console.log('event: ', event)}
+            className={`${styles.text} ${styles.input}`}
+            placeholder='Search your friends list...'
+            type='text'
+            id='channelSearch'
+          />
+        </div>
+
+        <ul className={styles.friends}>
+          {
+            activeChannels.length > 0 && activeChannels.map(activeChannel => {
+              console.log('activeChannel: ', activeChannel)
+              return (
+                <li className={styles.friend} key={activeChannel.chan_id}>
+                  <section className={styles.info}>
+                    <p className={styles.online}>
+                      <FaCircle style={{ verticalAlign: 'top' }} />
+                      <span>Online</span>
+                    </p>
+                    <h2>{activeChannel.remote_pubkey}</h2>
+                  </section>
+                  <section>
+                    
+                  </section>
+                </li>
+              )
+            })
+          }
+          {
+            pendingOpenChannels.length > 0 && pendingOpenChannels.map(pendingOpenChannel => {
+              console.log('pendingOpenChannel: ', pendingOpenChannel)
+              return (
+                <li className={styles.friend} key={pendingOpenChannel.chan_id}>
+                  <section className={styles.info}>
+                    <p className={styles.pending}>
+                      <FaCircle style={{ verticalAlign: 'top' }} />
+                      <span>
+                        Pending
+                        <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${pendingOpenChannel.channel.channel_point.split(':')[0]}`)}>
+                          (~{pendingOpenChannel.blocks_till_open * 10} minutes)
+                        </i>
+                      </span>
+                    </p>
+                    <h2>{pendingOpenChannel.channel.remote_node_pub}</h2>
+                  </section>
+                  <section>
+                    
+                  </section>
+                </li>
+              )
+            })
+          }
+          {
+            nonActiveChannels.length > 0 && nonActiveChannels.map(nonActiveChannel => {
+              console.log('nonActiveChannel: ', nonActiveChannel)
+              return (
+                <li className={styles.friend} key={nonActiveChannel.chan_id}>
+                  <section className={styles.info}>
+                    <p>
+                      <FaCircle style={{ verticalAlign: 'top' }} />
+                      <span>Offline</span>
+                    </p>
+                    <h2>{nonActiveChannel.remote_pubkey}</h2>
+                  </section>
+                  <section>
+                    
+                  </section>
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+Friends.propTypes = {}
+
+export default Friends
diff --git a/app/routes/friends/components/Friends.scss b/app/routes/friends/components/Friends.scss
new file mode 100644
index 00000000..3a17b59d
--- /dev/null
+++ b/app/routes/friends/components/Friends.scss
@@ -0,0 +1,147 @@
+@import '../../../variables.scss';
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: $lightgrey;
+
+  .titleContainer {
+    padding: 20px 40px;
+
+    .left {
+      padding: 10px 0;
+
+      h1 {
+        text-transform: uppercase;
+        font-size: 26px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .newFriendContainer {
+    padding: 20px 40px;
+
+    .newFriendButton {
+      box-shadow: none;
+      transition: all 0.25s;
+
+      &:hover {
+        background: darken($main, 10%);
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: top;
+
+        &:nth-child(1) svg {
+          width: 16px;
+          height: 16px;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+}
+
+.search {
+  height: 55px;
+  padding: 2px 25px;
+  border-top: 1px solid $darkgrey;
+  border-bottom: 1px solid $darkgrey;
+  background: $white;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 50px;
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text {
+    width: 95%;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: 50px;
+    font-size: 16px;
+  }
+}
+
+.friends {
+  padding: 10px 60px 60px 60px;
+}
+
+.friend {
+  padding: 30px 0;
+  border-bottom: 1px solid $traditionalgrey;
+
+  .info {
+    p {
+      margin-bottom: 20px;
+
+      &.online {
+        color: $green;
+
+        svg {
+          color: $green;
+        }
+      }
+
+      &.pending {
+        color: #FF8A65;
+
+        svg {
+          color: #FF8A65;
+        }
+
+        i {
+          margin-left: 5px;
+          color: $darkestgrey;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      svg, span {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      svg {
+        margin-right: 5px;
+        width: 12px;
+        height: 12px;
+        color: $darkestgrey;
+      }
+
+      span {
+        font-size: 12px;
+      }
+    }
+
+    h2 {
+      color: $black;
+      font-size: 14px;
+      font-weight: bold;
+      letter-spacing: 1.3px;
+
+      span {
+        color: $darkestgrey;
+        margin-left: 5px;
+      }
+    }
+  }
+}
diff --git a/app/routes/friends/containers/FriendsContainer.js b/app/routes/friends/containers/FriendsContainer.js
new file mode 100644
index 00000000..90c23781
--- /dev/null
+++ b/app/routes/friends/containers/FriendsContainer.js
@@ -0,0 +1,24 @@
+import { withRouter } from 'react-router'
+import { connect } from 'react-redux'
+
+import { fetchChannels, channelsSelectors } from 'reducers/channels'
+
+import { fetchPeers } from 'reducers/peers'
+
+import Friends from '../components/Friends'
+
+const mapDispatchToProps = {
+  fetchChannels,
+  fetchPeers
+}
+
+const mapStateToProps = state => ({
+  channels: state.channels,
+  peers: state.peers,
+
+  activeChannels: channelsSelectors.activeChannels(state),
+  nonActiveChannels: channelsSelectors.nonActiveChannels(state),
+  pendingOpenChannels: channelsSelectors.pendingOpenChannels(state)
+})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Friends))
diff --git a/app/routes/friends/index.js b/app/routes/friends/index.js
new file mode 100644
index 00000000..eb15b386
--- /dev/null
+++ b/app/routes/friends/index.js
@@ -0,0 +1,3 @@
+import FriendsContainer from './containers/FriendsContainer'
+
+export default FriendsContainer

From 37be5c0e1e80607419b66dcc401189f863a44c8f Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 11:34:15 -0600
Subject: [PATCH 02/22] feature(contacts): start contacts feature

---
 app/components/Friends/ClosingContact.js      |  38 +++++
 app/components/Friends/Contact.scss           | 102 ++++++++++++
 app/components/Friends/Donut.js               |  31 ++++
 app/components/Friends/Donut.scss             |  20 +++
 app/components/Friends/FriendsForm.js         | 146 ++++++++++++++++++
 app/components/Friends/FriendsForm.scss       | 135 ++++++++++++++++
 app/components/Friends/OfflineContact.js      |  33 ++++
 app/components/Friends/OnlineContact.js       |  33 ++++
 app/components/Friends/OnlineContact.scss     |   0
 app/components/Friends/PendingContact.js      |  38 +++++
 app/lnd/methods/channelController.js          |  53 +++++++
 app/lnd/methods/index.js                      |  13 ++
 app/lnd/methods/peersController.js            |   2 +-
 app/reducers/channels.js                      |  57 ++++---
 app/reducers/friendsform.js                   |  74 +++++++++
 app/reducers/index.js                         |   3 +
 app/routes/friends/components/Friends.js      | 100 ++++--------
 app/routes/friends/components/Friends.scss    |  46 +++++-
 .../friends/containers/FriendsContainer.js    |  60 ++++++-
 app/variables.scss                            |   1 +
 20 files changed, 890 insertions(+), 95 deletions(-)
 create mode 100644 app/components/Friends/ClosingContact.js
 create mode 100644 app/components/Friends/Contact.scss
 create mode 100644 app/components/Friends/Donut.js
 create mode 100644 app/components/Friends/Donut.scss
 create mode 100644 app/components/Friends/FriendsForm.js
 create mode 100644 app/components/Friends/FriendsForm.scss
 create mode 100644 app/components/Friends/OfflineContact.js
 create mode 100644 app/components/Friends/OnlineContact.js
 create mode 100644 app/components/Friends/OnlineContact.scss
 create mode 100644 app/components/Friends/PendingContact.js
 create mode 100644 app/reducers/friendsform.js

diff --git a/app/components/Friends/ClosingContact.js b/app/components/Friends/ClosingContact.js
new file mode 100644
index 00000000..99046b10
--- /dev/null
+++ b/app/components/Friends/ClosingContact.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import styles from './Contact.scss'
+
+const ClosingContact = ({ channel }) => (
+  <li className={styles.friend} key={index}>
+    <section className={styles.info}>
+      <p className={styles.closing}>
+        <FaCircle style={{ verticalAlign: 'top' }} />
+        <span>
+          Removing
+          <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${channel.closing_txid}`)}>
+            (Details)
+          </i>
+        </span>
+      </p>
+      <h2>{channel.channel.remote_node_pub}</h2>
+    </section>
+    <section className={styles.limits}>
+      <div>
+        <h4>Can Pay</h4>
+        <p>{btc.satoshisToBtc(channel.channel.local_balance)}BTC</p>
+      </div>
+      <div>
+        <h4>Can Receive</h4>
+        <p>{btc.satoshisToBtc(channel.channel.remote_balance)}BTC</p>
+      </div>
+    </section>
+  </li>
+)
+
+ClosingContact.propTypes = {
+  
+}
+
+export default ClosingContact
diff --git a/app/components/Friends/Contact.scss b/app/components/Friends/Contact.scss
new file mode 100644
index 00000000..d8c71d01
--- /dev/null
+++ b/app/components/Friends/Contact.scss
@@ -0,0 +1,102 @@
+@import '../../variables.scss';
+
+.friend {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 30px 0;
+  border-bottom: 1px solid $traditionalgrey;
+
+  .limits {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    div {
+      margin: 0 10px;
+
+      h4 {
+        font-size: 12px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .info {
+    p {
+      margin-bottom: 20px;
+
+      &.online {
+        color: $green;
+
+        svg {
+          color: $green;
+        }
+      }
+
+      &.pending {
+        color: $orange;
+
+        svg {
+          color: $orange;
+        }
+
+        i {
+          margin-left: 5px;
+          color: $darkestgrey;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &.closing {
+        color: $red;
+
+        svg {
+          color: $red;
+        }
+
+        i {
+          margin-left: 5px;
+          color: $darkestgrey;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      svg, span {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      svg {
+        margin-right: 5px;
+        width: 12px;
+        height: 12px;
+        color: $darkestgrey;
+      }
+
+      span {
+        font-size: 12px;
+      }
+    }
+
+    h2 {
+      color: $black;
+      font-size: 14px;
+      font-weight: bold;
+      letter-spacing: 1.3px;
+
+      span {
+        color: $darkestgrey;
+        margin-left: 5px;
+      }
+    }
+  }
+}
diff --git a/app/components/Friends/Donut.js b/app/components/Friends/Donut.js
new file mode 100644
index 00000000..f82ded9d
--- /dev/null
+++ b/app/components/Friends/Donut.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Donut.scss'
+
+const Donut = ({ value, size, strokewidth }) => {
+  console.log('value: ', value)
+  console.log('size: ', size)
+  console.log('strokewidth: ', strokewidth)
+
+  const halfsize = (size * 0.5);
+  const radius = halfsize - (strokewidth * 0.5);
+  const circumference = 2 * Math.PI * radius;
+  const strokeval = ((value * circumference) / 100);
+  const dashval = (strokeval + ' ' + circumference);
+
+  const trackstyle = {strokeWidth: 5};
+  const indicatorstyle = {strokeWidth: strokewidth, strokeDasharray: dashval}
+  const rotateval = 'rotate(-90 '+37.5+','+37.5+')';
+
+  return (
+    <svg width={75} height={75} className={styles.donutchart}>
+      <circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={trackstyle} className={styles.donutchartTrack} />
+      <circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={indicatorstyle} className={styles.donutchartIndicator} />
+    </svg>
+  )
+}
+
+Donut.propTypes = {
+}
+
+export default Donut
diff --git a/app/components/Friends/Donut.scss b/app/components/Friends/Donut.scss
new file mode 100644
index 00000000..260ee9eb
--- /dev/null
+++ b/app/components/Friends/Donut.scss
@@ -0,0 +1,20 @@
+@import '../../variables.scss';
+
+.donutchartTrack{
+  fill: transparent;
+  stroke: $lightgrey;
+  stroke-width: 26;
+}
+.donutchartIndicator {
+  fill: transparent;
+  stroke: $main;
+  stroke-width: 26;
+  stroke-dasharray: 0 10000;
+  transition: stroke-dasharray .3s ease;
+}
+
+.donutchart {
+  margin: 0 auto;
+  border-radius: 50%;
+  display: block;
+}
diff --git a/app/components/Friends/FriendsForm.js b/app/components/Friends/FriendsForm.js
new file mode 100644
index 00000000..d6984409
--- /dev/null
+++ b/app/components/Friends/FriendsForm.js
@@ -0,0 +1,146 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactModal from 'react-modal'
+import { MdClose } from 'react-icons/lib/md'
+import { FaCircle } from 'react-icons/lib/fa'
+import styles from './FriendsForm.scss'
+
+const FriendsForm = ({
+  friendsform,
+  closeFriendsForm,
+  updateFriendFormSearchQuery,
+  openChannel,
+
+  activeChannelPubkeys,
+  nonActiveChannelPubkeys,
+  pendingOpenChannelPubkeys,
+  filteredNetworkNodes
+}) => {
+  console.log('pendingOpenChannelPubkeys: ', pendingOpenChannelPubkeys)
+  const renderRightSide = (node) => {
+    if (node.addresses.length > 1) {
+      console.log('node: ', node)
+    }
+
+    if (activeChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.online} ${styles.inactive}`}>
+          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Online</span>
+        </span>
+      )
+    }
+
+    if (nonActiveChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.offline} ${styles.inactive}`}>
+          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Offline</span>
+        </span>
+      )
+    }
+
+    if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.pending} ${styles.inactive}`}>
+          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Pending</span>
+        </span>
+      )
+    }
+
+    if (!node.addresses.length) {
+      return (
+        <span className={`${styles.private} ${styles.inactive}`}>
+          Private
+        </span>
+      )
+    }
+
+    return (
+      <span
+        className={`${styles.connect} hint--left`}
+        data-hint='Connect with 0.1 BTC'
+        onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: 0.1 })}
+      >
+        Connect
+      </span>
+    )
+  }
+
+  return (
+    <div>
+      <ReactModal
+        isOpen={friendsform.isOpen}
+        contentLabel='No Overlay Click Modal'
+        ariaHideApp
+        shouldCloseOnOverlayClick
+        onRequestClose={() => closeFriendsForm}
+        parentSelector={() => document.body}
+        className={styles.modal}
+      >
+        <header>
+          <div>
+            <h1>Add Contact</h1>
+          </div>
+          <div onClick={closeFriendsForm} className={styles.modalClose}>
+            <MdClose />
+          </div>
+        </header>
+
+        <div className={styles.form} onKeyPress={event => event.charCode === 13 && console.log('gaaaang')}>
+          <div className={styles.search}>
+            <input
+              type='text'
+              placeholder='Find friend by alias or pubkey'
+              className={styles.searchInput}
+              value={friendsform.searchQuery}
+              onChange={event => updateFriendFormSearchQuery(event.target.value)}
+              autoFocus
+            />
+          </div>
+
+          <ul className={styles.networkResults}>
+            {
+              friendsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
+                return (
+                  <li key={node.pub_key}>
+                    <section>
+                      {
+                        node.alias.length > 0 ?  
+                          <h2>
+                            <span>{node.alias.trim()}</span>
+                            <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
+                          </h2>
+                          :
+                          <h2>
+                            <span>{node.pub_key}</span>
+                          </h2>
+                      }
+                    </section>
+                    <section>
+                      {renderRightSide(node)}
+                    </section>
+                  </li>
+                )
+              })
+            }
+          </ul>
+        </div>
+        <footer className={styles.footer}>
+          <div>
+            <span className={styles.amount}>
+              0.1
+            </span>
+            <span className={styles.caption}>
+              BTC per contact
+            </span>
+          </div>
+        </footer>
+      </ReactModal>
+    </div>
+  )
+}
+
+FriendsForm.propTypes = {
+  
+}
+
+export default FriendsForm
diff --git a/app/components/Friends/FriendsForm.scss b/app/components/Friends/FriendsForm.scss
new file mode 100644
index 00000000..bd675257
--- /dev/null
+++ b/app/components/Friends/FriendsForm.scss
@@ -0,0 +1,135 @@
+@import '../../variables.scss';
+
+.modal {
+  position: relative;
+  width: 50%;
+  margin: 50px auto;
+  position: absolute;
+  top: auto;
+  left: 20%;
+  right: 0;
+  bottom: auto;
+  background: $white;
+  outline: none;
+  z-index: -2;
+  border: 1px solid $darkgrey;
+  
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 15px;
+    border-bottom: 1px solid $darkgrey;
+
+    h1, svg {
+      font-size: 22px;
+    }
+
+    svg {
+      cursor: pointer;
+    }
+  }
+}
+
+.form {
+  padding: 30px 15px;
+
+  .search {
+    .searchInput {
+      width: calc(100% - 30px);
+      padding: 10px 15px;
+      outline: 0;
+      border: 0;
+      background: $lightgrey;
+      color: $darkestgrey;
+      border-radius: 5px;
+      font-size: 16px;
+    }
+  }
+
+  .networkResults {
+    overflow-y: scroll;
+    height: 400px;
+    margin-top: 30px;
+    padding: 20px 0;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 10px 0;
+
+      h2 {
+        font-size: 16px;
+        font-weight: bold;
+        letter-spacing: 1.3px;
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+
+          &:nth-child(1) {
+            font-size: 16px;
+            font-weight: bold;
+            letter-spacing: 1.3px;
+          }
+
+          &:nth-child(2) {
+            color: $darkestgrey;
+            font-size: 12px;
+            line-height: 16px;
+          }
+        }
+      }
+
+      .connect {
+        cursor: pointer;
+        color: $darkestgrey;
+        transition: all 0.25s;
+        font-size: 12px;
+
+        &:hover {
+          color: $main;
+        }
+      }
+
+      .inactive {
+        font-size: 12px;
+
+        display: inline-block;
+        vertical-align: top;
+
+        &.online {
+          color: $green;
+        }
+
+        &.offline {
+          color: $darkestgrey;
+        }
+
+        &.pending {
+          color: $orange;
+        }
+
+        &.private {
+          color: darken($darkestgrey, 50%);
+        }
+      }
+    }
+  }
+}
+
+.footer {
+  padding: 10px 15px;
+  border-top: 1px solid $darkgrey;
+
+  span {
+    &:nth-child(1) {
+      font-weight: bold;
+    }
+
+    &:nth-child(2) {
+      margin-left: 2px;
+    }
+  }
+}
diff --git a/app/components/Friends/OfflineContact.js b/app/components/Friends/OfflineContact.js
new file mode 100644
index 00000000..2c1cdc9a
--- /dev/null
+++ b/app/components/Friends/OfflineContact.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import styles from './Contact.scss'
+
+const OfflineContact = ({ channel }) => (
+  <li className={styles.friend} key={channel.chan_id}>
+    <section className={styles.info}>
+      <p>
+        <FaCircle style={{ verticalAlign: 'top' }} />
+        <span>Offline</span>
+      </p>
+      <h2>{channel.remote_pubkey}</h2>
+    </section>
+    <section className={styles.limits}>
+      <div>
+        <h4>Can Pay</h4>
+        <p>{btc.satoshisToBtc(channel.local_balance)}BTC</p>
+      </div>
+      <div>
+        <h4>Can Receive</h4>
+        <p>{btc.satoshisToBtc(channel.remote_balance)}BTC</p>
+      </div>
+    </section>
+  </li>
+)
+
+OfflineContact.propTypes = {
+  
+}
+
+export default OfflineContact
diff --git a/app/components/Friends/OnlineContact.js b/app/components/Friends/OnlineContact.js
new file mode 100644
index 00000000..b49cc73a
--- /dev/null
+++ b/app/components/Friends/OnlineContact.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import styles from './Contact.scss'
+
+const OnlineContact = ({ channel }) => (
+  <li className={styles.friend} key={channel.chan_id}>
+    <section className={styles.info}>
+      <p className={styles.online}>
+        <FaCircle style={{ verticalAlign: 'top' }} />
+        <span>Online</span>
+      </p>
+      <h2>{channel.remote_pubkey}</h2>
+    </section>
+    <section className={styles.limits}>
+      <div>
+        <h4>Can Pay</h4>
+        <p>{btc.satoshisToBtc(channel.local_balance)}BTC</p>
+      </div>
+      <div>
+        <h4>Can Receive</h4>
+        <p>{btc.satoshisToBtc(channel.remote_balance)}BTC</p>
+      </div>
+    </section>
+  </li>
+)
+
+OnlineContact.propTypes = {
+  
+}
+
+export default OnlineContact
diff --git a/app/components/Friends/OnlineContact.scss b/app/components/Friends/OnlineContact.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/Friends/PendingContact.js b/app/components/Friends/PendingContact.js
new file mode 100644
index 00000000..1375bcb6
--- /dev/null
+++ b/app/components/Friends/PendingContact.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import styles from './Contact.scss'
+
+const PendingContact = ({ channel }) => (
+  <li className={styles.friend} key={channel.chan_id}>
+    <section className={styles.info}>
+      <p className={styles.pending}>
+        <FaCircle style={{ verticalAlign: 'top' }} />
+        <span>
+          Pending
+          <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${channel.channel.channel_point.split(':')[0]}`)}>
+            (~{channel.blocks_till_open * 10} minutes)
+          </i>
+        </span>
+      </p>
+      <h2>{channel.channel.remote_node_pub}</h2>
+    </section>
+    <section className={styles.limits}>
+      <div>
+        <h4>Can Pay</h4>
+        <p>{btc.satoshisToBtc(channel.channel.local_balance)}BTC</p>
+      </div>
+      <div>
+        <h4>Can Receive</h4>
+        <p>{btc.satoshisToBtc(channel.channel.remote_balance)}BTC</p>
+      </div>
+    </section>
+  </li>
+)
+
+PendingContact.propTypes = {
+  
+}
+
+export default PendingContact
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index e2117126..40a4fdaa 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -1,9 +1,61 @@
 import bitcore from 'bitcore-lib'
+import find from 'lodash/find'
+import { listPeers, connectPeer } from './peersController'
 import pushopenchannel from '../push/openchannel'
 import pushclosechannel from '../push/closechannel'
 
 const BufferUtil = bitcore.util.buffer
 
+/**
+ * Attempts to open a singly funded channel specified in the request to a remote peer.
+ * @param  {[type]} lnd     [description]
+ * @param  {[type]} event   [description]
+ * @param  {[type]} payload [description]
+ * @return {[type]}         [description]
+ */
+export function connectAndOpen(lnd, meta, event, payload) {
+  console.log('payload: ', payload)
+  
+  const { pubkey, host, localamt } = payload
+  const channelPayload = {
+    node_pubkey: BufferUtil.hexToBuffer(pubkey),
+    local_funding_amount: Number(localamt)
+  }
+
+  return new Promise((resolve, reject) => {
+    listPeers(lnd, meta)
+    .then(({ peers }) => {
+      console.log('peers: ', peers)
+
+      const peer = find(peers, { pub_key: pubkey })
+
+      if (peer) {
+        console.log('we can open the channel')
+      } else {
+        console.log('connect to the peer first')
+        connectPeer(lnd, meta, { pubkey, host })
+        .then((data) => {
+          console.log('connectPeer data: ', data)
+
+          const call = lnd.openChannel(channelPayload, meta)
+          
+          call.on('data', data => event.sender.send('pushchannelupdated', { data }))
+          call.on('error', error => event.sender.send('pushchannelerror', { error: error.toString() }))
+
+          call.on('end', () => event.sender.send('pushchannelend'))
+          call.on('status', status => event.sender.send('pushchannelstatus', { status }))
+        })
+        .catch(err => {
+          console.log('connectPeer err: ', err)
+        })
+      }
+    })
+    .catch(err => {
+      console.log('listPeers err', err)
+    })
+  })
+}
+
 /**
  * Attempts to open a singly funded channel specified in the request to a remote peer.
  * @param  {[type]} lnd     [description]
@@ -12,6 +64,7 @@ const BufferUtil = bitcore.util.buffer
  * @return {[type]}         [description]
  */
 export function openChannel(lnd, meta, event, payload) {
+  console.log('opening the channel')
   const { pubkey, localamt, pushamt } = payload
   const res = {
     node_pubkey: BufferUtil.hexToBuffer(pubkey),
diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index 87f5a76f..a0b9bf6e 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -201,6 +201,19 @@ export default function (lnd, meta, event, msg, data) {
         })
         .catch(error => console.log('disconnectPeer error: ', error))
       break
+    case 'connectAndOpen':
+    // Connects to a peer if we aren't connected already and then attempt to open a channel
+    // {} = data
+      channelController.connectAndOpen(lnd, meta, event, data)
+        .then((data) => {
+          console.log('connectAndOpen data: ', data)
+          // event.sender.send('connectSuccess', { pub_key: data.pubkey, address: data.host, peer_id })
+        })
+        .catch((error) => {
+          // event.sender.send('connectFailure', { error: error.toString() })
+          console.log('connectAndOpen error: ', error)
+        })
+      break
     default:
   }
 }
diff --git a/app/lnd/methods/peersController.js b/app/lnd/methods/peersController.js
index 2562901e..7a249366 100644
--- a/app/lnd/methods/peersController.js
+++ b/app/lnd/methods/peersController.js
@@ -7,7 +7,7 @@
  */
 export function connectPeer(lnd, meta, { pubkey, host }) {
   return new Promise((resolve, reject) => {
-    lnd.connectPeer({ addr: { pubkey, host }, perm: true }, meta, (err, data) => {
+    lnd.connectPeer({ addr: { pubkey, host } }, meta, (err, data) => {
       if (err) { reject(err) }
 
       resolve(data)
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index e6f00d23..30b9a4e9 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -101,12 +101,11 @@ export const fetchChannels = () => async (dispatch) => {
 export const receiveChannels = (event, { channels, pendingChannels }) => dispatch => dispatch({ type: RECEIVE_CHANNELS, channels, pendingChannels })
 
 // Send IPC event for opening a channel
-export const openChannel = ({ pubkey, local_amt, push_amt }) => (dispatch) => {
+export const openChannel = ({ pubkey, host, local_amt, push_amt }) => (dispatch) => {
   const localamt = btc.btcToSatoshis(local_amt)
-  const pushamt = btc.btcToSatoshis(push_amt)
 
   dispatch(openingChannel())
-  ipcRenderer.send('lnd', { msg: 'openChannel', data: { pubkey, localamt, pushamt } })
+  ipcRenderer.send('lnd', { msg: 'connectAndOpen', data: { pubkey, host, localamt } })
 }
 
 // TODO: Decide how to handle streamed updates for channels
@@ -293,56 +292,74 @@ channelsSelectors.activeChannels = createSelector(
   openChannels => openChannels.filter(channel => channel.active)
 )
 
+channelsSelectors.activeChannelPubkeys = createSelector(
+  channelsSelector,
+  openChannels => openChannels.filter(channel => channel.active).map(c => c.remote_pubkey)
+)
+
 channelsSelectors.nonActiveChannels = createSelector(
   channelsSelector,
   openChannels => openChannels.filter(channel => !channel.active)
 )
 
+channelsSelectors.nonActiveChannelPubkeys = createSelector(
+  channelsSelector,
+  openChannels => openChannels.filter(channel => !channel.active).map(c => c.remote_pubkey)
+)
+
 channelsSelectors.pendingOpenChannels = createSelector(
   pendingOpenChannelsSelector,
   pendingOpenChannels => pendingOpenChannels
 )
 
-const closingPendingChannels = createSelector(
+channelsSelectors.pendingOpenChannelPubkeys = createSelector(
+  pendingOpenChannelsSelector,
+  pendingOpenChannels => pendingOpenChannels.map(pendingChannel => pendingChannel.channel.remote_node_pub)
+)
+
+channelsSelectors.closingPendingChannels = createSelector(
   pendingClosedChannelsSelector,
   pendingForceClosedChannelsSelector,
   (pendingClosedChannels, pendingForcedClosedChannels) => [...pendingClosedChannels, ...pendingForcedClosedChannels]
 )
 
-const allChannels = createSelector(
+channelsSelectors.activeChanIds = createSelector(
   channelsSelector,
+  channels => channels.map(channel => channel.chan_id)
+)
+
+channelsSelectors.nonActiveFilters = createSelector(
+  filtersSelector,
+  filterSelector,
+  (filters, filter) => filters.filter(f => f.key !== filter.key)
+)
+
+const allChannels = createSelector(
+  channelsSelectors.activeChannels,
+  channelsSelectors.nonActiveChannels,
   pendingOpenChannelsSelector,
   pendingClosedChannelsSelector,
   pendingForceClosedChannelsSelector,
   channelSearchQuerySelector,
-  (channels, pendingOpenChannels, pendingClosedChannels, pendingForcedClosedChannels, searchQuery) => {
-    const filteredChannels = channels.filter(channel => channel.remote_pubkey.includes(searchQuery) || channel.channel_point.includes(searchQuery)) // eslint-disable-line
+  (activeChannels, nonActiveChannels, pendingOpenChannels, pendingClosedChannels, pendingForcedClosedChannels, searchQuery) => {
+    const filteredActiveChannels = activeChannels.filter(channel => channel.remote_pubkey.includes(searchQuery) || channel.channel_point.includes(searchQuery)) // eslint-disable-line
+    const filteredNonActiveChannels = nonActiveChannels.filter(channel => channel.remote_pubkey.includes(searchQuery) || channel.channel_point.includes(searchQuery)) // eslint-disable-line
+
     const filteredPendingOpenChannels = pendingOpenChannels.filter(channel => channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)) // eslint-disable-line
     const filteredPendingClosedChannels = pendingClosedChannels.filter(channel => channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)) // eslint-disable-line
     const filteredPendingForcedClosedChannels = pendingForcedClosedChannels.filter(channel => channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)) // eslint-disable-line
 
 
-    return [...filteredChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels]
+    return [...filteredActiveChannels, ...filteredNonActiveChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels]
   }
 )
 
-channelsSelectors.activeChanIds = createSelector(
-  channelsSelector,
-  channels => channels.map(channel => channel.chan_id)
-)
-
-channelsSelectors.nonActiveFilters = createSelector(
-  filtersSelector,
-  filterSelector,
-  (filters, filter) => filters.filter(f => f.key !== filter.key)
-)
-
 export const currentChannels = createSelector(
   allChannels,
   channelsSelectors.activeChannels,
   channelsSelector,
   pendingOpenChannelsSelector,
-  closingPendingChannels,
+  channelsSelectors.closingPendingChannels,
   filterSelector,
   channelSearchQuerySelector,
   (allChannelsArr, activeChannelsArr, openChannels, pendingOpenChannels, pendingClosedChannels, filter, searchQuery) => {
diff --git a/app/reducers/friendsform.js b/app/reducers/friendsform.js
new file mode 100644
index 00000000..a3e037b2
--- /dev/null
+++ b/app/reducers/friendsform.js
@@ -0,0 +1,74 @@
+import { createSelector } from 'reselect'
+
+import filter from 'lodash/filter'
+
+// Initial State
+const initialState = {
+  isOpen: false,
+  searchQuery: '',
+  friend: ''
+}
+
+// Constants
+// ------------------------------------
+export const OPEN_FRIENDS_FORM = 'OPEN_FRIENDS_FORM'
+export const CLOSE_FRIENDS_FORM = 'CLOSE_FRIENDS_FORM'
+
+export const UPDATE_FRIEND_FORM_SEARCH_QUERY = 'UPDATE_FRIEND_FORM_SEARCH_QUERY'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function openFriendsForm() {
+  return {
+    type: OPEN_FRIENDS_FORM
+  }
+}
+
+export function closeFriendsForm() {
+  return {
+    type: CLOSE_FRIENDS_FORM
+  }
+}
+
+export function updateFriendFormSearchQuery(searchQuery) {
+  return {
+    type: UPDATE_FRIEND_FORM_SEARCH_QUERY,
+    searchQuery
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [OPEN_FRIENDS_FORM]: state => ({ ...state, isOpen: true }),
+  [CLOSE_FRIENDS_FORM]: state => ({ ...state, isOpen: false }),
+
+  [UPDATE_FRIEND_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+}
+
+// ------------------------------------
+// Selector
+// ------------------------------------
+const friendFormSelectors = {}
+const networkNodesSelector = state => state.network.nodes
+const searchQuerySelector = state => state.friendsform.searchQuery
+
+
+friendFormSelectors.filteredNetworkNodes = createSelector(
+  networkNodesSelector,
+  searchQuerySelector,
+  (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
+)
+
+export { friendFormSelectors }
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default function friendFormReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 6e77afba..f3d06968 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -10,6 +10,8 @@ import peers from './peers'
 import channels from './channels'
 import channelform from './channelform'
 
+import friendsform from './friendsform'
+
 import form from './form'
 import payform from './payform'
 import requestform from './requestform'
@@ -32,6 +34,7 @@ const rootReducer = combineReducers({
   peers,
   channels,
   channelform,
+  friendsform,
 
   form,
   payform,
diff --git a/app/routes/friends/components/Friends.js b/app/routes/friends/components/Friends.js
index d7f48bdc..f29f775a 100644
--- a/app/routes/friends/components/Friends.js
+++ b/app/routes/friends/components/Friends.js
@@ -6,44 +6,55 @@ import Isvg from 'react-inlinesvg'
 import { MdSearch } from 'react-icons/lib/md'
 import { FaCircle } from 'react-icons/lib/fa'
 
+import { btc } from 'utils'
+
+import FriendsForm from 'components/Friends/FriendsForm'
+import OnlineContact from 'components/Friends/OnlineContact'
+import PendingContact from 'components/Friends/PendingContact'
+import ClosingContact from 'components/Friends/ClosingContact'
+import OfflineContact from 'components/Friends/OfflineContact'
+
 import plus from 'icons/plus.svg'
 
 import styles from './Friends.scss'
 
 class Friends extends Component {
-  constructor(props) {
-    super(props)
-  }
-
   componentWillMount() {
-    const { fetchChannels, fetchPeers } = this.props
+    const { fetchChannels, fetchPeers, fetchDescribeNetwork } = this.props
 
     fetchChannels()
     fetchPeers()
+    fetchDescribeNetwork()
   }
 
   render() {
     const {
       channels,
+      currentChannels,
       activeChannels,
       nonActiveChannels,
       pendingOpenChannels,
+      closingPendingChannels,
+
+      openFriendsForm,
+
+      friendsFormProps,
 
       peers
     } = this.props
 
-    console.log('pendingOpenChannels: ', pendingOpenChannels)
-
     return (
       <div className={styles.friendsContainer}>
+        <FriendsForm {...friendsFormProps} />
+
         <header className={styles.header}>
           <div className={styles.titleContainer}>
             <div className={styles.left}>
-              <h1>Friends ({activeChannels.length} online)</h1>
+              <h1>Contacts <span>({activeChannels.length} online)</span></h1>
             </div>
           </div>
           <div className={styles.newFriendContainer}>
-            <div className={`buttonPrimary ${styles.newFriendButton}`} onClick={() => (console.log('yo'))}>
+            <div className={`buttonPrimary ${styles.newFriendButton}`} onClick={openFriendsForm}>
               <Isvg src={plus} />
               <span>Add</span>
             </div>
@@ -66,65 +77,18 @@ class Friends extends Component {
 
         <ul className={styles.friends}>
           {
-            activeChannels.length > 0 && activeChannels.map(activeChannel => {
-              console.log('activeChannel: ', activeChannel)
-              return (
-                <li className={styles.friend} key={activeChannel.chan_id}>
-                  <section className={styles.info}>
-                    <p className={styles.online}>
-                      <FaCircle style={{ verticalAlign: 'top' }} />
-                      <span>Online</span>
-                    </p>
-                    <h2>{activeChannel.remote_pubkey}</h2>
-                  </section>
-                  <section>
-                    
-                  </section>
-                </li>
-              )
-            })
-          }
-          {
-            pendingOpenChannels.length > 0 && pendingOpenChannels.map(pendingOpenChannel => {
-              console.log('pendingOpenChannel: ', pendingOpenChannel)
-              return (
-                <li className={styles.friend} key={pendingOpenChannel.chan_id}>
-                  <section className={styles.info}>
-                    <p className={styles.pending}>
-                      <FaCircle style={{ verticalAlign: 'top' }} />
-                      <span>
-                        Pending
-                        <i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${pendingOpenChannel.channel.channel_point.split(':')[0]}`)}>
-                          (~{pendingOpenChannel.blocks_till_open * 10} minutes)
-                        </i>
-                      </span>
-                    </p>
-                    <h2>{pendingOpenChannel.channel.remote_node_pub}</h2>
-                  </section>
-                  <section>
-                    
-                  </section>
-                </li>
-              )
-            })
-          }
-          {
-            nonActiveChannels.length > 0 && nonActiveChannels.map(nonActiveChannel => {
-              console.log('nonActiveChannel: ', nonActiveChannel)
-              return (
-                <li className={styles.friend} key={nonActiveChannel.chan_id}>
-                  <section className={styles.info}>
-                    <p>
-                      <FaCircle style={{ verticalAlign: 'top' }} />
-                      <span>Offline</span>
-                    </p>
-                    <h2>{nonActiveChannel.remote_pubkey}</h2>
-                  </section>
-                  <section>
-                    
-                  </section>
-                </li>
-              )
+            currentChannels.length > 0 && currentChannels.map(channel => {
+              console.log('channel: ', channel)
+
+              if (channel.active) {
+                return <OnlineContact channel={channel} />
+              } else if (!channel.active) {
+                return <OfflineContact channel={channel} />
+              } else if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+                return <PendingContact channel={channel} />
+              } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
+                return <ClosingContact channel={channel} />
+              }
             })
           }
         </ul>
diff --git a/app/routes/friends/components/Friends.scss b/app/routes/friends/components/Friends.scss
index 3a17b59d..9cf4f14e 100644
--- a/app/routes/friends/components/Friends.scss
+++ b/app/routes/friends/components/Friends.scss
@@ -16,6 +16,12 @@
         text-transform: uppercase;
         font-size: 26px;
         margin-right: 5px;
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 16px;
+        }
       }
     }
   }
@@ -82,9 +88,27 @@
 }
 
 .friend {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   padding: 30px 0;
   border-bottom: 1px solid $traditionalgrey;
 
+  .limits {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    div {
+      margin: 0 10px;
+
+      h4 {
+        font-size: 12px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
   .info {
     p {
       margin-bottom: 20px;
@@ -98,10 +122,28 @@
       }
 
       &.pending {
-        color: #FF8A65;
+        color: $orange;
+
+        svg {
+          color: $orange;
+        }
+
+        i {
+          margin-left: 5px;
+          color: $darkestgrey;
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &.closing {
+        color: $red;
 
         svg {
-          color: #FF8A65;
+          color: $red;
         }
 
         i {
diff --git a/app/routes/friends/containers/FriendsContainer.js b/app/routes/friends/containers/FriendsContainer.js
index 90c23781..f5a2bde1 100644
--- a/app/routes/friends/containers/FriendsContainer.js
+++ b/app/routes/friends/containers/FriendsContainer.js
@@ -1,24 +1,76 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
-import { fetchChannels, channelsSelectors } from 'reducers/channels'
+import {
+  fetchChannels,
+  openChannel,
+  currentChannels,
+  channelsSelectors
+} from 'reducers/channels'
 
 import { fetchPeers } from 'reducers/peers'
 
+import { fetchDescribeNetwork } from 'reducers/network'
+
+import {
+  openFriendsForm,
+  closeFriendsForm,
+  updateFriendFormSearchQuery,
+  friendFormSelectors
+} from 'reducers/friendsform'
+
 import Friends from '../components/Friends'
 
 const mapDispatchToProps = {
+  openFriendsForm,
+  closeFriendsForm,
+  updateFriendFormSearchQuery,
+  openChannel,
+
   fetchChannels,
-  fetchPeers
+  fetchPeers,
+  fetchDescribeNetwork
 }
 
 const mapStateToProps = state => ({
   channels: state.channels,
   peers: state.peers,
+  network: state.network,
+  friendsform: state.friendsform,
 
+  currentChannels: currentChannels(state),
   activeChannels: channelsSelectors.activeChannels(state),
+  activeChannelPubkeys: channelsSelectors.activeChannelPubkeys(state),
   nonActiveChannels: channelsSelectors.nonActiveChannels(state),
-  pendingOpenChannels: channelsSelectors.pendingOpenChannels(state)
+  nonActiveChannelPubkeys: channelsSelectors.nonActiveChannelPubkeys(state),
+  pendingOpenChannels: channelsSelectors.pendingOpenChannels(state),
+  pendingOpenChannelPubkeys: channelsSelectors.pendingOpenChannelPubkeys(state),
+  closingPendingChannels: channelsSelectors.closingPendingChannels(state),
+
+  filteredNetworkNodes: friendFormSelectors.filteredNetworkNodes(state)
 })
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Friends))
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const friendsFormProps = {
+    closeFriendsForm: dispatchProps.closeFriendsForm,
+    updateFriendFormSearchQuery: dispatchProps.updateFriendFormSearchQuery,
+    openChannel: dispatchProps.openChannel,
+
+    friendsform: stateProps.friendsform,
+    filteredNetworkNodes: stateProps.filteredNetworkNodes,
+
+    activeChannelPubkeys: stateProps.activeChannelPubkeys,
+    nonActiveChannelPubkeys: stateProps.nonActiveChannelPubkeys,
+    pendingOpenChannelPubkeys: stateProps.pendingOpenChannelPubkeys
+  }
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+
+    friendsFormProps
+  }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Friends))
diff --git a/app/variables.scss b/app/variables.scss
index 214d8b7e..fdaf7d28 100644
--- a/app/variables.scss
+++ b/app/variables.scss
@@ -14,4 +14,5 @@ $green: #0bb634;
 $terminalgreen: #00FF00;
 $red: #ff0b00;
 $blue: #007bb6;
+$orange: #FF8A65;
 $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
\ No newline at end of file

From d264e776411b7d05370c863d2ef2b528b0bf0b07 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 11:38:36 -0600
Subject: [PATCH 03/22] fetaure(contacts): added search to contacts

---
 app/routes/friends/components/Friends.js        | 17 +++++++++--------
 .../friends/containers/FriendsContainer.js      |  4 ++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/routes/friends/components/Friends.js b/app/routes/friends/components/Friends.js
index f29f775a..4a75b493 100644
--- a/app/routes/friends/components/Friends.js
+++ b/app/routes/friends/components/Friends.js
@@ -29,13 +29,14 @@ class Friends extends Component {
 
   render() {
     const {
-      channels,
+      channels: { searchQuery },
       currentChannels,
       activeChannels,
       nonActiveChannels,
       pendingOpenChannels,
       closingPendingChannels,
 
+      updateChannelSearchQuery,
       openFriendsForm,
 
       friendsFormProps,
@@ -66,8 +67,8 @@ class Friends extends Component {
             <MdSearch />
           </label>
           <input
-            value={''}
-            onChange={event => console.log('event: ', event)}
+            value={searchQuery}
+            onChange={event => updateChannelSearchQuery(event.target.value)}
             className={`${styles.text} ${styles.input}`}
             placeholder='Search your friends list...'
             type='text'
@@ -77,17 +78,17 @@ class Friends extends Component {
 
         <ul className={styles.friends}>
           {
-            currentChannels.length > 0 && currentChannels.map(channel => {
+            currentChannels.length > 0 && currentChannels.map((channel, index) => {
               console.log('channel: ', channel)
 
               if (channel.active) {
-                return <OnlineContact channel={channel} />
+                return <OnlineContact channel={channel} key={index} />
               } else if (!channel.active) {
-                return <OfflineContact channel={channel} />
+                return <OfflineContact channel={channel} key={index} />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
-                return <PendingContact channel={channel} />
+                return <PendingContact channel={channel} key={index} />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
-                return <ClosingContact channel={channel} />
+                return <ClosingContact channel={channel} key={index} />
               }
             })
           }
diff --git a/app/routes/friends/containers/FriendsContainer.js b/app/routes/friends/containers/FriendsContainer.js
index f5a2bde1..22f304ac 100644
--- a/app/routes/friends/containers/FriendsContainer.js
+++ b/app/routes/friends/containers/FriendsContainer.js
@@ -4,7 +4,10 @@ import { connect } from 'react-redux'
 import {
   fetchChannels,
   openChannel,
+
+  updateChannelSearchQuery,
   currentChannels,
+
   channelsSelectors
 } from 'reducers/channels'
 
@@ -26,6 +29,7 @@ const mapDispatchToProps = {
   closeFriendsForm,
   updateFriendFormSearchQuery,
   openChannel,
+  updateChannelSearchQuery,
 
   fetchChannels,
   fetchPeers,

From d817ecc4264200d72a5676f2b2f6e8807f1914eb Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 11:50:55 -0600
Subject: [PATCH 04/22] feature(contacts): add filter and refresh to contacts

---
 app/reducers/channels.js                      |  17 ++-
 app/routes/friends/components/Friends.js      |  80 ++++++++++-
 app/routes/friends/components/Friends.scss    | 134 +++++++-----------
 .../friends/containers/FriendsContainer.js    |   5 +
 4 files changed, 142 insertions(+), 94 deletions(-)

diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 30b9a4e9..e67658b5 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -357,12 +357,13 @@ const allChannels = createSelector(
 export const currentChannels = createSelector(
   allChannels,
   channelsSelectors.activeChannels,
+  channelsSelectors.nonActiveChannels,
   channelsSelector,
   pendingOpenChannelsSelector,
   channelsSelectors.closingPendingChannels,
   filterSelector,
   channelSearchQuerySelector,
-  (allChannelsArr, activeChannelsArr, openChannels, pendingOpenChannels, pendingClosedChannels, filter, searchQuery) => {
+  (allChannelsArr, activeChannelsArr, nonActiveChannelsArr, openChannels, pendingOpenChannels, pendingClosedChannels, filter, searchQuery) => {
     // Helper function to deliver correct channel array based on filter
     const filteredArray = (filterKey) => {
       switch (filterKey) {
@@ -370,6 +371,8 @@ export const currentChannels = createSelector(
           return allChannelsArr
         case 'ACTIVE_CHANNELS':
           return activeChannelsArr
+        case 'NON_ACTIVE_CHANNELS':
+          return nonActiveChannelsArr
         case 'OPEN_CHANNELS':
           return openChannels
         case 'OPEN_PENDING_CHANNELS':
@@ -417,13 +420,13 @@ const initialState = {
   viewType: 0,
 
   filterPulldown: false,
-  filter: { key: 'ALL_CHANNELS', name: 'All Channels' },
+  filter: { key: 'ALL_CHANNELS', name: 'All Contacts' },
   filters: [
-    { key: 'ALL_CHANNELS', name: 'All Channels' },
-    { key: 'ACTIVE_CHANNELS', name: 'Active Channels' },
-    { key: 'OPEN_CHANNELS', name: 'Open Channels' },
-    { key: 'OPEN_PENDING_CHANNELS', name: 'Open Pending Channels' },
-    { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Pending Channels' }
+    { key: 'ALL_CHANNELS', name: 'All Contacts' },
+    { key: 'ACTIVE_CHANNELS', name: 'Online Contacts' },
+    { key: 'NON_ACTIVE_CHANNELS', name: 'Offline Contacts' },
+    { key: 'OPEN_PENDING_CHANNELS', name: 'Pending Contacts' },
+    { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Contacts' }
   ]
 }
 
diff --git a/app/routes/friends/components/Friends.js b/app/routes/friends/components/Friends.js
index 4a75b493..e362bbf5 100644
--- a/app/routes/friends/components/Friends.js
+++ b/app/routes/friends/components/Friends.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import Isvg from 'react-inlinesvg'
 import { MdSearch } from 'react-icons/lib/md'
-import { FaCircle } from 'react-icons/lib/fa'
+import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 
@@ -19,6 +19,14 @@ import plus from 'icons/plus.svg'
 import styles from './Friends.scss'
 
 class Friends extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      refreshing: false
+    }
+  }
+
   componentWillMount() {
     const { fetchChannels, fetchPeers, fetchDescribeNetwork } = this.props
 
@@ -29,14 +37,24 @@ class Friends extends Component {
 
   render() {
     const {
-      channels: { searchQuery },
+      channels: {
+        searchQuery,
+        filterPulldown,
+        filter,
+        viewType
+      },
       currentChannels,
       activeChannels,
       nonActiveChannels,
       pendingOpenChannels,
       closingPendingChannels,
-
+      fetchChannels,
       updateChannelSearchQuery,
+
+      toggleFilterPulldown,
+      changeFilter,
+      nonActiveFilters,
+      
       openFriendsForm,
 
       friendsFormProps,
@@ -44,6 +62,33 @@ class Friends extends Component {
       peers
     } = this.props
 
+    const refreshClicked = () => {
+      // turn the spinner on
+      this.setState({ refreshing: true })
+
+      // store event in icon so we dont get an error when react clears it
+      const icon = this.repeat.childNodes
+
+      // fetch channels
+      fetchChannels()
+
+      // wait for the svg to appear as child
+      const svgTimeout = setTimeout(() => {
+        if (icon[0].tagName === 'svg') {
+          // spin icon for 1 sec
+          icon[0].style.animation = 'spin 1000ms linear 1'
+          clearTimeout(svgTimeout)
+        }
+      }, 1)
+
+      // clear animation after the second so we can reuse it
+      const refreshTimeout = setTimeout(() => {
+        icon[0].style.animation = ''
+        this.setState({ refreshing: false })
+        clearTimeout(refreshTimeout)
+      }, 1000)
+    }
+
     return (
       <div className={styles.friendsContainer}>
         <FriendsForm {...friendsFormProps} />
@@ -76,7 +121,34 @@ class Friends extends Component {
           />
         </div>
 
-        <ul className={styles.friends}>
+        <div className={styles.filtersContainer}>
+          <section>
+            <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
+              {filter.name} <span className={filterPulldown && styles.pulldown}><FaAngleDown /></span>
+            </h2>
+            <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
+              {
+                nonActiveFilters.map(f => (
+                  <li key={f.key} onClick={() => changeFilter(f)}>
+                    {f.name}
+                  </li>
+                ))
+              }
+            </ul>
+          </section>
+          <section className={styles.refreshContainer}>
+            <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
+              {
+                this.state.refreshing ?
+                  <FaRepeat />
+                  :
+                  'Refresh'
+              }
+            </span>
+          </section>
+        </div>
+
+        <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
               console.log('channel: ', channel)
diff --git a/app/routes/friends/components/Friends.scss b/app/routes/friends/components/Friends.scss
index 9cf4f14e..86bca984 100644
--- a/app/routes/friends/components/Friends.scss
+++ b/app/routes/friends/components/Friends.scss
@@ -83,107 +83,75 @@
   }
 }
 
-.friends {
-  padding: 10px 60px 60px 60px;
-}
-
-.friend {
+.filtersContainer {
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 30px 0;
-  border-bottom: 1px solid $traditionalgrey;
-
-  .limits {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  padding: 20px 40px;
 
-    div {
-      margin: 0 10px;
+  h2, h2 span {
+    color: $bluegrey;
+    cursor: pointer;
+    transition: color 0.25s;
 
-      h4 {
-        font-size: 12px;
-        margin-bottom: 20px;
-      }
+    &:hover {
+      color: lighten($bluegrey, 10%);
     }
   }
+  
+  h2, .filters li {
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: $darkestgrey;
+    font-size: 14px;
+    font-weight: 400;
+  }
 
-  .info {
-    p {
-      margin-bottom: 20px;
-
-      &.online {
-        color: $green;
-
-        svg {
-          color: $green;
-        }
-      }
-
-      &.pending {
-        color: $orange;
-
-        svg {
-          color: $orange;
-        }
-
-        i {
-          margin-left: 5px;
-          color: $darkestgrey;
-          cursor: pointer;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      &.closing {
-        color: $red;
-
-        svg {
-          color: $red;
-        }
-
-        i {
-          margin-left: 5px;
-          color: $darkestgrey;
-          cursor: pointer;
+  h2 span.pulldown {
+    color: $main;
+  }
 
-          &:hover {
-            text-decoration: underline;
-          }
+  .filters {
+    display: none;
+    
+    &.active {
+      display: block;
+      position: absolute;
+      bottom: -100px;
+      z-index: 10;
+
+      li {
+        margin: 5px 0;
+        cursor: pointer;
+
+        &:hover {
+          color: $main;
         }
       }
+    }
+  }
+  
+  .refreshContainer {
+    text-align: right;
+    cursor: pointer;
 
-      svg, span {
-        display: inline-block;
-        vertical-align: top;
-      }
+    .refresh {
+      text-decoration: underline;
 
       svg {
-        margin-right: 5px;
-        width: 12px;
-        height: 12px;
-        color: $darkestgrey;
-      }
-
-      span {
         font-size: 12px;
       }
     }
+  }
+}
 
-    h2 {
-      color: $black;
-      font-size: 14px;
-      font-weight: bold;
-      letter-spacing: 1.3px;
+.friends {
+  padding: 10px 60px 60px 60px;
+  opacity: 1;
+  transition: all 0.25s;
 
-      span {
-        color: $darkestgrey;
-        margin-left: 5px;
-      }
-    }
+  &.fade {
+    opacity: 0.05;
   }
 }
diff --git a/app/routes/friends/containers/FriendsContainer.js b/app/routes/friends/containers/FriendsContainer.js
index 22f304ac..3fa8a9e7 100644
--- a/app/routes/friends/containers/FriendsContainer.js
+++ b/app/routes/friends/containers/FriendsContainer.js
@@ -6,6 +6,8 @@ import {
   openChannel,
 
   updateChannelSearchQuery,
+  toggleFilterPulldown,
+  changeFilter,
   currentChannels,
 
   channelsSelectors
@@ -30,6 +32,8 @@ const mapDispatchToProps = {
   updateFriendFormSearchQuery,
   openChannel,
   updateChannelSearchQuery,
+  toggleFilterPulldown,
+  changeFilter,
 
   fetchChannels,
   fetchPeers,
@@ -50,6 +54,7 @@ const mapStateToProps = state => ({
   pendingOpenChannels: channelsSelectors.pendingOpenChannels(state),
   pendingOpenChannelPubkeys: channelsSelectors.pendingOpenChannelPubkeys(state),
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
+  nonActiveFilters: channelsSelectors.nonActiveFilters(state),
 
   filteredNetworkNodes: friendFormSelectors.filteredNetworkNodes(state)
 })

From 9578ca9379e98b7330c32ff6f0c9e3a55682f60c Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 11:59:37 -0600
Subject: [PATCH 05/22] fix(contacts): rename component folder to contacts

---
 .../{Friends => Contacts}/ClosingContact.js        |  0
 app/components/{Friends => Contacts}/Contact.scss  |  0
 app/components/{Friends => Contacts}/Donut.js      |  0
 app/components/{Friends => Contacts}/Donut.scss    |  0
 .../{Friends => Contacts}/FriendsForm.js           |  0
 .../{Friends => Contacts}/FriendsForm.scss         |  0
 .../{Friends => Contacts}/OfflineContact.js        |  0
 .../{Friends => Contacts}/OnlineContact.js         |  0
 .../{Friends => Contacts}/OnlineContact.scss       |  0
 .../{Friends => Contacts}/PendingContact.js        |  0
 app/routes/friends/components/Friends.js           | 12 +++++-------
 app/routes/friends/components/Friends.scss         | 14 +++++++++++++-
 12 files changed, 18 insertions(+), 8 deletions(-)
 rename app/components/{Friends => Contacts}/ClosingContact.js (100%)
 rename app/components/{Friends => Contacts}/Contact.scss (100%)
 rename app/components/{Friends => Contacts}/Donut.js (100%)
 rename app/components/{Friends => Contacts}/Donut.scss (100%)
 rename app/components/{Friends => Contacts}/FriendsForm.js (100%)
 rename app/components/{Friends => Contacts}/FriendsForm.scss (100%)
 rename app/components/{Friends => Contacts}/OfflineContact.js (100%)
 rename app/components/{Friends => Contacts}/OnlineContact.js (100%)
 rename app/components/{Friends => Contacts}/OnlineContact.scss (100%)
 rename app/components/{Friends => Contacts}/PendingContact.js (100%)

diff --git a/app/components/Friends/ClosingContact.js b/app/components/Contacts/ClosingContact.js
similarity index 100%
rename from app/components/Friends/ClosingContact.js
rename to app/components/Contacts/ClosingContact.js
diff --git a/app/components/Friends/Contact.scss b/app/components/Contacts/Contact.scss
similarity index 100%
rename from app/components/Friends/Contact.scss
rename to app/components/Contacts/Contact.scss
diff --git a/app/components/Friends/Donut.js b/app/components/Contacts/Donut.js
similarity index 100%
rename from app/components/Friends/Donut.js
rename to app/components/Contacts/Donut.js
diff --git a/app/components/Friends/Donut.scss b/app/components/Contacts/Donut.scss
similarity index 100%
rename from app/components/Friends/Donut.scss
rename to app/components/Contacts/Donut.scss
diff --git a/app/components/Friends/FriendsForm.js b/app/components/Contacts/FriendsForm.js
similarity index 100%
rename from app/components/Friends/FriendsForm.js
rename to app/components/Contacts/FriendsForm.js
diff --git a/app/components/Friends/FriendsForm.scss b/app/components/Contacts/FriendsForm.scss
similarity index 100%
rename from app/components/Friends/FriendsForm.scss
rename to app/components/Contacts/FriendsForm.scss
diff --git a/app/components/Friends/OfflineContact.js b/app/components/Contacts/OfflineContact.js
similarity index 100%
rename from app/components/Friends/OfflineContact.js
rename to app/components/Contacts/OfflineContact.js
diff --git a/app/components/Friends/OnlineContact.js b/app/components/Contacts/OnlineContact.js
similarity index 100%
rename from app/components/Friends/OnlineContact.js
rename to app/components/Contacts/OnlineContact.js
diff --git a/app/components/Friends/OnlineContact.scss b/app/components/Contacts/OnlineContact.scss
similarity index 100%
rename from app/components/Friends/OnlineContact.scss
rename to app/components/Contacts/OnlineContact.scss
diff --git a/app/components/Friends/PendingContact.js b/app/components/Contacts/PendingContact.js
similarity index 100%
rename from app/components/Friends/PendingContact.js
rename to app/components/Contacts/PendingContact.js
diff --git a/app/routes/friends/components/Friends.js b/app/routes/friends/components/Friends.js
index e362bbf5..3bec802b 100644
--- a/app/routes/friends/components/Friends.js
+++ b/app/routes/friends/components/Friends.js
@@ -8,11 +8,11 @@ import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 
-import FriendsForm from 'components/Friends/FriendsForm'
-import OnlineContact from 'components/Friends/OnlineContact'
-import PendingContact from 'components/Friends/PendingContact'
-import ClosingContact from 'components/Friends/ClosingContact'
-import OfflineContact from 'components/Friends/OfflineContact'
+import FriendsForm from 'components/Contacts/FriendsForm'
+import OnlineContact from 'components/Contacts/OnlineContact'
+import PendingContact from 'components/Contacts/PendingContact'
+import ClosingContact from 'components/Contacts/ClosingContact'
+import OfflineContact from 'components/Contacts/OfflineContact'
 
 import plus from 'icons/plus.svg'
 
@@ -151,8 +151,6 @@ class Friends extends Component {
         <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
-              console.log('channel: ', channel)
-
               if (channel.active) {
                 return <OnlineContact channel={channel} key={index} />
               } else if (!channel.active) {
diff --git a/app/routes/friends/components/Friends.scss b/app/routes/friends/components/Friends.scss
index 86bca984..edd5666e 100644
--- a/app/routes/friends/components/Friends.scss
+++ b/app/routes/friends/components/Friends.scss
@@ -88,6 +88,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  margin-top: 20px;
   padding: 20px 40px;
 
   h2, h2 span {
@@ -137,10 +138,21 @@
     cursor: pointer;
 
     .refresh {
-      text-decoration: underline;
+      cursor: pointer;
+      color: $darkestgrey;
+      transition: all 0.25s;
+
+      &:hover {
+        color: $main;
+      }
 
       svg {
         font-size: 12px;
+        color: $darkestgrey;
+
+        &:hover {
+          color: $darkestgrey;
+        }
       }
     }
   }

From 4af5a98a0ec86ca4e5ec721382570797d8e829d9 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 12:03:34 -0600
Subject: [PATCH 06/22] fix(contacts): rename contacts route

---
 app/components/Nav/Nav.js                                 | 4 ++--
 app/routes.js                                             | 4 ++--
 .../Friends.js => contacts/components/Contacts.js}        | 8 ++++----
 .../Friends.scss => contacts/components/Contacts.scss}    | 0
 .../containers/ContactsContainer.js}                      | 4 ++--
 app/routes/contacts/index.js                              | 3 +++
 app/routes/friends/index.js                               | 3 ---
 7 files changed, 13 insertions(+), 13 deletions(-)
 rename app/routes/{friends/components/Friends.js => contacts/components/Contacts.js} (97%)
 rename app/routes/{friends/components/Friends.scss => contacts/components/Contacts.scss} (100%)
 rename app/routes/{friends/containers/FriendsContainer.js => contacts/containers/ContactsContainer.js} (96%)
 create mode 100644 app/routes/contacts/index.js
 delete mode 100644 app/routes/friends/index.js

diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js
index 0e24e680..76a70ca8 100644
--- a/app/components/Nav/Nav.js
+++ b/app/components/Nav/Nav.js
@@ -23,10 +23,10 @@ const Nav = ({ openPayForm, openRequestForm }) => (
           <span>Wallet</span>
         </li>
       </NavLink>
-      <NavLink exact to='/friends' activeClassName={styles.active} className={styles.link}>
+      <NavLink exact to='/contacts' activeClassName={styles.active} className={styles.link}>
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} />
-          <span>Friends</span>
+          <span>Contacts</span>
         </li>
       </NavLink>
       <NavLink exact to='/peers' activeClassName={styles.active} className={styles.link}>
diff --git a/app/routes.js b/app/routes.js
index 53f26e55..04e4af59 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { Switch, Route } from 'react-router'
 import App from './routes/app'
 import Activity from './routes/activity'
-import Friends from './routes/friends'
+import Contacts from './routes/contacts'
 import Peers from './routes/peers'
 import Channels from './routes/channels'
 import Network from './routes/network'
@@ -13,7 +13,7 @@ export default () => (
     <Switch>
       <Route path='/peers' component={Peers} />
       <Route path='/channels' component={Channels} />
-      <Route path='/friends' component={Friends} />
+      <Route path='/contacts' component={Contacts} />
       <Route path='/network' component={Network} />
       <Route path='/' component={Activity} />
     </Switch>
diff --git a/app/routes/friends/components/Friends.js b/app/routes/contacts/components/Contacts.js
similarity index 97%
rename from app/routes/friends/components/Friends.js
rename to app/routes/contacts/components/Contacts.js
index 3bec802b..637c9d31 100644
--- a/app/routes/friends/components/Friends.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -16,9 +16,9 @@ import OfflineContact from 'components/Contacts/OfflineContact'
 
 import plus from 'icons/plus.svg'
 
-import styles from './Friends.scss'
+import styles from './Contacts.scss'
 
-class Friends extends Component {
+class Contacts extends Component {
   constructor(props) {
     super(props)
 
@@ -168,6 +168,6 @@ class Friends extends Component {
   }
 }
 
-Friends.propTypes = {}
+Contacts.propTypes = {}
 
-export default Friends
+export default Contacts
diff --git a/app/routes/friends/components/Friends.scss b/app/routes/contacts/components/Contacts.scss
similarity index 100%
rename from app/routes/friends/components/Friends.scss
rename to app/routes/contacts/components/Contacts.scss
diff --git a/app/routes/friends/containers/FriendsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
similarity index 96%
rename from app/routes/friends/containers/FriendsContainer.js
rename to app/routes/contacts/containers/ContactsContainer.js
index 3fa8a9e7..a1a28744 100644
--- a/app/routes/friends/containers/FriendsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -24,7 +24,7 @@ import {
   friendFormSelectors
 } from 'reducers/friendsform'
 
-import Friends from '../components/Friends'
+import Contacts from '../components/Contacts'
 
 const mapDispatchToProps = {
   openFriendsForm,
@@ -82,4 +82,4 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   }
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Friends))
+export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Contacts))
diff --git a/app/routes/contacts/index.js b/app/routes/contacts/index.js
new file mode 100644
index 00000000..20acba65
--- /dev/null
+++ b/app/routes/contacts/index.js
@@ -0,0 +1,3 @@
+import ContactsContainer from './containers/ContactsContainer'
+
+export default ContactsContainer
diff --git a/app/routes/friends/index.js b/app/routes/friends/index.js
deleted file mode 100644
index eb15b386..00000000
--- a/app/routes/friends/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import FriendsContainer from './containers/FriendsContainer'
-
-export default FriendsContainer

From c64d5abdfb6131e1af122c23d320cfa4c8fc64c8 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 12:20:46 -0600
Subject: [PATCH 07/22] fix(contacts): rename friend functions to contacts

---
 .../{FriendsForm.js => ContactsForm.js}       | 33 +++++++----------
 .../{FriendsForm.scss => ContactsForm.scss}   |  4 +-
 .../{friendsform.js => contactsform.js}       | 37 +++++++++----------
 app/reducers/index.js                         |  4 +-
 app/routes/contacts/components/Contacts.js    | 10 ++---
 .../contacts/containers/ContactsContainer.js  | 30 +++++++--------
 6 files changed, 56 insertions(+), 62 deletions(-)
 rename app/components/Contacts/{FriendsForm.js => ContactsForm.js} (81%)
 rename app/components/Contacts/{FriendsForm.scss => ContactsForm.scss} (97%)
 rename app/reducers/{friendsform.js => contactsform.js} (51%)

diff --git a/app/components/Contacts/FriendsForm.js b/app/components/Contacts/ContactsForm.js
similarity index 81%
rename from app/components/Contacts/FriendsForm.js
rename to app/components/Contacts/ContactsForm.js
index d6984409..48056162 100644
--- a/app/components/Contacts/FriendsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 import { MdClose } from 'react-icons/lib/md'
 import { FaCircle } from 'react-icons/lib/fa'
-import styles from './FriendsForm.scss'
+import styles from './ContactsForm.scss'
 
-const FriendsForm = ({
-  friendsform,
-  closeFriendsForm,
-  updateFriendFormSearchQuery,
+const ContactsForm = ({
+  contactsform,
+  closeContactsForm,
+  updateContactFormSearchQuery,
   openChannel,
 
   activeChannelPubkeys,
@@ -16,12 +16,7 @@ const FriendsForm = ({
   pendingOpenChannelPubkeys,
   filteredNetworkNodes
 }) => {
-  console.log('pendingOpenChannelPubkeys: ', pendingOpenChannelPubkeys)
   const renderRightSide = (node) => {
-    if (node.addresses.length > 1) {
-      console.log('node: ', node)
-    }
-
     if (activeChannelPubkeys.includes(node.pub_key)) {
       return (
         <span className={`${styles.online} ${styles.inactive}`}>
@@ -68,11 +63,11 @@ const FriendsForm = ({
   return (
     <div>
       <ReactModal
-        isOpen={friendsform.isOpen}
+        isOpen={contactsform.isOpen}
         contentLabel='No Overlay Click Modal'
         ariaHideApp
         shouldCloseOnOverlayClick
-        onRequestClose={() => closeFriendsForm}
+        onRequestClose={() => closeContactsForm}
         parentSelector={() => document.body}
         className={styles.modal}
       >
@@ -80,7 +75,7 @@ const FriendsForm = ({
           <div>
             <h1>Add Contact</h1>
           </div>
-          <div onClick={closeFriendsForm} className={styles.modalClose}>
+          <div onClick={closeContactsForm} className={styles.modalClose}>
             <MdClose />
           </div>
         </header>
@@ -89,17 +84,17 @@ const FriendsForm = ({
           <div className={styles.search}>
             <input
               type='text'
-              placeholder='Find friend by alias or pubkey'
+              placeholder='Find contact by alias or pubkey'
               className={styles.searchInput}
-              value={friendsform.searchQuery}
-              onChange={event => updateFriendFormSearchQuery(event.target.value)}
+              value={contactsform.searchQuery}
+              onChange={event => updateContactFormSearchQuery(event.target.value)}
               autoFocus
             />
           </div>
 
           <ul className={styles.networkResults}>
             {
-              friendsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
+              contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
                 return (
                   <li key={node.pub_key}>
                     <section>
@@ -139,8 +134,8 @@ const FriendsForm = ({
   )
 }
 
-FriendsForm.propTypes = {
+ContactsForm.propTypes = {
   
 }
 
-export default FriendsForm
+export default ContactsForm
diff --git a/app/components/Contacts/FriendsForm.scss b/app/components/Contacts/ContactsForm.scss
similarity index 97%
rename from app/components/Contacts/FriendsForm.scss
rename to app/components/Contacts/ContactsForm.scss
index bd675257..87e02e99 100644
--- a/app/components/Contacts/FriendsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -69,7 +69,7 @@
           vertical-align: middle;
 
           &:nth-child(1) {
-            font-size: 16px;
+            font-size: 14px;
             font-weight: bold;
             letter-spacing: 1.3px;
           }
@@ -77,7 +77,7 @@
           &:nth-child(2) {
             color: $darkestgrey;
             font-size: 12px;
-            line-height: 16px;
+            line-height: 14px;
           }
         }
       }
diff --git a/app/reducers/friendsform.js b/app/reducers/contactsform.js
similarity index 51%
rename from app/reducers/friendsform.js
rename to app/reducers/contactsform.js
index a3e037b2..9cd171b7 100644
--- a/app/reducers/friendsform.js
+++ b/app/reducers/contactsform.js
@@ -5,35 +5,34 @@ import filter from 'lodash/filter'
 // Initial State
 const initialState = {
   isOpen: false,
-  searchQuery: '',
-  friend: ''
+  searchQuery: ''
 }
 
 // Constants
 // ------------------------------------
-export const OPEN_FRIENDS_FORM = 'OPEN_FRIENDS_FORM'
-export const CLOSE_FRIENDS_FORM = 'CLOSE_FRIENDS_FORM'
+export const OPEN_CONTACTS_FORM = 'OPEN_CONTACTS_FORM'
+export const CLOSE_CONTACTS_FORM = 'CLOSE_CONTACTS_FORM'
 
-export const UPDATE_FRIEND_FORM_SEARCH_QUERY = 'UPDATE_FRIEND_FORM_SEARCH_QUERY'
+export const UPDATE_CONTACT_FORM_SEARCH_QUERY = 'UPDATE_CONTACT_FORM_SEARCH_QUERY'
 
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function openFriendsForm() {
+export function openContactsForm() {
   return {
-    type: OPEN_FRIENDS_FORM
+    type: OPEN_CONTACTS_FORM
   }
 }
 
-export function closeFriendsForm() {
+export function closeContactsForm() {
   return {
-    type: CLOSE_FRIENDS_FORM
+    type: CLOSE_CONTACTS_FORM
   }
 }
 
-export function updateFriendFormSearchQuery(searchQuery) {
+export function updateContactFormSearchQuery(searchQuery) {
   return {
-    type: UPDATE_FRIEND_FORM_SEARCH_QUERY,
+    type: UPDATE_CONTACT_FORM_SEARCH_QUERY,
     searchQuery
   }
 }
@@ -42,32 +41,32 @@ export function updateFriendFormSearchQuery(searchQuery) {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [OPEN_FRIENDS_FORM]: state => ({ ...state, isOpen: true }),
-  [CLOSE_FRIENDS_FORM]: state => ({ ...state, isOpen: false }),
+  [OPEN_CONTACTS_FORM]: state => ({ ...state, isOpen: true }),
+  [CLOSE_CONTACTS_FORM]: state => ({ ...state, isOpen: false }),
 
-  [UPDATE_FRIEND_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
 }
 
 // ------------------------------------
 // Selector
 // ------------------------------------
-const friendFormSelectors = {}
+const contactFormSelectors = {}
 const networkNodesSelector = state => state.network.nodes
-const searchQuerySelector = state => state.friendsform.searchQuery
+const searchQuerySelector = state => state.contactsform.searchQuery
 
 
-friendFormSelectors.filteredNetworkNodes = createSelector(
+contactFormSelectors.filteredNetworkNodes = createSelector(
   networkNodesSelector,
   searchQuerySelector,
   (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
 )
 
-export { friendFormSelectors }
+export { contactFormSelectors }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
-export default function friendFormReducer(state = initialState, action) {
+export default function contactFormReducer(state = initialState, action) {
   const handler = ACTION_HANDLERS[action.type]
 
   return handler ? handler(state, action) : state
diff --git a/app/reducers/index.js b/app/reducers/index.js
index f3d06968..5abdb652 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -10,7 +10,7 @@ import peers from './peers'
 import channels from './channels'
 import channelform from './channelform'
 
-import friendsform from './friendsform'
+import contactsform from './contactsform'
 
 import form from './form'
 import payform from './payform'
@@ -34,7 +34,7 @@ const rootReducer = combineReducers({
   peers,
   channels,
   channelform,
-  friendsform,
+  contactsform,
 
   form,
   payform,
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index 637c9d31..159765e7 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -8,7 +8,7 @@ import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 
-import FriendsForm from 'components/Contacts/FriendsForm'
+import ContactsForm from 'components/Contacts/ContactsForm'
 import OnlineContact from 'components/Contacts/OnlineContact'
 import PendingContact from 'components/Contacts/PendingContact'
 import ClosingContact from 'components/Contacts/ClosingContact'
@@ -55,9 +55,9 @@ class Contacts extends Component {
       changeFilter,
       nonActiveFilters,
       
-      openFriendsForm,
+      openContactsForm,
 
-      friendsFormProps,
+      contactsFormProps,
 
       peers
     } = this.props
@@ -91,7 +91,7 @@ class Contacts extends Component {
 
     return (
       <div className={styles.friendsContainer}>
-        <FriendsForm {...friendsFormProps} />
+        <ContactsForm {...contactsFormProps} />
 
         <header className={styles.header}>
           <div className={styles.titleContainer}>
@@ -100,7 +100,7 @@ class Contacts extends Component {
             </div>
           </div>
           <div className={styles.newFriendContainer}>
-            <div className={`buttonPrimary ${styles.newFriendButton}`} onClick={openFriendsForm}>
+            <div className={`buttonPrimary ${styles.newFriendButton}`} onClick={openContactsForm}>
               <Isvg src={plus} />
               <span>Add</span>
             </div>
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index a1a28744..3b40491c 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -18,18 +18,18 @@ import { fetchPeers } from 'reducers/peers'
 import { fetchDescribeNetwork } from 'reducers/network'
 
 import {
-  openFriendsForm,
-  closeFriendsForm,
-  updateFriendFormSearchQuery,
-  friendFormSelectors
-} from 'reducers/friendsform'
+  openContactsForm,
+  closeContactsForm,
+  updateContactFormSearchQuery,
+  contactFormSelectors
+} from 'reducers/contactsform'
 
 import Contacts from '../components/Contacts'
 
 const mapDispatchToProps = {
-  openFriendsForm,
-  closeFriendsForm,
-  updateFriendFormSearchQuery,
+  openContactsForm,
+  closeContactsForm,
+  updateContactFormSearchQuery,
   openChannel,
   updateChannelSearchQuery,
   toggleFilterPulldown,
@@ -44,7 +44,7 @@ const mapStateToProps = state => ({
   channels: state.channels,
   peers: state.peers,
   network: state.network,
-  friendsform: state.friendsform,
+  contactsform: state.contactsform,
 
   currentChannels: currentChannels(state),
   activeChannels: channelsSelectors.activeChannels(state),
@@ -56,16 +56,16 @@ const mapStateToProps = state => ({
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
 
-  filteredNetworkNodes: friendFormSelectors.filteredNetworkNodes(state)
+  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const friendsFormProps = {
-    closeFriendsForm: dispatchProps.closeFriendsForm,
-    updateFriendFormSearchQuery: dispatchProps.updateFriendFormSearchQuery,
+  const contactsFormProps = {
+    closeContactsForm: dispatchProps.closeContactsForm,
+    updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery,
     openChannel: dispatchProps.openChannel,
 
-    friendsform: stateProps.friendsform,
+    contactsform: stateProps.contactsform,
     filteredNetworkNodes: stateProps.filteredNetworkNodes,
 
     activeChannelPubkeys: stateProps.activeChannelPubkeys,
@@ -78,7 +78,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...dispatchProps,
     ...ownProps,
 
-    friendsFormProps
+    contactsFormProps
   }
 }
 

From e50a90fa1861c247c32bbc9520c40292b31ebc78 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 13:34:04 -0600
Subject: [PATCH 08/22] feature(contacts): editable contact capacity

---
 app/components/Contacts/ContactsForm.js       | 256 ++++++++++--------
 app/components/Contacts/ContactsForm.scss     |  25 +-
 app/reducers/contactsform.js                  |  16 +-
 .../contacts/containers/ContactsContainer.js  |   3 +
 4 files changed, 183 insertions(+), 117 deletions(-)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 48056162..ed48cb58 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -5,135 +5,165 @@ import { MdClose } from 'react-icons/lib/md'
 import { FaCircle } from 'react-icons/lib/fa'
 import styles from './ContactsForm.scss'
 
-const ContactsForm = ({
-  contactsform,
-  closeContactsForm,
-  updateContactFormSearchQuery,
-  openChannel,
-
-  activeChannelPubkeys,
-  nonActiveChannelPubkeys,
-  pendingOpenChannelPubkeys,
-  filteredNetworkNodes
-}) => {
-  const renderRightSide = (node) => {
-    if (activeChannelPubkeys.includes(node.pub_key)) {
-      return (
-        <span className={`${styles.online} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Online</span>
-        </span>
-      )
-    }
+class ContactsForm extends React.Component {
+  constructor(props) {
+    super(props)
 
-    if (nonActiveChannelPubkeys.includes(node.pub_key)) {
-      return (
-        <span className={`${styles.offline} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Offline</span>
-        </span>
-      )
+    this.state = {
+      editing: false
     }
+  }
+
+  render() {
+    const {
+      contactsform,
+      closeContactsForm,
+      updateContactFormSearchQuery,
+      updateContactCapacity,
+      openChannel,
+
+      activeChannelPubkeys,
+      nonActiveChannelPubkeys,
+      pendingOpenChannelPubkeys,
+      filteredNetworkNodes
+    } = this.props
+
+    const { editing } = this.state
+
+    const renderRightSide = (node) => {
+      if (activeChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={`${styles.online} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Online</span>
+          </span>
+        )
+      }
+
+      if (nonActiveChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={`${styles.offline} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Offline</span>
+          </span>
+        )
+      }
+
+      if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={`${styles.pending} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Pending</span>
+          </span>
+        )
+      }
+
+      if (!node.addresses.length) {
+        return (
+          <span className={`${styles.private} ${styles.inactive}`}>
+            Private
+          </span>
+        )
+      }
 
-    if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
       return (
-        <span className={`${styles.pending} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Pending</span>
+        <span
+          className={`${styles.connect} hint--left`}
+          data-hint='Connect with 0.1 BTC'
+          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactsform.contactCapacity })}
+        >
+          Connect
         </span>
       )
     }
 
-    if (!node.addresses.length) {
-      return (
-        <span className={`${styles.private} ${styles.inactive}`}>
-          Private
-        </span>
-      )
+    const inputClicked = () => {
+      if (editing) { return }
+
+      this.setState({ editing: true })
     }
 
     return (
-      <span
-        className={`${styles.connect} hint--left`}
-        data-hint='Connect with 0.1 BTC'
-        onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: 0.1 })}
-      >
-        Connect
-      </span>
-    )
-  }
+      <div>
+        <ReactModal
+          isOpen={contactsform.isOpen}
+          contentLabel='No Overlay Click Modal'
+          ariaHideApp
+          shouldCloseOnOverlayClick
+          onRequestClose={() => closeContactsForm}
+          parentSelector={() => document.body}
+          className={styles.modal}
+        >
+          <header>
+            <div>
+              <h1>Add Contact</h1>
+            </div>
+            <div onClick={closeContactsForm} className={styles.modalClose}>
+              <MdClose />
+            </div>
+          </header>
 
-  return (
-    <div>
-      <ReactModal
-        isOpen={contactsform.isOpen}
-        contentLabel='No Overlay Click Modal'
-        ariaHideApp
-        shouldCloseOnOverlayClick
-        onRequestClose={() => closeContactsForm}
-        parentSelector={() => document.body}
-        className={styles.modal}
-      >
-        <header>
-          <div>
-            <h1>Add Contact</h1>
-          </div>
-          <div onClick={closeContactsForm} className={styles.modalClose}>
-            <MdClose />
-          </div>
-        </header>
-
-        <div className={styles.form} onKeyPress={event => event.charCode === 13 && console.log('gaaaang')}>
-          <div className={styles.search}>
-            <input
-              type='text'
-              placeholder='Find contact by alias or pubkey'
-              className={styles.searchInput}
-              value={contactsform.searchQuery}
-              onChange={event => updateContactFormSearchQuery(event.target.value)}
-              autoFocus
-            />
-          </div>
+          <div className={styles.form}>
+            <div className={styles.search}>
+              <input
+                type='text'
+                placeholder='Find contact by alias or pubkey'
+                className={styles.searchInput}
+                value={contactsform.searchQuery}
+                onChange={event => updateContactFormSearchQuery(event.target.value)}
+                autoFocus
+              />
+            </div>
 
-          <ul className={styles.networkResults}>
-            {
-              contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
-                return (
-                  <li key={node.pub_key}>
-                    <section>
-                      {
-                        node.alias.length > 0 ?  
-                          <h2>
-                            <span>{node.alias.trim()}</span>
-                            <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
-                          </h2>
-                          :
-                          <h2>
-                            <span>{node.pub_key}</span>
-                          </h2>
-                      }
-                    </section>
-                    <section>
-                      {renderRightSide(node)}
-                    </section>
-                  </li>
-                )
-              })
-            }
-          </ul>
-        </div>
-        <footer className={styles.footer}>
-          <div>
-            <span className={styles.amount}>
-              0.1
-            </span>
-            <span className={styles.caption}>
-              BTC per contact
-            </span>
+            <ul className={styles.networkResults}>
+              {
+                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
+                  return (
+                    <li key={node.pub_key}>
+                      <section>
+                        {
+                          node.alias.length > 0 ?  
+                            <h2>
+                              <span>{node.alias.trim()}</span>
+                              <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
+                            </h2>
+                            :
+                            <h2>
+                              <span>{node.pub_key}</span>
+                            </h2>
+                        }
+                      </section>
+                      <section>
+                        {renderRightSide(node)}
+                      </section>
+                    </li>
+                  )
+                })
+              }
+            </ul>
           </div>
-        </footer>
-      </ReactModal>
-    </div>
-  )
+          <footer className={styles.footer}>
+            <div>
+              <span className={styles.amount}>
+                <input 
+                  type='text'
+                  value={contactsform.contactCapacity}
+                  onChange={event => updateContactCapacity(event.target.value)}
+                  onClick={inputClicked}
+                  onKeyPress={event => event.charCode === 13 && this.setState({ editing: false })}
+                  readOnly={!editing}
+                  style={{ width: `${editing ? 20 : contactsform.contactCapacity.toString().length + 1}%` }}
+                />
+              </span>
+              <span className={styles.caption}>
+                BTC per contact
+              </span>
+            </div>
+          </footer>
+        </ReactModal>
+      </div>
+    )
+  }  
 }
 
+
 ContactsForm.propTypes = {
   
 }
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 87e02e99..876d936d 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -122,10 +122,31 @@
 .footer {
   padding: 10px 15px;
   border-top: 1px solid $darkgrey;
+  font-size: 14px;
 
   span {
-    &:nth-child(1) {
-      font-weight: bold;
+    &.amount {
+      &:hover {
+        input {
+          border: 1px solid $darkgrey;
+          cursor: text;
+        }
+      }
+
+      input {
+        border: 1px solid transparent;
+        padding: 0;
+        outline: 0;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 14px;
+        transition: all 0.25s;
+
+        &.isEditing {
+          width: 100%;
+          border-bottom: 1px solid $darkgrey;
+        }
+      }
     }
 
     &:nth-child(2) {
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index 9cd171b7..a63ec37f 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -5,7 +5,8 @@ import filter from 'lodash/filter'
 // Initial State
 const initialState = {
   isOpen: false,
-  searchQuery: ''
+  searchQuery: '',
+  contactCapacity: 0.1
 }
 
 // Constants
@@ -15,6 +16,8 @@ export const CLOSE_CONTACTS_FORM = 'CLOSE_CONTACTS_FORM'
 
 export const UPDATE_CONTACT_FORM_SEARCH_QUERY = 'UPDATE_CONTACT_FORM_SEARCH_QUERY'
 
+export const UPDATE_CONTACT_CAPACITY = 'UPDATE_CONTACT_CAPACITY'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -37,6 +40,13 @@ export function updateContactFormSearchQuery(searchQuery) {
   }
 }
 
+export function updateContactCapacity(contactCapacity) {
+  return {
+    type: UPDATE_CONTACT_CAPACITY,
+    contactCapacity
+  }
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
@@ -44,7 +54,9 @@ const ACTION_HANDLERS = {
   [OPEN_CONTACTS_FORM]: state => ({ ...state, isOpen: true }),
   [CLOSE_CONTACTS_FORM]: state => ({ ...state, isOpen: false }),
 
-  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }),
+
+  [UPDATE_CONTACT_CAPACITY]: (state, { contactCapacity }) => ({ ...state, contactCapacity })
 }
 
 // ------------------------------------
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index 3b40491c..687b4733 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -21,6 +21,7 @@ import {
   openContactsForm,
   closeContactsForm,
   updateContactFormSearchQuery,
+  updateContactCapacity,
   contactFormSelectors
 } from 'reducers/contactsform'
 
@@ -30,6 +31,7 @@ const mapDispatchToProps = {
   openContactsForm,
   closeContactsForm,
   updateContactFormSearchQuery,
+  updateContactCapacity,
   openChannel,
   updateChannelSearchQuery,
   toggleFilterPulldown,
@@ -63,6 +65,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const contactsFormProps = {
     closeContactsForm: dispatchProps.closeContactsForm,
     updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery,
+    updateContactCapacity: dispatchProps.updateContactCapacity,
     openChannel: dispatchProps.openChannel,
 
     contactsform: stateProps.contactsform,

From 3dc63c500e7918b75639aa2907f11e1caa814ca2 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 14:37:57 -0600
Subject: [PATCH 09/22] feature(contacts): add manual form

---
 app/components/Contacts/ContactsForm.js       | 36 ++++++++++++++++---
 app/components/Contacts/ContactsForm.scss     | 36 ++++++++++++++++++-
 app/reducers/contactsform.js                  | 15 ++++++++
 .../contacts/containers/ContactsContainer.js  |  4 ++-
 4 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index ed48cb58..e6bbda16 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -10,7 +10,8 @@ class ContactsForm extends React.Component {
     super(props)
 
     this.state = {
-      editing: false
+      editing: false,
+      manualFormInput: ''
     }
   }
 
@@ -25,10 +26,11 @@ class ContactsForm extends React.Component {
       activeChannelPubkeys,
       nonActiveChannelPubkeys,
       pendingOpenChannelPubkeys,
-      filteredNetworkNodes
+      filteredNetworkNodes,
+      showManualForm
     } = this.props
 
-    const { editing } = this.state
+    const { editing, manualFormInput } = this.state
 
     const renderRightSide = (node) => {
       if (activeChannelPubkeys.includes(node.pub_key)) {
@@ -67,7 +69,7 @@ class ContactsForm extends React.Component {
         <span
           className={`${styles.connect} hint--left`}
           data-hint='Connect with 0.1 BTC'
-          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactsform.contactCapacity })}
+          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactCapacity })}
         >
           Connect
         </span>
@@ -80,6 +82,15 @@ class ContactsForm extends React.Component {
       this.setState({ editing: true })
     }
 
+    const manualFormSubmit = () => {
+      if (!manualFormInput.length) { return }
+      if (!manualFormInput.includes('@')) { return }
+
+      const [pubkey, host] = manualFormInput && manualFormInput.split('@')
+
+      openChannel({ pubkey, host, local_amt: contactsform.contactCapacity })
+    }
+
     return (
       <div>
         <ReactModal
@@ -139,6 +150,23 @@ class ContactsForm extends React.Component {
               }
             </ul>
           </div>
+
+          {
+            showManualForm &&
+            <div className={styles.manualForm}>
+              <h2>Hm, looks like we can't see that contact from here. Want to try and manually connect?</h2>
+              <section>
+                <input
+                  type='text'
+                  placeholder='pubkey@host'
+                  value={manualFormInput}
+                  onChange={event => this.setState({ manualFormInput: event.target.value })}
+                />
+                <div className={styles.submit} onClick={manualFormSubmit}>Submit</div>
+              </section>
+            </div>
+          }
+
           <footer className={styles.footer}>
             <div>
               <span className={styles.amount}>
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 876d936d..0e094442 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -49,7 +49,7 @@
 
   .networkResults {
     overflow-y: scroll;
-    height: 400px;
+    height: 300px;
     margin-top: 30px;
     padding: 20px 0;
 
@@ -119,6 +119,40 @@
   }
 }
 
+.manualForm {
+  background: $lightgrey;
+  color: $darkestgrey;
+  padding: 30px 15px;
+
+  h2 {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+
+  input {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: $darkestgrey;
+    border-bottom: 1px solid $darkestgrey;
+    padding: 10px 5px;
+    width: 80%;
+  }
+
+  .submit {
+    display: inline-block;
+    vertical-align: middle;
+    width: 15%;
+    margin-left: 2.5%;
+    font-size: 12px;
+
+    &:hover {
+      cursor: pointer;
+      color: $main;
+    }
+  }
+}
+
 .footer {
   padding: 10px 15px;
   border-top: 1px solid $darkgrey;
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index a63ec37f..ca7e9fc6 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -73,6 +73,21 @@ contactFormSelectors.filteredNetworkNodes = createSelector(
   (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
 )
 
+contactFormSelectors.showManualForm = createSelector(
+  searchQuerySelector,
+  contactFormSelectors.filteredNetworkNodes,
+  (searchQuery, filteredNetworkNodes) => {
+    if (!searchQuery.length) { return false }
+
+    const connectableNodes = filteredNetworkNodes.filter(node => node.addresses.length > 0)
+    console.log('connectableNodes: ', connectableNodes)
+
+    if (!filteredNetworkNodes.length || !connectableNodes.length) { return true }
+
+    return false
+  }
+)
+
 export { contactFormSelectors }
 
 // ------------------------------------
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index 687b4733..568fa34c 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -58,7 +58,8 @@ const mapStateToProps = state => ({
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
 
-  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state)
+  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
+  showManualForm: contactFormSelectors.showManualForm(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -70,6 +71,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     contactsform: stateProps.contactsform,
     filteredNetworkNodes: stateProps.filteredNetworkNodes,
+    showManualForm: stateProps.showManualForm,
 
     activeChannelPubkeys: stateProps.activeChannelPubkeys,
     nonActiveChannelPubkeys: stateProps.nonActiveChannelPubkeys,

From 121aa3fb6dc047de1127fd88524ad136e07479a6 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 14:47:45 -0600
Subject: [PATCH 10/22] fix(contacts): fix some pending/closing contacts bugs

---
 app/components/Contacts/ClosingContact.js  |  1 +
 app/components/Contacts/ContactsForm.js    |  2 ++
 app/components/Contacts/PendingContact.js  |  1 +
 app/reducers/channels.js                   |  2 +-
 app/routes/contacts/components/Contacts.js | 11 +++++------
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/components/Contacts/ClosingContact.js b/app/components/Contacts/ClosingContact.js
index 99046b10..6d887f4d 100644
--- a/app/components/Contacts/ClosingContact.js
+++ b/app/components/Contacts/ClosingContact.js
@@ -1,3 +1,4 @@
+import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FaCircle } from 'react-icons/lib/fa'
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index e6bbda16..4e8cc34a 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -89,6 +89,8 @@ class ContactsForm extends React.Component {
       const [pubkey, host] = manualFormInput && manualFormInput.split('@')
 
       openChannel({ pubkey, host, local_amt: contactsform.contactCapacity })
+
+      this.setState({ manualFormInput: '' })
     }
 
     return (
diff --git a/app/components/Contacts/PendingContact.js b/app/components/Contacts/PendingContact.js
index 1375bcb6..c5f0a01b 100644
--- a/app/components/Contacts/PendingContact.js
+++ b/app/components/Contacts/PendingContact.js
@@ -1,3 +1,4 @@
+import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FaCircle } from 'react-icons/lib/fa'
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index e67658b5..0a752df8 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -350,7 +350,7 @@ const allChannels = createSelector(
     const filteredPendingForcedClosedChannels = pendingForcedClosedChannels.filter(channel => channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)) // eslint-disable-line
 
 
-    return [...filteredActiveChannels, ...filteredNonActiveChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels]
+    return [...filteredActiveChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels, ...filteredNonActiveChannels]
   }
 )
 
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index 159765e7..43da439b 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -1,4 +1,3 @@
-import { shell } from 'electron'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
@@ -151,14 +150,14 @@ class Contacts extends Component {
         <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
-              if (channel.active) {
-                return <OnlineContact channel={channel} key={index} />
-              } else if (!channel.active) {
-                return <OfflineContact channel={channel} key={index} />
-              } else if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+              if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
                 return <PendingContact channel={channel} key={index} />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
                 return <ClosingContact channel={channel} key={index} />
+              } else if (channel.active) {
+                return <OnlineContact channel={channel} key={index} />
+              } else if (!channel.active) {
+                return <OfflineContact channel={channel} key={index} />
               }
             })
           }

From 4d97c0e7016e6ffb014e26d04235c17324b8499a Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 15:01:35 -0600
Subject: [PATCH 11/22] fix(contacts): fix add button styles

---
 app/routes/contacts/components/Contacts.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/routes/contacts/components/Contacts.scss b/app/routes/contacts/components/Contacts.scss
index edd5666e..b7d29809 100644
--- a/app/routes/contacts/components/Contacts.scss
+++ b/app/routes/contacts/components/Contacts.scss
@@ -32,6 +32,9 @@
     .newFriendButton {
       box-shadow: none;
       transition: all 0.25s;
+      padding-top: 12px;
+      padding-bottom: 10px;
+      font-size: 14px;
 
       &:hover {
         background: darken($main, 10%);
@@ -42,8 +45,8 @@
         vertical-align: top;
 
         &:nth-child(1) svg {
-          width: 16px;
-          height: 16px;
+          width: 14px;
+          height: 14px;
           margin-right: 5px;
         }
       }

From f1911c0fa4bf19ded1557bdecad6e588dd7e9b88 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 16:25:30 -0600
Subject: [PATCH 12/22] feature(contacts): loading state while adding a contact

---
 app/components/Contacts/ClosingContact.js     |  2 +-
 app/components/Contacts/Contact.scss          | 49 +++++++++++++++++++
 app/components/Contacts/ContactsForm.js       | 12 +++++
 app/components/Contacts/ContactsForm.scss     | 43 ++++++++++++++++
 app/components/Contacts/LoadingContact.js     | 28 +++++++++++
 app/lnd/methods/channelController.js          |  9 ++--
 app/reducers/channels.js                      | 33 +++++++++++--
 app/routes/contacts/components/Contacts.js    | 14 +++++-
 .../contacts/containers/ContactsContainer.js  |  1 +
 9 files changed, 181 insertions(+), 10 deletions(-)
 create mode 100644 app/components/Contacts/LoadingContact.js

diff --git a/app/components/Contacts/ClosingContact.js b/app/components/Contacts/ClosingContact.js
index 6d887f4d..fe03fd36 100644
--- a/app/components/Contacts/ClosingContact.js
+++ b/app/components/Contacts/ClosingContact.js
@@ -6,7 +6,7 @@ import { btc } from 'utils'
 import styles from './Contact.scss'
 
 const ClosingContact = ({ channel }) => (
-  <li className={styles.friend} key={index}>
+  <li className={styles.friend}>
     <section className={styles.info}>
       <p className={styles.closing}>
         <FaCircle style={{ verticalAlign: 'top' }} />
diff --git a/app/components/Contacts/Contact.scss b/app/components/Contacts/Contact.scss
index d8c71d01..749dac7e 100644
--- a/app/components/Contacts/Contact.scss
+++ b/app/components/Contacts/Contact.scss
@@ -7,6 +7,12 @@
   padding: 30px 0;
   border-bottom: 1px solid $traditionalgrey;
 
+  &.loading {
+    .info {
+      opacity: 0.2;
+    }
+  }
+
   .limits {
     display: flex;
     flex-direction: row;
@@ -100,3 +106,46 @@
     }
   }
 }
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+}
+
+.spinner {
+  margin: 0 auto;
+  height: 50px;
+  width: 50px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}
+
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 4e8cc34a..ec7bf54f 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -27,12 +27,24 @@ class ContactsForm extends React.Component {
       nonActiveChannelPubkeys,
       pendingOpenChannelPubkeys,
       filteredNetworkNodes,
+      loadingChannelPubkeys,
       showManualForm
     } = this.props
 
     const { editing, manualFormInput } = this.state
 
+
     const renderRightSide = (node) => {
+      if (loadingChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={styles.inactive}>
+            <div className={styles.loading}>
+              <div className={styles.spinner} />
+            </div>
+          </span>
+        )
+      }
+      
       if (activeChannelPubkeys.includes(node.pub_key)) {
         return (
           <span className={`${styles.online} ${styles.inactive}`}>
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 0e094442..1860c1cf 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -188,3 +188,46 @@
     }
   }
 }
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+}
+
+.spinner {
+  margin: 0 auto;
+  height: 20px;
+  width: 20px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}
+
diff --git a/app/components/Contacts/LoadingContact.js b/app/components/Contacts/LoadingContact.js
new file mode 100644
index 00000000..2161c818
--- /dev/null
+++ b/app/components/Contacts/LoadingContact.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaCircle } from 'react-icons/lib/fa'
+import { btc } from 'utils'
+import styles from './Contact.scss'
+
+const LoadingContact = ({ pubkey }) => (
+  <li className={`${styles.friend} ${styles.loading}`}>
+    <section className={styles.info}>
+      <p>
+        <FaCircle style={{ verticalAlign: 'top' }} />
+        <span>Loading</span>
+      </p>
+      <h2>{pubkey}</h2>
+    </section>
+    <section className={styles.limits}>
+      <div className={styles.loading}>
+        <div className={styles.spinner} />
+      </div>
+    </section>
+  </li>
+)
+
+LoadingContact.propTypes = {
+  
+}
+
+export default LoadingContact
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index 40a4fdaa..410b23d4 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -30,7 +30,11 @@ export function connectAndOpen(lnd, meta, event, payload) {
       const peer = find(peers, { pub_key: pubkey })
 
       if (peer) {
-        console.log('we can open the channel')
+        console.log('already have the peer. can open the channel now')
+        const call = lnd.openChannel(channelPayload, meta)
+          
+        call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
+        call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
       } else {
         console.log('connect to the peer first')
         connectPeer(lnd, meta, { pubkey, host })
@@ -41,9 +45,6 @@ export function connectAndOpen(lnd, meta, event, payload) {
           
           call.on('data', data => event.sender.send('pushchannelupdated', { data }))
           call.on('error', error => event.sender.send('pushchannelerror', { error: error.toString() }))
-
-          call.on('end', () => event.sender.send('pushchannelend'))
-          call.on('status', status => event.sender.send('pushchannelstatus', { status }))
         })
         .catch(err => {
           console.log('connectPeer err: ', err)
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 0a752df8..0c692b6e 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -29,6 +29,9 @@ export const SET_VIEW_TYPE = 'SET_VIEW_TYPE'
 export const TOGGLE_CHANNEL_PULLDOWN = 'TOGGLE_CHANNEL_PULLDOWN'
 export const CHANGE_CHANNEL_FILTER = 'CHANGE_CHANNEL_FILTER'
 
+export const ADD_LOADING_PUBKEY = 'ADD_LOADING_PUBKEY'
+export const REMOVE_LOADING_PUBKEY = 'REMOVE_LOADING_PUBKEY'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -91,6 +94,20 @@ export function setViewType(viewType) {
   }
 }
 
+export function addLoadingPubkey(pubkey) {
+  return {
+    type: ADD_LOADING_PUBKEY,
+    pubkey
+  }
+}
+
+export function removeLoadingPubkey(pubkey) {
+  return {
+    type: REMOVE_LOADING_PUBKEY,
+    pubkey
+  }
+}
+
 // Send IPC event for peers
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
@@ -105,6 +122,7 @@ export const openChannel = ({ pubkey, host, local_amt, push_amt }) => (dispatch)
   const localamt = btc.btcToSatoshis(local_amt)
 
   dispatch(openingChannel())
+  dispatch(addLoadingPubkey(pubkey))
   ipcRenderer.send('lnd', { msg: 'connectAndOpen', data: { pubkey, host, localamt } })
 }
 
@@ -118,9 +136,10 @@ export const channelSuccessful = () => (dispatch) => {
 }
 
 // Receive IPC event for updated channel
-export const pushchannelupdated = (event, data) => (dispatch) => {
+export const pushchannelupdated = (event, { pubkey, data }) => (dispatch) => {
   console.log('PUSH CHANNEL UPDATED: ', data)
   dispatch(fetchChannels())
+  dispatch(removeLoadingPubkey(pubkey))
 }
 
 // Receive IPC event for channel end
@@ -130,10 +149,11 @@ export const pushchannelend = event => (dispatch) => { // eslint-disable-line
 }
 
 // Receive IPC event for channel error
-export const pushchannelerror = (event, { error }) => (dispatch) => {
+export const pushchannelerror = (event, { pubkey, error }) => (dispatch) => {
   console.log('PUSH CHANNEL ERROR: ', error)
   dispatch(openingFailure())
   dispatch(setError(error))
+  dispatch(removeLoadingPubkey(pubkey))
 }
 
 // Receive IPC event for channel status
@@ -269,7 +289,10 @@ const ACTION_HANDLERS = {
   [SET_VIEW_TYPE]: (state, { viewType }) => ({ ...state, viewType }),
 
   [TOGGLE_CHANNEL_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
-  [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter })
+  [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }),
+  
+  [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
+  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) })
 }
 
 const channelsSelectors = {}
@@ -427,7 +450,9 @@ const initialState = {
     { key: 'NON_ACTIVE_CHANNELS', name: 'Offline Contacts' },
     { key: 'OPEN_PENDING_CHANNELS', name: 'Pending Contacts' },
     { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Contacts' }
-  ]
+  ],
+
+  loadingChannelPubkeys: []
 }
 
 export default function channelsReducer(state = initialState, action) {
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index 43da439b..3dd00d35 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -12,6 +12,7 @@ import OnlineContact from 'components/Contacts/OnlineContact'
 import PendingContact from 'components/Contacts/PendingContact'
 import ClosingContact from 'components/Contacts/ClosingContact'
 import OfflineContact from 'components/Contacts/OfflineContact'
+import LoadingContact from 'components/Contacts/LoadingContact'
 
 import plus from 'icons/plus.svg'
 
@@ -40,7 +41,8 @@ class Contacts extends Component {
         searchQuery,
         filterPulldown,
         filter,
-        viewType
+        viewType,
+        loadingChannelPubkeys
       },
       currentChannels,
       activeChannels,
@@ -148,6 +150,16 @@ class Contacts extends Component {
         </div>
 
         <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
+          {
+            loadingChannelPubkeys.map(pubkey => {
+              console.log('pubkey: ', pubkey)
+              
+              return (
+                <LoadingContact pubkey={pubkey} />
+              )
+            })
+          }
+
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
               if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index 568fa34c..e7a4bbf1 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -71,6 +71,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     contactsform: stateProps.contactsform,
     filteredNetworkNodes: stateProps.filteredNetworkNodes,
+    loadingChannelPubkeys: stateProps.channels.loadingChannelPubkeys,
     showManualForm: stateProps.showManualForm,
 
     activeChannelPubkeys: stateProps.activeChannelPubkeys,

From 86f38adb77c0ef3f7f60941626f5c84ceef2d117 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 20:53:42 -0600
Subject: [PATCH 13/22] fix(contacts): small bug fixes with contacts error and
 UI

---
 app/components/Contacts/ContactsForm.js    |  4 ++--
 app/lnd/methods/channelController.js       | 10 ++++++----
 app/lnd/methods/index.js                   |  5 -----
 app/reducers/channels.js                   |  5 +++++
 app/routes/contacts/components/Contacts.js |  4 ++--
 app/variables.scss                         |  2 +-
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index ec7bf54f..2d5f536b 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -44,7 +44,7 @@ class ContactsForm extends React.Component {
           </span>
         )
       }
-      
+
       if (activeChannelPubkeys.includes(node.pub_key)) {
         return (
           <span className={`${styles.online} ${styles.inactive}`}>
@@ -80,7 +80,7 @@ class ContactsForm extends React.Component {
       return (
         <span
           className={`${styles.connect} hint--left`}
-          data-hint='Connect with 0.1 BTC'
+          data-hint={`Connect with ${contactsform.contactCapacity} BTC`}
           onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactCapacity })}
         >
           Connect
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index 410b23d4..eebb4905 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -43,16 +43,18 @@ export function connectAndOpen(lnd, meta, event, payload) {
 
           const call = lnd.openChannel(channelPayload, meta)
           
-          call.on('data', data => event.sender.send('pushchannelupdated', { data }))
-          call.on('error', error => event.sender.send('pushchannelerror', { error: error.toString() }))
+          call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
+          call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
         })
         .catch(err => {
-          console.log('connectPeer err: ', err)
+          console.log('connect peer err: ', err)
+          event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
         })
       }
     })
     .catch(err => {
-      console.log('listPeers err', err)
+      console.log('list peer err: ', err)
+      event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
     })
   })
 }
diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index a0b9bf6e..b8c7b1c3 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -18,11 +18,6 @@ import * as networkController from './networkController'
 // TODO - SendPayment
 // TODO - DeleteAllPayments
 
-// const metadata = new grpc.Metadata()
-// var macaroonHex = fs.readFileSync('~/Library/Application Support/Lnd/admin.macaroon').toString('hex')
-// metadata.add('macaroon', macaroonHex)
-
-
 export default function (lnd, meta, event, msg, data) {
   switch (msg) {
     case 'info':
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 0c692b6e..d1acbae3 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -121,8 +121,13 @@ export const receiveChannels = (event, { channels, pendingChannels }) => dispatc
 export const openChannel = ({ pubkey, host, local_amt, push_amt }) => (dispatch) => {
   const localamt = btc.btcToSatoshis(local_amt)
 
+  console.log('localamt: ', localamt)
+  console.log('pubkey: ', pubkey)
+  console.log('host: ', host)
+
   dispatch(openingChannel())
   dispatch(addLoadingPubkey(pubkey))
+
   ipcRenderer.send('lnd', { msg: 'connectAndOpen', data: { pubkey, host, localamt } })
 }
 
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index 3dd00d35..f8b5e126 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -116,7 +116,7 @@ class Contacts extends Component {
             value={searchQuery}
             onChange={event => updateChannelSearchQuery(event.target.value)}
             className={`${styles.text} ${styles.input}`}
-            placeholder='Search your friends list...'
+            placeholder='Search your contacts list...'
             type='text'
             id='channelSearch'
           />
@@ -153,7 +153,7 @@ class Contacts extends Component {
           {
             loadingChannelPubkeys.map(pubkey => {
               console.log('pubkey: ', pubkey)
-              
+
               return (
                 <LoadingContact pubkey={pubkey} />
               )
diff --git a/app/variables.scss b/app/variables.scss
index fdaf7d28..04c81bd6 100644
--- a/app/variables.scss
+++ b/app/variables.scss
@@ -12,7 +12,7 @@ $bluegrey: #555459;
 
 $green: #0bb634;
 $terminalgreen: #00FF00;
-$red: #ff0b00;
+$red: #FF556A;
 $blue: #007bb6;
 $orange: #FF8A65;
 $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
\ No newline at end of file

From 8a32354b1ef8621afe14a29fbbba91132722310b Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 5 Jan 2018 13:18:05 -0600
Subject: [PATCH 14/22] feature(contacts): contact modal

---
 app/components/Contacts/Contact.scss          |   9 +-
 app/components/Contacts/ContactModal.js       | 106 +++++++++
 app/components/Contacts/ContactModal.scss     | 100 +++++++++
 app/components/Contacts/ContactsForm.js       |  11 +-
 app/components/Contacts/ContactsForm.scss     |   6 +
 app/components/Contacts/OfflineContact.js     |   4 +-
 app/components/Contacts/OnlineContact.js      |   4 +-
 app/components/ModalRoot/ModalRoot.js         |   2 +-
 app/components/Nav/Nav.js                     |  13 --
 app/reducers/channels.js                      |  28 ++-
 app/routes.js                                 |   4 -
 app/routes/channels/components/Channels.js    | 205 ------------------
 app/routes/channels/components/Channels.scss  | 178 ---------------
 .../channels/containers/ChannelsContainer.js  | 104 ---------
 app/routes/channels/index.js                  |   3 -
 app/routes/contacts/components/Contacts.js    |  17 +-
 app/routes/contacts/components/Contacts.scss  |   2 +-
 .../contacts/containers/ContactsContainer.js  |  12 +
 app/routes/peers/components/Peers.js          | 137 ------------
 app/routes/peers/components/Peers.scss        |  81 -------
 app/routes/peers/containers/PeersContainer.js |  52 -----
 app/routes/peers/index.js                     |   3 -
 22 files changed, 281 insertions(+), 800 deletions(-)
 create mode 100644 app/components/Contacts/ContactModal.js
 create mode 100644 app/components/Contacts/ContactModal.scss
 delete mode 100644 app/routes/channels/components/Channels.js
 delete mode 100644 app/routes/channels/components/Channels.scss
 delete mode 100644 app/routes/channels/containers/ChannelsContainer.js
 delete mode 100644 app/routes/channels/index.js
 delete mode 100644 app/routes/peers/components/Peers.js
 delete mode 100644 app/routes/peers/components/Peers.scss
 delete mode 100644 app/routes/peers/containers/PeersContainer.js
 delete mode 100644 app/routes/peers/index.js

diff --git a/app/components/Contacts/Contact.scss b/app/components/Contacts/Contact.scss
index 749dac7e..1027f3f3 100644
--- a/app/components/Contacts/Contact.scss
+++ b/app/components/Contacts/Contact.scss
@@ -4,8 +4,9 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 30px 0;
-  border-bottom: 1px solid $traditionalgrey;
+  padding: 30px 60px 60px 60px;
+  cursor: pointer;
+  transition: all 0.25s;
 
   &.loading {
     .info {
@@ -13,6 +14,10 @@
     }
   }
 
+  &:hover {
+    background: $lightgrey;
+  }
+
   .limits {
     display: flex;
     flex-direction: row;
diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
new file mode 100644
index 00000000..6245fa10
--- /dev/null
+++ b/app/components/Contacts/ContactModal.js
@@ -0,0 +1,106 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ReactModal from 'react-modal'
+import { FaClose, FaCircle } from 'react-icons/lib/fa'
+
+import { btc } from 'utils'
+
+import styles from './ContactModal.scss'
+
+const ContactModal = ({ isOpen, channel, closeContactModal }) => {
+  console.log('channel: ', channel)
+  const customStyles = {
+    overlay: {
+      cursor: 'pointer',
+      overflowY: 'auto'
+    },
+    content: {
+      top: 'auto',
+      left: '20%',
+      right: '0',
+      bottom: 'auto',
+      width: '40%',
+      margin: '50px auto',
+      borderRadius: 'none',
+      padding: '0'
+    }
+  }
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      contentLabel='No Overlay Click Modal'
+      ariaHideApp
+      shouldCloseOnOverlayClick
+      onRequestClose={closeContactModal}
+      parentSelector={() => document.body}
+      style={customStyles}
+    >
+      {
+        channel &&
+        <div className={styles.container}>
+          <header className={styles.header}>
+            <div className={`${styles.status} ${channel.active && styles.online}`}>
+              <FaCircle style={{ verticalAlign: 'top' }} />
+              <span>
+                {
+                  channel.active ?
+                  'Online'
+                  :
+                  'Offline'
+                }
+              </span>
+            </div>
+            <div className={styles.closeContainer}>
+              <span onClick={closeContactModal}>
+                <FaClose />
+              </span>
+            </div>
+          </header>
+          
+          <section className={styles.title}>
+            <h2>{channel.remote_pubkey}</h2>
+          </section>
+
+          <section className={styles.stats}>
+            <div className={styles.pay}>
+              <h4>Can Pay</h4>
+              <div className={styles.meter}>
+                <div className={styles.amount} style={{ width: `${(channel.local_balance / channel.capacity) * 100}%` }} />
+              </div>
+              <span>{btc.satoshisToBtc(channel.local_balance)} BTC</span>
+            </div>
+
+            <div className={styles.pay}>
+              <h4>Can Receive</h4>
+              <div className={styles.meter}>
+                <div className={styles.amount} style={{ width: `${(channel.remote_balance / channel.capacity) * 100}%` }} />
+              </div>
+              <span>{btc.satoshisToBtc(channel.remote_balance)} BTC</span>
+            </div>
+
+            <div className={styles.sent}>
+              <h4>Total Bitcoin Sent</h4>
+              <p>{btc.satoshisToBtc(channel.total_satoshis_sent)} BTC</p>
+            </div>
+            <div className={styles.received}>
+              <h4>Total Bitcoin Received</h4>
+              <p>{btc.satoshisToBtc(channel.total_satoshis_received)} BTC</p>
+            </div>
+          </section>
+
+          <footer>
+            <div>Remove</div>
+          </footer>
+        </div>
+      }
+    </ReactModal>
+  )
+}
+
+ContactModal.propTypes = {
+  
+}
+
+export default ContactModal
diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal.scss
new file mode 100644
index 00000000..a9ca45bc
--- /dev/null
+++ b/app/components/Contacts/ContactModal.scss
@@ -0,0 +1,100 @@
+@import '../../variables.scss';
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  background: $lightgrey;
+  margin-bottom: 30px;
+  padding: 20px;
+
+  .status {
+    font-size: 12px;
+    color: $darkestgrey;
+
+    &.online {
+      color: $green;
+    }
+
+    span {
+      margin-left: 5px;
+    }
+  }
+  
+  .closeContainer {
+    background: $lightgrey;
+    line-height: 12px;
+
+    span {
+      color: $darkestgrey;
+      cursor: pointer;
+    }
+  }
+}
+
+.container section {
+  margin-bottom: 30px;
+  padding: 0 20px;
+
+  .pay, .receive, .sent, .received {
+    margin: 40px 0;
+  }
+}
+
+.title {
+
+  h2 {
+    color: $secondary;
+    font-weight: bold;
+    font-size: 12px;
+  }
+
+}
+
+.stats {
+
+  h4 {
+    color: $secondary;
+    font-weight: bold;
+    font-size: 12px;
+  }
+
+  span {
+    font-size: 14px;
+  }
+
+  p {
+    margin-top: 10px;
+    color: $darkestgrey;
+  }
+
+  .meter, .amount {
+    height: 10px;
+    border-radius: 10px;
+  }
+
+  .meter {
+    background: $darkgrey;
+    width: 100%;
+    margin: 10px 0;
+  }
+
+  .amount {
+    background: $darkestgrey;
+  }
+}
+
+.container footer {
+  padding: 20px;
+  text-align: center;
+
+  div {
+    color: $red;
+    font-size: 18px;
+
+    &:hover {
+      color: lighten($red, 10%);
+    }
+  }
+}
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 2d5f536b..c945664c 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 import { MdClose } from 'react-icons/lib/md'
-import { FaCircle } from 'react-icons/lib/fa'
+import { FaCircle, FaQuestionCircle } from 'react-icons/lib/fa'
 import styles from './ContactsForm.scss'
 
 class ContactsForm extends React.Component {
@@ -183,6 +183,9 @@ class ContactsForm extends React.Component {
 
           <footer className={styles.footer}>
             <div>
+              <span>
+                Use
+              </span>
               <span className={styles.amount}>
                 <input 
                   type='text'
@@ -196,6 +199,12 @@ class ContactsForm extends React.Component {
               </span>
               <span className={styles.caption}>
                 BTC per contact
+                <i
+                  data-hint="You aren't spending anything, just moving money onto the Lightning Network"
+                  className='hint--top'
+                >
+                  <FaQuestionCircle style={{ verticalAlign: 'top' }} />
+                </i>
               </span>
             </div>
           </footer>
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 1860c1cf..19a6dd4e 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -186,6 +186,12 @@
     &:nth-child(2) {
       margin-left: 2px;
     }
+
+  }
+  
+  .caption svg {
+    font-size: 10px;
+    color: $darkestgrey;
   }
 }
 
diff --git a/app/components/Contacts/OfflineContact.js b/app/components/Contacts/OfflineContact.js
index 2c1cdc9a..fec6d975 100644
--- a/app/components/Contacts/OfflineContact.js
+++ b/app/components/Contacts/OfflineContact.js
@@ -4,8 +4,8 @@ import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Contact.scss'
 
-const OfflineContact = ({ channel }) => (
-  <li className={styles.friend} key={channel.chan_id}>
+const OfflineContact = ({ channel, openContactModal }) => (
+  <li className={styles.friend} key={channel.chan_id} onClick={() => openContactModal(channel)}>
     <section className={styles.info}>
       <p>
         <FaCircle style={{ verticalAlign: 'top' }} />
diff --git a/app/components/Contacts/OnlineContact.js b/app/components/Contacts/OnlineContact.js
index b49cc73a..33eb7766 100644
--- a/app/components/Contacts/OnlineContact.js
+++ b/app/components/Contacts/OnlineContact.js
@@ -4,8 +4,8 @@ import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Contact.scss'
 
-const OnlineContact = ({ channel }) => (
-  <li className={styles.friend} key={channel.chan_id}>
+const OnlineContact = ({ channel, openContactModal }) => (
+  <li className={styles.friend} key={channel.chan_id} onClick={() => openContactModal(channel)}>
     <section className={styles.info}>
       <p className={styles.online}>
         <FaCircle style={{ verticalAlign: 'top' }} />
diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js
index 4e6abae1..5bff88ff 100644
--- a/app/components/ModalRoot/ModalRoot.js
+++ b/app/components/ModalRoot/ModalRoot.js
@@ -37,7 +37,7 @@ const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency }
 
 ModalRoot.propTypes = {
   modalType: PropTypes.string,
-  modalProps: PropTypes.object.isRequired,
+  modalProps: PropTypes.object,
   hideModal: PropTypes.func.isRequired,
   currentTicker: PropTypes.object.isRequired,
   currency: PropTypes.string.isRequired
diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js
index 76a70ca8..64d26c72 100644
--- a/app/components/Nav/Nav.js
+++ b/app/components/Nav/Nav.js
@@ -5,7 +5,6 @@ import Isvg from 'react-inlinesvg'
 
 import walletIcon from 'icons/wallet.svg'
 import peersIcon from 'icons/peers.svg'
-import channelsIcon from 'icons/channels.svg'
 import networkIcon from 'icons/globe.svg'
 
 import styles from './Nav.scss'
@@ -29,18 +28,6 @@ const Nav = ({ openPayForm, openRequestForm }) => (
           <span>Contacts</span>
         </li>
       </NavLink>
-      <NavLink exact to='/peers' activeClassName={styles.active} className={styles.link}>
-        <li>
-          <Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} />
-          <span>Peers</span>
-        </li>
-      </NavLink>
-      <NavLink exact to='/channels' activeClassName={styles.active} className={styles.link}>
-        <li>
-          <Isvg styles={{ verticalAlign: 'middle' }} src={channelsIcon} />
-          <span>Channels</span>
-        </li>
-      </NavLink>
       <NavLink exact to='/network' activeClassName={styles.active} className={styles.link}>
         <li>
           <Isvg styles={{ verticalAlign: 'middle' }} src={networkIcon} />
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index d1acbae3..85db6f01 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -32,6 +32,9 @@ export const CHANGE_CHANNEL_FILTER = 'CHANGE_CHANNEL_FILTER'
 export const ADD_LOADING_PUBKEY = 'ADD_LOADING_PUBKEY'
 export const REMOVE_LOADING_PUBKEY = 'REMOVE_LOADING_PUBKEY'
 
+export const OPEN_CONTACT_MODAL = 'OPEN_CONTACT_MODAL'
+export const CLOSE_CONTACT_MODAL = 'CLOSE_CONTACT_MODAL'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -108,6 +111,19 @@ export function removeLoadingPubkey(pubkey) {
   }
 }
 
+export function openContactModal(channel) {
+  return {
+    type: OPEN_CONTACT_MODAL,
+    channel
+  }
+}
+
+export function closeContactModal() {
+  return {
+    type: CLOSE_CONTACT_MODAL
+  }
+}
+
 // Send IPC event for peers
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
@@ -297,7 +313,10 @@ const ACTION_HANDLERS = {
   [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }),
   
   [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
-  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) })
+  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }),
+  
+  [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }),
+  [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } })
 }
 
 const channelsSelectors = {}
@@ -457,7 +476,12 @@ const initialState = {
     { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Contacts' }
   ],
 
-  loadingChannelPubkeys: []
+  loadingChannelPubkeys: [],
+
+  contactModal: {
+    isOpen: false,
+    channel: null
+  }
 }
 
 export default function channelsReducer(state = initialState, action) {
diff --git a/app/routes.js b/app/routes.js
index 04e4af59..bd62973d 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -4,15 +4,11 @@ import { Switch, Route } from 'react-router'
 import App from './routes/app'
 import Activity from './routes/activity'
 import Contacts from './routes/contacts'
-import Peers from './routes/peers'
-import Channels from './routes/channels'
 import Network from './routes/network'
 
 export default () => (
   <App>
     <Switch>
-      <Route path='/peers' component={Peers} />
-      <Route path='/channels' component={Channels} />
       <Route path='/contacts' component={Contacts} />
       <Route path='/network' component={Network} />
       <Route path='/' component={Activity} />
diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
deleted file mode 100644
index 89a3b326..00000000
--- a/app/routes/channels/components/Channels.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
-import { MdSearch } from 'react-icons/lib/md'
-
-import OpenPendingChannel from 'components/Channels/OpenPendingChannel'
-import ClosedPendingChannel from 'components/Channels/ClosedPendingChannel'
-import Channel from 'components/Channels/Channel'
-import ChannelForm from 'components/ChannelForm'
-
-import styles from './Channels.scss'
-
-class Channels extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      refreshing: false
-    }
-  }
-
-  componentWillMount() {
-    const { fetchChannels, fetchPeers } = this.props
-
-    fetchChannels()
-    fetchPeers()
-  }
-
-  render() {
-    const {
-      fetchChannels,
-      closeChannel,
-      channels: {
-        searchQuery,
-        filterPulldown,
-        filter,
-        viewType
-      },
-
-      nonActiveFilters,
-      toggleFilterPulldown,
-      changeFilter,
-
-      currentChannels,
-      updateChannelSearchQuery,
-
-      openChannelForm,
-
-      ticker,
-      currentTicker,
-
-      channelFormProps
-    } = this.props
-
-    const refreshClicked = () => {
-      // turn the spinner on
-      this.setState({ refreshing: true })
-
-      // store event in icon so we dont get an error when react clears it
-      const icon = this.repeat.childNodes
-
-      // fetch peers
-      fetchChannels()
-
-      // wait for the svg to appear as child
-      const svgTimeout = setTimeout(() => {
-        if (icon[0].tagName === 'svg') {
-          // spin icon for 1 sec
-          icon[0].style.animation = 'spin 1000ms linear 1'
-          clearTimeout(svgTimeout)
-        }
-      }, 1)
-
-      // clear animation after the second so we can reuse it
-      const refreshTimeout = setTimeout(() => {
-        icon[0].style.animation = ''
-        this.setState({ refreshing: false })
-        clearTimeout(refreshTimeout)
-      }, 1000)
-    }
-
-    return (
-      <div className={`${styles.container} ${viewType === 1 && styles.graphview}`}>
-        <ChannelForm {...channelFormProps} />
-
-        <header className={styles.header}>
-          <div className={styles.titleContainer}>
-            <div className={styles.left}>
-              <h1>Channels</h1>
-            </div>
-          </div>
-          <div className={styles.createChannelContainer}>
-            <div className={`buttonPrimary ${styles.newChannelButton}`} onClick={openChannelForm}>
-              Create new channel
-            </div>
-          </div>
-        </header>
-
-        <div className={styles.search}>
-          <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
-            <MdSearch />
-          </label>
-          <input
-            value={searchQuery}
-            onChange={event => updateChannelSearchQuery(event.target.value)}
-            className={`${styles.text} ${styles.input}`}
-            placeholder='Search channels by funding transaction or remote public key'
-            type='text'
-            id='channelSearch'
-          />
-        </div>
-
-        <div className={styles.filtersContainer}>
-          <section>
-            <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
-              {filter.name} <span className={filterPulldown && styles.pulldown}><FaAngleDown /></span>
-            </h2>
-            <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
-              {
-                nonActiveFilters.map(f => (
-                  <li key={f.key} onClick={() => changeFilter(f)}>
-                    {f.name}
-                  </li>
-                ))
-              }
-            </ul>
-          </section>
-          <section className={styles.refreshContainer}>
-            <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
-              {
-                this.state.refreshing ?
-                  <FaRepeat />
-                  :
-                  'Refresh'
-              }
-            </span>
-          </section>
-        </div>
-
-        <div className={`${styles.channels} ${filterPulldown && styles.fade}`}>
-          <ul className={viewType === 1 && styles.cardsContainer}>
-            {
-              currentChannels.map((channel, index) => {
-                if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
-                  return (
-                    <OpenPendingChannel
-                      key={index}
-                      channel={channel}
-                      ticker={ticker}
-                      currentTicker={currentTicker}
-                      explorerLinkBase={'https://testnet.smartbit.com.au/'}
-                    />
-                  )
-                } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
-                  return (
-                    <ClosedPendingChannel
-                      key={index}
-                      channel={channel}
-                      ticker={ticker}
-                      currentTicker={currentTicker}
-                      explorerLinkBase={'https://testnet.smartbit.com.au/'}
-                    />
-                  )
-                }
-                return (
-                  <Channel
-                    key={index}
-                    ticker={ticker}
-                    channel={channel}
-                    closeChannel={closeChannel}
-                    currentTicker={currentTicker}
-                  />
-                )
-              })
-            }
-          </ul>
-        </div>
-      </div>
-    )
-  }
-}
-
-Channels.propTypes = {
-  fetchChannels: PropTypes.func.isRequired,
-
-  channels: PropTypes.object.isRequired,
-  currentChannels: PropTypes.array.isRequired,
-  nonActiveFilters: PropTypes.array.isRequired,
-
-  updateChannelSearchQuery: PropTypes.func.isRequired,
-  setCurrentChannel: PropTypes.func.isRequired,
-  openChannelForm: PropTypes.func.isRequired,
-  closeChannel: PropTypes.func.isRequired,
-  toggleFilterPulldown: PropTypes.func.isRequired,
-  changeFilter: PropTypes.func.isRequired,
-  fetchPeers: PropTypes.func.isRequired,
-
-  ticker: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired,
-
-  channelFormProps: PropTypes.object.isRequired
-}
-
-export default Channels
diff --git a/app/routes/channels/components/Channels.scss b/app/routes/channels/components/Channels.scss
deleted file mode 100644
index f70a37c6..00000000
--- a/app/routes/channels/components/Channels.scss
+++ /dev/null
@@ -1,178 +0,0 @@
-@import '../../../variables.scss';
-
-.container.graphview {
-  background: $black;
-}
-
-.search {
-  height: 55px;
-  padding: 2px 25px;
-  border-top: 1px solid $darkgrey;
-  border-bottom: 1px solid $darkgrey;
-  background: $white;
-
-  .input {
-    display: inline-block;
-    vertical-align: top;
-    height: 100%;
-  }
-
-  .label {
-    width: 5%;
-    line-height: 50px;
-    font-size: 20px;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .text {
-    width: 95%;
-    outline: 0;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    height: 50px;
-    font-size: 16px;
-  }
-}
-
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  background: $lightgrey;
-
-  .titleContainer {
-    padding: 20px 40px;
-
-    .left {
-      padding: 10px 0;
-
-      h1 {
-        text-transform: uppercase;
-        font-size: 26px;
-        margin-right: 5px;
-      }
-    }
-  }
-
-  .createChannelContainer {
-    padding: 20px 40px;
-
-    .createChannelButton {
-      font-size: 14px;
-      margin-left: 10px;
-    }
-  }
-}
-
-.filtersContainer {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 20px 40px;
-
-  h2, h2 span {
-    color: $bluegrey;
-    cursor: pointer;
-    transition: color 0.25s;
-
-    &:hover {
-      color: lighten($bluegrey, 10%);
-    }
-  }
-  
-  h2, .filters li {
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    color: $darkestgrey;
-    font-size: 14px;
-    font-weight: 400;
-  }
-
-  h2 span.pulldown {
-    color: $main;
-  }
-
-  .filters {
-    display: none;
-    
-    &.active {
-      display: block;
-      position: absolute;
-      bottom: -100px;
-      z-index: 10;
-
-      li {
-        margin: 5px 0;
-        cursor: pointer;
-
-        &:hover {
-          color: $main;
-        }
-      }
-    }
-  }
-  
-  .refreshContainer {
-    text-align: right;
-    cursor: pointer;
-
-    .refresh {
-      text-decoration: underline;
-
-      svg {
-        font-size: 12px;
-      }
-    }
-  }
-}
-
-
-.layoutsContainer {
-  padding: 40px;
-
-  span {
-    font-size: 30px;
-    color: $grey;
-    cursor: pointer;
-    transition: all 0.25s;
-
-    &:nth-child(1) {
-      margin-right: 20px;
-    }
-
-    &:hover {
-      color: $darkestgrey;
-    }
-
-    &.active {
-      color: $darkestgrey;
-    }
-  }
-}
-
-.createChannelContainer {
-  padding: 40px;
-
-  .newChannelButton {
-    font-size: 14px;
-  }
-}
-
-.channels {
-  padding: 10px 40px 40px 40px;
-  transition: opacity 0.25s;
-
-  &.fade {
-    opacity: 0.05;
-  }
-
-  .cardsContainer {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-  }
-}
diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js
deleted file mode 100644
index 5aeb8215..00000000
--- a/app/routes/channels/containers/ChannelsContainer.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { withRouter } from 'react-router'
-import { connect } from 'react-redux'
-
-import {
-  fetchChannels,
-  openChannel,
-  closeChannel,
-  updateChannelSearchQuery,
-  setViewType,
-  currentChannels,
-
-  toggleFilterPulldown,
-  changeFilter,
-
-  channelsSelectors
-} from 'reducers/channels'
-
-import {
-  openChannelForm,
-  changeStep,
-  setNodeKey,
-  setLocalAmount,
-  setPushAmount,
-  closeChannelForm,
-  channelFormSelectors
-} from 'reducers/channelform'
-
-import { fetchPeers } from 'reducers/peers'
-
-import { tickerSelectors } from 'reducers/ticker'
-
-import { fetchDescribeNetwork, setCurrentChannel } from '../../../reducers/network'
-
-import Channels from '../components/Channels'
-
-const mapDispatchToProps = {
-  fetchChannels,
-  openChannel,
-  closeChannel,
-  updateChannelSearchQuery,
-  setViewType,
-  toggleFilterPulldown,
-  changeFilter,
-
-  openChannelForm,
-  closeChannelForm,
-  setNodeKey,
-  setLocalAmount,
-  setPushAmount,
-  changeStep,
-
-  fetchPeers,
-
-  fetchDescribeNetwork,
-  setCurrentChannel
-}
-
-const mapStateToProps = state => ({
-  channels: state.channels,
-  openChannels: state.channels.channels,
-  channelform: state.channelform,
-  peers: state.peers,
-  ticker: state.ticker,
-  network: state.network,
-  identity_pubkey: state.info.data.identity_pubkey,
-
-  currentChannels: currentChannels(state),
-  activeChanIds: channelsSelectors.activeChanIds(state),
-  nonActiveFilters: channelsSelectors.nonActiveFilters(state),
-  activeChannels: channelsSelectors.activeChannels(state),
-
-  currentTicker: tickerSelectors.currentTicker(state),
-
-  channelFormHeader: channelFormSelectors.channelFormHeader(state),
-  channelFormProgress: channelFormSelectors.channelFormProgress(state),
-  stepTwoIsValid: channelFormSelectors.stepTwoIsValid(state)
-})
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const channelFormProps = {
-    openChannel: dispatchProps.openChannel,
-    closeChannelForm: dispatchProps.closeChannelForm,
-    changeStep: dispatchProps.changeStep,
-    setNodeKey: dispatchProps.setNodeKey,
-    setLocalAmount: dispatchProps.setLocalAmount,
-    setPushAmount: dispatchProps.setPushAmount,
-
-    channelform: stateProps.channelform,
-    channelFormHeader: stateProps.channelFormHeader,
-    channelFormProgress: stateProps.channelFormProgress,
-    stepTwoIsValid: stateProps.stepTwoIsValid,
-    peers: stateProps.peers.peers
-  }
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-
-    channelFormProps
-  }
-}
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Channels))
diff --git a/app/routes/channels/index.js b/app/routes/channels/index.js
deleted file mode 100644
index b9ed6125..00000000
--- a/app/routes/channels/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ChannelsContainer from './containers/ChannelsContainer'
-
-export default ChannelsContainer
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index f8b5e126..914f8ef1 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -7,6 +7,7 @@ import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 
 import { btc } from 'utils'
 
+import ContactModal from 'components/Contacts/ContactModal'
 import ContactsForm from 'components/Contacts/ContactsForm'
 import OnlineContact from 'components/Contacts/OnlineContact'
 import PendingContact from 'components/Contacts/PendingContact'
@@ -57,7 +58,10 @@ class Contacts extends Component {
       nonActiveFilters,
       
       openContactsForm,
+      openContactModal,
+      closeContactModal,
 
+      contactModalProps,
       contactsFormProps,
 
       peers
@@ -92,6 +96,7 @@ class Contacts extends Component {
 
     return (
       <div className={styles.friendsContainer}>
+        <ContactModal {...contactModalProps} />
         <ContactsForm {...contactsFormProps} />
 
         <header className={styles.header}>
@@ -151,13 +156,7 @@ class Contacts extends Component {
 
         <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
           {
-            loadingChannelPubkeys.map(pubkey => {
-              console.log('pubkey: ', pubkey)
-
-              return (
-                <LoadingContact pubkey={pubkey} />
-              )
-            })
+            loadingChannelPubkeys.map(pubkey => <LoadingContact pubkey={pubkey} />)
           }
 
           {
@@ -167,9 +166,9 @@ class Contacts extends Component {
               } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
                 return <ClosingContact channel={channel} key={index} />
               } else if (channel.active) {
-                return <OnlineContact channel={channel} key={index} />
+                return <OnlineContact channel={channel} key={index} openContactModal={openContactModal} />
               } else if (!channel.active) {
-                return <OfflineContact channel={channel} key={index} />
+                return <OfflineContact channel={channel} key={index} openContactModal={openContactModal} />
               }
             })
           }
diff --git a/app/routes/contacts/components/Contacts.scss b/app/routes/contacts/components/Contacts.scss
index b7d29809..5440ef3e 100644
--- a/app/routes/contacts/components/Contacts.scss
+++ b/app/routes/contacts/components/Contacts.scss
@@ -162,7 +162,7 @@
 }
 
 .friends {
-  padding: 10px 60px 60px 60px;
+  padding: 10px 0 60px 0;
   opacity: 1;
   transition: all 0.25s;
 
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index e7a4bbf1..6e61770e 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -8,6 +8,8 @@ import {
   updateChannelSearchQuery,
   toggleFilterPulldown,
   changeFilter,
+  openContactModal,
+  closeContactModal,
   currentChannels,
 
   channelsSelectors
@@ -30,6 +32,8 @@ import Contacts from '../components/Contacts'
 const mapDispatchToProps = {
   openContactsForm,
   closeContactsForm,
+  openContactModal,
+  closeContactModal,
   updateContactFormSearchQuery,
   updateContactCapacity,
   openChannel,
@@ -63,6 +67,13 @@ const mapStateToProps = state => ({
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const contactModalProps = {
+    closeContactModal: dispatchProps.closeContactModal,
+
+    isOpen: stateProps.channels.contactModal.isOpen,
+    channel: stateProps.channels.contactModal.channel
+  }
+
   const contactsFormProps = {
     closeContactsForm: dispatchProps.closeContactsForm,
     updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery,
@@ -84,6 +95,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...dispatchProps,
     ...ownProps,
 
+    contactModalProps,
     contactsFormProps
   }
 }
diff --git a/app/routes/peers/components/Peers.js b/app/routes/peers/components/Peers.js
deleted file mode 100644
index fa13d1ca..00000000
--- a/app/routes/peers/components/Peers.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import { FaRepeat } from 'react-icons/lib/fa'
-import { MdSearch } from 'react-icons/lib/md'
-
-import PeerForm from 'components/Peers/PeerForm'
-import PeerModal from 'components/Peers/PeerModal'
-import Peer from 'components/Peers/Peer'
-
-import styles from './Peers.scss'
-
-class Peers extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      refreshing: false
-    }
-  }
-
-  componentWillMount() {
-    this.props.fetchPeers()
-  }
-
-  render() {
-    const {
-      fetchPeers,
-      peerFormProps,
-      setPeerForm,
-      setPeer,
-      updateSearchQuery,
-      disconnectRequest,
-
-      peerModalOpen,
-      filteredPeers,
-      peers: { peer, searchQuery }
-    } = this.props
-
-    const refreshClicked = () => {
-      // turn the spinner on
-      this.setState({ refreshing: true })
-
-      // store event in icon so we dont get an error when react clears it
-      const icon = this.repeat.childNodes
-
-      // fetch peers
-      fetchPeers()
-
-      // wait for the svg to appear as child
-      const svgTimeout = setTimeout(() => {
-        if (icon[0].tagName === 'svg') {
-          // spin icon for 1 sec
-          icon[0].style.animation = 'spin 1000ms linear 1'
-          clearTimeout(svgTimeout)
-        }
-      }, 1)
-
-      // clear animation after the second so we can reuse it
-      const refreshTimeout = setTimeout(() => {
-        icon[0].style.animation = ''
-        this.setState({ refreshing: false })
-        clearTimeout(refreshTimeout)
-      }, 1000)
-    }
-
-    return (
-      <div>
-        <PeerForm {...peerFormProps} />
-
-        <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={peer} disconnect={disconnectRequest} />
-
-        <header className={styles.header}>
-          <div className={styles.titleContainer}>
-            <div className={styles.left}>
-              <h1>Peers</h1>
-            </div>
-          </div>
-          <div className={styles.addPeerContainer}>
-            <div className={`buttonPrimary ${styles.newPeerButton}`} onClick={() => setPeerForm({ isOpen: true })}>
-              Add new peer
-            </div>
-          </div>
-        </header>
-
-        <div className={styles.search}>
-          <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
-            <MdSearch />
-          </label>
-          <input
-            value={searchQuery}
-            onChange={event => updateSearchQuery(event.target.value)}
-            className={`${styles.text} ${styles.input}`}
-            placeholder='Search peers by their node public key or IP address'
-            type='text'
-            id='peersSearch'
-          />
-        </div>
-
-        <div className={styles.refreshContainer}>
-          <span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}>
-            {
-              this.state.refreshing ?
-                <FaRepeat />
-                :
-                'Refresh'
-            }
-          </span>
-        </div>
-
-        <div className={styles.peers}>
-          {
-            filteredPeers.map(filteredPeer => <Peer key={filteredPeer.peer_id} peer={filteredPeer} setPeer={setPeer} />)
-          }
-        </div>
-      </div>
-    )
-  }
-}
-
-Peers.propTypes = {
-  fetchPeers: PropTypes.func.isRequired,
-  peerFormProps: PropTypes.object.isRequired,
-  setPeerForm: PropTypes.func.isRequired,
-  setPeer: PropTypes.func.isRequired,
-  updateSearchQuery: PropTypes.func.isRequired,
-  disconnectRequest: PropTypes.func.isRequired,
-
-  peerModalOpen: PropTypes.bool.isRequired,
-  filteredPeers: PropTypes.array.isRequired,
-  peers: PropTypes.shape({
-    peer: PropTypes.object,
-    searchQuery: PropTypes.string
-  }).isRequired
-}
-
-export default Peers
diff --git a/app/routes/peers/components/Peers.scss b/app/routes/peers/components/Peers.scss
deleted file mode 100644
index ad152ccd..00000000
--- a/app/routes/peers/components/Peers.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import '../../../variables.scss';
-
-.search {
-  height: 55px;
-  padding: 2px 25px;
-  border-top: 1px solid $darkgrey;
-  border-bottom: 1px solid $darkgrey;
-  background: $white;
-
-  .input {
-    display: inline-block;
-    vertical-align: top;
-    height: 100%;
-  }
-
-  .label {
-    width: 5%;
-    line-height: 50px;
-    font-size: 20px;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .text {
-    width: 95%;
-    outline: 0;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    height: 50px;
-    font-size: 16px;
-  }
-}
-
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  background: $lightgrey;
-
-  .titleContainer {
-    padding: 20px 40px;
-
-    .left {
-      padding: 10px 0;
-
-      h1 {
-        text-transform: uppercase;
-        font-size: 26px;
-        margin-right: 5px;
-      }
-    }
-  }
-
-  .addPeerContainer {
-    padding: 20px 40px;
-
-    .newPeerButton {
-      font-size: 14px;
-      margin-left: 10px;
-    }
-  }
-}
-
-.refreshContainer {
-  padding: 20px 40px 0 40px;
-  text-align: right;
-  cursor: pointer;
-
-  .refresh {
-    text-decoration: underline;
-
-    svg {
-      font-size: 12px;
-    }
-  }
-}
-
-.peers {
-  padding: 40px;
-}
\ No newline at end of file
diff --git a/app/routes/peers/containers/PeersContainer.js b/app/routes/peers/containers/PeersContainer.js
deleted file mode 100644
index 7fed1220..00000000
--- a/app/routes/peers/containers/PeersContainer.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { withRouter } from 'react-router'
-import { connect } from 'react-redux'
-
-import {
-  fetchPeers,
-  setPeer,
-  setPeerForm,
-  connectRequest,
-  disconnectRequest,
-  updateSearchQuery,
-
-  peersSelectors
-} from 'reducers/peers'
-
-import Peers from '../components/Peers'
-
-const mapDispatchToProps = {
-  fetchPeers,
-  setPeer,
-  peersSelectors,
-  setPeerForm,
-  connectRequest,
-  disconnectRequest,
-  updateSearchQuery
-}
-
-const mapStateToProps = state => ({
-  peers: state.peers,
-  info: state.info,
-
-  peerModalOpen: peersSelectors.peerModalOpen(state),
-  filteredPeers: peersSelectors.filteredPeers(state)
-})
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const peerFormProps = {
-    setForm: dispatchProps.setPeerForm,
-    connect: dispatchProps.connectRequest,
-
-    form: stateProps.peers.peerForm
-  }
-
-  return {
-    ...stateProps,
-    ...dispatchProps,
-    ...ownProps,
-
-    peerFormProps
-  }
-}
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Peers))
diff --git a/app/routes/peers/index.js b/app/routes/peers/index.js
deleted file mode 100644
index 29643c75..00000000
--- a/app/routes/peers/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PeersContainer from './containers/PeersContainer'
-
-export default PeersContainer

From 15d7ec33ff514da802228e765e4694037ed6a2c6 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 5 Jan 2018 13:47:43 -0600
Subject: [PATCH 15/22] feature(contacts): add channelNodes selector

---
 app/components/Contacts/ContactModal.js            | 14 +++++++++++---
 app/components/Contacts/ContactModal.scss          | 11 +++++++++--
 app/reducers/channels.js                           | 12 ++++++++++++
 .../contacts/containers/ContactsContainer.js       |  4 +++-
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
index 6245fa10..91222850 100644
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import find from 'lodash/find'
 import ReactModal from 'react-modal'
 import { FaClose, FaCircle } from 'react-icons/lib/fa'
 
@@ -8,8 +8,9 @@ import { btc } from 'utils'
 
 import styles from './ContactModal.scss'
 
-const ContactModal = ({ isOpen, channel, closeContactModal }) => {
-  console.log('channel: ', channel)
+const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes }) => {
+  if (!channel) { return <span /> }
+
   const customStyles = {
     overlay: {
       cursor: 'pointer',
@@ -27,6 +28,9 @@ const ContactModal = ({ isOpen, channel, closeContactModal }) => {
     }
   }
 
+  // the remote node for the channel
+  const node = find(channelNodes, { pub_key: channel.remote_pubkey })
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -60,6 +64,10 @@ const ContactModal = ({ isOpen, channel, closeContactModal }) => {
           </header>
           
           <section className={styles.title}>
+            {
+              node &&
+              <h1>{node.alias}</h1>
+            }
             <h2>{channel.remote_pubkey}</h2>
           </section>
 
diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal.scss
index a9ca45bc..5a818fbd 100644
--- a/app/components/Contacts/ContactModal.scss
+++ b/app/components/Contacts/ContactModal.scss
@@ -43,11 +43,18 @@
 }
 
 .title {
-
-  h2 {
+  h1 {
     color: $secondary;
     font-weight: bold;
+    font-size: 16px;
+    letter-spacing: 1.1px;
+    margin-bottom: 10px;
+  }
+
+  h2 {
     font-size: 12px;
+    color: $darkestgrey;
+    font-weight: 100;
   }
 
 }
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 85db6f01..cd085365 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
+import filter from 'lodash/filter'
 import { btc } from 'utils'
 import { showNotification } from 'notifications'
 import { closeChannelForm, resetChannelForm } from './channelform'
@@ -328,6 +329,7 @@ const pendingForceClosedChannelsSelector = state => state.channels.pendingChanne
 const channelSearchQuerySelector = state => state.channels.searchQuery
 const filtersSelector = state => state.channels.filters
 const filterSelector = state => state.channels.filter
+const nodesSelector = state => state.network.nodes
 
 channelsSelectors.channelModalOpen = createSelector(
   channelSelector,
@@ -381,6 +383,16 @@ channelsSelectors.nonActiveFilters = createSelector(
   (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
+channelsSelectors.channelNodes = createSelector(
+  channelsSelector,
+  nodesSelector,
+  (channels, nodes) => {
+    const chanPubkeys = channels.map(channel => channel.remote_pubkey)
+
+    return filter(nodes, node => chanPubkeys.includes(node.pub_key))
+  }
+)
+
 const allChannels = createSelector(
   channelsSelectors.activeChannels,
   channelsSelectors.nonActiveChannels,
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index 6e61770e..e2d2b4df 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -61,6 +61,7 @@ const mapStateToProps = state => ({
   pendingOpenChannelPubkeys: channelsSelectors.pendingOpenChannelPubkeys(state),
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
+  channelNodes: channelsSelectors.channelNodes(state),
 
   filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
   showManualForm: contactFormSelectors.showManualForm(state)
@@ -71,7 +72,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     closeContactModal: dispatchProps.closeContactModal,
 
     isOpen: stateProps.channels.contactModal.isOpen,
-    channel: stateProps.channels.contactModal.channel
+    channel: stateProps.channels.contactModal.channel,
+    channelNodes: stateProps.channelNodes
   }
 
   const contactsFormProps = {

From 28d52af8e670de06fc5403606e97d8a65105d87d Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 5 Jan 2018 15:12:44 -0600
Subject: [PATCH 16/22] feature(contacts): close contact and close contact
 loading UX

---
 app/components/Contacts/ContactModal.js       | 20 +++++++-
 app/components/Contacts/ContactModal.scss     | 42 ++++++++++++++++
 app/components/Contacts/LoadingContact.js     | 11 ++++-
 app/lnd/methods/channelController.js          | 22 ++++++---
 app/reducers/channels.js                      | 48 +++++++++++++++----
 app/routes/contacts/components/Contacts.js    |  9 ++--
 .../contacts/containers/ContactsContainer.js  |  6 ++-
 7 files changed, 135 insertions(+), 23 deletions(-)

diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
index 91222850..ef2b78cf 100644
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@@ -8,7 +8,14 @@ import { btc } from 'utils'
 
 import styles from './ContactModal.scss'
 
-const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes }) => {
+const ContactModal = ({
+  isOpen,
+  channel,
+  closeContactModal,
+  channelNodes,
+  closeChannel,
+  closingChannelIds
+}) => {
   if (!channel) { return <span /> }
 
   const customStyles = {
@@ -99,7 +106,16 @@ const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes }) => {
           </section>
 
           <footer>
-            <div>Remove</div>
+            {
+              closingChannelIds.includes(channel.chan_id) ?
+                <span className={styles.inactive}>
+                  <div className={styles.loading}>
+                    <div className={styles.spinner} />
+                  </div>
+                </span>
+                :
+                <div onClick={() => closeChannel({ channel_point: channel.channel_point, chan_id: channel.chan_id })}>Remove</div>
+            }
           </footer>
         </div>
       }
diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal.scss
index 5a818fbd..811ab2a9 100644
--- a/app/components/Contacts/ContactModal.scss
+++ b/app/components/Contacts/ContactModal.scss
@@ -105,3 +105,45 @@
     }
   }
 }
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+}
+
+.spinner {
+  margin: 0 auto;
+  height: 20px;
+  width: 20px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+}
diff --git a/app/components/Contacts/LoadingContact.js b/app/components/Contacts/LoadingContact.js
index 2161c818..6e9f3218 100644
--- a/app/components/Contacts/LoadingContact.js
+++ b/app/components/Contacts/LoadingContact.js
@@ -4,12 +4,19 @@ import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Contact.scss'
 
-const LoadingContact = ({ pubkey }) => (
+const LoadingContact = ({ pubkey, isClosing }) => (
   <li className={`${styles.friend} ${styles.loading}`}>
     <section className={styles.info}>
       <p>
         <FaCircle style={{ verticalAlign: 'top' }} />
-        <span>Loading</span>
+        <span>
+          {
+            isClosing ?
+              'Closing'
+              :
+              'Loading'
+          }
+        </span>
       </p>
       <h2>{pubkey}</h2>
     </section>
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index eebb4905..eff2e89e 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -123,20 +123,30 @@ export function listChannels(lnd, meta) {
  * @return {[type]}         [description]
  */
 export function closeChannel(lnd, meta, event, payload) {
+  const chan_id = payload.chan_id
   const tx = payload.channel_point.funding_txid.match(/.{2}/g).reverse().join('')
   const res = {
     channel_point: {
       funding_txid: BufferUtil.hexToBuffer(tx),
       output_index: Number(payload.channel_point.output_index)
     },
-    force: true
+    force: false
   }
 
-  return new Promise((resolve, reject) =>
-    pushclosechannel(lnd, meta, event, res)
-      .then(data => resolve(data))
-      .catch(error => reject(error))
-  )
+  return new Promise((resolve, reject) => {
+    try {
+      const call = lnd.closeChannel(res, meta)
+
+      call.on('data', data => event.sender.send('pushclosechannelupdated', { data, chan_id }))
+      call.on('end', () => event.sender.send('pushclosechannelend'))
+      call.on('error', error => event.sender.send('pushclosechannelerror', { error: error.toString(), chan_id }))
+      call.on('status', status => event.sender.send('pushclosechannelstatus', { status, chan_id }))
+
+      resolve(null, res)
+    } catch (error) {
+      reject(error, null)
+    }
+  })
 }
 
 
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index cd085365..1336b96d 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -33,6 +33,9 @@ export const CHANGE_CHANNEL_FILTER = 'CHANGE_CHANNEL_FILTER'
 export const ADD_LOADING_PUBKEY = 'ADD_LOADING_PUBKEY'
 export const REMOVE_LOADING_PUBKEY = 'REMOVE_LOADING_PUBKEY'
 
+export const ADD_ClOSING_CHAN_ID = 'ADD_ClOSING_CHAN_ID'
+export const REMOVE_ClOSING_CHAN_ID = 'REMOVE_ClOSING_CHAN_ID'
+
 export const OPEN_CONTACT_MODAL = 'OPEN_CONTACT_MODAL'
 export const CLOSE_CONTACT_MODAL = 'CLOSE_CONTACT_MODAL'
 
@@ -112,6 +115,20 @@ export function removeLoadingPubkey(pubkey) {
   }
 }
 
+export function addClosingChanId(chanId) {
+  return {
+    type: ADD_ClOSING_CHAN_ID,
+    chanId
+  }
+}
+
+export function removeClosingChanId(chanId) {
+  return {
+    type: REMOVE_ClOSING_CHAN_ID,
+    chanId
+  }
+}
+
 export function openContactModal(channel) {
   return {
     type: OPEN_CONTACT_MODAL,
@@ -185,19 +202,24 @@ export const pushchannelstatus = (event, data) => (dispatch) => { // eslint-disa
 }
 
 // Send IPC event for opening a channel
-export const closeChannel = ({ channel_point }) => (dispatch) => {
+export const closeChannel = ({ channel_point, chan_id }) => (dispatch) => {
   dispatch(closingChannel())
-  const channelPoint = channel_point.split(':')
+  dispatch(addClosingChanId(chan_id))
+
+  const [funding_txid, output_index] = channel_point.split(':')
+  console.log('funding_txid: ', funding_txid)
+  console.log('output_index: ', output_index)
+  console.log('chan_id: ', chan_id)
   ipcRenderer.send(
     'lnd',
     {
       msg: 'closeChannel',
       data: {
         channel_point: {
-          funding_txid: channelPoint[0],
-          output_index: channelPoint[1]
+          funding_txid,
+          output_index
         },
-        force: true
+        chan_id
       }
     }
   )
@@ -211,9 +233,11 @@ export const closeChannelSuccessful = (event, data) => (dispatch) => {
 }
 
 // Receive IPC event for updated closing channel
-export const pushclosechannelupdated = (event, data) => (dispatch) => {
+export const pushclosechannelupdated = (event, { data, chan_id }) => (dispatch) => {
   console.log('PUSH CLOSE CHANNEL UPDATED: ', data)
+  console.log('PUSH CLOSE CHANNEL chan_id: ', chan_id)
   dispatch(fetchChannels())
+  dispatch(removeClosingChanId(chan_id))
 }
 
 // Receive IPC event for closing channel end
@@ -223,9 +247,11 @@ export const pushclosechannelend = (event, data) => (dispatch) => {
 }
 
 // Receive IPC event for closing channel error
-export const pushclosechannelerror = (event, data) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL END: ', data)
-  dispatch(fetchChannels())
+export const pushclosechannelerror = (event, { error, chan_id }) => (dispatch) => {
+  console.log('PUSH CLOSE CHANNEL END: ', error)
+  console.log('PUSH CLOSE CHANNEL chan_id: ', chan_id)
+  dispatch(setError(error))
+  dispatch(removeClosingChanId(chan_id))
 }
 
 // Receive IPC event for closing channel status
@@ -315,6 +341,9 @@ const ACTION_HANDLERS = {
   
   [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
   [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }),
+
+  [ADD_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: [chanId, ...state.closingChannelIds] }),
+  [REMOVE_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId) }),
   
   [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }),
   [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } })
@@ -489,6 +518,7 @@ const initialState = {
   ],
 
   loadingChannelPubkeys: [],
+  closingChannelIds: [],
 
   contactModal: {
     isOpen: false,
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index 914f8ef1..b3932b71 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -43,7 +43,8 @@ class Contacts extends Component {
         filterPulldown,
         filter,
         viewType,
-        loadingChannelPubkeys
+        loadingChannelPubkeys,
+        closingChannelIds
       },
       currentChannels,
       activeChannels,
@@ -156,12 +157,14 @@ class Contacts extends Component {
 
         <ul className={`${styles.friends} ${filterPulldown && styles.fade}`}>
           {
-            loadingChannelPubkeys.map(pubkey => <LoadingContact pubkey={pubkey} />)
+            loadingChannelPubkeys.map(pubkey => <LoadingContact pubkey={pubkey} isClosing={false} />)
           }
 
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
-              if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+              if (closingChannelIds.includes(channel.chan_id)) {
+                return <LoadingContact pubkey={channel.remote_pubkey} isClosing={true} />
+              } else if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
                 return <PendingContact channel={channel} key={index} />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
                 return <ClosingContact channel={channel} key={index} />
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index e2d2b4df..b0afb19a 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import {
   fetchChannels,
   openChannel,
+  closeChannel,
 
   updateChannelSearchQuery,
   toggleFilterPulldown,
@@ -37,6 +38,7 @@ const mapDispatchToProps = {
   updateContactFormSearchQuery,
   updateContactCapacity,
   openChannel,
+  closeChannel,
   updateChannelSearchQuery,
   toggleFilterPulldown,
   changeFilter,
@@ -70,10 +72,12 @@ const mapStateToProps = state => ({
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const contactModalProps = {
     closeContactModal: dispatchProps.closeContactModal,
+    closeChannel: dispatchProps.closeChannel,
 
     isOpen: stateProps.channels.contactModal.isOpen,
     channel: stateProps.channels.contactModal.channel,
-    channelNodes: stateProps.channelNodes
+    channelNodes: stateProps.channelNodes,
+    closingChannelIds: stateProps.channels.closingChannelIds
   }
 
   const contactsFormProps = {

From 3d0de3325029da90e2604c862d1c4746016aa69e Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 5 Jan 2018 20:19:26 -0600
Subject: [PATCH 17/22] fix(contacts): update contacts styles

---
 app/components/Contacts/ContactModal.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal.scss
index 811ab2a9..6745ece0 100644
--- a/app/components/Contacts/ContactModal.scss
+++ b/app/components/Contacts/ContactModal.scss
@@ -6,7 +6,6 @@
   justify-content: space-between;
   align-items: flex-end;
   background: $lightgrey;
-  margin-bottom: 30px;
   padding: 20px;
 
   .status {
@@ -42,7 +41,11 @@
   }
 }
 
-.title {
+.container .title {
+  margin: 0;
+  padding: 30px 20px;
+  background: $lightgrey;
+
   h1 {
     color: $secondary;
     font-weight: bold;

From 3804a4dcaf55fb389626737b8780bde94ace0cf2 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 5 Jan 2018 20:37:48 -0600
Subject: [PATCH 18/22] fix(contacts): close contact modal after successfully
 closing the channel

---
 app/reducers/channels.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 1336b96d..171dc77c 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -238,6 +238,7 @@ export const pushclosechannelupdated = (event, { data, chan_id }) => (dispatch)
   console.log('PUSH CLOSE CHANNEL chan_id: ', chan_id)
   dispatch(fetchChannels())
   dispatch(removeClosingChanId(chan_id))
+  dispatch(closeContactModal())
 }
 
 // Receive IPC event for closing channel end

From c3f9ee75664e7765f1c8e5deefca63a18f9548fd Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Sat, 6 Jan 2018 13:21:12 -0600
Subject: [PATCH 19/22] fix(contacts): hard code 1 conf for channels

---
 app/lnd/methods/channelController.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index eff2e89e..606d52a0 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -19,7 +19,8 @@ export function connectAndOpen(lnd, meta, event, payload) {
   const { pubkey, host, localamt } = payload
   const channelPayload = {
     node_pubkey: BufferUtil.hexToBuffer(pubkey),
-    local_funding_amount: Number(localamt)
+    local_funding_amount: Number(localamt),
+    num_confs: 1
   }
 
   return new Promise((resolve, reject) => {

From eb913b03670355bfc89229d7e1516c321166e865 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 8 Jan 2018 15:08:41 -0600
Subject: [PATCH 20/22] fix(lint): fix lint errors

---
 app/components/ChannelForm/Footer.js          |  4 +-
 app/components/ChannelForm/StepOne.js         |  3 +-
 app/components/ChannelForm/StepThree.js       |  2 +-
 app/components/ChannelForm/StepTwo.js         |  2 +-
 app/components/Channels/Channel.js            |  4 +-
 app/components/Channels/ChannelForm.js        |  7 ++-
 app/components/Channels/ChannelModal.js       |  4 +-
 .../Channels/ClosedPendingChannel.js          |  4 +-
 app/components/Channels/OpenPendingChannel.js |  4 +-
 app/components/Contacts/ClosingContact.js     |  2 +-
 app/components/Contacts/ContactModal.js       |  4 +-
 app/components/Contacts/ContactsForm.js       | 30 +++++----
 app/components/Contacts/Donut.js              | 16 ++---
 app/components/Contacts/LoadingContact.js     |  2 +-
 app/components/Contacts/OfflineContact.js     |  2 +-
 app/components/Contacts/OnlineContact.js      |  2 +-
 app/components/Contacts/PendingContact.js     |  2 +-
 app/components/Form/PayForm.js                |  4 +-
 app/components/ModalRoot/ModalRoot.js         |  4 +-
 .../ModalRoot/SuccessfulSendCoins.js          |  4 +-
 app/components/Network/TransactionForm.js     |  4 +-
 app/components/Peers/PeerModal.js             |  4 +-
 app/components/Wallet/ReceiveModal.js         |  4 +-
 app/components/Wallet/Wallet.js               |  2 +-
 app/lnd/methods/channelController.js          | 61 +++++++++----------
 app/lnd/methods/index.js                      |  6 +-
 app/reducers/balance.js                       |  4 +-
 app/reducers/channels.js                      | 12 ++--
 app/reducers/invoice.js                       |  2 +-
 app/reducers/network.js                       |  4 +-
 app/reducers/peers.js                         |  8 ++-
 app/reducers/ticker.js                        |  4 +-
 app/reducers/transaction.js                   |  4 +-
 app/routes/activity/components/Activity.js    |  4 +-
 .../components/components/Invoice/Invoice.js  |  4 +-
 .../components/components/Modal/Modal.js      |  4 +-
 .../components/components/Payment/Payment.js  |  4 +-
 .../components/Transaction/Transaction.js     |  4 +-
 app/routes/contacts/components/Contacts.js    |  4 +-
 app/routes/network/components/Network.js      |  8 ++-
 internals/scripts/CheckBuiltsExist.js         |  8 +--
 41 files changed, 154 insertions(+), 111 deletions(-)

diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
index 36675975..cba26b01 100644
--- a/app/components/ChannelForm/Footer.js
+++ b/app/components/ChannelForm/Footer.js
@@ -2,7 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Footer.scss'
 
-const Footer = ({ step, changeStep, stepTwoIsValid, submit }) => {
+const Footer = ({
+  step, changeStep, stepTwoIsValid, submit
+}) => {
   if (step === 1) { return null }
 
   // See if the next button on step 2 should be active
diff --git a/app/components/ChannelForm/StepOne.js b/app/components/ChannelForm/StepOne.js
index b7aac4e1..9758cc27 100644
--- a/app/components/ChannelForm/StepOne.js
+++ b/app/components/ChannelForm/StepOne.js
@@ -58,8 +58,7 @@ class StepOne extends Component {
                 <h4>{peer.address}</h4>
                 <h1>{peer.pub_key}</h1>
               </li>
-            )
-            )}
+            ))}
         </ul>
       </div>
     )
diff --git a/app/components/ChannelForm/StepThree.js b/app/components/ChannelForm/StepThree.js
index fef38172..d7045391 100644
--- a/app/components/ChannelForm/StepThree.js
+++ b/app/components/ChannelForm/StepThree.js
@@ -20,7 +20,7 @@ class StepThree extends Component {
 
         <form>
           <label htmlFor='amount'>
-            <CurrencyIcon currency={'btc'} crypto={'btc'} />
+            <CurrencyIcon currency='btc' crypto='btc' />
           </label>
           <input
             type='number'
diff --git a/app/components/ChannelForm/StepTwo.js b/app/components/ChannelForm/StepTwo.js
index 723653f4..b4a6e4cb 100644
--- a/app/components/ChannelForm/StepTwo.js
+++ b/app/components/ChannelForm/StepTwo.js
@@ -19,7 +19,7 @@ class StepTwo extends Component {
 
         <form>
           <label htmlFor='amount'>
-            <CurrencyIcon currency={'btc'} crypto={'btc'} />
+            <CurrencyIcon currency='btc' crypto='btc' />
           </label>
           <input
             type='number'
diff --git a/app/components/Channels/Channel.js b/app/components/Channels/Channel.js
index e3885b2b..a2c8b487 100644
--- a/app/components/Channels/Channel.js
+++ b/app/components/Channels/Channel.js
@@ -4,7 +4,9 @@ import { FaCircle } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from './Channel.scss'
 
-const Channel = ({ ticker, channel, closeChannel, currentTicker }) => (
+const Channel = ({
+  ticker, channel, closeChannel, currentTicker
+}) => (
   <li className={styles.channel}>
     <header className={styles.header}>
       <div>
diff --git a/app/components/Channels/ChannelForm.js b/app/components/Channels/ChannelForm.js
index 5334af6f..9f6cfd87 100644
--- a/app/components/Channels/ChannelForm.js
+++ b/app/components/Channels/ChannelForm.js
@@ -6,7 +6,9 @@ import CurrencyIcon from 'components/CurrencyIcon'
 import { usd, btc } from 'utils'
 import styles from './ChannelForm.scss'
 
-const ChannelForm = ({ form, setForm, ticker, peers, openChannel, currentTicker }) => {
+const ChannelForm = ({
+  form, setForm, ticker, peers, openChannel, currentTicker
+}) => {
   const submitClicked = () => {
     const { node_key, local_amt, push_amt } = form
 
@@ -99,8 +101,7 @@ const ChannelForm = ({ form, setForm, ticker, peers, openChannel, currentTicker
                       <h4>{peer.address}</h4>
                       <h1>{peer.pub_key}</h1>
                     </li>
-                  )
-                )
+                  ))
                 :
                 null
             }
diff --git a/app/components/Channels/ChannelModal.js b/app/components/Channels/ChannelModal.js
index f0cf8ae4..b4cc648c 100644
--- a/app/components/Channels/ChannelModal.js
+++ b/app/components/Channels/ChannelModal.js
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 import styles from './ChannelModal.scss'
 
-const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase, closeChannel }) => {
+const ChannelModal = ({
+  isOpen, resetChannel, channel, explorerLinkBase, closeChannel
+}) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer',
diff --git a/app/components/Channels/ClosedPendingChannel.js b/app/components/Channels/ClosedPendingChannel.js
index 9e7eaf94..cf563c39 100644
--- a/app/components/Channels/ClosedPendingChannel.js
+++ b/app/components/Channels/ClosedPendingChannel.js
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import { btc } from 'utils'
 import styles from './ClosedPendingChannel.scss'
 
-const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, currentTicker, explorerLinkBase }) => (
+const ClosedPendingChannel = ({
+  ticker, channel: { channel, closing_txid }, currentTicker, explorerLinkBase
+}) => (
   <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}>
     <h1 className={styles.closing}>Closing Channel...</h1>
     <div className={styles.left}>
diff --git a/app/components/Channels/OpenPendingChannel.js b/app/components/Channels/OpenPendingChannel.js
index 523e1a86..50778d16 100644
--- a/app/components/Channels/OpenPendingChannel.js
+++ b/app/components/Channels/OpenPendingChannel.js
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import { btc } from 'utils'
 import styles from './OpenPendingChannel.scss'
 
-const OpenPendingChannel = ({ ticker, channel, currentTicker, explorerLinkBase }) => (
+const OpenPendingChannel = ({
+  ticker, channel, currentTicker, explorerLinkBase
+}) => (
   <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}>
     <div className={styles.pending}>
       <h1>Opening Channel...</h1>
diff --git a/app/components/Contacts/ClosingContact.js b/app/components/Contacts/ClosingContact.js
index fe03fd36..9ae07b64 100644
--- a/app/components/Contacts/ClosingContact.js
+++ b/app/components/Contacts/ClosingContact.js
@@ -33,7 +33,7 @@ const ClosingContact = ({ channel }) => (
 )
 
 ClosingContact.propTypes = {
-  
+
 }
 
 export default ClosingContact
diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
index ef2b78cf..63fd8b91 100644
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@@ -69,7 +69,7 @@ const ContactModal = ({
               </span>
             </div>
           </header>
-          
+
           <section className={styles.title}>
             {
               node &&
@@ -124,7 +124,7 @@ const ContactModal = ({
 }
 
 ContactModal.propTypes = {
-  
+
 }
 
 export default ContactModal
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index c945664c..03eece42 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -139,12 +139,11 @@ class ContactsForm extends React.Component {
 
             <ul className={styles.networkResults}>
               {
-                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
-                  return (
-                    <li key={node.pub_key}>
-                      <section>
-                        {
-                          node.alias.length > 0 ?  
+                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => (
+                  <li key={node.pub_key}>
+                    <section>
+                      {
+                          node.alias.length > 0 ?
                             <h2>
                               <span>{node.alias.trim()}</span>
                               <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
@@ -154,13 +153,12 @@ class ContactsForm extends React.Component {
                               <span>{node.pub_key}</span>
                             </h2>
                         }
-                      </section>
-                      <section>
-                        {renderRightSide(node)}
-                      </section>
-                    </li>
-                  )
-                })
+                    </section>
+                    <section>
+                      {renderRightSide(node)}
+                    </section>
+                  </li>
+                  ))
               }
             </ul>
           </div>
@@ -187,7 +185,7 @@ class ContactsForm extends React.Component {
                 Use
               </span>
               <span className={styles.amount}>
-                <input 
+                <input
                   type='text'
                   value={contactsform.contactCapacity}
                   onChange={event => updateContactCapacity(event.target.value)}
@@ -211,12 +209,12 @@ class ContactsForm extends React.Component {
         </ReactModal>
       </div>
     )
-  }  
+  }
 }
 
 
 ContactsForm.propTypes = {
-  
+
 }
 
 export default ContactsForm
diff --git a/app/components/Contacts/Donut.js b/app/components/Contacts/Donut.js
index f82ded9d..f9066af1 100644
--- a/app/components/Contacts/Donut.js
+++ b/app/components/Contacts/Donut.js
@@ -7,15 +7,15 @@ const Donut = ({ value, size, strokewidth }) => {
   console.log('size: ', size)
   console.log('strokewidth: ', strokewidth)
 
-  const halfsize = (size * 0.5);
-  const radius = halfsize - (strokewidth * 0.5);
-  const circumference = 2 * Math.PI * radius;
-  const strokeval = ((value * circumference) / 100);
-  const dashval = (strokeval + ' ' + circumference);
+  const halfsize = (size * 0.5)
+  const radius = halfsize - (strokewidth * 0.5)
+  const circumference = 2 * Math.PI * radius
+  const strokeval = ((value * circumference) / 100)
+  const dashval = (`${strokeval} ${circumference}`)
 
-  const trackstyle = {strokeWidth: 5};
-  const indicatorstyle = {strokeWidth: strokewidth, strokeDasharray: dashval}
-  const rotateval = 'rotate(-90 '+37.5+','+37.5+')';
+  const trackstyle = { strokeWidth: 5 }
+  const indicatorstyle = { strokeWidth: strokewidth, strokeDasharray: dashval }
+  const rotateval = `rotate(-90 ${37.5},${37.5})`
 
   return (
     <svg width={75} height={75} className={styles.donutchart}>
diff --git a/app/components/Contacts/LoadingContact.js b/app/components/Contacts/LoadingContact.js
index 6e9f3218..313e7f4e 100644
--- a/app/components/Contacts/LoadingContact.js
+++ b/app/components/Contacts/LoadingContact.js
@@ -29,7 +29,7 @@ const LoadingContact = ({ pubkey, isClosing }) => (
 )
 
 LoadingContact.propTypes = {
-  
+
 }
 
 export default LoadingContact
diff --git a/app/components/Contacts/OfflineContact.js b/app/components/Contacts/OfflineContact.js
index fec6d975..0e042b9c 100644
--- a/app/components/Contacts/OfflineContact.js
+++ b/app/components/Contacts/OfflineContact.js
@@ -27,7 +27,7 @@ const OfflineContact = ({ channel, openContactModal }) => (
 )
 
 OfflineContact.propTypes = {
-  
+
 }
 
 export default OfflineContact
diff --git a/app/components/Contacts/OnlineContact.js b/app/components/Contacts/OnlineContact.js
index 33eb7766..d36ce29a 100644
--- a/app/components/Contacts/OnlineContact.js
+++ b/app/components/Contacts/OnlineContact.js
@@ -27,7 +27,7 @@ const OnlineContact = ({ channel, openContactModal }) => (
 )
 
 OnlineContact.propTypes = {
-  
+
 }
 
 export default OnlineContact
diff --git a/app/components/Contacts/PendingContact.js b/app/components/Contacts/PendingContact.js
index c5f0a01b..5ede3f9e 100644
--- a/app/components/Contacts/PendingContact.js
+++ b/app/components/Contacts/PendingContact.js
@@ -33,7 +33,7 @@ const PendingContact = ({ channel }) => (
 )
 
 PendingContact.propTypes = {
-  
+
 }
 
 export default PendingContact
diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js
index 725d312e..b67a26ac 100644
--- a/app/components/Form/PayForm.js
+++ b/app/components/Form/PayForm.js
@@ -9,7 +9,9 @@ import styles from './PayForm.scss'
 
 class PayForm extends Component {
   componentDidUpdate(prevProps) {
-    const { isOnchain, isLn, payform: { payInput }, fetchInvoice } = this.props
+    const {
+      isOnchain, isLn, payform: { payInput }, fetchInvoice
+    } = this.props
 
     // If on-chain, focus on amount to let user know it's editable
     if (isOnchain) { this.amountInput.focus() }
diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js
index 5bff88ff..32157fcf 100644
--- a/app/components/ModalRoot/ModalRoot.js
+++ b/app/components/ModalRoot/ModalRoot.js
@@ -13,7 +13,9 @@ const MODAL_COMPONENTS = {
   /* other modals */
 }
 
-const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency }) => {
+const ModalRoot = ({
+  modalType, modalProps, hideModal, currentTicker, currency
+}) => {
   if (!modalType) { return null }
 
   const SpecificModal = MODAL_COMPONENTS[modalType]
diff --git a/app/components/ModalRoot/SuccessfulSendCoins.js b/app/components/ModalRoot/SuccessfulSendCoins.js
index 0b6ae9ba..c0b101fe 100644
--- a/app/components/ModalRoot/SuccessfulSendCoins.js
+++ b/app/components/ModalRoot/SuccessfulSendCoins.js
@@ -5,7 +5,9 @@ import AnimatedCheckmark from 'components/AnimatedCheckmark'
 import { btc } from 'utils'
 import styles from './SuccessfulSendCoins.scss'
 
-const SuccessfulSendCoins = ({ amount, addr, txid, hideModal, currentTicker, currency }) => {
+const SuccessfulSendCoins = ({
+  amount, addr, txid, hideModal, currentTicker, currency
+}) => {
   const calculatedAmount = currency === 'usd' ? btc.satoshisToUsd(amount, currentTicker.price_usd) : btc.satoshisToBtc(amount)
 
   return (
diff --git a/app/components/Network/TransactionForm.js b/app/components/Network/TransactionForm.js
index f681b14c..5c226057 100644
--- a/app/components/Network/TransactionForm.js
+++ b/app/components/Network/TransactionForm.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import { btc } from 'utils'
 import styles from './TransactionForm.scss'
 
-const TransactionForm = ({ updatePayReq, pay_req, loadingRoutes, payReqRoutes, setCurrentRoute, currentRoute }) => (
+const TransactionForm = ({
+  updatePayReq, pay_req, loadingRoutes, payReqRoutes, setCurrentRoute, currentRoute
+}) => (
   <div className={styles.transactionForm}>
     <div className={styles.form}>
       <input
diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js
index 5a957f9a..8d856d6d 100644
--- a/app/components/Peers/PeerModal.js
+++ b/app/components/Peers/PeerModal.js
@@ -6,7 +6,9 @@ import { FaClose } from 'react-icons/lib/fa'
 
 import styles from './PeerModal.scss'
 
-const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
+const PeerModal = ({
+  isOpen, resetPeer, peer, disconnect
+}) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer',
diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js
index 42adfd23..69663111 100644
--- a/app/components/Wallet/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal.js
@@ -7,7 +7,9 @@ import { showNotification } from 'notifications'
 import { FaCopy, FaClose } from 'react-icons/lib/fa'
 import styles from './ReceiveModal.scss'
 
-const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode }) => {
+const ReceiveModal = ({
+  isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode
+}) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer'
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 62675fa9..425e2650 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -63,7 +63,7 @@ class Wallet extends Component {
           </div>
           <div className={styles.right}>
             <div className={styles.rightContent}>
-              <div className={'buttonPrimary'} onClick={() => this.setState({ modalOpen: true })}>
+              <div className='buttonPrimary' onClick={() => this.setState({ modalOpen: true })}>
                 <FaQrcode />
                 Address
               </div>
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index 606d52a0..adc95d2c 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -15,7 +15,7 @@ const BufferUtil = bitcore.util.buffer
  */
 export function connectAndOpen(lnd, meta, event, payload) {
   console.log('payload: ', payload)
-  
+
   const { pubkey, host, localamt } = payload
   const channelPayload = {
     node_pubkey: BufferUtil.hexToBuffer(pubkey),
@@ -25,38 +25,38 @@ export function connectAndOpen(lnd, meta, event, payload) {
 
   return new Promise((resolve, reject) => {
     listPeers(lnd, meta)
-    .then(({ peers }) => {
-      console.log('peers: ', peers)
-
-      const peer = find(peers, { pub_key: pubkey })
-
-      if (peer) {
-        console.log('already have the peer. can open the channel now')
-        const call = lnd.openChannel(channelPayload, meta)
-          
-        call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
-        call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
-      } else {
-        console.log('connect to the peer first')
-        connectPeer(lnd, meta, { pubkey, host })
-        .then((data) => {
-          console.log('connectPeer data: ', data)
+      .then(({ peers }) => {
+        console.log('peers: ', peers)
+
+        const peer = find(peers, { pub_key: pubkey })
 
+        if (peer) {
+          console.log('already have the peer. can open the channel now')
           const call = lnd.openChannel(channelPayload, meta)
-          
+
           call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
           call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
-        })
-        .catch(err => {
-          console.log('connect peer err: ', err)
-          event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
-        })
-      }
-    })
-    .catch(err => {
-      console.log('list peer err: ', err)
-      event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
-    })
+        } else {
+          console.log('connect to the peer first')
+          connectPeer(lnd, meta, { pubkey, host })
+            .then((data) => {
+              console.log('connectPeer data: ', data)
+
+              const call = lnd.openChannel(channelPayload, meta)
+
+              call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
+              call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
+            })
+            .catch((err) => {
+              console.log('connect peer err: ', err)
+              event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
+            })
+        }
+      })
+      .catch((err) => {
+        console.log('list peer err: ', err)
+        event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
+      })
   })
 }
 
@@ -79,8 +79,7 @@ export function openChannel(lnd, meta, event, payload) {
   return new Promise((resolve, reject) =>
     pushopenchannel(lnd, meta, event, res)
       .then(data => resolve(data))
-      .catch(error => reject(error))
-  )
+      .catch(error => reject(error)))
 }
 
 
diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index b8c7b1c3..f45ad419 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -74,8 +74,7 @@ export default function (lnd, meta, event, msg, data) {
     // [ { channels: [] }, { total_limbo_balance: 0, pending_open_channels: [], pending_closing_channels: [], pending_force_closing_channels: [] } ]
       Promise.all([channelController.listChannels, channelController.pendingChannels].map(func => func(lnd, meta)))
         .then(channelsData =>
-          event.sender.send('receiveChannels', { channels: channelsData[0].channels, pendingChannels: channelsData[1] })
-        )
+          event.sender.send('receiveChannels', { channels: channelsData[0].channels, pendingChannels: channelsData[1] }))
         .catch(error => console.log('channels error: ', error))
       break
     case 'transactions':
@@ -123,8 +122,7 @@ export default function (lnd, meta, event, msg, data) {
               r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex'),
               creation_date: Date.now() / 1000
             })
-          )
-        )
+          ))
         .catch((error) => {
           console.log('addInvoice error: ', error)
           event.sender.send('invoiceFailed', { error: error.toString() })
diff --git a/app/reducers/balance.js b/app/reducers/balance.js
index 4da402fe..b8a74920 100644
--- a/app/reducers/balance.js
+++ b/app/reducers/balance.js
@@ -31,7 +31,9 @@ export const receiveBalance = (event, { walletBalance, channelBalance }) => (dis
 const ACTION_HANDLERS = {
   [GET_BALANCE]: state => ({ ...state, balanceLoading: true }),
   [RECEIVE_BALANCE]: (state, { walletBalance, channelBalance }) => (
-    { ...state, balanceLoading: false, walletBalance, channelBalance }
+    {
+      ...state, balanceLoading: false, walletBalance, channelBalance
+    }
   )
 }
 
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 171dc77c..8af72d42 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -152,7 +152,9 @@ export const fetchChannels = () => async (dispatch) => {
 export const receiveChannels = (event, { channels, pendingChannels }) => dispatch => dispatch({ type: RECEIVE_CHANNELS, channels, pendingChannels })
 
 // Send IPC event for opening a channel
-export const openChannel = ({ pubkey, host, local_amt, push_amt }) => (dispatch) => {
+export const openChannel = ({
+  pubkey, host, local_amt, push_amt
+}) => (dispatch) => {
   const localamt = btc.btcToSatoshis(local_amt)
 
   console.log('localamt: ', localamt)
@@ -325,7 +327,9 @@ const ACTION_HANDLERS = {
 
   [GET_CHANNELS]: state => ({ ...state, channelsLoading: true }),
   [RECEIVE_CHANNELS]: (state, { channels, pendingChannels }) => (
-    { ...state, channelsLoading: false, channels, pendingChannels }
+    {
+      ...state, channelsLoading: false, channels, pendingChannels
+    }
   ),
 
   [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }),
@@ -339,13 +343,13 @@ const ACTION_HANDLERS = {
 
   [TOGGLE_CHANNEL_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
   [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }),
-  
+
   [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
   [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }),
 
   [ADD_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: [chanId, ...state.closingChannelIds] }),
   [REMOVE_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId) }),
-  
+
   [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }),
   [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } })
 }
diff --git a/app/reducers/invoice.js b/app/reducers/invoice.js
index 43932ccf..63c181e2 100644
--- a/app/reducers/invoice.js
+++ b/app/reducers/invoice.js
@@ -125,7 +125,7 @@ export const invoiceFailed = (event, { error }) => (dispatch) => {
   dispatch(setError(error))
 }
 
-// Listen for invoice updates pushed from backend from subscribeToInvoices 
+// Listen for invoice updates pushed from backend from subscribeToInvoices
 export const invoiceUpdate = (event, { invoice }) => (dispatch) => {
   dispatch({ type: UPDATE_INVOICE, invoice })
 
diff --git a/app/reducers/network.js b/app/reducers/network.js
index 511ba41a..e8607d64 100644
--- a/app/reducers/network.js
+++ b/app/reducers/network.js
@@ -158,7 +158,9 @@ export const receiveInvoiceAndQueryRoutes = (event, { routes }) => dispatch =>
 // ------------------------------------
 const ACTION_HANDLERS = {
   [GET_DESCRIBE_NETWORK]: state => ({ ...state, networkLoading: true }),
-  [RECEIVE_DESCRIBE_NETWORK]: (state, { nodes, edges }) => ({ ...state, networkLoading: false, nodes, edges }),
+  [RECEIVE_DESCRIBE_NETWORK]: (state, { nodes, edges }) => ({
+    ...state, networkLoading: false, nodes, edges
+  }),
 
   [GET_QUERY_ROUTES]: (state, { pubkey }) => ({ ...state, networkLoading: true, selectedNode: { pubkey, routes: [], currentRoute: {} } }),
   [RECEIVE_QUERY_ROUTES]: (state, { routes }) => (
diff --git a/app/reducers/peers.js b/app/reducers/peers.js
index 7d88b705..9c1364ec 100644
--- a/app/reducers/peers.js
+++ b/app/reducers/peers.js
@@ -108,13 +108,17 @@ export const disconnectSuccess = (event, { pubkey }) => dispatch => dispatch({ t
 const ACTION_HANDLERS = {
   [DISCONNECT_PEER]: state => ({ ...state, disconnecting: true }),
   [DISCONNECT_SUCCESS]: (state, { pubkey }) => (
-    { ...state, disconnecting: false, peer: null, peers: state.peers.filter(peer => peer.pub_key !== pubkey) }
+    {
+      ...state, disconnecting: false, peer: null, peers: state.peers.filter(peer => peer.pub_key !== pubkey)
+    }
   ),
   [DISCONNECT_FAILURE]: state => ({ ...state, disconnecting: false }),
 
   [CONNECT_PEER]: state => ({ ...state, connecting: true }),
   [CONNECT_SUCCESS]: (state, { peer }) => (
-    { ...state, connecting: false, peerForm: { pubkey: '', host: '', isOpen: false }, peers: [...state.peers, peer] }
+    {
+      ...state, connecting: false, peerForm: { pubkey: '', host: '', isOpen: false }, peers: [...state.peers, peer]
+    }
   ),
   [CONNECT_FAILURE]: state => ({ ...state, connecting: false }),
 
diff --git a/app/reducers/ticker.js b/app/reducers/ticker.js
index c796a99f..32665a5a 100644
--- a/app/reducers/ticker.js
+++ b/app/reducers/ticker.js
@@ -68,7 +68,9 @@ const ACTION_HANDLERS = {
   [SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }),
   [GET_TICKERS]: state => ({ ...state, tickerLoading: true }),
   [RECIEVE_TICKERS]: (state, { btcTicker, ltcTicker }) => (
-    { ...state, tickerLoading: false, btcTicker, ltcTicker }
+    {
+      ...state, tickerLoading: false, btcTicker, ltcTicker
+    }
   )
 }
 
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index 886bb200..c32ae56f 100644
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@@ -45,7 +45,9 @@ export const fetchTransactions = () => (dispatch) => {
 // Receive IPC event for payments
 export const receiveTransactions = (event, { transactions }) => dispatch => dispatch({ type: RECEIVE_TRANSACTIONS, transactions })
 
-export const sendCoins = ({ value, addr, currency, rate }) => (dispatch) => {
+export const sendCoins = ({
+  value, addr, currency, rate
+}) => (dispatch) => {
   const amount = currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(value, rate)) : btc.btcToSatoshis(value)
   dispatch(sendTransaction())
   ipcRenderer.send('lnd', { msg: 'sendCoins', data: { amount, addr } })
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index 497ab8f1..2af22af4 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -20,7 +20,9 @@ class Activity extends Component {
   }
 
   componentWillMount() {
-    const { fetchPayments, fetchInvoices, fetchTransactions, fetchBalance } = this.props
+    const {
+      fetchPayments, fetchInvoices, fetchTransactions, fetchBalance
+    } = this.props
 
     fetchBalance()
     fetchPayments()
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 441d05e0..78f040c4 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -6,7 +6,9 @@ import { FaBolt, FaClockO } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from '../Activity.scss'
 
-const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
+const Invoice = ({
+  invoice, ticker, currentTicker, showActivityModal
+}) => (
   <div className={styles.container} onClick={() => showActivityModal('INVOICE', { invoice })}>
     {
       !invoice.settled ?
diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js
index 4ec34da6..f6c3c97a 100644
--- a/app/routes/activity/components/components/Modal/Modal.js
+++ b/app/routes/activity/components/components/Modal/Modal.js
@@ -9,7 +9,9 @@ import Invoice from './Invoice'
 
 import styles from './Modal.scss'
 
-const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => {
+const Modal = ({
+  modalType, modalProps, hideActivityModal, ticker, currentTicker
+}) => {
   const MODAL_COMPONENTS = {
     TRANSACTION: Transaction,
     PAYMENT: Payment,
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 8998fce7..ecf5ceed 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -6,7 +6,9 @@ import { FaBolt } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from '../Activity.scss'
 
-const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
+const Payment = ({
+  payment, ticker, currentTicker, showActivityModal
+}) => (
   <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
     <div className={styles.date}>
       <Moment format='D'>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index e2d1b993..36fd7fff 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -6,7 +6,9 @@ import { FaChain } from 'react-icons/lib/fa'
 import { btc } from 'utils'
 import styles from '../Activity.scss'
 
-const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
+const Transaction = ({
+  transaction, ticker, currentTicker, showActivityModal
+}) => (
   <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
     <div className={styles.date}>
       <Moment format='D'>
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index b3932b71..d24346ae 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -57,7 +57,7 @@ class Contacts extends Component {
       toggleFilterPulldown,
       changeFilter,
       nonActiveFilters,
-      
+
       openContactsForm,
       openContactModal,
       closeContactModal,
@@ -163,7 +163,7 @@ class Contacts extends Component {
           {
             currentChannels.length > 0 && currentChannels.map((channel, index) => {
               if (closingChannelIds.includes(channel.chan_id)) {
-                return <LoadingContact pubkey={channel.remote_pubkey} isClosing={true} />
+                return <LoadingContact pubkey={channel.remote_pubkey} isClosing />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
                 return <PendingContact channel={channel} key={index} />
               } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
diff --git a/app/routes/network/components/Network.js b/app/routes/network/components/Network.js
index c44aa2c3..22feae30 100644
--- a/app/routes/network/components/Network.js
+++ b/app/routes/network/components/Network.js
@@ -18,7 +18,9 @@ class Network extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { payReqIsLn, network: { pay_req }, fetchInvoiceAndQueryRoutes, clearQueryRoutes } = this.props
+    const {
+      payReqIsLn, network: { pay_req }, fetchInvoiceAndQueryRoutes, clearQueryRoutes
+    } = this.props
 
     // If LN go retrieve invoice details
     if ((prevProps.network.pay_req !== pay_req) && payReqIsLn) {
@@ -31,7 +33,9 @@ class Network extends Component {
   }
 
   componentWillUnmount() {
-    const { clearQueryRoutes, resetPayReq, clearSelectedChannels, clearSelectedPeers } = this.props
+    const {
+      clearQueryRoutes, resetPayReq, clearSelectedChannels, clearSelectedPeers
+    } = this.props
 
     clearQueryRoutes()
     resetPayReq()
diff --git a/internals/scripts/CheckBuiltsExist.js b/internals/scripts/CheckBuiltsExist.js
index 99ba4985..ef876c3c 100644
--- a/internals/scripts/CheckBuiltsExist.js
+++ b/internals/scripts/CheckBuiltsExist.js
@@ -9,15 +9,11 @@ function CheckBuildsExist() {
   const rendererPath = path.join(__dirname, '..', '..', 'app', 'dist', 'renderer.prod.js')
 
   if (!fs.existsSync(mainPath)) {
-    throw new Error(chalk.whiteBright.bgRed.bold(
-      'The main process is not built yet. Build it by running "npm run build-main"'
-    ))
+    throw new Error(chalk.whiteBright.bgRed.bold('The main process is not built yet. Build it by running "npm run build-main"'))
   }
 
   if (!fs.existsSync(rendererPath)) {
-    throw new Error(chalk.whiteBright.bgRed.bold(
-      'The renderer process is not built yet. Build it by running "npm run build-renderer"'
-    ))
+    throw new Error(chalk.whiteBright.bgRed.bold('The renderer process is not built yet. Build it by running "npm run build-renderer"'))
   }
 }
 

From e793efa1ede81a1c54b9265a8f83823edf9159fd Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 8 Jan 2018 19:23:36 -0600
Subject: [PATCH 21/22] fix(lint): fix linting errors

---
 .eslintrc                                     |   8 +
 app/components/ChannelForm/ChannelForm.js     |  90 -----
 app/components/ChannelForm/ChannelForm.scss   |  57 ----
 app/components/ChannelForm/Footer.js          |  46 ---
 app/components/ChannelForm/Footer.scss        |  17 -
 app/components/ChannelForm/StepFour.js        |  37 ---
 app/components/ChannelForm/StepFour.scss      |  36 --
 app/components/ChannelForm/StepOne.js         |  74 -----
 app/components/ChannelForm/StepOne.scss       |  74 -----
 app/components/ChannelForm/StepThree.js       |  50 ---
 app/components/ChannelForm/StepThree.scss     |  58 ----
 app/components/ChannelForm/StepTwo.js         |  49 ---
 app/components/ChannelForm/StepTwo.scss       |  58 ----
 app/components/ChannelForm/index.js           |   3 -
 app/components/Channels/Channel.js            |  95 ------
 app/components/Channels/Channel.scss          | 125 -------
 app/components/Channels/ChannelForm.js        | 128 --------
 app/components/Channels/ChannelForm.scss      | 123 -------
 app/components/Channels/ChannelModal.js       | 103 ------
 app/components/Channels/ChannelModal.scss     | 124 -------
 app/components/Channels/Channels.js           | 140 --------
 app/components/Channels/Channels.scss         |  69 ----
 .../Channels/ClosedPendingChannel.js          |  69 ----
 .../Channels/ClosedPendingChannel.scss        |  95 ------
 app/components/Channels/OpenPendingChannel.js |  72 ----
 .../Channels/OpenPendingChannel.scss          |  98 ------
 app/components/Channels/index.js              |   3 -
 app/components/Contacts/ClosingContact.js     |   2 +-
 app/components/Contacts/ContactModal.js       |   7 +-
 app/components/Contacts/ContactsForm.js       |  16 +-
 app/components/Contacts/Donut.js              |  31 --
 app/components/Contacts/Donut.scss            |  20 --
 app/components/Contacts/LoadingContact.js     |   4 +-
 app/components/Contacts/OfflineContact.js     |   3 +-
 app/components/Contacts/OnlineContact.js      |   3 +-
 app/components/Contacts/PendingContact.js     |   2 +-
 app/components/Form/RequestForm.js            |   6 +-
 app/components/Network/CanvasNetworkGraph.js  |   1 -
 app/components/Peers/Peer.js                  |  20 --
 app/components/Peers/Peer.scss                |  38 ---
 app/components/Peers/PeerForm.js              |  71 ----
 app/components/Peers/PeerForm.scss            | 107 ------
 app/components/Peers/PeerModal.js             |  80 -----
 app/components/Peers/PeerModal.scss           |  75 -----
 app/lnd/methods/channelController.js          |  21 +-
 app/lnd/methods/index.js                      |   6 +-
 app/lnd/methods/paymentsController.js         |   4 +-
 app/lnd/subscribe/channelgraph.js             |   5 -
 app/reducers/channels.js                      |  61 ++--
 app/reducers/contactsform.js                  |   1 -
 app/reducers/lnd.js                           |   4 +-
 app/routes/contacts/components/Contacts.js    |  33 +-
 app/store/configureStore.dev.js               |   3 +-
 test/components/Channels.spec.js              | 125 -------
 test/components/Peers.spec.js                 |  72 ----
 .../__snapshots__/balance.spec.js.snap        |  33 --
 .../__snapshots__/channels.spec.js.snap       | 308 ------------------
 test/reducers/__snapshots__/form.spec.js.snap |  13 -
 test/reducers/__snapshots__/info.spec.js.snap |  22 --
 .../__snapshots__/invoice.spec.js.snap        | 171 ----------
 .../__snapshots__/payment.spec.js.snap        |  49 ---
 .../reducers/__snapshots__/peers.spec.js.snap | 182 -----------
 .../__snapshots__/ticker.spec.js.snap         |  51 ---
 63 files changed, 97 insertions(+), 3454 deletions(-)
 delete mode 100644 app/components/ChannelForm/ChannelForm.js
 delete mode 100644 app/components/ChannelForm/ChannelForm.scss
 delete mode 100644 app/components/ChannelForm/Footer.js
 delete mode 100644 app/components/ChannelForm/Footer.scss
 delete mode 100644 app/components/ChannelForm/StepFour.js
 delete mode 100644 app/components/ChannelForm/StepFour.scss
 delete mode 100644 app/components/ChannelForm/StepOne.js
 delete mode 100644 app/components/ChannelForm/StepOne.scss
 delete mode 100644 app/components/ChannelForm/StepThree.js
 delete mode 100644 app/components/ChannelForm/StepThree.scss
 delete mode 100644 app/components/ChannelForm/StepTwo.js
 delete mode 100644 app/components/ChannelForm/StepTwo.scss
 delete mode 100644 app/components/ChannelForm/index.js
 delete mode 100644 app/components/Channels/Channel.js
 delete mode 100644 app/components/Channels/Channel.scss
 delete mode 100644 app/components/Channels/ChannelForm.js
 delete mode 100644 app/components/Channels/ChannelForm.scss
 delete mode 100644 app/components/Channels/ChannelModal.js
 delete mode 100644 app/components/Channels/ChannelModal.scss
 delete mode 100644 app/components/Channels/Channels.js
 delete mode 100644 app/components/Channels/Channels.scss
 delete mode 100644 app/components/Channels/ClosedPendingChannel.js
 delete mode 100644 app/components/Channels/ClosedPendingChannel.scss
 delete mode 100644 app/components/Channels/OpenPendingChannel.js
 delete mode 100644 app/components/Channels/OpenPendingChannel.scss
 delete mode 100644 app/components/Channels/index.js
 delete mode 100644 app/components/Contacts/Donut.js
 delete mode 100644 app/components/Contacts/Donut.scss
 delete mode 100644 app/components/Peers/Peer.js
 delete mode 100644 app/components/Peers/Peer.scss
 delete mode 100644 app/components/Peers/PeerForm.js
 delete mode 100644 app/components/Peers/PeerForm.scss
 delete mode 100644 app/components/Peers/PeerModal.js
 delete mode 100644 app/components/Peers/PeerModal.scss
 delete mode 100644 test/components/Channels.spec.js
 delete mode 100644 test/components/Peers.spec.js
 delete mode 100644 test/reducers/__snapshots__/balance.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/channels.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/form.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/info.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/invoice.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/payment.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/peers.spec.js.snap
 delete mode 100644 test/reducers/__snapshots__/ticker.spec.js.snap

diff --git a/.eslintrc b/.eslintrc
index 096e0b74..be435af2 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,6 +17,14 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/label-has-for": [ 2, {
+      "components": [ "Label" ],
+      "required": {
+        "every": [ "id" ]
+      },
+      "allowChildren": false
+    }],
     "react/no-array-index-key": 0,
     "react/forbid-prop-types": 0,
     "camelcase": 0,
diff --git a/app/components/ChannelForm/ChannelForm.js b/app/components/ChannelForm/ChannelForm.js
deleted file mode 100644
index 5b25cde0..00000000
--- a/app/components/ChannelForm/ChannelForm.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-
-import { FaClose } from 'react-icons/lib/fa'
-
-import StepOne from './StepOne'
-import StepTwo from './StepTwo'
-import StepThree from './StepThree'
-import StepFour from './StepFour'
-import Footer from './Footer'
-
-import styles from './ChannelForm.scss'
-
-const ChannelForm = ({
-  channelform,
-  openChannel,
-  closeChannelForm,
-  changeStep,
-  setNodeKey,
-  setLocalAmount,
-  setPushAmount,
-  channelFormHeader,
-  channelFormProgress,
-  stepTwoIsValid,
-  peers
-}) => {
-  const renderStep = () => {
-    const { step } = channelform
-
-    switch (step) {
-      case 1:
-        return <StepOne peers={peers} changeStep={changeStep} setNodeKey={setNodeKey} />
-      case 2:
-        return <StepTwo local_amt={channelform.local_amt} setLocalAmount={setLocalAmount} />
-      case 3:
-        return <StepThree push_amt={channelform.push_amt} setPushAmount={setPushAmount} />
-      default:
-        return <StepFour node_key={channelform.node_key} local_amt={channelform.local_amt} push_amt={channelform.push_amt} />
-    }
-  }
-
-  return (
-    <ReactModal
-      isOpen={channelform.isOpen}
-      ariaHideApp
-      shouldCloseOnOverlayClick
-      contentLabel='No Overlay Click Modal'
-      onRequestClose={closeChannelForm}
-      parentSelector={() => document.body}
-      className={styles.modal}
-    >
-      <div onClick={closeChannelForm} className={styles.modalClose}>
-        <FaClose />
-      </div>
-
-      <header className={styles.header}>
-        <h3>{channelFormHeader}</h3>
-        <div className={styles.progress} style={{ width: `${channelFormProgress}%` }} />
-      </header>
-
-      <div className={styles.content}>
-        {renderStep()}
-      </div>
-
-      <Footer
-        step={channelform.step}
-        changeStep={changeStep}
-        stepTwoIsValid={stepTwoIsValid}
-        submit={() => openChannel({ pubkey: channelform.node_key, local_amt: channelform.local_amt, push_amt: channelform.push_amt })}
-      />
-    </ReactModal>
-  )
-}
-
-ChannelForm.propTypes = {
-  channelform: PropTypes.object.isRequired,
-  openChannel: PropTypes.func.isRequired,
-  closeChannelForm: PropTypes.func.isRequired,
-  changeStep: PropTypes.func.isRequired,
-  setNodeKey: PropTypes.func.isRequired,
-  setLocalAmount: PropTypes.func.isRequired,
-  setPushAmount: PropTypes.func.isRequired,
-  channelFormHeader: PropTypes.string.isRequired,
-  channelFormProgress: PropTypes.number.isRequired,
-  stepTwoIsValid: PropTypes.bool.isRequired,
-  peers: PropTypes.array.isRequired
-}
-
-export default ChannelForm
diff --git a/app/components/ChannelForm/ChannelForm.scss b/app/components/ChannelForm/ChannelForm.scss
deleted file mode 100644
index 4e7ecdce..00000000
--- a/app/components/ChannelForm/ChannelForm.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import '../../variables.scss';
-
-.modal {
-  width: 40%;
-  margin: 50px auto;
-  position: absolute;
-  top: auto;
-  left: 20%;
-  right: 0;
-  bottom: auto;
-  background: $white;
-  outline: none;
-  z-index: -2;
-  border: 1px solid $darkgrey;
-}
-
-.modalClose {
-  position: absolute;
-  top: -13px;
-  right: -13px;
-  display: block;
-  font-size: 16px;
-  line-height: 27px;
-  width: 32px;
-  height: 32px;
-  background: $white;
-  border-radius: 50%;
-  color: $darkestgrey;
-  cursor: pointer;
-  text-align: center;
-  z-index: 2;
-  transition: all 0.25s;
-}
-
-.modalClose:hover {
-  background: $darkgrey;
-}
-
-.header {
-  padding: 20px;
-  background: $lightgrey;
-  text-align: center;
-  font-family: 'Jigsaw Light';
-  text-transform: uppercase;
-  position: relative;
-  z-index: -2;
-}
-
-.progress {
-  transition: all 0.2s ease;
-  background: $main;
-  position: absolute;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
diff --git a/app/components/ChannelForm/Footer.js b/app/components/ChannelForm/Footer.js
deleted file mode 100644
index cba26b01..00000000
--- a/app/components/ChannelForm/Footer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Footer.scss'
-
-const Footer = ({
-  step, changeStep, stepTwoIsValid, submit
-}) => {
-  if (step === 1) { return null }
-
-  // See if the next button on step 2 should be active
-  const nextIsInactive = step === 2 && !stepTwoIsValid
-
-  // Function that's called when the user clicks "next" in the form
-  const nextFunc = () => {
-    if (nextIsInactive) { return }
-
-    changeStep(step + 1)
-  }
-
-  const rightButtonText = step === 4 ? 'Submit' : 'Next'
-  const rightButtonOnClick = step === 4 ? () => submit() : nextFunc
-
-  return (
-    <div className={styles.footer}>
-      <div className='buttonContainer'>
-        <div className='buttonPrimary' onClick={() => changeStep(step - 1)}>
-          Back
-        </div>
-      </div>
-      <div className='buttonContainer' onClick={rightButtonOnClick}>
-        <div className={`buttonPrimary ${nextIsInactive && 'inactive'}`}>
-          {rightButtonText}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-Footer.propTypes = {
-  step: PropTypes.number.isRequired,
-  changeStep: PropTypes.func.isRequired,
-  stepTwoIsValid: PropTypes.bool.isRequired,
-  submit: PropTypes.func.isRequired
-}
-
-export default Footer
diff --git a/app/components/ChannelForm/Footer.scss b/app/components/ChannelForm/Footer.scss
deleted file mode 100644
index 7d345b72..00000000
--- a/app/components/ChannelForm/Footer.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../../variables.scss';
-
-.footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-bottom: 30px;
-
-  div {
-    margin: 0 20px;
-
-    div {
-      padding: 18px 60px 15px 60px;
-      color: $black;
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/components/ChannelForm/StepFour.js b/app/components/ChannelForm/StepFour.js
deleted file mode 100644
index a1f64582..00000000
--- a/app/components/ChannelForm/StepFour.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './StepFour.scss'
-
-const StepFour = ({ node_key, local_amt, push_amt }) => (
-  <div className={styles.container}>
-    <div className={styles.nodekey}>
-      <h4>Peer</h4>
-      <h2>{node_key}</h2>
-    </div>
-
-    <div className={styles.amounts}>
-      <div className={styles.localamt}>
-        <h4>Local Amount</h4>
-        <h3>{local_amt}</h3>
-      </div>
-      <div className={styles.pushamt}>
-        <h4>Push Amount</h4>
-        <h3>{push_amt}</h3>
-      </div>
-    </div>
-  </div>
-)
-
-StepFour.propTypes = {
-  node_key: PropTypes.string.isRequired,
-  local_amt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
-  push_amt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ])
-}
-
-export default StepFour
diff --git a/app/components/ChannelForm/StepFour.scss b/app/components/ChannelForm/StepFour.scss
deleted file mode 100644
index 8332f5a6..00000000
--- a/app/components/ChannelForm/StepFour.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import '../../variables.scss';
-
-.container {
-  padding: 50px;
-  
-  h4 {
-    text-transform: uppercase;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-
-  h3 {
-    text-align: center;
-    color: $main;
-    font-size: 50px;
-  }
-}
-
-.nodekey {
-  margin-bottom: 50px;
-  padding: 20px;
-  border-bottom: 1px solid $main;
-
-  h2 {
-    font-size: 12px;
-    font-weight: bold;
-  }
-}
-
-.amounts {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  margin-bottom: 50px;
-  padding: 20px;
-}
\ No newline at end of file
diff --git a/app/components/ChannelForm/StepOne.js b/app/components/ChannelForm/StepOne.js
deleted file mode 100644
index 9758cc27..00000000
--- a/app/components/ChannelForm/StepOne.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { MdSearch } from 'react-icons/lib/md'
-import styles from './StepOne.scss'
-
-class StepOne extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      peers: props.peers,
-      searchQuery: ''
-    }
-
-    this.onSearchQuery = this.onSearchQuery.bind(this)
-    this.peerClicked = this.peerClicked.bind(this)
-  }
-
-  onSearchQuery(searchQuery) {
-    const peers = this.props.peers.filter(peer => peer.pub_key.includes(searchQuery))
-
-    this.setState({ peers, searchQuery })
-  }
-
-  peerClicked(peer) {
-    const { setNodeKey, changeStep } = this.props
-
-    setNodeKey(peer.pub_key)
-    changeStep(2)
-  }
-
-  render() {
-    const { peers, searchQuery } = this.state
-
-    return (
-      <div>
-        <div className={styles.search}>
-          <label className={`${styles.label} ${styles.input}`} htmlFor='peersSearch'>
-            <MdSearch />
-          </label>
-          <input
-            value={searchQuery}
-            onChange={event => this.onSearchQuery(event.target.value)}
-            className={`${styles.text} ${styles.input}`}
-            placeholder='Search your peers by their public key'
-            type='text'
-            id='peersSearch'
-          />
-        </div>
-
-        <ul className={styles.peers}>
-          {peers.length > 0 &&
-            peers.map(peer => (
-              <li
-                key={peer.peer_id}
-                className={styles.peer}
-                onClick={() => this.peerClicked(peer)}
-              >
-                <h4>{peer.address}</h4>
-                <h1>{peer.pub_key}</h1>
-              </li>
-            ))}
-        </ul>
-      </div>
-    )
-  }
-}
-
-StepOne.propTypes = {
-  peers: PropTypes.array.isRequired,
-  setNodeKey: PropTypes.func.isRequired,
-  changeStep: PropTypes.func.isRequired
-}
-
-export default StepOne
diff --git a/app/components/ChannelForm/StepOne.scss b/app/components/ChannelForm/StepOne.scss
deleted file mode 100644
index a9f25c73..00000000
--- a/app/components/ChannelForm/StepOne.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@import '../../variables.scss';
-
-.peers {
-  h2 {
-    text-transform: uppercase;
-    font-weight: 200;
-    padding: 10px 0;
-    border-bottom: 1px solid $grey;
-    color: $darkestgrey;
-  }
-}
-
-.search {
-  height: 50px;
-  padding: 2px;
-  border-bottom: 1px solid $darkgrey;
-
-  .input {
-    display: inline-block;
-    vertical-align: top;
-    height: 100%;
-  }
-
-  .label {
-    width: 5%;
-    line-height: 50px;
-    font-size: 16px;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .text {
-    width: 95%;
-    outline: 0;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    height: 50px;
-    font-size: 16px;
-  }
-}
-
-.peer {
-  position: relative;
-  background: $white;
-  padding: 10px;
-  border-top: 1px solid $grey;
-  cursor: pointer;
-  transition: all 0.25s;
-
-  &:hover {
-    opacity: 0.5;
-  }
-
-  &:first-child {
-    border: none;
-  }
-
-  h4, h1 {
-    margin: 10px 0;
-  }
-
-  h4 {
-    font-size: 12px;
-    font-weight: bold;
-    color: $black;
-  }
-
-  h1 {
-    font-size: 14px;
-    font-weight: 200;
-    color: $main;
-  }
-}
\ No newline at end of file
diff --git a/app/components/ChannelForm/StepThree.js b/app/components/ChannelForm/StepThree.js
deleted file mode 100644
index d7045391..00000000
--- a/app/components/ChannelForm/StepThree.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyIcon from 'components/CurrencyIcon'
-import styles from './StepThree.scss'
-
-class StepThree extends Component {
-  render() {
-    const { push_amt, setPushAmount } = this.props
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.explainer}>
-          <h2>Push Amount</h2>
-          <p>
-            The push amount is the amount of bitcoin (if any at all) you&apos;d like
-            to &quot;push&quot; to the other side of the channel when it opens.
-            This amount will be set on the remote side of the channel as part of the initial commitment state.
-          </p>
-        </div>
-
-        <form>
-          <label htmlFor='amount'>
-            <CurrencyIcon currency='btc' crypto='btc' />
-          </label>
-          <input
-            type='number'
-            min='0'
-            max='0.16'
-            ref={(input) => { this.input = input }}
-            size=''
-            value={push_amt}
-            onChange={event => setPushAmount(event.target.value)}
-            id='amount'
-            style={{ width: isNaN((push_amt.length + 1) * 55) ? 140 : (push_amt.length + 1) * 55 }}
-          />
-        </form>
-      </div>
-    )
-  }
-}
-
-StepThree.propTypes = {
-  push_amt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]).isRequired,
-  setPushAmount: PropTypes.func.isRequired
-}
-
-export default StepThree
diff --git a/app/components/ChannelForm/StepThree.scss b/app/components/ChannelForm/StepThree.scss
deleted file mode 100644
index 0a5e6370..00000000
--- a/app/components/ChannelForm/StepThree.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../variables.scss';
-
-.container {
-  margin-bottom: 50px;
-  padding: 20px;
-
-  .explainer {
-    margin: 0px 0 50px 0;
-    padding-bottom: 20px;
-    border-bottom: 1px solid $lightgrey;
-
-    h2 {
-      margin: 0 0 20px 0;
-      font-size: 28px;
-    }
-
-    p {
-      line-height: 1.5;
-      font-size: 16px;
-    }
-  }
-
-  form {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  label {
-    height: 200px;
-    color: $main;
-
-    svg {
-      width: 65px;
-      height: 65px;
-    }
-
-    svg[data-icon='ltc'] {
-      margin-right: 10px;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-  }
-  
-  input[type=number] {
-    color: $main;
-    width: 30px;
-    height: 200px;
-    font-size: 100px;
-    font-weight: 200;
-    border: none;
-    outline: 0;
-    -webkit-appearance: none;
-  }
-}
\ No newline at end of file
diff --git a/app/components/ChannelForm/StepTwo.js b/app/components/ChannelForm/StepTwo.js
deleted file mode 100644
index b4a6e4cb..00000000
--- a/app/components/ChannelForm/StepTwo.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyIcon from 'components/CurrencyIcon'
-import styles from './StepTwo.scss'
-
-class StepTwo extends Component {
-  render() {
-    const { local_amt, setLocalAmount } = this.props
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.explainer}>
-          <h2>Local Amount</h2>
-          <p>
-            Local amount is the amount of bitcoin that you would like to commit to the channel.
-            This is the amount that will be sent in an on-chain transaction to open your Lightning channel.
-          </p>
-        </div>
-
-        <form>
-          <label htmlFor='amount'>
-            <CurrencyIcon currency='btc' crypto='btc' />
-          </label>
-          <input
-            type='number'
-            min='0'
-            max='0.16'
-            ref={(input) => { this.input = input }}
-            size=''
-            value={local_amt}
-            onChange={event => setLocalAmount(event.target.value)}
-            id='amount'
-            style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }}
-          />
-        </form>
-      </div>
-    )
-  }
-}
-
-StepTwo.propTypes = {
-  local_amt: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]).isRequired,
-  setLocalAmount: PropTypes.func.isRequired
-}
-
-export default StepTwo
diff --git a/app/components/ChannelForm/StepTwo.scss b/app/components/ChannelForm/StepTwo.scss
deleted file mode 100644
index 0a5e6370..00000000
--- a/app/components/ChannelForm/StepTwo.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../variables.scss';
-
-.container {
-  margin-bottom: 50px;
-  padding: 20px;
-
-  .explainer {
-    margin: 0px 0 50px 0;
-    padding-bottom: 20px;
-    border-bottom: 1px solid $lightgrey;
-
-    h2 {
-      margin: 0 0 20px 0;
-      font-size: 28px;
-    }
-
-    p {
-      line-height: 1.5;
-      font-size: 16px;
-    }
-  }
-
-  form {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  label {
-    height: 200px;
-    color: $main;
-
-    svg {
-      width: 65px;
-      height: 65px;
-    }
-
-    svg[data-icon='ltc'] {
-      margin-right: 10px;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-  }
-  
-  input[type=number] {
-    color: $main;
-    width: 30px;
-    height: 200px;
-    font-size: 100px;
-    font-weight: 200;
-    border: none;
-    outline: 0;
-    -webkit-appearance: none;
-  }
-}
\ No newline at end of file
diff --git a/app/components/ChannelForm/index.js b/app/components/ChannelForm/index.js
deleted file mode 100644
index a30b36cb..00000000
--- a/app/components/ChannelForm/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ChannelForm from './ChannelForm'
-
-export default ChannelForm
diff --git a/app/components/Channels/Channel.js b/app/components/Channels/Channel.js
deleted file mode 100644
index a2c8b487..00000000
--- a/app/components/Channels/Channel.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { FaCircle } from 'react-icons/lib/fa'
-import { btc } from 'utils'
-import styles from './Channel.scss'
-
-const Channel = ({
-  ticker, channel, closeChannel, currentTicker
-}) => (
-  <li className={styles.channel}>
-    <header className={styles.header}>
-      <div>
-        <span className={styles.status}>Open</span>
-        {
-          channel.active ?
-            <span className={styles.active}>
-              <FaCircle />
-              <i>Active</i>
-            </span>
-            :
-            <span className={styles.notactive}>
-              <FaCircle />
-              <i>Not Active</i>
-            </span>
-        }
-      </div>
-      <div>
-        <p
-          className={styles.close}
-          onClick={() => closeChannel({ channel_point: channel.channel_point })}
-        >
-          Close channel
-        </p>
-      </div>
-    </header>
-    <div className={styles.content}>
-      <div className={styles.left}>
-        <section className={styles.remotePubkey}>
-          <span>Remote Pubkey</span>
-          <h4>{channel.remote_pubkey}</h4>
-        </section>
-        <section className={styles.channelPoint}>
-          <span>Channel Point</span>
-          <h4>{channel.channel_point}</h4>
-        </section>
-      </div>
-      <div className={styles.right}>
-        <section className={styles.capacity}>
-          <span>Capacity</span>
-          <h2>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.capacity)
-                :
-                btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
-            }
-          </h2>
-        </section>
-        <div className={styles.balances}>
-          <section>
-            <span>Local</span>
-            <h4>
-              {
-                ticker.currency === 'btc' ?
-                  btc.satoshisToBtc(channel.local_balance)
-                  :
-                  btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
-              }
-            </h4>
-          </section>
-          <section>
-            <span>Remote</span>
-            <h4>
-              {
-                ticker.currency === 'btc' ?
-                  btc.satoshisToBtc(channel.remote_balance)
-                  :
-                  btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
-              }
-            </h4>
-          </section>
-        </div>
-      </div>
-    </div>
-  </li>
-)
-
-Channel.propTypes = {
-  ticker: PropTypes.object.isRequired,
-  channel: PropTypes.object.isRequired,
-  closeChannel: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default Channel
diff --git a/app/components/Channels/Channel.scss b/app/components/Channels/Channel.scss
deleted file mode 100644
index e985cf8e..00000000
--- a/app/components/Channels/Channel.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import '../../variables.scss';
-
-.channel {
-	position: relative;
-	background: $white;
-	margin: 5px 0;
-	padding: 10px;
-	border-top: 1px solid $white;
-	cursor: pointer;
-	transition: all 0.25s;
-	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-
-	&:hover {
-		opacity: 0.75;
-		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-	}
-
-	&:first-child {
-		border: none;
-	}
-
-	.header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-
-		.status, .active, .notactive {
-			padding: 10px;
-			text-transform: uppercase;
-			font-weight: bold;
-			font-size: 10px;
-		}
-
-		.status {
-			color: $main;
-		}
-
-		.active i, .notactive i {
-			margin-left: 5px;
-		}
-
-		.active {
-			color: $green;
-		}
-
-		.notactive {
-			color: $red;
-		}
-
-		.close {
-			padding: 10px;
-			font-size: 10px;
-			text-transform: uppercase;
-			color: $red;
-			cursor: pointer;
-
-			&:hover {
-				color: lighten($red, 10%);
-				text-decoration: underline;
-			}
-		}
-	}
-
-	.content {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-
-	.left, .right {
-		padding: 0 10px;
-		margin-bottom: 5;
-
-		section {
-			margin-bottom: 20px;
-
-			span {
-				text-transform: uppercase;
-				letter-spacing: 1.6px;
-				color: $black;
-				font-size: 10px;
-				font-weight: bold;
-			}
-
-			h2 {
-				font-size: 30px;
-				padding: 5px 0;
-				color: $main;
-			}
-
-			h4 {
-				margin-top: 5px;
-			}
-		}
-	}
-
-	.left {
-		flex: 7;
-	}
-
-	.right {
-		flex: 3;
-
-		.capacity {
-			text-align: center;
-			margin-bottom: 10px;
-		}
-
-		.balances {
-			display: flex;
-			justify-content: space-between;
-
-			section {
-				flex: 5;
-				text-align: center;
-
-				h4 {
-					color: $main;
-					font-size: 16px;
-				}
-			}
-		}
-	}
-}
diff --git a/app/components/Channels/ChannelForm.js b/app/components/Channels/ChannelForm.js
deleted file mode 100644
index 9f6cfd87..00000000
--- a/app/components/Channels/ChannelForm.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-import { FaUser } from 'react-icons/lib/fa'
-import CurrencyIcon from 'components/CurrencyIcon'
-import { usd, btc } from 'utils'
-import styles from './ChannelForm.scss'
-
-const ChannelForm = ({
-  form, setForm, ticker, peers, openChannel, currentTicker
-}) => {
-  const submitClicked = () => {
-    const { node_key, local_amt, push_amt } = form
-
-    const localamt = ticker.currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(local_amt, currentTicker.price_usd)) : btc.btcToSatoshis(local_amt)
-    const pushamt = ticker.currency === 'usd' ? btc.btcToSatoshis(usd.usdToBtc(push_amt, currentTicker.price_usd)) : btc.btcToSatoshis(push_amt)
-
-    openChannel({ pubkey: node_key, localamt, pushamt })
-    // setForm({ isOpen: false })
-  }
-
-  const customStyles = {
-    overlay: {
-      cursor: 'pointer',
-      overflowY: 'auto'
-    },
-    content: {
-      top: 'auto',
-      left: '20%',
-      right: '0',
-      bottom: 'auto',
-      width: '40%',
-      margin: '50px auto',
-      padding: '40px'
-    }
-  }
-
-  return (
-    <div>
-      <ReactModal
-        isOpen={form.isOpen}
-        contentLabel='No Overlay Click Modal'
-        ariaHideApp
-        shouldCloseOnOverlayClick
-        onRequestClose={() => setForm({ isOpen: false })}
-        parentSelector={() => document.body}
-        style={customStyles}
-      >
-        <div className={styles.form}>
-          <h1 className={styles.title}>Open a new channel</h1>
-
-          <section className={styles.pubkey}>
-            <label htmlFor='nodekey'><FaUser /></label>
-            <input
-              type='text'
-              size=''
-              placeholder='Peer public key'
-              value={form.node_key}
-              onChange={event => setForm({ node_key: event.target.value })}
-              id='nodekey'
-            />
-          </section>
-          <section className={styles.local}>
-            <label htmlFor='localamount'>
-              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} />
-            </label>
-            <input
-              type='text'
-              size=''
-              placeholder='Local amount'
-              value={form.local_amt}
-              onChange={event => setForm({ local_amt: event.target.value })}
-              id='localamount'
-            />
-          </section>
-          <section className={styles.push}>
-            <label htmlFor='pushamount'>
-              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} />
-            </label>
-            <input
-              type='text'
-              size=''
-              placeholder='Push amount'
-              value={form.push_amt}
-              onChange={event => setForm({ push_amt: event.target.value })}
-              id='pushamount'
-            />
-          </section>
-
-          <ul className={styles.peers}>
-            <h2>Connected Peers</h2>
-            {
-              peers.length ?
-                peers.map(peer =>
-                  (
-                    <li
-                      key={peer.peer_id}
-                      className={styles.peer}
-                      onClick={() => setForm({ node_key: peer.pub_key })}
-                    >
-                      <h4>{peer.address}</h4>
-                      <h1>{peer.pub_key}</h1>
-                    </li>
-                  ))
-                :
-                null
-            }
-          </ul>
-
-          <div className={styles.buttonGroup}>
-            <div className={styles.button} onClick={submitClicked}>Submit</div>
-          </div>
-        </div>
-      </ReactModal>
-    </div>
-  )
-}
-
-ChannelForm.propTypes = {
-  form: PropTypes.object.isRequired,
-  setForm: PropTypes.func.isRequired,
-  ticker: PropTypes.object.isRequired,
-  peers: PropTypes.array.isRequired,
-  openChannel: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired
-}
-
-export default ChannelForm
diff --git a/app/components/Channels/ChannelForm.scss b/app/components/Channels/ChannelForm.scss
deleted file mode 100644
index f76cc037..00000000
--- a/app/components/Channels/ChannelForm.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@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;
-
-    svg[data-icon='ltc'] {
-      width: 18px;
-      height: 16px;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-	}
-
-	input[type=text] {
-		width: 100%;
-		border: none;
-  	outline: 0;
-  	-webkit-appearance: none;
-  	height: 55px;
-  	padding: 0 10px;
-	}
-}
-
-.peers {
-	margin-bottom: 50px;
-
-	h2 {
-		text-transform: uppercase;
-		font-weight: 200;
-		padding: 10px 0;
-		border-bottom: 1px solid $grey;
-		color: $darkestgrey;
-	}
-}
-
-.peer {
-	position: relative;
-	background: $white;
-	padding: 10px;
-	border-top: 1px solid $grey;
-	cursor: pointer;
-	transition: all 0.25s;
-
-	&:hover {
-		opacity: 0.5;
-	}
-
-	&:first-child {
-		border: none;
-	}
-
-	h4, h1 {
-		margin: 10px 0;
-	}
-
-	h4 {
-		font-size: 12px;
-		font-weight: bold;
-		color: $black;
-	}
-
-	h1 {
-		font-size: 14px;
-		font-weight: 200;
-		color: $main;
-	}
-}
-
-.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%);
-    }
-  }
-}
diff --git a/app/components/Channels/ChannelModal.js b/app/components/Channels/ChannelModal.js
deleted file mode 100644
index b4cc648c..00000000
--- a/app/components/Channels/ChannelModal.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { shell } from 'electron'
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-import styles from './ChannelModal.scss'
-
-const ChannelModal = ({
-  isOpen, resetChannel, channel, explorerLinkBase, closeChannel
-}) => {
-  const customStyles = {
-    overlay: {
-      cursor: 'pointer',
-      overflowY: 'auto'
-    },
-    content: {
-      top: 'auto',
-      left: '20%',
-      right: '0',
-      bottom: 'auto',
-      width: '40%',
-      margin: '50px auto',
-      padding: '40px'
-    }
-  }
-
-  const closeChannelClicked = () => {
-    closeChannel({ channel_point: channel.channel_point })
-    resetChannel(null)
-  }
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      contentLabel='No Overlay Click Modal'
-      ariaHideApp
-      shouldCloseOnOverlayClick
-      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'
-                onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}
-              >
-                {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} onClick={closeChannelClicked}>
-              <div>Close channel</div>
-            </div>
-            <footer className={styles.active}>
-              <p>{channel.active ? 'Active' : 'Not active'}</p>
-            </footer>
-          </div>
-          :
-          null
-      }
-    </ReactModal>
-  )
-}
-
-ChannelModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  resetChannel: PropTypes.func.isRequired,
-  channel: PropTypes.object,
-  explorerLinkBase: PropTypes.string.isRequired,
-  closeChannel: PropTypes.func.isRequired
-}
-
-export default ChannelModal
diff --git a/app/components/Channels/ChannelModal.scss b/app/components/Channels/ChannelModal.scss
deleted file mode 100644
index 93e5cd13..00000000
--- a/app/components/Channels/ChannelModal.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-@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;
-
-		&:hover {
-			color: $main;
-			text-decoration: underline;
-		}
-	}
-}
-
-.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;
-}
diff --git a/app/components/Channels/Channels.js b/app/components/Channels/Channels.js
deleted file mode 100644
index 43e47371..00000000
--- a/app/components/Channels/Channels.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { TiPlus } from 'react-icons/lib/ti'
-import { FaRepeat } from 'react-icons/lib/fa'
-import ChannelModal from './ChannelModal'
-import ChannelForm from './ChannelForm'
-import Channel from './Channel'
-import OpenPendingChannel from './OpenPendingChannel'
-import ClosedPendingChannel from './ClosedPendingChannel'
-import styles from './Channels.scss'
-
-const Channels = ({
-  fetchChannels,
-  ticker,
-  peers,
-  channelsLoading,
-  modalChannel,
-  setChannel,
-  channelModalOpen,
-  channelForm,
-  setChannelForm,
-  allChannels,
-  openChannel,
-  closeChannel,
-  currentTicker,
-  explorerLinkBase
-}) => {
-  const refreshClicked = (event) => {
-    // store event in icon so we dont get an error when react clears it
-    const icon = event.currentTarget
-
-    // fetch channels
-    fetchChannels()
-
-    // clear animation after the second so we can reuse it
-    setTimeout(() => { icon.style.animation = '' }, 1000)
-
-    // spin icon for 1 sec
-    icon.style.animation = 'spin 1000ms linear 1'
-  }
-
-  return (
-    <div className={styles.channels}>
-      <ChannelModal
-        isOpen={channelModalOpen}
-        resetChannel={setChannel}
-        channel={modalChannel}
-        explorerLinkBase={explorerLinkBase}
-        closeChannel={closeChannel}
-      />
-      <ChannelForm
-        form={channelForm}
-        setForm={setChannelForm}
-        ticker={ticker}
-        peers={peers}
-        openChannel={openChannel}
-        currentTicker={currentTicker}
-      />
-      <div className={styles.header}>
-        <h3>Channels</h3>
-        <span
-          className={`${styles.refresh} hint--top`}
-          data-hint='Refresh your channels list'
-
-        >
-          <FaRepeat
-            style={{ verticalAlign: 'baseline' }}
-            onClick={refreshClicked}
-          />
-        </span>
-        <div
-          className={`${styles.openChannel} hint--top`}
-          data-hint='Open a channel'
-          onClick={() => setChannelForm({ isOpen: true })}
-        >
-          <TiPlus />
-        </div>
-      </div>
-      <ul>
-        {
-          !channelsLoading ?
-            allChannels.map((channel, index) => {
-              if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
-                return (
-                  <OpenPendingChannel
-                    key={index}
-                    channel={channel}
-                    ticker={ticker}
-                    currentTicker={currentTicker}
-                    explorerLinkBase={explorerLinkBase}
-                  />
-                )
-              } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
-                return (
-                  <ClosedPendingChannel
-                    key={index}
-                    channel={channel}
-                    ticker={ticker}
-                    currentTicker={currentTicker}
-                    explorerLinkBase={explorerLinkBase}
-                  />
-                )
-              }
-              return (
-                <Channel
-                  key={index}
-                  ticker={ticker}
-                  channel={channel}
-                  setChannel={setChannel}
-                  currentTicker={currentTicker}
-                  closeChannel={closeChannel}
-                />
-              )
-            })
-            :
-            'Loading...'
-        }
-      </ul>
-    </div>
-  )
-}
-
-Channels.propTypes = {
-  fetchChannels: PropTypes.func.isRequired,
-  ticker: PropTypes.object.isRequired,
-  peers: PropTypes.array.isRequired,
-  channelsLoading: PropTypes.bool.isRequired,
-  modalChannel: PropTypes.object,
-  setChannel: PropTypes.func.isRequired,
-  channelModalOpen: PropTypes.bool.isRequired,
-  channelForm: PropTypes.object.isRequired,
-  setChannelForm: PropTypes.func.isRequired,
-  allChannels: PropTypes.array.isRequired,
-  openChannel: PropTypes.func.isRequired,
-  closeChannel: PropTypes.func.isRequired,
-  currentTicker: PropTypes.object.isRequired,
-  explorerLinkBase: PropTypes.string.isRequired
-}
-
-export default Channels
diff --git a/app/components/Channels/Channels.scss b/app/components/Channels/Channels.scss
deleted file mode 100644
index df5f7b38..00000000
--- a/app/components/Channels/Channels.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@import '../../variables.scss';
-
-@keyframes spin {
-    from {
-      transform: rotate(0deg)
-    }
-    
-    to {
-      transform: rotate(360deg);
-    }
-}
-
-.channels {
-	width: 75%;
-	margin: 50px auto;
-
-	.header {
-		margin-bottom: 10px;
-
-		h3, .openChannel {
-			display: inline-block;
-		}
-
-		h3 {
-			text-align: left;
-		}
-
-		.refresh {
-			cursor: pointer;
-			margin-left: 5px;
-			font-size: 12px;
-			vertical-align: top;
-			color: $darkestgrey;
-			line-height: 14px;
-			transition: color 0.25s;
-
-			&:hover {
-				color: $main;
-			}
-		}
-
-		.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;
-	}
-}
diff --git a/app/components/Channels/ClosedPendingChannel.js b/app/components/Channels/ClosedPendingChannel.js
deleted file mode 100644
index cf563c39..00000000
--- a/app/components/Channels/ClosedPendingChannel.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { shell } from 'electron'
-import React from 'react'
-import PropTypes from 'prop-types'
-import { btc } from 'utils'
-import styles from './ClosedPendingChannel.scss'
-
-const ClosedPendingChannel = ({
-  ticker, channel: { channel, closing_txid }, currentTicker, explorerLinkBase
-}) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${closing_txid}`)}>
-    <h1 className={styles.closing}>Closing Channel...</h1>
-    <div className={styles.left}>
-      <section className={styles.remotePubkey}>
-        <span>Remote Pubkey</span>
-        <h4>{channel.remote_node_pub}</h4>
-      </section>
-      <section className={styles.channelPoint}>
-        <span>Channel Point</span>
-        <h4>{channel.channel_point}</h4>
-      </section>
-    </div>
-    <div className={styles.right}>
-      <section className={styles.capacity}>
-        <span>Capacity</span>
-        <h2>
-          {
-            ticker.currency === 'btc' ?
-              btc.satoshisToBtc(channel.capacity)
-              :
-              btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
-          }
-        </h2>
-      </section>
-      <div className={styles.balances}>
-        <section>
-          <h4>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.local_balance)
-                :
-                btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
-            }
-          </h4>
-          <span>Local</span>
-        </section>
-        <section>
-          <h4>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.remote_balance)
-                :
-                btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
-            }
-          </h4>
-          <span>Remote</span>
-        </section>
-      </div>
-    </div>
-  </li>
-)
-
-ClosedPendingChannel.propTypes = {
-  ticker: PropTypes.object.isRequired,
-  channel: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired,
-  explorerLinkBase: PropTypes.string.isRequired
-}
-
-export default ClosedPendingChannel
diff --git a/app/components/Channels/ClosedPendingChannel.scss b/app/components/Channels/ClosedPendingChannel.scss
deleted file mode 100644
index 8dbc037a..00000000
--- a/app/components/Channels/ClosedPendingChannel.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@import '../../variables.scss';
-
-.channel {
-	position: relative;
-	background: $white;
-	padding: 10px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	border-top: 1px solid $grey;
-	cursor: pointer;
-	transition: all 0.25s;
-	opacity: 0.5;
-
-	&:hover {
-		opacity: 0.35;
-	}
-
-	&:first-child {
-		border: none;
-	}
-
-	.closing {
-		color: $red;
-		position: absolute;
-		top: 0;
-		left: 10px;
-		padding: 10px;
-		text-transform: uppercase;
-		font-weight: bold;
-		font-size: 10px;
-	}
-
-	.left, .right {
-		padding: 0 10px;
-		margin-bottom: 5;
-		margin-top: 25px;
-
-		section {
-			margin-bottom: 20px;
-
-			span {
-				text-transform: uppercase;
-				letter-spacing: 1.6px;
-				color: $black;
-				font-size: 10px;
-				font-weight: bold;
-			}
-
-			h2 {
-				font-size: 30px;
-				padding: 5px 0;
-				color: $main;
-			}
-
-			h4 {
-				margin-top: 5px;
-			}
-		}
-	}
-
-	.left {
-		flex: 7;
-		border-right: 1px solid $grey;
-	}
-
-	.right {
-		flex: 3;
-
-		.capacity {
-			text-align: center;
-			border-bottom: 1px solid $grey;
-			margin-bottom: 10px;
-		}
-
-		.balances {
-			display: flex;
-			justify-content: space-between;
-
-			section {
-				flex: 5;
-				text-align: center;
-
-				h4 {
-					color: $main;
-					font-size: 16px;
-				}
-
-				&:first-child {
-					border-right: 1px solid $grey;
-				}
-			}
-		}
-	}
-}
diff --git a/app/components/Channels/OpenPendingChannel.js b/app/components/Channels/OpenPendingChannel.js
deleted file mode 100644
index 50778d16..00000000
--- a/app/components/Channels/OpenPendingChannel.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { shell } from 'electron'
-import React from 'react'
-import PropTypes from 'prop-types'
-import { btc } from 'utils'
-import styles from './OpenPendingChannel.scss'
-
-const OpenPendingChannel = ({
-  ticker, channel, currentTicker, explorerLinkBase
-}) => (
-  <li className={styles.channel} onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}>
-    <div className={styles.pending}>
-      <h1>Opening Channel...</h1>
-      <span>Blocks till open: {channel.blocks_till_open}</span>
-    </div>
-    <div className={styles.left}>
-      <section className={styles.remotePubkey}>
-        <span>Remote Pubkey</span>
-        <h4>{channel.channel.remote_node_pub}</h4>
-      </section>
-      <section className={styles.channelPoint}>
-        <span>Channel Point</span>
-        <h4>{channel.channel.channel_point}</h4>
-      </section>
-    </div>
-    <div className={styles.right}>
-      <section className={styles.capacity}>
-        <span>Capacity</span>
-        <h2>
-          {
-            ticker.currency === 'btc' ?
-              btc.satoshisToBtc(channel.channel.capacity)
-              :
-              btc.satoshisToUsd(channel.channel.capacity, currentTicker.price_usd)
-          }
-        </h2>
-      </section>
-      <div className={styles.balances}>
-        <section>
-          <h4>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.channel.local_balance)
-                :
-                btc.satoshisToUsd(channel.channel.local_balance, currentTicker.price_usd)
-            }
-          </h4>
-          <span>Local</span>
-        </section>
-        <section>
-          <h4>
-            {
-              ticker.currency === 'btc' ?
-                btc.satoshisToBtc(channel.channel.remote_balance)
-                :
-                btc.satoshisToUsd(channel.channel.remote_balance, currentTicker.price_usd)
-            }
-          </h4>
-          <span>Remote</span>
-        </section>
-      </div>
-    </div>
-  </li>
-)
-
-OpenPendingChannel.propTypes = {
-  ticker: PropTypes.object.isRequired,
-  channel: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired,
-  explorerLinkBase: PropTypes.string.isRequired
-}
-
-export default OpenPendingChannel
diff --git a/app/components/Channels/OpenPendingChannel.scss b/app/components/Channels/OpenPendingChannel.scss
deleted file mode 100644
index 6378d213..00000000
--- a/app/components/Channels/OpenPendingChannel.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@import '../../variables.scss';
-
-.channel {
-	position: relative;
-	background: $lightgrey;
-	padding: 10px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	border-top: 1px solid $grey;
-	cursor: pointer;
-	transition: all 0.25s;
-	opacity: 0.5;
-
-	.pending {
-		position: absolute;
-		top: 0;
-		left: 10px;
-		padding: 10px;
-		text-transform: uppercase;
-		font-weight: bold;
-
-		h1 {
-			color: $main;
-			font-size: 10px;
-		}
-
-		span {
-			font-size: 8px;
-		}
-	}
-
-	&:first-child {
-		border: none;
-	}
-
-	.left, .right {
-		padding: 0 10px;
-		margin-bottom: 5;
-		margin-top: 40px;
-
-		section {
-			margin-bottom: 20px;
-
-			span {
-				text-transform: uppercase;
-				letter-spacing: 1.6px;
-				color: $black;
-				font-size: 10px;
-				font-weight: bold;
-			}
-
-			h2 {
-				font-size: 30px;
-				padding: 5px 0;
-				color: $main;
-			}
-
-			h4 {
-				margin-top: 5px;
-			}
-		}
-	}
-
-	.left {
-		flex: 7;
-		border-right: 1px solid $grey;
-	}
-
-	.right {
-		flex: 3;
-
-		.capacity {
-			text-align: center;
-			border-bottom: 1px solid $grey;
-			margin-bottom: 10px;
-		}
-
-		.balances {
-			display: flex;
-			justify-content: space-between;
-
-			section {
-				flex: 5;
-				text-align: center;
-
-				h4 {
-					color: $main;
-					font-size: 16px;
-				}
-
-				&:first-child {
-					border-right: 1px solid $grey;
-				}
-			}
-		}
-	}
-}
diff --git a/app/components/Channels/index.js b/app/components/Channels/index.js
deleted file mode 100644
index a92a7218..00000000
--- a/app/components/Channels/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Channels from './Channels'
-
-export default Channels
diff --git a/app/components/Contacts/ClosingContact.js b/app/components/Contacts/ClosingContact.js
index 9ae07b64..15a18632 100644
--- a/app/components/Contacts/ClosingContact.js
+++ b/app/components/Contacts/ClosingContact.js
@@ -33,7 +33,7 @@ const ClosingContact = ({ channel }) => (
 )
 
 ClosingContact.propTypes = {
-
+  channel: PropTypes.object.isRequired
 }
 
 export default ClosingContact
diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
index 63fd8b91..664cf920 100644
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@@ -124,7 +124,12 @@ const ContactModal = ({
 }
 
 ContactModal.propTypes = {
-
+  channel: PropTypes.object,
+  isOpen: PropTypes.bool.isRequired,
+  closeContactModal: PropTypes.func.isRequired,
+  channelNodes: PropTypes.array.isRequired,
+  closeChannel: PropTypes.func.isRequired,
+  closingChannelIds: PropTypes.array.isRequired
 }
 
 export default ContactModal
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index 03eece42..8123641f 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -133,7 +133,6 @@ class ContactsForm extends React.Component {
                 className={styles.searchInput}
                 value={contactsform.searchQuery}
                 onChange={event => updateContactFormSearchQuery(event.target.value)}
-                autoFocus
               />
             </div>
 
@@ -166,7 +165,7 @@ class ContactsForm extends React.Component {
           {
             showManualForm &&
             <div className={styles.manualForm}>
-              <h2>Hm, looks like we can't see that contact from here. Want to try and manually connect?</h2>
+              <h2>Hm, looks like we can’t see that contact from here. Want to try and manually connect?</h2>
               <section>
                 <input
                   type='text'
@@ -214,7 +213,18 @@ class ContactsForm extends React.Component {
 
 
 ContactsForm.propTypes = {
-
+  contactsform: PropTypes.object.isRequired,
+  closeContactsForm: PropTypes.func.isRequired,
+  updateContactFormSearchQuery: PropTypes.func.isRequired,
+  updateContactCapacity: PropTypes.func.isRequired,
+  openChannel: PropTypes.func.isRequired,
+
+  activeChannelPubkeys: PropTypes.array.isRequired,
+  nonActiveChannelPubkeys: PropTypes.array.isRequired,
+  pendingOpenChannelPubkeys: PropTypes.array.isRequired,
+  filteredNetworkNodes: PropTypes.array.isRequired,
+  loadingChannelPubkeys: PropTypes.array.isRequired,
+  showManualForm: PropTypes.bool.isRequired
 }
 
 export default ContactsForm
diff --git a/app/components/Contacts/Donut.js b/app/components/Contacts/Donut.js
deleted file mode 100644
index f9066af1..00000000
--- a/app/components/Contacts/Donut.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import styles from './Donut.scss'
-
-const Donut = ({ value, size, strokewidth }) => {
-  console.log('value: ', value)
-  console.log('size: ', size)
-  console.log('strokewidth: ', strokewidth)
-
-  const halfsize = (size * 0.5)
-  const radius = halfsize - (strokewidth * 0.5)
-  const circumference = 2 * Math.PI * radius
-  const strokeval = ((value * circumference) / 100)
-  const dashval = (`${strokeval} ${circumference}`)
-
-  const trackstyle = { strokeWidth: 5 }
-  const indicatorstyle = { strokeWidth: strokewidth, strokeDasharray: dashval }
-  const rotateval = `rotate(-90 ${37.5},${37.5})`
-
-  return (
-    <svg width={75} height={75} className={styles.donutchart}>
-      <circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={trackstyle} className={styles.donutchartTrack} />
-      <circle r={30} cx={37.5} cy={37.5} transform={rotateval} style={indicatorstyle} className={styles.donutchartIndicator} />
-    </svg>
-  )
-}
-
-Donut.propTypes = {
-}
-
-export default Donut
diff --git a/app/components/Contacts/Donut.scss b/app/components/Contacts/Donut.scss
deleted file mode 100644
index 260ee9eb..00000000
--- a/app/components/Contacts/Donut.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../../variables.scss';
-
-.donutchartTrack{
-  fill: transparent;
-  stroke: $lightgrey;
-  stroke-width: 26;
-}
-.donutchartIndicator {
-  fill: transparent;
-  stroke: $main;
-  stroke-width: 26;
-  stroke-dasharray: 0 10000;
-  transition: stroke-dasharray .3s ease;
-}
-
-.donutchart {
-  margin: 0 auto;
-  border-radius: 50%;
-  display: block;
-}
diff --git a/app/components/Contacts/LoadingContact.js b/app/components/Contacts/LoadingContact.js
index 313e7f4e..19770345 100644
--- a/app/components/Contacts/LoadingContact.js
+++ b/app/components/Contacts/LoadingContact.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FaCircle } from 'react-icons/lib/fa'
-import { btc } from 'utils'
 import styles from './Contact.scss'
 
 const LoadingContact = ({ pubkey, isClosing }) => (
@@ -29,7 +28,8 @@ const LoadingContact = ({ pubkey, isClosing }) => (
 )
 
 LoadingContact.propTypes = {
-
+  pubkey: PropTypes.string.isRequired,
+  isClosing: PropTypes.bool.isRequired
 }
 
 export default LoadingContact
diff --git a/app/components/Contacts/OfflineContact.js b/app/components/Contacts/OfflineContact.js
index 0e042b9c..2b4621b6 100644
--- a/app/components/Contacts/OfflineContact.js
+++ b/app/components/Contacts/OfflineContact.js
@@ -27,7 +27,8 @@ const OfflineContact = ({ channel, openContactModal }) => (
 )
 
 OfflineContact.propTypes = {
-
+  channel: PropTypes.object.isRequired,
+  openContactModal: PropTypes.func.isRequired
 }
 
 export default OfflineContact
diff --git a/app/components/Contacts/OnlineContact.js b/app/components/Contacts/OnlineContact.js
index d36ce29a..5c98f5f5 100644
--- a/app/components/Contacts/OnlineContact.js
+++ b/app/components/Contacts/OnlineContact.js
@@ -27,7 +27,8 @@ const OnlineContact = ({ channel, openContactModal }) => (
 )
 
 OnlineContact.propTypes = {
-
+  channel: PropTypes.object.isRequired,
+  openContactModal: PropTypes.func.isRequired
 }
 
 export default OnlineContact
diff --git a/app/components/Contacts/PendingContact.js b/app/components/Contacts/PendingContact.js
index 5ede3f9e..7502e8b2 100644
--- a/app/components/Contacts/PendingContact.js
+++ b/app/components/Contacts/PendingContact.js
@@ -33,7 +33,7 @@ const PendingContact = ({ channel }) => (
 )
 
 PendingContact.propTypes = {
-
+  channel: PropTypes.object.isRequired
 }
 
 export default PendingContact
diff --git a/app/components/Form/RequestForm.js b/app/components/Form/RequestForm.js
index 0f793e45..7844dbba 100644
--- a/app/components/Form/RequestForm.js
+++ b/app/components/Form/RequestForm.js
@@ -28,7 +28,9 @@ const RequestForm = ({
       />
     </section>
     <section className={styles.inputContainer}>
-      <label htmlFor='memo'>Request:</label>
+      <label htmlFor='memo'>
+        Request:
+      </label>
       <input
         type='text'
         placeholder='Dinner, Rent, etc'
@@ -39,7 +41,7 @@ const RequestForm = ({
     </section>
     <section className={styles.buttonGroup}>
       <div className={`buttonPrimary ${styles.button}`} onClick={onRequestSubmit}>
-          Request
+        Request
       </div>
     </section>
   </div>
diff --git a/app/components/Network/CanvasNetworkGraph.js b/app/components/Network/CanvasNetworkGraph.js
index 61f8fa16..597c6473 100644
--- a/app/components/Network/CanvasNetworkGraph.js
+++ b/app/components/Network/CanvasNetworkGraph.js
@@ -23,7 +23,6 @@ class CanvasNetworkGraph extends Component {
     super(props)
 
     this.state = {
-      simulation: {},
       simulationData: {
         nodes: [],
         links: []
diff --git a/app/components/Peers/Peer.js b/app/components/Peers/Peer.js
deleted file mode 100644
index 5d9684a2..00000000
--- a/app/components/Peers/Peer.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Peer.scss'
-
-const Peer = ({ peer, setPeer }) => (
-  <li className={styles.peer} onClick={() => setPeer(peer)}>
-    <h4>{peer.address}</h4>
-    <h1>{peer.pub_key}</h1>
-  </li>
-)
-
-Peer.propTypes = {
-  peer: PropTypes.shape({
-    address: PropTypes.string.isRequired,
-    pub_key: PropTypes.string.isRequired
-  }).isRequired,
-  setPeer: PropTypes.func.isRequired
-}
-
-export default Peer
diff --git a/app/components/Peers/Peer.scss b/app/components/Peers/Peer.scss
deleted file mode 100644
index c7e2ed0d..00000000
--- a/app/components/Peers/Peer.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../../variables.scss';
-
-.peer {
-	position: relative;
-	margin: 5px 0;
-	padding: 10px;
-	border-top: 1px solid $white;
-	cursor: pointer;
-	transition: all 0.25s;
-	list-style: none;
-	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  transition: 0.3s;
-
-	&:hover {
-		opacity: 0.75;
-		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-	}
-
-	&: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;
-	}
-}
diff --git a/app/components/Peers/PeerForm.js b/app/components/Peers/PeerForm.js
deleted file mode 100644
index b1a9472e..00000000
--- a/app/components/Peers/PeerForm.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-import { FaClose } from 'react-icons/lib/fa'
-import styles from './PeerForm.scss'
-
-const PeerForm = ({ form, setForm, connect }) => {
-  const submit = () => {
-    const { pubkey, host } = form
-    connect({ pubkey, host })
-  }
-
-  return (
-    <div>
-      <ReactModal
-        isOpen={form.isOpen}
-        contentLabel='No Overlay Click Modal'
-        ariaHideApp
-        shouldCloseOnOverlayClick
-        onRequestClose={() => setForm({ isOpen: false })}
-        parentSelector={() => document.body}
-        className={styles.modal}
-      >
-        <div onClick={() => setForm({ isOpen: false })} className={styles.modalClose}>
-          <FaClose />
-        </div>
-
-        <div className={styles.form} onKeyPress={event => event.charCode === 13 && submit()}>
-          <h1 className={styles.title}>Connect to a peer</h1>
-
-          <section className={styles.pubkey}>
-            <label htmlFor='pubkey'>Pubkey</label>
-            <input
-              type='text'
-              size=''
-              placeholder='Public key'
-              value={form.pubkey}
-              onChange={event => setForm({ pubkey: event.target.value })}
-              id='pubkey'
-            />
-          </section>
-          <section className={styles.local}>
-            <label htmlFor='address'>Address</label>
-            <input
-              type='text'
-              size=''
-              placeholder='Host address'
-              value={form.host}
-              onChange={event => setForm({ host: event.target.value })}
-              id='address'
-            />
-          </section>
-
-          <div className='buttonContainer' onClick={submit}>
-            <div className='buttonPrimary'>
-              Submit
-            </div>
-          </div>
-        </div>
-      </ReactModal>
-    </div>
-  )
-}
-
-PeerForm.propTypes = {
-  form: PropTypes.object.isRequired,
-  setForm: PropTypes.func.isRequired,
-  connect: PropTypes.func.isRequired
-}
-
-export default PeerForm
diff --git a/app/components/Peers/PeerForm.scss b/app/components/Peers/PeerForm.scss
deleted file mode 100644
index 3c3df00f..00000000
--- a/app/components/Peers/PeerForm.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@import '../../variables.scss';
-
-.modal {
-  position: relative;
-  width: 40%;
-  margin: 50px auto;
-  padding: 40px;
-  position: absolute;
-  top: auto;
-  left: 20%;
-  right: 0;
-  bottom: auto;
-  background: $white;
-  outline: none;
-  z-index: -2;
-  border: 1px solid $darkgrey;
-}
-
-.modalClose {
-  position: absolute;
-  top: -13px;
-  right: -13px;
-  display: block;
-  font-size: 16px;
-  line-height: 27px;
-  width: 32px;
-  height: 32px;
-  background: $white;
-  border-radius: 50%;
-  color: $darkestgrey;
-  cursor: pointer;
-  text-align: center;
-  z-index: 2;
-  transition: all 0.25s;
-}
-
-.modalClose:hover {
-  background: $darkgrey;
-}
-
-.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%);
-    }
-  }
-}
diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js
deleted file mode 100644
index 8d856d6d..00000000
--- a/app/components/Peers/PeerModal.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import ReactModal from 'react-modal'
-import { FaClose } from 'react-icons/lib/fa'
-
-import styles from './PeerModal.scss'
-
-const PeerModal = ({
-  isOpen, resetPeer, peer, disconnect
-}) => {
-  const customStyles = {
-    overlay: {
-      cursor: 'pointer',
-      overflowY: 'auto'
-    },
-    content: {
-      top: 'auto',
-      left: '20%',
-      right: '0',
-      bottom: 'auto',
-      width: '40%',
-      margin: '50px auto',
-      borderRadius: 'none',
-      padding: '0'
-    }
-  }
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      contentLabel='No Overlay Click Modal'
-      ariaHideApp
-      shouldCloseOnOverlayClick
-      onRequestClose={() => resetPeer(null)}
-      parentSelector={() => document.body}
-      style={customStyles}
-    >
-      <div className={styles.closeContainer}>
-        <span onClick={() => resetPeer(null)}>
-          <FaClose />
-        </span>
-      </div>
-      {
-        peer &&
-        <div className={styles.peer}>
-          <header className={styles.header}>
-            <h1 data-hint='Peer address' className='hint--top-left'>{peer.address}</h1>
-            <h2 data-hint='Peer public key' className='hint--top-left'>{peer.pub_key}</h2>
-          </header>
-
-          <div className={styles.details}>
-            <dl>
-              <dt>Satoshis Received</dt>
-              <dd>{peer.sat_recv}</dd>
-              <dt>Satoshis Sent</dt>
-              <dd>{peer.sat_sent}</dd>
-              <dt>Bytes Received</dt>
-              <dd>{peer.bytes_recv}</dd>
-              <dt>Bytes Sent</dt>
-              <dd>{peer.bytes_sent}</dd>
-            </dl>
-          </div>
-          <div className={styles.close} onClick={() => disconnect({ pubkey: peer.pub_key })}>
-            <div>Disconnect peer</div>
-          </div>
-        </div>
-      }
-    </ReactModal>
-  )
-}
-
-PeerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  resetPeer: PropTypes.func.isRequired,
-  peer: PropTypes.object,
-  disconnect: PropTypes.func.isRequired
-}
-
-export default PeerModal
diff --git a/app/components/Peers/PeerModal.scss b/app/components/Peers/PeerModal.scss
deleted file mode 100644
index 91ae0086..00000000
--- a/app/components/Peers/PeerModal.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import '../../variables.scss';
-
-.closeContainer {
-  background: $lightgrey;
-  text-align: right;
-  padding: 10px;
-
-  span {
-    color: $darkestgrey;
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-
-.header {
-  background: $lightgrey;
-  padding: 20px;
-
-	h1 {
-		color: $black;
-		text-align: center;
-		margin-bottom: 20px;
-		font-weight: bold;
-	}
-
-	h2 {
-		color: $darkestgrey;
-		font-size: 12px;
-		text-align: center;
-	}
-}
-
-.details {
-  dl {
-    padding: 40px 40px 40px 40px;
-  }
-
-	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: 30px 0 10px 0;
-    margin-left: 0;
-    border-bottom: 1px solid $darkgrey;
-	}
-}
-
-.close {
-	text-align: center;
-  padding-bottom: 40px;
-
-	div {
-		margin: 0 auto;
-		cursor: pointer;
-		font-size: 18px;
-    color: $red;
-    border: none;
-    padding: 0;
-    text-align: center;
-    transition: all 0.25s;
-
-    &:hover {
-    	color: lighten($red, 10%);
-    }
-	}
-}
diff --git a/app/lnd/methods/channelController.js b/app/lnd/methods/channelController.js
index adc95d2c..5085af22 100644
--- a/app/lnd/methods/channelController.js
+++ b/app/lnd/methods/channelController.js
@@ -2,7 +2,6 @@ import bitcore from 'bitcore-lib'
 import find from 'lodash/find'
 import { listPeers, connectPeer } from './peersController'
 import pushopenchannel from '../push/openchannel'
-import pushclosechannel from '../push/closechannel'
 
 const BufferUtil = bitcore.util.buffer
 
@@ -14,48 +13,39 @@ const BufferUtil = bitcore.util.buffer
  * @return {[type]}         [description]
  */
 export function connectAndOpen(lnd, meta, event, payload) {
-  console.log('payload: ', payload)
-
   const { pubkey, host, localamt } = payload
   const channelPayload = {
     node_pubkey: BufferUtil.hexToBuffer(pubkey),
-    local_funding_amount: Number(localamt),
-    num_confs: 1
+    local_funding_amount: Number(localamt)
   }
 
   return new Promise((resolve, reject) => {
     listPeers(lnd, meta)
       .then(({ peers }) => {
-        console.log('peers: ', peers)
-
         const peer = find(peers, { pub_key: pubkey })
 
         if (peer) {
-          console.log('already have the peer. can open the channel now')
           const call = lnd.openChannel(channelPayload, meta)
 
           call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
           call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
         } else {
-          console.log('connect to the peer first')
           connectPeer(lnd, meta, { pubkey, host })
-            .then((data) => {
-              console.log('connectPeer data: ', data)
-
+            .then(() => {
               const call = lnd.openChannel(channelPayload, meta)
 
               call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
               call.on('error', error => event.sender.send('pushchannelerror', { pubkey, error: error.toString() }))
             })
             .catch((err) => {
-              console.log('connect peer err: ', err)
               event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
+              reject(err)
             })
         }
       })
       .catch((err) => {
-        console.log('list peer err: ', err)
         event.sender.send('pushchannelerror', { pubkey, error: err.toString() })
+        reject(err)
       })
   })
 }
@@ -68,7 +58,6 @@ export function connectAndOpen(lnd, meta, event, payload) {
  * @return {[type]}         [description]
  */
 export function openChannel(lnd, meta, event, payload) {
-  console.log('opening the channel')
   const { pubkey, localamt, pushamt } = payload
   const res = {
     node_pubkey: BufferUtil.hexToBuffer(pubkey),
@@ -123,7 +112,7 @@ export function listChannels(lnd, meta) {
  * @return {[type]}         [description]
  */
 export function closeChannel(lnd, meta, event, payload) {
-  const chan_id = payload.chan_id
+  const { chan_id } = payload
   const tx = payload.channel_point.funding_txid.match(/.{2}/g).reverse().join('')
   const res = {
     channel_point: {
diff --git a/app/lnd/methods/index.js b/app/lnd/methods/index.js
index f45ad419..1e48ac59 100644
--- a/app/lnd/methods/index.js
+++ b/app/lnd/methods/index.js
@@ -119,7 +119,7 @@ export default function (lnd, meta, event, msg, data) {
             Object.assign(newinvoice, {
               memo: data.memo,
               value: data.value,
-              r_hash: new Buffer(newinvoice.r_hash, 'hex').toString('hex'),
+              r_hash: Buffer.from(newinvoice.r_hash, 'hex').toString('hex'),
               creation_date: Date.now() / 1000
             })
           ))
@@ -198,8 +198,8 @@ export default function (lnd, meta, event, msg, data) {
     // Connects to a peer if we aren't connected already and then attempt to open a channel
     // {} = data
       channelController.connectAndOpen(lnd, meta, event, data)
-        .then((data) => {
-          console.log('connectAndOpen data: ', data)
+        .then((channelData) => {
+          console.log('connectAndOpen data: ', channelData)
           // event.sender.send('connectSuccess', { pub_key: data.pubkey, address: data.host, peer_id })
         })
         .catch((error) => {
diff --git a/app/lnd/methods/paymentsController.js b/app/lnd/methods/paymentsController.js
index e9afd981..b79b8cb0 100644
--- a/app/lnd/methods/paymentsController.js
+++ b/app/lnd/methods/paymentsController.js
@@ -8,11 +8,11 @@ export function sendPaymentSync(lnd, meta, { paymentRequest }) {
   return new Promise((resolve, reject) => {
     lnd.sendPaymentSync({ payment_request: paymentRequest }, meta, (error, data) => {
       if (error) {
-        reject({ error })
+        reject({ error }) // eslint-disable-line
         return
       }
 
-      if (!data || !data.payment_route) { reject({ error: data.payment_error }) }
+      if (!data || !data.payment_route) { reject({ error: data.payment_error }) } // eslint-disable-line
 
       resolve(data)
     })
diff --git a/app/lnd/subscribe/channelgraph.js b/app/lnd/subscribe/channelgraph.js
index 47b1aec7..2defd7b2 100644
--- a/app/lnd/subscribe/channelgraph.js
+++ b/app/lnd/subscribe/channelgraph.js
@@ -1,11 +1,6 @@
 export default function subscribeToChannelGraph(mainWindow, lnd, meta) {
-  console.log('subscribeChannelGraph is happening')
-
-
   const call = lnd.subscribeChannelGraph({}, meta)
 
   call.on('data', channelGraphData => mainWindow.send('channelGraphData', { channelGraphData }))
-  call.on('end', () => console.log('channel graph end'))
-  call.on('error', error => console.log('channelgraph error: ', error))
   call.on('status', channelGraphStatus => mainWindow.send('channelGraphStatus', { channelGraphStatus }))
 }
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 8af72d42..2f0092df 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -153,14 +153,10 @@ export const receiveChannels = (event, { channels, pendingChannels }) => dispatc
 
 // Send IPC event for opening a channel
 export const openChannel = ({
-  pubkey, host, local_amt, push_amt
+  pubkey, host, local_amt
 }) => (dispatch) => {
   const localamt = btc.btcToSatoshis(local_amt)
 
-  console.log('localamt: ', localamt)
-  console.log('pubkey: ', pubkey)
-  console.log('host: ', host)
-
   dispatch(openingChannel())
   dispatch(addLoadingPubkey(pubkey))
 
@@ -170,28 +166,24 @@ export const openChannel = ({
 // TODO: Decide how to handle streamed updates for channels
 // Receive IPC event for openChannel
 export const channelSuccessful = () => (dispatch) => {
-  console.log('CHANNEL channelSuccessful')
   dispatch(fetchChannels())
   dispatch(closeChannelForm())
   dispatch(resetChannelForm())
 }
 
 // Receive IPC event for updated channel
-export const pushchannelupdated = (event, { pubkey, data }) => (dispatch) => {
-  console.log('PUSH CHANNEL UPDATED: ', data)
+export const pushchannelupdated = (event, { pubkey }) => (dispatch) => {
   dispatch(fetchChannels())
   dispatch(removeLoadingPubkey(pubkey))
 }
 
 // Receive IPC event for channel end
 export const pushchannelend = event => (dispatch) => { // eslint-disable-line
-  console.log('PUSH CHANNEL END: ')
   dispatch(fetchChannels())
 }
 
 // Receive IPC event for channel error
 export const pushchannelerror = (event, { pubkey, error }) => (dispatch) => {
-  console.log('PUSH CHANNEL ERROR: ', error)
   dispatch(openingFailure())
   dispatch(setError(error))
   dispatch(removeLoadingPubkey(pubkey))
@@ -199,7 +191,6 @@ export const pushchannelerror = (event, { pubkey, error }) => (dispatch) => {
 
 // Receive IPC event for channel status
 export const pushchannelstatus = (event, data) => (dispatch) => { // eslint-disable-line
-  console.log('PUSH CHANNEL STATUS: ', data)
   dispatch(fetchChannels())
 }
 
@@ -209,9 +200,6 @@ export const closeChannel = ({ channel_point, chan_id }) => (dispatch) => {
   dispatch(addClosingChanId(chan_id))
 
   const [funding_txid, output_index] = channel_point.split(':')
-  console.log('funding_txid: ', funding_txid)
-  console.log('output_index: ', output_index)
-  console.log('chan_id: ', chan_id)
   ipcRenderer.send(
     'lnd',
     {
@@ -229,43 +217,36 @@ export const closeChannel = ({ channel_point, chan_id }) => (dispatch) => {
 
 // TODO: Decide how to handle streamed updates for closing channels
 // Receive IPC event for closeChannel
-export const closeChannelSuccessful = (event, data) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL SUCCESSFUL: ', data)
+export const closeChannelSuccessful = () => (dispatch) => {
   dispatch(fetchChannels())
 }
 
 // Receive IPC event for updated closing channel
-export const pushclosechannelupdated = (event, { data, chan_id }) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL UPDATED: ', data)
-  console.log('PUSH CLOSE CHANNEL chan_id: ', chan_id)
+export const pushclosechannelupdated = (event, { chan_id }) => (dispatch) => {
   dispatch(fetchChannels())
   dispatch(removeClosingChanId(chan_id))
   dispatch(closeContactModal())
 }
 
 // Receive IPC event for closing channel end
-export const pushclosechannelend = (event, data) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL END: ', data)
+export const pushclosechannelend = () => (dispatch) => {
   dispatch(fetchChannels())
 }
 
 // Receive IPC event for closing channel error
 export const pushclosechannelerror = (event, { error, chan_id }) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL END: ', error)
-  console.log('PUSH CLOSE CHANNEL chan_id: ', chan_id)
   dispatch(setError(error))
   dispatch(removeClosingChanId(chan_id))
 }
 
 // Receive IPC event for closing channel status
-export const pushclosechannelstatus = (event, data) => (dispatch) => {
-  console.log('PUSH CLOSE CHANNEL STATUS: ', data)
+export const pushclosechannelstatus = () => (dispatch) => {
   dispatch(fetchChannels())
 }
 
 // IPC event for channel graph data
 export const channelGraphData = (event, data) => (dispatch, getState) => {
-  const info = getState().info
+  const { info } = getState()
   const { channelGraphData: { channel_updates } } = data
 
   // if there are any new channel updates
@@ -298,9 +279,7 @@ export const channelGraphData = (event, data) => (dispatch, getState) => {
 }
 
 // IPC event for channel graph status
-export const channelGraphStatus = (event, data) => () => {
-  console.log('channelGraphStatus: ', data)
-}
+export const channelGraphStatus = () => () => {}
 
 export function toggleFilterPulldown() {
   return {
@@ -308,10 +287,10 @@ export function toggleFilterPulldown() {
   }
 }
 
-export function changeFilter(filter) {
+export function changeFilter(channelFilter) {
   return {
     type: CHANGE_CHANNEL_FILTER,
-    filter
+    channelFilter
   }
 }
 
@@ -342,13 +321,19 @@ const ACTION_HANDLERS = {
   [SET_VIEW_TYPE]: (state, { viewType }) => ({ ...state, viewType }),
 
   [TOGGLE_CHANNEL_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
-  [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }),
+  [CHANGE_CHANNEL_FILTER]: (state, { channelFilter }) => (
+    { ...state, filterPulldown: false, filter: channelFilter }
+  ),
 
   [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }),
-  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }),
+  [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => (
+    { ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }
+  ),
 
   [ADD_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: [chanId, ...state.closingChannelIds] }),
-  [REMOVE_ClOSING_CHAN_ID]: (state, { chanId }) => ({ ...state, closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId) }),
+  [REMOVE_ClOSING_CHAN_ID]: (state, { chanId }) => (
+    { ...state, closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId) }
+  ),
 
   [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }),
   [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } })
@@ -414,7 +399,7 @@ channelsSelectors.activeChanIds = createSelector(
 channelsSelectors.nonActiveFilters = createSelector(
   filtersSelector,
   filterSelector,
-  (filters, filter) => filters.filter(f => f.key !== filter.key)
+  (filters, channelFilter) => filters.filter(f => f.key !== channelFilter.key)
 )
 
 channelsSelectors.channelNodes = createSelector(
@@ -443,7 +428,7 @@ const allChannels = createSelector(
     const filteredPendingForcedClosedChannels = pendingForcedClosedChannels.filter(channel => channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)) // eslint-disable-line
 
 
-    return [...filteredActiveChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels, ...filteredNonActiveChannels]
+    return [...filteredActiveChannels, ...filteredPendingOpenChannels, ...filteredPendingClosedChannels, ...filteredPendingForcedClosedChannels, ...filteredNonActiveChannels] // eslint-disable-line
   }
 )
 
@@ -456,7 +441,7 @@ export const currentChannels = createSelector(
   channelsSelectors.closingPendingChannels,
   filterSelector,
   channelSearchQuerySelector,
-  (allChannelsArr, activeChannelsArr, nonActiveChannelsArr, openChannels, pendingOpenChannels, pendingClosedChannels, filter, searchQuery) => {
+  (allChannelsArr, activeChannelsArr, nonActiveChannelsArr, openChannels, pendingOpenChannels, pendingClosedChannels, channelFilter, searchQuery) => {
     // Helper function to deliver correct channel array based on filter
     const filteredArray = (filterKey) => {
       switch (filterKey) {
@@ -477,7 +462,7 @@ export const currentChannels = createSelector(
       }
     }
 
-    const channelArray = filteredArray(filter.key)
+    const channelArray = filteredArray(channelFilter.key)
 
     return channelArray.filter(channel => (Object.prototype.hasOwnProperty.call(channel, 'channel') ?
       channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index ca7e9fc6..a1f48a58 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -80,7 +80,6 @@ contactFormSelectors.showManualForm = createSelector(
     if (!searchQuery.length) { return false }
 
     const connectableNodes = filteredNetworkNodes.filter(node => node.addresses.length > 0)
-    console.log('connectableNodes: ', connectableNodes)
 
     if (!filteredNetworkNodes.length || !connectableNodes.length) { return true }
 
diff --git a/app/reducers/lnd.js b/app/reducers/lnd.js
index eaa19de3..6643beb8 100644
--- a/app/reducers/lnd.js
+++ b/app/reducers/lnd.js
@@ -52,12 +52,12 @@ export const lndStdout = (event, line) => (dispatch) => {
 
   if (line.includes('Caught up to height')) {
     trimmed = line.slice(line.indexOf('Caught up to height') + 'Caught up to height'.length).trim()
-    height = trimmed.split(' ')[0].split(/(\r\n|\n|\r)/gm)[0]
+    height = trimmed.split(' ')[0].split(/(\r\n|\n|\r)/gm)[0] // eslint-disable-line
   }
 
   if (line.includes('Catching up block hashes to height')) {
     trimmed = line.slice(line.indexOf('Catching up block hashes to height') + 'Catching up block hashes to height'.length).trim()
-    height = trimmed.match(/[-]{0,1}[\d.]*[\d]+/g)[0]
+    height = trimmed.match(/[-]{0,1}[\d.]*[\d]+/g)[0] // eslint-disable-line
   }
 
   dispatch({ type: RECEIVE_LINE, lndBlockHeight: height })
diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js
index d24346ae..b33f1537 100644
--- a/app/routes/contacts/components/Contacts.js
+++ b/app/routes/contacts/components/Contacts.js
@@ -5,8 +5,6 @@ import Isvg from 'react-inlinesvg'
 import { MdSearch } from 'react-icons/lib/md'
 import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 
-import { btc } from 'utils'
-
 import ContactModal from 'components/Contacts/ContactModal'
 import ContactsForm from 'components/Contacts/ContactsForm'
 import OnlineContact from 'components/Contacts/OnlineContact'
@@ -42,15 +40,11 @@ class Contacts extends Component {
         searchQuery,
         filterPulldown,
         filter,
-        viewType,
         loadingChannelPubkeys,
         closingChannelIds
       },
       currentChannels,
       activeChannels,
-      nonActiveChannels,
-      pendingOpenChannels,
-      closingPendingChannels,
       fetchChannels,
       updateChannelSearchQuery,
 
@@ -60,12 +54,9 @@ class Contacts extends Component {
 
       openContactsForm,
       openContactModal,
-      closeContactModal,
 
       contactModalProps,
-      contactsFormProps,
-
-      peers
+      contactsFormProps
     } = this.props
 
     const refreshClicked = () => {
@@ -173,6 +164,7 @@ class Contacts extends Component {
               } else if (!channel.active) {
                 return <OfflineContact channel={channel} key={index} openContactModal={openContactModal} />
               }
+                return <span />
             })
           }
         </ul>
@@ -181,6 +173,25 @@ class Contacts extends Component {
   }
 }
 
-Contacts.propTypes = {}
+Contacts.propTypes = {
+  fetchPeers: PropTypes.func.isRequired,
+  fetchDescribeNetwork: PropTypes.func.isRequired,
+
+  channels: PropTypes.object.isRequired,
+  currentChannels: PropTypes.array.isRequired,
+  activeChannels: PropTypes.array.isRequired,
+  fetchChannels: PropTypes.func.isRequired,
+  updateChannelSearchQuery: PropTypes.func.isRequired,
+
+  toggleFilterPulldown: PropTypes.func.isRequired,
+  changeFilter: PropTypes.func.isRequired,
+  nonActiveFilters: PropTypes.array.isRequired,
+
+  openContactsForm: PropTypes.func.isRequired,
+  openContactModal: PropTypes.func.isRequired,
+
+  contactModalProps: PropTypes.object.isRequired,
+  contactsFormProps: PropTypes.object.isRequired
+}
 
 export default Contacts
diff --git a/app/store/configureStore.dev.js b/app/store/configureStore.dev.js
index cf0d4004..2fddc6fe 100644
--- a/app/store/configureStore.dev.js
+++ b/app/store/configureStore.dev.js
@@ -50,8 +50,7 @@ const configureStore = (initialState?: counterStateType) => {
 
   if (module.hot) {
     module.hot.accept('../reducers', () =>
-      store.replaceReducer(require('../reducers')) // eslint-disable-line global-require
-    )
+      store.replaceReducer(require('../reducers'))) // eslint-disable-line global-require
   }
 
   return store
diff --git a/test/components/Channels.spec.js b/test/components/Channels.spec.js
deleted file mode 100644
index 1e8e087c..00000000
--- a/test/components/Channels.spec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-
-import { TiPlus } from 'react-icons/lib/ti'
-import Channels from '../../app/components/Channels'
-import ChannelModal from '../../app/components/Channels/ChannelModal'
-import ChannelForm from '../../app/components/Channels/ChannelForm'
-import Channel from '../../app/components/Channels/Channel'
-import OpenPendingChannel from '../../app/components/Channels/OpenPendingChannel'
-import ClosedPendingChannel from '../../app/components/Channels/ClosedPendingChannel'
-
-const defaultProps = {
-  ticker: {},
-  peers: [],
-  channelsLoading: false,
-  modalChannel: {},
-  setChannel: () => {},
-  channelModalOpen: false,
-  channelForm: {},
-  setChannelForm: () => {},
-  allChannels: [],
-  openChannel: () => {},
-  closeChannel: () => {},
-  fetchChannels: () => {},
-  currentTicker: {},
-  explorerLinkBase: 'https://testnet.smartbit.com.au'
-}
-
-const channel_open = {
-  active: true,
-  capacity: '10000000',
-  chan_id: '1322138543153545216',
-  channel_point: '7efb80bf568cf55eb43ba439fdafea99b43f53493ec9ae7c0eae88de2d2b4577:0',
-  commit_fee: '8688',
-  commit_weight: '600',
-  fee_per_kw: '12000',
-  local_balance: '9991312',
-  num_updates: '0',
-  pending_htlcs: [],
-  remote_balance: '0',
-  remote_pubkey: '020178567c0f881b579a7ddbcd8ce362a33ebba2b3c2d218e667f7e3b390e40d4e',
-  total_satoshis_received: '0',
-  total_satoshis_sent: '0',
-  unsettled_balance: '0'
-}
-
-const channel_pending = {
-  capacity: '10000000',
-  channel_point: '7efb80bf568cf55eb43ba439fdafea99b43f53493ec9ae7c0eae88de2d2b4577:0',
-  local_balance: '9991312',
-  remote_balance: '0',
-  remote_node_pub: '020178567c0f881b579a7ddbcd8ce362a33ebba2b3c2d218e667f7e3b390e40d4e'
-}
-
-const pending_open_channels = {
-  blocks_till_open: 0,
-  channel: channel_pending,
-  commit_fee: '8688',
-  commit_weight: '600',
-  confirmation_height: 0,
-  fee_per_kw: '12000'
-}
-
-const pending_closing_channels = {
-  channel: channel_pending,
-  closing_txid: '8d623d1ddd32945cace3351d511df2b5be3e0f7c7e5622989d2fc0215e8a2a7e'
-}
-
-describe('Channels', () => {
-  describe('should show default components', () => {
-    const props = { ...defaultProps, channelsLoading: true }
-    const el = shallow(<Channels {...props} />)
-    it('should contain Modal and Form', () => {
-      expect(el.find(ChannelModal)).toHaveLength(1)
-      expect(el.find(ChannelForm)).toHaveLength(1)
-    })
-    it('should have Channels header, and plus button', () => {
-      expect(el.contains('Channels')).toBe(true)
-      expect(el.find(TiPlus)).toHaveLength(1)
-    })
-  })
-
-  describe('channels are loading', () => {
-    const props = { ...defaultProps, channelsLoading: true }
-    const el = shallow(<Channels {...props} />)
-    it('should display loading msg', () => {
-      expect(el.contains('Loading...')).toBe(true)
-    })
-  })
-
-  describe('channels are loaded', () => {
-    describe('no channels', () => {
-      const props = { ...defaultProps, allChannels: [] }
-      const el = shallow(<Channels {...props} />)
-      it('should not show channels or loading', () => {
-        expect(el.contains('Loading...')).toBe(false)
-        expect(el.find(Channel)).toHaveLength(0)
-      })
-    })
-
-    describe('channel is open-pending', () => {
-      const props = { ...defaultProps, allChannels: [pending_open_channels] }
-      const el = shallow(<Channels {...props} />)
-      it('should display open-pending', () => {
-        expect(el.find(OpenPendingChannel)).toHaveLength(1)
-      })
-    })
-
-    describe('channel is open', () => {
-      const props = { ...defaultProps, allChannels: [channel_open] }
-      const el = shallow(<Channels {...props} />)
-      it('should display open channel', () => {
-        expect(el.find(Channel)).toHaveLength(1)
-      })
-    })
-
-    describe('channel is closed-pending', () => {
-      const props = { ...defaultProps, allChannels: [pending_closing_channels] }
-      const el = shallow(<Channels {...props} />)
-      it('should display closed-pending', () => {
-        expect(el.find(ClosedPendingChannel)).toHaveLength(1)
-      })
-    })
-  })
-})
diff --git a/test/components/Peers.spec.js b/test/components/Peers.spec.js
deleted file mode 100644
index 465f7d96..00000000
--- a/test/components/Peers.spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-
-import Peers from '../../app/routes/peers/components/Peers'
-import PeerModal from '../../app/components/Peers/PeerModal'
-import PeerForm from '../../app/components/Peers/PeerForm'
-import Peer from '../../app/components/Peers/Peer'
-
-const defaultProps = {
-  fetchPeers: () => {},
-  peerFormProps: {
-    form: {},
-    setForm: () => {},
-    connect: () => {}
-  },
-  setPeerForm: () => {},
-  setPeer: () => {},
-  updateSearchQuery: () => {},
-  disconnectRequest: () => {},
-
-  peerModalOpen: false,
-  filteredPeers: [],
-  peers: {
-    peer: null,
-    searchQuery: ''
-  }
-}
-
-const peer = {
-  address: '45.77.115.33:9735',
-  bytes_recv: '63322',
-  bytes_sent: '68714',
-  inbound: true,
-  peer_id: 3,
-  ping_time: '261996',
-  pub_key: '0293cb97aac77eacjc5377d761640f1b51ebba350902801e1aa62853fa7bc3a1f30',
-  sat_recv: '0',
-  sat_sent: '0'
-}
-
-describe('component.Peers', () => {
-  describe('default components', () => {
-    const props = { ...defaultProps }
-    const el = shallow(<Peers {...props} />)
-    it('should contain Modal and Form', () => {
-      expect(el.find(PeerModal)).toHaveLength(1)
-      expect(el.find(PeerForm)).toHaveLength(1)
-    })
-    it('should have Peers header, and plus button', () => {
-      expect(el.contains('Peers')).toBe(true)
-      expect(el.contains('Add new peer')).toBe(true)
-    })
-  })
-
-  describe('peers are loaded', () => {
-    describe('no peers', () => {
-      const props = { ...defaultProps }
-      const el = shallow(<Peers {...props} />)
-      it('should show no peers', () => {
-        expect(el.find(Peer)).toHaveLength(0)
-      })
-    })
-
-    describe('peer connected', () => {
-      const props = { ...defaultProps, filteredPeers: [peer] }
-      const el = shallow(<Peers {...props} />)
-      it('should show peer information', () => {
-        expect(el.find(Peer)).toHaveLength(1)
-      })
-    })
-  })
-})
diff --git a/test/reducers/__snapshots__/balance.spec.js.snap b/test/reducers/__snapshots__/balance.spec.js.snap
deleted file mode 100644
index f1d37985..00000000
--- a/test/reducers/__snapshots__/balance.spec.js.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers balanceReducer should handle DECREMENT_COUNTER 1`] = `
-Object {
-  "balanceLoading": false,
-  "channelBalance": undefined,
-  "walletBalance": undefined,
-}
-`;
-
-exports[`reducers balanceReducer should handle INCREMENT_COUNTER 1`] = `
-Object {
-  "balanceLoading": true,
-  "channelBalance": null,
-  "walletBalance": null,
-}
-`;
-
-exports[`reducers balanceReducer should handle initial state 1`] = `
-Object {
-  "balanceLoading": false,
-  "channelBalance": null,
-  "walletBalance": null,
-}
-`;
-
-exports[`reducers balanceReducer should handle unknown action type 1`] = `
-Object {
-  "balanceLoading": false,
-  "channelBalance": null,
-  "walletBalance": null,
-}
-`;
diff --git a/test/reducers/__snapshots__/channels.spec.js.snap b/test/reducers/__snapshots__/channels.spec.js.snap
deleted file mode 100644
index 195b780c..00000000
--- a/test/reducers/__snapshots__/channels.spec.js.snap
+++ /dev/null
@@ -1,308 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers channelsReducer should correctly getChannels 1`] = `
-Object {
-  "channel": null,
-  "channelForm": Object {
-    "isOpen": false,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [],
-  "channelsLoading": true,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": false,
-  "pendingChannels": Object {
-    "pending_closing_channels": Array [],
-    "pending_force_closing_channels": Array [],
-    "pending_open_channels": Array [],
-    "total_limbo_balance": "",
-  },
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
-
-exports[`reducers channelsReducer should correctly openingChannel 1`] = `
-Object {
-  "channel": null,
-  "channelForm": Object {
-    "isOpen": false,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [],
-  "channelsLoading": false,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": true,
-  "pendingChannels": Object {
-    "pending_closing_channels": Array [],
-    "pending_force_closing_channels": Array [],
-    "pending_open_channels": Array [],
-    "total_limbo_balance": "",
-  },
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
-
-exports[`reducers channelsReducer should correctly receiveChannel 1`] = `
-Object {
-  "channel": null,
-  "channelForm": Object {
-    "isOpen": false,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [
-    1,
-    2,
-  ],
-  "channelsLoading": false,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": false,
-  "pendingChannels": Array [
-    3,
-    4,
-  ],
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
-
-exports[`reducers channelsReducer should correctly setChannel 1`] = `
-Object {
-  "channel": "channel",
-  "channelForm": Object {
-    "isOpen": false,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [],
-  "channelsLoading": false,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": false,
-  "pendingChannels": Object {
-    "pending_closing_channels": Array [],
-    "pending_force_closing_channels": Array [],
-    "pending_open_channels": Array [],
-    "total_limbo_balance": "",
-  },
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
-
-exports[`reducers channelsReducer should correctly setChannelForm 1`] = `
-Object {
-  "channel": null,
-  "channelForm": Object {
-    "isOpen": true,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [],
-  "channelsLoading": false,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": false,
-  "pendingChannels": Object {
-    "pending_closing_channels": Array [],
-    "pending_force_closing_channels": Array [],
-    "pending_open_channels": Array [],
-    "total_limbo_balance": "",
-  },
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
-
-exports[`reducers channelsReducer should handle initial state 1`] = `
-Object {
-  "channel": null,
-  "channelForm": Object {
-    "isOpen": false,
-    "local_amt": "",
-    "node_key": "",
-    "push_amt": "",
-  },
-  "channels": Array [],
-  "channelsLoading": false,
-  "closingChannel": false,
-  "filter": Object {
-    "key": "ALL_CHANNELS",
-    "name": "All Channels",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_CHANNELS",
-      "name": "All Channels",
-    },
-    Object {
-      "key": "ACTIVE_CHANNELS",
-      "name": "Active Channels",
-    },
-    Object {
-      "key": "OPEN_CHANNELS",
-      "name": "Open Channels",
-    },
-    Object {
-      "key": "OPEN_PENDING_CHANNELS",
-      "name": "Open Pending Channels",
-    },
-    Object {
-      "key": "CLOSING_PENDING_CHANNELS",
-      "name": "Closing Pending Channels",
-    },
-  ],
-  "openingChannel": false,
-  "pendingChannels": Object {
-    "pending_closing_channels": Array [],
-    "pending_force_closing_channels": Array [],
-    "pending_open_channels": Array [],
-    "total_limbo_balance": "",
-  },
-  "searchQuery": "",
-  "viewType": 0,
-}
-`;
diff --git a/test/reducers/__snapshots__/form.spec.js.snap b/test/reducers/__snapshots__/form.spec.js.snap
deleted file mode 100644
index 2b1d763d..00000000
--- a/test/reducers/__snapshots__/form.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers formReducer should correctly setFormType 1`] = `
-Object {
-  "formType": "FOO",
-}
-`;
-
-exports[`reducers formReducer should handle initial state 1`] = `
-Object {
-  "formType": null,
-}
-`;
diff --git a/test/reducers/__snapshots__/info.spec.js.snap b/test/reducers/__snapshots__/info.spec.js.snap
deleted file mode 100644
index 1fd77f2b..00000000
--- a/test/reducers/__snapshots__/info.spec.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers infoReducer should correctly getInfo 1`] = `
-Object {
-  "data": Object {},
-  "infoLoading": true,
-}
-`;
-
-exports[`reducers infoReducer should correctly receiveInfo 1`] = `
-Object {
-  "data": "foo",
-  "infoLoading": false,
-}
-`;
-
-exports[`reducers infoReducer should handle initial state 1`] = `
-Object {
-  "data": Object {},
-  "infoLoading": false,
-}
-`;
diff --git a/test/reducers/__snapshots__/invoice.spec.js.snap b/test/reducers/__snapshots__/invoice.spec.js.snap
deleted file mode 100644
index c2d59f50..00000000
--- a/test/reducers/__snapshots__/invoice.spec.js.snap
+++ /dev/null
@@ -1,171 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers invoiceReducer should correctly getInvoice 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": true,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly getInvoices 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": true,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly invcoiceFailed 1`] = `
-Object {
-  "data": null,
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly invcoiceSuccessful 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [
-    "foo",
-  ],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly receiveFormInvoice 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly receiveInvoice 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": "foo",
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly receiveInvoices 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [
-    1,
-    2,
-  ],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly searchInvoices 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "foo",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly sendInvoice 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": true,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should correctly setInvoice 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": "foo",
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
-
-exports[`reducers invoiceReducer should handle initial state 1`] = `
-Object {
-  "data": Object {},
-  "formInvoice": Object {
-    "amount": "0",
-    "payreq": "",
-    "r_hash": "",
-  },
-  "invoice": null,
-  "invoiceLoading": false,
-  "invoices": Array [],
-  "invoicesSearchText": "",
-}
-`;
diff --git a/test/reducers/__snapshots__/payment.spec.js.snap b/test/reducers/__snapshots__/payment.spec.js.snap
deleted file mode 100644
index fe7667c3..00000000
--- a/test/reducers/__snapshots__/payment.spec.js.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers paymentReducer should correctly getPayments 1`] = `
-Object {
-  "payment": null,
-  "paymentLoading": true,
-  "payments": Array [],
-  "sendingPayment": false,
-}
-`;
-
-exports[`reducers paymentReducer should correctly paymentSuccessful 1`] = `
-Object {
-  "payment": null,
-  "paymentLoading": false,
-  "payments": Array [],
-  "sendingPayment": false,
-}
-`;
-
-exports[`reducers paymentReducer should correctly receivePayments 1`] = `
-Object {
-  "payment": null,
-  "paymentLoading": false,
-  "payments": Array [
-    1,
-    2,
-  ],
-  "sendingPayment": false,
-}
-`;
-
-exports[`reducers paymentReducer should correctly sendPayment 1`] = `
-Object {
-  "payment": "foo",
-  "paymentLoading": false,
-  "payments": Array [],
-  "sendingPayment": false,
-}
-`;
-
-exports[`reducers paymentReducer should handle initial state 1`] = `
-Object {
-  "payment": null,
-  "paymentLoading": false,
-  "payments": Array [],
-  "sendingPayment": false,
-}
-`;
diff --git a/test/reducers/__snapshots__/peers.spec.js.snap b/test/reducers/__snapshots__/peers.spec.js.snap
deleted file mode 100644
index 69bcafdd..00000000
--- a/test/reducers/__snapshots__/peers.spec.js.snap
+++ /dev/null
@@ -1,182 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers peersReducer should correctly connectFailure 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly connectPeer 1`] = `
-Object {
-  "connecting": true,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly connectSuccess 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [
-    "foo",
-  ],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly disconnectFailure 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly disconnectPeer 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": true,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly disconnectSuccess 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly getPeers 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": true,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly receivePeers 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": "foo",
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly setPeer 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": "foo",
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should correctly setPeerForm 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "0": "f",
-    "1": "o",
-    "2": "o",
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
-
-exports[`reducers peersReducer should handle initial state 1`] = `
-Object {
-  "connecting": false,
-  "disconnecting": false,
-  "peer": null,
-  "peerForm": Object {
-    "host": "",
-    "isOpen": false,
-    "pubkey": "",
-  },
-  "peers": Array [],
-  "peersLoading": false,
-  "searchQuery": "",
-}
-`;
diff --git a/test/reducers/__snapshots__/ticker.spec.js.snap b/test/reducers/__snapshots__/ticker.spec.js.snap
deleted file mode 100644
index 06102a8b..00000000
--- a/test/reducers/__snapshots__/ticker.spec.js.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reducers tickerReducer should correctly getTicker 1`] = `
-Object {
-  "btcTicker": null,
-  "crypto": "",
-  "currency": "",
-  "ltcTicker": null,
-  "tickerLoading": true,
-}
-`;
-
-exports[`reducers tickerReducer should correctly receiveTicker 1`] = `
-Object {
-  "btcTicker": undefined,
-  "crypto": "",
-  "currency": "",
-  "ltcTicker": undefined,
-  "tickerLoading": false,
-}
-`;
-
-exports[`reducers tickerReducer should correctly setCrypto 1`] = `
-Object {
-  "btcTicker": null,
-  "crypto": "foo",
-  "currency": "",
-  "ltcTicker": null,
-  "tickerLoading": false,
-}
-`;
-
-exports[`reducers tickerReducer should correctly setCurrency 1`] = `
-Object {
-  "btcTicker": null,
-  "crypto": "",
-  "currency": "foo",
-  "ltcTicker": null,
-  "tickerLoading": false,
-}
-`;
-
-exports[`reducers tickerReducer should handle initial state 1`] = `
-Object {
-  "btcTicker": null,
-  "crypto": "",
-  "currency": "",
-  "ltcTicker": null,
-  "tickerLoading": false,
-}
-`;

From 6e30b830867c16d316195294f29829415380bd5a Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 8 Jan 2018 19:25:43 -0600
Subject: [PATCH 22/22] fix(tests): fix nav tests as we have new nav links

---
 test/components/Nav.spec.js                   |   4 +-
 .../__snapshots__/balance.spec.js.snap        |  33 ++
 .../__snapshots__/channels.spec.js.snap       | 344 ++++++++++++++++++
 test/reducers/__snapshots__/form.spec.js.snap |  13 +
 test/reducers/__snapshots__/info.spec.js.snap |  22 ++
 .../__snapshots__/invoice.spec.js.snap        | 171 +++++++++
 .../__snapshots__/payment.spec.js.snap        |  49 +++
 .../reducers/__snapshots__/peers.spec.js.snap | 182 +++++++++
 .../__snapshots__/ticker.spec.js.snap         |  51 +++
 9 files changed, 867 insertions(+), 2 deletions(-)
 create mode 100644 test/reducers/__snapshots__/balance.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/channels.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/form.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/info.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/invoice.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/payment.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/peers.spec.js.snap
 create mode 100644 test/reducers/__snapshots__/ticker.spec.js.snap

diff --git a/test/components/Nav.spec.js b/test/components/Nav.spec.js
index 86dbf88e..73a9b761 100644
--- a/test/components/Nav.spec.js
+++ b/test/components/Nav.spec.js
@@ -21,8 +21,8 @@ describe('default elements', () => {
 
   it('should render nav links', () => {
     expect(el.find(NavLink).at(0).props().to).toBe('/')
-    expect(el.find(NavLink).at(1).props().to).toBe('/peers')
-    expect(el.find(NavLink).at(2).props().to).toBe('/channels')
+    expect(el.find(NavLink).at(1).props().to).toBe('/contacts')
+    expect(el.find(NavLink).at(2).props().to).toBe('/network')
   })
   it('should render buttons', () => {
     expect(el.find('.button').at(0).text()).toContain('Pay')
diff --git a/test/reducers/__snapshots__/balance.spec.js.snap b/test/reducers/__snapshots__/balance.spec.js.snap
new file mode 100644
index 00000000..f1d37985
--- /dev/null
+++ b/test/reducers/__snapshots__/balance.spec.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers balanceReducer should handle DECREMENT_COUNTER 1`] = `
+Object {
+  "balanceLoading": false,
+  "channelBalance": undefined,
+  "walletBalance": undefined,
+}
+`;
+
+exports[`reducers balanceReducer should handle INCREMENT_COUNTER 1`] = `
+Object {
+  "balanceLoading": true,
+  "channelBalance": null,
+  "walletBalance": null,
+}
+`;
+
+exports[`reducers balanceReducer should handle initial state 1`] = `
+Object {
+  "balanceLoading": false,
+  "channelBalance": null,
+  "walletBalance": null,
+}
+`;
+
+exports[`reducers balanceReducer should handle unknown action type 1`] = `
+Object {
+  "balanceLoading": false,
+  "channelBalance": null,
+  "walletBalance": null,
+}
+`;
diff --git a/test/reducers/__snapshots__/channels.spec.js.snap b/test/reducers/__snapshots__/channels.spec.js.snap
new file mode 100644
index 00000000..18f6b4ee
--- /dev/null
+++ b/test/reducers/__snapshots__/channels.spec.js.snap
@@ -0,0 +1,344 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers channelsReducer should correctly getChannels 1`] = `
+Object {
+  "channel": null,
+  "channelForm": Object {
+    "isOpen": false,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [],
+  "channelsLoading": true,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": false,
+  "pendingChannels": Object {
+    "pending_closing_channels": Array [],
+    "pending_force_closing_channels": Array [],
+    "pending_open_channels": Array [],
+    "total_limbo_balance": "",
+  },
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
+
+exports[`reducers channelsReducer should correctly openingChannel 1`] = `
+Object {
+  "channel": null,
+  "channelForm": Object {
+    "isOpen": false,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [],
+  "channelsLoading": false,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": true,
+  "pendingChannels": Object {
+    "pending_closing_channels": Array [],
+    "pending_force_closing_channels": Array [],
+    "pending_open_channels": Array [],
+    "total_limbo_balance": "",
+  },
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
+
+exports[`reducers channelsReducer should correctly receiveChannel 1`] = `
+Object {
+  "channel": null,
+  "channelForm": Object {
+    "isOpen": false,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [
+    1,
+    2,
+  ],
+  "channelsLoading": false,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": false,
+  "pendingChannels": Array [
+    3,
+    4,
+  ],
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
+
+exports[`reducers channelsReducer should correctly setChannel 1`] = `
+Object {
+  "channel": "channel",
+  "channelForm": Object {
+    "isOpen": false,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [],
+  "channelsLoading": false,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": false,
+  "pendingChannels": Object {
+    "pending_closing_channels": Array [],
+    "pending_force_closing_channels": Array [],
+    "pending_open_channels": Array [],
+    "total_limbo_balance": "",
+  },
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
+
+exports[`reducers channelsReducer should correctly setChannelForm 1`] = `
+Object {
+  "channel": null,
+  "channelForm": Object {
+    "isOpen": true,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [],
+  "channelsLoading": false,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": false,
+  "pendingChannels": Object {
+    "pending_closing_channels": Array [],
+    "pending_force_closing_channels": Array [],
+    "pending_open_channels": Array [],
+    "total_limbo_balance": "",
+  },
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
+
+exports[`reducers channelsReducer should handle initial state 1`] = `
+Object {
+  "channel": null,
+  "channelForm": Object {
+    "isOpen": false,
+    "local_amt": "",
+    "node_key": "",
+    "push_amt": "",
+  },
+  "channels": Array [],
+  "channelsLoading": false,
+  "closingChannel": false,
+  "closingChannelIds": Array [],
+  "contactModal": Object {
+    "channel": null,
+    "isOpen": false,
+  },
+  "filter": Object {
+    "key": "ALL_CHANNELS",
+    "name": "All Contacts",
+  },
+  "filterPulldown": false,
+  "filters": Array [
+    Object {
+      "key": "ALL_CHANNELS",
+      "name": "All Contacts",
+    },
+    Object {
+      "key": "ACTIVE_CHANNELS",
+      "name": "Online Contacts",
+    },
+    Object {
+      "key": "NON_ACTIVE_CHANNELS",
+      "name": "Offline Contacts",
+    },
+    Object {
+      "key": "OPEN_PENDING_CHANNELS",
+      "name": "Pending Contacts",
+    },
+    Object {
+      "key": "CLOSING_PENDING_CHANNELS",
+      "name": "Closing Contacts",
+    },
+  ],
+  "loadingChannelPubkeys": Array [],
+  "openingChannel": false,
+  "pendingChannels": Object {
+    "pending_closing_channels": Array [],
+    "pending_force_closing_channels": Array [],
+    "pending_open_channels": Array [],
+    "total_limbo_balance": "",
+  },
+  "searchQuery": "",
+  "viewType": 0,
+}
+`;
diff --git a/test/reducers/__snapshots__/form.spec.js.snap b/test/reducers/__snapshots__/form.spec.js.snap
new file mode 100644
index 00000000..2b1d763d
--- /dev/null
+++ b/test/reducers/__snapshots__/form.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers formReducer should correctly setFormType 1`] = `
+Object {
+  "formType": "FOO",
+}
+`;
+
+exports[`reducers formReducer should handle initial state 1`] = `
+Object {
+  "formType": null,
+}
+`;
diff --git a/test/reducers/__snapshots__/info.spec.js.snap b/test/reducers/__snapshots__/info.spec.js.snap
new file mode 100644
index 00000000..1fd77f2b
--- /dev/null
+++ b/test/reducers/__snapshots__/info.spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers infoReducer should correctly getInfo 1`] = `
+Object {
+  "data": Object {},
+  "infoLoading": true,
+}
+`;
+
+exports[`reducers infoReducer should correctly receiveInfo 1`] = `
+Object {
+  "data": "foo",
+  "infoLoading": false,
+}
+`;
+
+exports[`reducers infoReducer should handle initial state 1`] = `
+Object {
+  "data": Object {},
+  "infoLoading": false,
+}
+`;
diff --git a/test/reducers/__snapshots__/invoice.spec.js.snap b/test/reducers/__snapshots__/invoice.spec.js.snap
new file mode 100644
index 00000000..c2d59f50
--- /dev/null
+++ b/test/reducers/__snapshots__/invoice.spec.js.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers invoiceReducer should correctly getInvoice 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": true,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly getInvoices 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": true,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly invcoiceFailed 1`] = `
+Object {
+  "data": null,
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly invcoiceSuccessful 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [
+    "foo",
+  ],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly receiveFormInvoice 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly receiveInvoice 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": "foo",
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly receiveInvoices 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [
+    1,
+    2,
+  ],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly searchInvoices 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "foo",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly sendInvoice 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": true,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should correctly setInvoice 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": "foo",
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
+
+exports[`reducers invoiceReducer should handle initial state 1`] = `
+Object {
+  "data": Object {},
+  "formInvoice": Object {
+    "amount": "0",
+    "payreq": "",
+    "r_hash": "",
+  },
+  "invoice": null,
+  "invoiceLoading": false,
+  "invoices": Array [],
+  "invoicesSearchText": "",
+}
+`;
diff --git a/test/reducers/__snapshots__/payment.spec.js.snap b/test/reducers/__snapshots__/payment.spec.js.snap
new file mode 100644
index 00000000..fe7667c3
--- /dev/null
+++ b/test/reducers/__snapshots__/payment.spec.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers paymentReducer should correctly getPayments 1`] = `
+Object {
+  "payment": null,
+  "paymentLoading": true,
+  "payments": Array [],
+  "sendingPayment": false,
+}
+`;
+
+exports[`reducers paymentReducer should correctly paymentSuccessful 1`] = `
+Object {
+  "payment": null,
+  "paymentLoading": false,
+  "payments": Array [],
+  "sendingPayment": false,
+}
+`;
+
+exports[`reducers paymentReducer should correctly receivePayments 1`] = `
+Object {
+  "payment": null,
+  "paymentLoading": false,
+  "payments": Array [
+    1,
+    2,
+  ],
+  "sendingPayment": false,
+}
+`;
+
+exports[`reducers paymentReducer should correctly sendPayment 1`] = `
+Object {
+  "payment": "foo",
+  "paymentLoading": false,
+  "payments": Array [],
+  "sendingPayment": false,
+}
+`;
+
+exports[`reducers paymentReducer should handle initial state 1`] = `
+Object {
+  "payment": null,
+  "paymentLoading": false,
+  "payments": Array [],
+  "sendingPayment": false,
+}
+`;
diff --git a/test/reducers/__snapshots__/peers.spec.js.snap b/test/reducers/__snapshots__/peers.spec.js.snap
new file mode 100644
index 00000000..69bcafdd
--- /dev/null
+++ b/test/reducers/__snapshots__/peers.spec.js.snap
@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers peersReducer should correctly connectFailure 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly connectPeer 1`] = `
+Object {
+  "connecting": true,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly connectSuccess 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [
+    "foo",
+  ],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly disconnectFailure 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly disconnectPeer 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": true,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly disconnectSuccess 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly getPeers 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": true,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly receivePeers 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": "foo",
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly setPeer 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": "foo",
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should correctly setPeerForm 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "0": "f",
+    "1": "o",
+    "2": "o",
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
+
+exports[`reducers peersReducer should handle initial state 1`] = `
+Object {
+  "connecting": false,
+  "disconnecting": false,
+  "peer": null,
+  "peerForm": Object {
+    "host": "",
+    "isOpen": false,
+    "pubkey": "",
+  },
+  "peers": Array [],
+  "peersLoading": false,
+  "searchQuery": "",
+}
+`;
diff --git a/test/reducers/__snapshots__/ticker.spec.js.snap b/test/reducers/__snapshots__/ticker.spec.js.snap
new file mode 100644
index 00000000..06102a8b
--- /dev/null
+++ b/test/reducers/__snapshots__/ticker.spec.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reducers tickerReducer should correctly getTicker 1`] = `
+Object {
+  "btcTicker": null,
+  "crypto": "",
+  "currency": "",
+  "ltcTicker": null,
+  "tickerLoading": true,
+}
+`;
+
+exports[`reducers tickerReducer should correctly receiveTicker 1`] = `
+Object {
+  "btcTicker": undefined,
+  "crypto": "",
+  "currency": "",
+  "ltcTicker": undefined,
+  "tickerLoading": false,
+}
+`;
+
+exports[`reducers tickerReducer should correctly setCrypto 1`] = `
+Object {
+  "btcTicker": null,
+  "crypto": "foo",
+  "currency": "",
+  "ltcTicker": null,
+  "tickerLoading": false,
+}
+`;
+
+exports[`reducers tickerReducer should correctly setCurrency 1`] = `
+Object {
+  "btcTicker": null,
+  "crypto": "",
+  "currency": "foo",
+  "ltcTicker": null,
+  "tickerLoading": false,
+}
+`;
+
+exports[`reducers tickerReducer should handle initial state 1`] = `
+Object {
+  "btcTicker": null,
+  "crypto": "",
+  "currency": "",
+  "ltcTicker": null,
+  "tickerLoading": false,
+}
+`;