Merge pull request #65 from LN-Zap/feature/redesign-nav

Feature/redesign nav

app/components/GlobalError/GlobalError.js

@@ -15,7 +15,6 @@ const GlobalError = ({ error, clearError }) => (
 )
 
 
-
 GlobalError.propTypes = {
   error: PropTypes.string,
   clearError: PropTypes.func.isRequired

app/components/GlobalError/index.js

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

app/components/Nav/Nav.js

@@ -1,29 +1,45 @@
+import path from 'path'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { NavLink } from 'react-router-dom'
-import ReactSVG from 'react-svg'
-import { MdAccountBalanceWallet } from 'react-icons/lib/md'
-import { FaClockO } from 'react-icons/lib/fa'
+import Isvg from 'react-inlinesvg'
 import styles from './Nav.scss'
 
 const Nav = ({ openPayForm, openRequestForm }) => (
   <nav className={styles.nav}>
-    <div className={styles.logo}>
-      <ReactSVG path='../resources/zap_2.svg' />
-    </div>
+    <header className={styles.header}>
+      <h1>zap</h1>
+      <span>beta</span>
+    </header>
     <ul className={styles.links}>
-      <li>
-        <NavLink exact to='/' activeClassName={styles.active} className={styles.link}>
-          <FaClockO />
-          <span>Activity</span>
-        </NavLink>
-      </li>
-      <li>
-        <NavLink exact to='/wallet' activeClassName={styles.active} className={styles.link}>
-          <MdAccountBalanceWallet />
+      <NavLink exact to='/' activeClassName={styles.active} className={styles.link}>
+        <span className={styles.activeBorder} />
+        <li>
+          <Isvg styles={{ verticalAlign: 'middle' }} src={path.join(__dirname, '..', 'resources/icons/wallet.svg')} />
           <span>Wallet</span>
-        </NavLink>
-      </li>
+        </li>
+      </NavLink>
+      <NavLink exact to='/wallet' activeClassName={styles.active} className={styles.link}>
+        <span className={styles.activeBorder} />
+        <li>
+          <Isvg styles={{ verticalAlign: 'middle' }} src={path.join(__dirname, '..', 'resources/icons/peers.svg')} />
+          <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={path.join(__dirname, '..', 'resources/icons/channels.svg')} />
+          <span>Channels</span>
+        </li>
+      </NavLink>
+      <NavLink exact to='/settings' activeClassName={styles.active} className={styles.link}>
+        <span className={styles.activeBorder} />
+        <li>
+          <Isvg styles={{ verticalAlign: 'middle' }} src={path.join(__dirname, '..', 'resources/icons/settings.svg')} />
+          <span>Settings</span>
+        </li>
+      </NavLink>
     </ul>
     <div className={styles.buttons}>
       <div className={styles.button} onClick={openPayForm}>

app/components/Nav/Nav.scss

@@ -12,6 +12,32 @@
 	color: $white;
 }
 
+.header {
+	padding: 20px;
+
+	h1 {
+		color: $main;
+		font-size: 30px;
+    font-weight: 300;
+    text-align: center;
+    float: left;
+    -webkit-font-smoothing: antialiased;
+    margin-right: 5px;
+	}
+
+	span {
+		font-family: "Open Sans", "Helvetica Neue", Helvetica;
+    color: #bbb;
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    text-align: right;
+    line-height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+	}
+}
+
 .info {
 	padding: 25px 10px 10px 10px;
 
@@ -50,7 +76,7 @@
 .logo {
 	text-align: center;
 	margin-top: 20px;
-	margin-bottom: 50%;
+	margin-bottom: 35%;
 
 	svg {
 		width: 100px;
@@ -90,31 +116,60 @@
 }
 
 .links {
-	width: 50%;
-	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 50%;
 
 	.link {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	  width: 100%;
   	color: $darkestgrey;
-	  margin-bottom: 20px;
-	  padding: 0 10px;
 	  opacity: 0.5;
 	  cursor: pointer;
 	  text-decoration: none;
+		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: $main;
+	  	color: $white;
 	  	opacity: 1.0;
+
+  		.activeBorder {
+  			left: -10px;
+  		}
 	  }
 
 	  svg {
-	  	width: 22px;
-	  	height: 22px;
+	  	width: 32px;
+	  	height: 32px;
+	  	vertical-align: middle;
 	  }
 
     span {
     	margin-left: 15px;
     	line-height: 22px;
-	    font-size: 18px;
+	    font-size: 20px;
 	    font-weight: 500;
 	    letter-spacing: .2px;
     }
@@ -131,7 +186,6 @@
 
 .button {
 	text-align: center;
-	border-radius: 8px;
 	background: $main;
 	margin-bottom: 20px;
 	padding: 20px 10px;

app/components/Wallet/Wallet.js

@@ -1,7 +1,8 @@
+import path from 'path'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { FaQrcode } from 'react-icons/lib/fa'
-import CryptoIcon from 'components/CryptoIcon'
+import Isvg from 'react-inlinesvg'
 import { btc } from 'utils'
 import ReceiveModal from './ReceiveModal'
 import styles from './Wallet.scss'
@@ -17,7 +18,6 @@ class Wallet extends Component {
 
   render() {
     const {
-      ticker,
       balance,
       address,
       info
@@ -39,7 +39,7 @@ class Wallet extends Component {
         <div className={styles.content}>
           <div className={styles.left}>
             <div className={styles.leftContent}>
-              <CryptoIcon currency={ticker.crypto} />
+              <Isvg className={styles.bitcoinLogo} src={path.join(__dirname, '..', 'resources/icons/skinny_bitcoin.svg')} />
               <div className={styles.details}>
                 <h1>{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC</h1>
                 <span>{btc.satoshisToBtc(balance.walletBalance)} available</span>
@@ -62,7 +62,6 @@ class Wallet extends Component {
 }
 
 Wallet.propTypes = {
-  ticker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   address: PropTypes.string.isRequired,
   info: PropTypes.object.isRequired

app/components/Wallet/Wallet.scss

@@ -22,6 +22,11 @@
   display: flex;
   flex-direction: row;
 
+  .bitcoinLogo svg {
+    width: 100px;
+    height: 100px;
+  }
+
   .details {
     display: flex;
     flex-direction: column;

app/lnd/methods/index.js

@@ -105,7 +105,7 @@ export default function (lnd, event, msg, data) {
             })
           )
         )
-        .catch(error => {
+        .catch((error) => {
           console.log('addInvoice error: ', error)
           event.sender.send('invoiceFailed', { error: error.toString() })
         })
@@ -115,7 +115,7 @@ export default function (lnd, event, msg, data) {
     // { paymentRequest } = data
       paymentsController.sendPaymentSync(lnd, data)
         .then(({ payment_route }) => event.sender.send('paymentSuccessful', Object.assign(data, { payment_route })))
-        .catch(error => {
+        .catch((error) => {
           console.log('payinvoice error: ', error)
           event.sender.send('paymentFailed', { error: error.toString() })
         })
@@ -125,7 +125,7 @@ export default function (lnd, event, msg, data) {
     // { amount, addr } = data
       walletController.sendCoins(lnd, data)
         .then(({ txid }) => event.sender.send('transactionSuccessful', { amount: data.amount, addr: data.addr, txid }))
-        .catch(error => {
+        .catch((error) => {
           console.log('error: ', error)
           event.sender.send('transactionError', { error: error.toString() })
         })
@@ -158,7 +158,7 @@ export default function (lnd, event, msg, data) {
           console.log('peer_id: ', peer_id)
           event.sender.send('connectSuccess', { pub_key: data.pubkey, address: data.host, peer_id })
         })
-        .catch(error => {
+        .catch((error) => {
           event.sender.send('connectFailure', { error: error.toString() })
           console.log('connectPeer error: ', error)
         })

app/reducers/channels.js

@@ -90,7 +90,6 @@ export const channelSuccessful = () => (dispatch) => {
 
 // Receive IPC event for updated channel
 export const pushchannelupdated = () => (dispatch) => {
-  console.log('channelUpdatedData: ', channelUpdatedData)
   dispatch(fetchChannels())
 }
 
@@ -174,7 +173,7 @@ const ACTION_HANDLERS = {
 
   [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }),
   [OPENING_FAILURE]: state => ({ ...state, openingChannel: false }),
-  
+
   [CLOSING_CHANNEL]: state => ({ ...state, closingChannel: true })
 }
 

app/reducers/invoice.js

@@ -112,7 +112,7 @@ export const createdInvoice = (event, invoice) => (dispatch) => {
   dispatch(resetRequestForm())
 }
 
-export const invoiceFailed = (event, { error }) => dispatch => {
+export const invoiceFailed = (event, { error }) => (dispatch) => {
   dispatch({ type: INVOICE_FAILED })
   dispatch(setError(error))
 }

app/reducers/peers.js

@@ -79,7 +79,7 @@ export const connectRequest = ({ pubkey, host }) => (dispatch) => {
 export const connectSuccess = (event, peer) => dispatch => dispatch({ type: CONNECT_SUCCESS, peer })
 
 // Send IPC receive for unsuccessfully connecting to a peer
-export const connectFailure = (event, { error }) => dispatch => {
+export const connectFailure = (event, { error }) => (dispatch) => {
   dispatch({ type: CONNECT_FAILURE })
   dispatch(setError(error))
 }

app/routes/activity/components/Activity.js

@@ -84,20 +84,20 @@ class Activity extends Component {
           <header className={styles.header}>
             <section>
               <h2 onClick={toggleFilterPulldown}>
-                {filter.name} <span className={filterPulldown ? styles.pulldown : ''}><FaAngleDown /></span>
+                {filter.name} <span className={filterPulldown && styles.pulldown}><FaAngleDown /></span>
               </h2>
-              <ul className={`${styles.filters} ${filterPulldown ? styles.active : ''}`}>
+              <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
                 {
-                  nonActiveFilters.map(f =>
-                    (<li key={f.key} onClick={() => changeFilter(f)}>
+                  nonActiveFilters.map(f => (
+                    <li key={f.key} onClick={() => changeFilter(f)}>
                       {f.name}
-                    </li>)
-                  )
+                    </li>
+                  ))
                 }
               </ul>
             </section>
           </header>
-          <ul className={`${styles.activityContainer} ${filterPulldown ? styles.pulldown : ''}`}>
+          <ul className={`${styles.activityContainer} ${filterPulldown && styles.pulldown}`}>
             {
               currentActivity.map((activity, index) => (
                 <li className={styles.activity} key={index}>

app/routes/activity/components/Activity.scss

@@ -31,7 +31,7 @@
 }
 
 .activities {
-	background: $lightgrey;
+	background: $white;
 
 	.header {
 		padding: 60px 0 20px 0;
@@ -44,14 +44,19 @@
 			padding-left: 100px;
 			padding-right: 100px;
 			max-width: 964px;
+
+			h2 {
+				color: $bluegrey;
+			}
 	  }
 
 	  h2, h2 span {
+	  	color: $bluegrey;
 	  	cursor: pointer;
 			transition: color 0.25s;
 
 	  	&:hover {
-	  		color: lighten($darkestgrey, 10%);
+	  		color: lighten($bluegrey, 10%);
 	  	}
 	  }
 		

app/routes/app/components/App.js

@@ -79,7 +79,6 @@ class App extends Component {
 
         <div className={styles.content}>
           <Wallet
-            ticker={ticker}
             balance={balance}
             address={address}
             info={info}
@@ -105,6 +104,7 @@ App.propTypes = {
   form: PropTypes.object.isRequired,
   formProps: PropTypes.object.isRequired,
   closeForm: PropTypes.func.isRequired,
+  error: PropTypes.object.isRequired,
 
   newAddress: PropTypes.func.isRequired,
   fetchInfo: PropTypes.func.isRequired,
@@ -113,9 +113,11 @@ App.propTypes = {
   fetchBalance: PropTypes.func.isRequired,
   openPayForm: PropTypes.func.isRequired,
   openRequestForm: PropTypes.func.isRequired,
+  clearError: PropTypes.func.isRequired,
 
   currentTicker: PropTypes.object,
 
+
   children: PropTypes.object.isRequired
 }
 

app/routes/app/containers/AppContainer.js

@@ -50,7 +50,6 @@ const mapDispatchToProps = {
   fetchInvoice,
 
   fetchBlockHeight,
-  clearError,
   clearError
 }
 

resources/icons/channels.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="22px" height="26px" viewBox="0 0 22 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Exploration-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.7">
+        <g id="Main-Page-Copy-14" transform="translate(-37.000000, -380.000000)" fill="#FFFFFF">
+            <g id="Group-3" transform="translate(37.000000, 380.000000)">
+                <g id="Group">
+                    <path d="M13.1483846,22.7275617 C11.7209231,22.7275617 10.56,21.5768218 10.56,20.1637808 C10.56,18.7253559 11.6616923,17.6 13.068,17.6 C13.7102308,17.6 14.1290769,17.8453784 14.4861538,18.1169868 C14.6731538,18.2515219 14.7120769,18.5231303 14.5724615,18.7084333 C14.4328462,18.8945824 14.1696923,18.936889 13.981,18.7930465 C13.6391538,18.540053 13.4005385,18.4469784 13.068,18.4469784 C12.1363846,18.4469784 11.4061538,19.2000362 11.4061538,20.1637808 C11.4061538,21.1122951 12.1871538,21.8814294 13.1483846,21.8814294 C13.5206923,21.8814294 13.9006154,21.7545096 14.1933846,21.5353613 C14.3803846,21.3999801 14.6452308,21.4329793 14.7848462,21.6199745 C14.9253077,21.8061236 14.8872308,22.076886 14.7002308,22.211421 C14.2585385,22.5422587 13.7076923,22.7275617 13.1483846,22.7275617" id="Fill-11612"></path>
+                    <path d="M18.6284143,22.7275617 C18.0792605,22.7275617 17.5521066,22.5498739 17.1027989,22.211421 C16.9157989,22.076886 16.877722,21.8061236 17.0173374,21.6199745 C17.1569528,21.4329793 17.4226451,21.3915188 17.6096451,21.5353613 C17.9108759,21.7629709 18.2628759,21.8814294 18.6284143,21.8814294 C19.5744143,21.8814294 20.3444143,21.1122951 20.3444143,20.1637808 C20.3444143,19.2161127 19.5744143,18.4469784 18.6284143,18.4469784 C18.2027989,18.4469784 17.6502605,18.5984361 17.3964143,18.7930465 C17.2094143,18.9292738 16.9445682,18.8945824 16.8041066,18.7084333 C16.6644912,18.5231303 16.7025682,18.2515219 16.8895682,18.1169868 C17.3600297,17.7607651 18.120722,17.6 18.6284143,17.6 C20.0406451,17.6 21.1905682,18.751586 21.1905682,20.1637808 C21.1905682,21.5768218 20.0406451,22.7275617 18.6284143,22.7275617" id="Fill-11613"></path>
+                    <path d="M17.8538462,21.0852862 L13.6230769,21.0852862 C13.3895385,21.0852862 13.2,20.8991371 13.2,20.6630661 C13.2,20.425303 13.3895385,20.24 13.6230769,20.24 L17.8538462,20.24 C18.0873846,20.24 18.2769231,20.425303 18.2769231,20.6630661 C18.2769231,20.8991371 18.0873846,21.0852862 17.8538462,21.0852862" id="Fill-11614"></path>
+                    <path d="M11,25.3839687 L0.423076923,25.3839687 C0.189538462,25.3839687 0,25.1969735 0,24.9600565 L0,6.32822341 C0,6.21907234 0.0414615385,6.11753647 0.115923077,6.03207711 L5.71153846,0.134535034 C5.79192308,0.0507679375 5.90276923,0 6.01869231,0 L19.0384615,0 C19.272,0 19.4615385,0.185302972 19.4615385,0.423066146 L19.4615385,16.0756674 C19.4615385,16.3125844 19.272,16.4995797 19.0384615,16.4995797 C18.8049231,16.4995797 18.6153846,16.3125844 18.6153846,16.0756674 L18.6153846,0.845286159 L6.20061538,0.845286159 L0.846153846,6.49744987 L0.846153846,24.5378365 L11,24.5378365 C11.2335385,24.5378365 11.4230769,24.7231394 11.4230769,24.9600565 C11.4230769,25.1969735 11.2335385,25.3839687 11,25.3839687" id="Fill-11615"></path>
+                    <path d="M5.92307692,6.34599219 L0.423076923,6.34599219 C0.189538462,6.34599219 0,6.15899695 0,5.92292604 C0,5.686009 0.189538462,5.49901376 0.423076923,5.49901376 L5.5,5.49901376 L5.5,0.422220013 C5.5,0.185302972 5.68953846,0 5.92307692,0 C6.15661538,0 6.34615385,0.185302972 6.34615385,0.422220013 L6.34615385,5.92292604 C6.34615385,6.15899695 6.15661538,6.34599219 5.92307692,6.34599219" id="Fill-11616"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icons/peers.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="19px" viewBox="0 0 24 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>users</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Exploration-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.7" stroke-linejoin="round">
+        <g id="Main-Page-Copy-14" transform="translate(-37.000000, -332.000000)" stroke="#FFFFFF">
+            <g id="Group-9" transform="translate(38.000000, 332.000000)">
+                <g id="users" transform="translate(0.000000, 1.000000)">
+                    <path d="M16,18 L16,16 C16,13.790861 14.209139,12 12,12 L4,12 C1.790861,12 2.22044605e-16,13.790861 0,16 L0,18" id="Shape"></path>
+                    <circle id="Oval" cx="8" cy="4" r="4"></circle>
+                    <path d="M22,18 L22,16 C21.9986403,14.1771177 20.7649988,12.5857202 19,12.13" id="Shape"></path>
+                    <path d="M15,0.13 C16.7699148,0.583169788 18.0078433,2.17799115 18.0078433,4.005 C18.0078433,5.83200885 16.7699148,7.42683021 15,7.88" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icons/settings.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>settings</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Exploration-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.7" stroke-linejoin="round">
+        <g id="Main-Page-Copy-14" transform="translate(-36.000000, -434.000000)" stroke="#FFFFFF">
+            <g id="Group-33" transform="translate(37.000000, 435.000000)">
+                <g id="settings">
+                    <circle id="Oval" cx="11" cy="11" r="3"></circle>
+                    <path d="M18.4,14 C18.1276535,14.6170901 18.2583341,15.3378133 18.73,15.82 L18.79,15.88 C19.1655541,16.2551365 19.3765733,16.7641815 19.3765733,17.295 C19.3765733,17.8258185 19.1655541,18.3348635 18.79,18.71 C18.4148635,19.0855541 17.9058185,19.2965733 17.375,19.2965733 C16.8441815,19.2965733 16.3351365,19.0855541 15.96,18.71 L15.9,18.65 C15.4178133,18.1783341 14.6970901,18.0476535 14.08,18.32 C13.4755294,18.5790683 13.0826229,19.1723571 13.08,19.83 L13.08,20 C13.08,21.1045695 12.1845695,22 11.08,22 C9.9754305,22 9.08,21.1045695 9.08,20 L9.08,19.91 C9.0641566,19.2326708 8.63587177,18.6338652 8,18.4 C7.38290993,18.1276535 6.66218673,18.2583341 6.18,18.73 L6.12,18.79 C5.74486349,19.1655541 5.2358185,19.3765733 4.705,19.3765733 C4.1741815,19.3765733 3.66513651,19.1655541 3.29,18.79 C2.91444591,18.4148635 2.70342669,17.9058185 2.70342669,17.375 C2.70342669,16.8441815 2.91444591,16.3351365 3.29,15.96 L3.35,15.9 C3.82166588,15.4178133 3.95234646,14.6970901 3.68,14.08 C3.42093172,13.4755294 2.82764292,13.0826229 2.17,13.08 L2,13.08 C0.8954305,13.08 2.22044605e-16,12.1845695 0,11.08 C-1.11022302e-16,9.9754305 0.8954305,9.08 2,9.08 L2.09,9.08 C2.76732918,9.0641566 3.36613483,8.63587177 3.6,8 C3.87234646,7.38290993 3.74166588,6.66218673 3.27,6.18 L3.21,6.12 C2.83444591,5.74486349 2.62342669,5.2358185 2.62342669,4.705 C2.62342669,4.1741815 2.83444591,3.66513651 3.21,3.29 C3.58513651,2.91444591 4.0941815,2.70342669 4.625,2.70342669 C5.1558185,2.70342669 5.66486349,2.91444591 6.04,3.29 L6.1,3.35 C6.58218673,3.82166588 7.30290993,3.95234646 7.92,3.68 L8,3.68 C8.60447061,3.42093172 8.99737709,2.82764292 9,2.17 L9,2 C9,0.8954305 9.8954305,2.22044605e-16 11,0 C12.1045695,0 13,0.8954305 13,2 L13,2.09 C13.0026229,2.74764292 13.3955294,3.34093172 14,3.6 C14.6170901,3.87234646 15.3378133,3.74166588 15.82,3.27 L15.88,3.21 C16.2551365,2.83444591 16.7641815,2.62342669 17.295,2.62342669 C17.8258185,2.62342669 18.3348635,2.83444591 18.71,3.21 C19.0855541,3.58513651 19.2965733,4.0941815 19.2965733,4.625 C19.2965733,5.1558185 19.0855541,5.66486349 18.71,6.04 L18.65,6.1 C18.1783341,6.58218673 18.0476535,7.30290993 18.32,7.92 L18.32,8 C18.5790683,8.60447061 19.1723571,8.99737709 19.83,9 L20,9 C21.1045695,9 22,9.8954305 22,11 C22,12.1045695 21.1045695,13 20,13 L19.91,13 C19.2523571,13.0026229 18.6590683,13.3955294 18.4,14 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icons/skinny_bitcoin.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="42px" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>noun_209249_cc</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Exploration-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Main-Page-Copy-14" transform="translate(-248.000000, -108.000000)" fill-rule="nonzero" fill="#F5A623">
+            <g id="Group-35" transform="translate(248.000000, 107.000000)">
+                <g id="noun_209249_cc" transform="translate(0.000000, 1.000000)">
+                    <g id="Group">
+                        <path d="M16.6666667,38 L0.833333333,38 C0.373333333,38 0,37.6192 0,37.15 L0,4.85 C0,4.3808 0.373333333,4 0.833333333,4 L13.3333333,4 C17.9283333,4 21.6666667,7.8131 21.6666667,12.5 C21.6666667,15.3594 20.2766667,17.8924 18.1483333,19.4343 C22.0383333,20.1483 25,23.6282 25,27.8 L25,29.5 C25,34.1869 21.2616667,38 16.6666667,38 Z M1.66666667,36.3 L16.6666667,36.3 C20.3433333,36.3 23.3333333,33.2502 23.3333333,29.5 L23.3333333,27.8 C23.3333333,24.0498 20.3433333,21 16.6666667,21 L1.66666667,21 L1.66666667,36.3 Z M1.66666667,19.3 L13.3333333,19.3 C17.01,19.3 20,16.2502 20,12.5 C20,8.7498 17.01,5.7 13.3333333,5.7 L1.66666667,5.7 L1.66666667,19.3 Z" id="Shape"></path>
+                        <path d="M6,5 C5.448,5 5,4.62666667 5,4.16666667 L5,0.833333333 C5,0.373333333 5.448,0 6,0 C6.552,0 7,0.373333333 7,0.833333333 L7,4.16666667 C7,4.62666667 6.554,5 6,5 Z" id="Shape"></path>
+                        <path d="M12,5 C11.448,5 11,4.62666667 11,4.16666667 L11,0.833333333 C11,0.373333333 11.448,0 12,0 C12.552,0 13,0.373333333 13,0.833333333 L13,4.16666667 C13,4.62666667 12.554,5 12,5 Z" id="Shape"></path>
+                        <path d="M6,42 C5.448,42 5,41.6266667 5,41.1666667 L5,37.8333333 C5,37.3733333 5.448,37 6,37 C6.552,37 7,37.3733333 7,37.8333333 L7,41.1666667 C7,41.6266667 6.554,42 6,42 Z" id="Shape"></path>
+                        <path d="M12,42 C11.448,42 11,41.6266667 11,41.1666667 L11,37.8333333 C11,37.3733333 11.448,37 12,37 C12.552,37 13,37.3733333 13,37.8333333 L13,41.1666667 C13,41.6266667 12.554,42 12,42 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icons/wallet.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="23px" viewBox="0 0 25 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Exploration-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Main-Page-Copy-14" transform="translate(-37.000000, -278.000000)" fill="#FFFFFF">
+            <g id="Group-5" transform="translate(37.000000, 278.000000)">
+                <g id="Group-2">
+                    <path d="M22.9,22.8215957 L2.1,22.8215957 C0.942,22.8215957 0,21.8795957 0,20.7215957 L0,4.86859573 C0,4.65959573 0.129,4.48059573 0.311,4.40559573 C0.243,4.30259573 0.183,4.18859573 0.135,4.06259573 C0.036,3.80459573 0.164,3.51459573 0.422,3.41559573 C0.68,3.31859573 0.969,3.44459573 1.068,3.70259573 C1.324,4.36859573 2.41,4.37659573 2.883,4.36859573 L22.9,4.36859573 C24.058,4.36859573 25,5.31059573 25,6.46859573 L25,20.7215957 C25,21.8795957 24.058,22.8215957 22.9,22.8215957 L22.9,22.8215957 Z M1,5.01759573 L1,20.7215957 C1,21.3275957 1.494,21.8215957 2.1,21.8215957 L22.9,21.8215957 C23.507,21.8215957 24,21.3275957 24,20.7215957 L24,6.46859573 C24,5.86259573 23.507,5.36859573 22.9,5.36859573 L2.901,5.36859573 C2.499,5.38859573 1.669,5.36959573 1,5.01759573 L1,5.01759573 Z" id="Fill-305"></path>
+                    <path d="M22.318,5.30459573 C22.042,5.30459573 21.818,5.08159573 21.818,4.80459573 L21.818,1.82859573 C21.818,1.55459573 21.719,1.32059573 21.538,1.17259573 C21.357,1.02359573 21.11,0.969595727 20.843,1.02259573 L2.149,2.83359573 C1.071,3.07359573 1,3.95959573 0.999,3.96859573 L1,4.71859573 C1,4.99459573 0.776,5.21859573 0.5,5.21859573 C0.224,5.21859573 0,4.99459573 0,4.71859573 L0,3.93559573 C0.039,3.33559573 0.503,2.17459573 1.993,1.84759573 L20.699,0.0345957267 C21.21,-0.0694042733 21.765,0.0635957267 22.174,0.399595727 C22.583,0.737595727 22.818,1.25859573 22.818,1.82859573 L22.818,4.80459573 C22.818,5.08159573 22.595,5.30459573 22.318,5.30459573" id="Fill-306"></path>
+                    <path d="M19.916,14.9965957 C19.199,14.9965957 18.616,14.4125957 18.616,13.6955957 C18.616,12.9795957 19.199,12.3965957 19.916,12.3965957 C20.633,12.3965957 21.216,12.9795957 21.216,13.6955957 C21.216,14.4125957 20.633,14.9965957 19.916,14.9965957 L19.916,14.9965957 Z M19.916,13.3965957 C19.75,13.3965957 19.616,13.5305957 19.616,13.6955957 C19.616,13.8615957 19.75,13.9965957 19.916,13.9965957 C20.081,13.9965957 20.216,13.8615957 20.216,13.6955957 C20.216,13.5305957 20.081,13.3965957 19.916,13.3965957 L19.916,13.3965957 Z" id="Fill-307"></path>
+                    <path d="M24.5,17.5995957 L17.347,17.5995957 C15.96,17.5995957 14.832,16.4715957 14.832,15.0845957 L14.832,12.3085957 C14.832,10.9215957 15.96,9.79259573 17.347,9.79259573 L24.5,9.79259573 C24.776,9.79259573 25,10.0165957 25,10.2925957 L25,17.0995957 C25,17.3765957 24.776,17.5995957 24.5,17.5995957 L24.5,17.5995957 Z M17.347,10.7925957 C16.512,10.7925957 15.832,11.4725957 15.832,12.3085957 L15.832,15.0845957 C15.832,15.9205957 16.512,16.5995957 17.347,16.5995957 L24,16.5995957 L24,10.7925957 L17.347,10.7925957 L17.347,10.7925957 Z" id="Fill-308"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

test/components/Channels.spec.js

@@ -21,6 +21,7 @@ const defaultProps = {
   allChannels: [],
   openChannel: () => {},
   closeChannel: () => {},
+  fetchChannels: () => {},
   currentTicker: {},
   explorerLinkBase: 'https://testnet.smartbit.com.au'
 }

test/components/Nav.spec.js

@@ -22,27 +22,11 @@ describe('default elements', () => {
   const props = { ...defaultProps }
   const el = shallow(<Nav {...props} />)
 
-  describe('currencies', () => {
-    it('should render currency conversion links', () => {
-      expect(el.find('.currencies').length).toBe(1)
-      expect(el.find(FaDollar).length).toBe(1)
-    })
-  })
-
-  describe('balances', () => {
-    expect(el.find('.balance').length).toBe(1)
-    it('should render wallet balance', () => {})
-    it('should render channel balance', () => {})
-  })
-
-  it('should render logo', () => {
-    expect(el.find(ReactSVG).props().path).toContain('zap_2.svg')
-  })
   it('should render nav links', () => {
     expect(el.find(NavLink).at(0).props().to).toBe('/')
     expect(el.find(NavLink).at(1).props().to).toBe('/wallet')
-    expect(el.find(FaClockO)).toHaveLength(1)
-    expect(el.find(MdAccountBalanceWallet)).toHaveLength(1)
+    expect(el.find(NavLink).at(2).props().to).toBe('/channels')
+    expect(el.find(NavLink).at(3).props().to).toBe('/settings')
   })
   it('should render buttons', () => {
     expect(el.find('.button').at(0).text()).toContain('Pay')

test/components/Peers.spec.js

@@ -19,7 +19,8 @@ const defaultProps = {
   resetPeer: () => {},
   disconnect: () => {},
   form: {},
-  setForm: () => {}
+  setForm: () => {},
+  fetchPeers: () => {}
 }
 
 const peer = {