Merge branch 'master' into feature/wallet-redesign

app/api/index.js

@@ -15,8 +15,7 @@ export function requestTickers(ids) {
     .then(axios.spread((btcTicker, ltcTicker) => ({ btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] })))
 }
 
-
-export function requestBlockHeight(id) {
+export function requestBlockHeight() {
   const BASE_URL = 'https://testnet-api.smartbit.com.au/v1/blockchain/blocks?limit=1'
   return axios({
     method: 'get',

app/app.global.scss

@@ -66,4 +66,10 @@ body {
     opacity: 1;
     stroke: darken($main, 10%);
   }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }

app/components/Channels/Channels.js

@@ -1,6 +1,7 @@
 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'
@@ -9,6 +10,7 @@ import ClosedPendingChannel from './ClosedPendingChannel'
 import styles from './Channels.scss'
 
 const Channels = ({
+  fetchChannels,
   ticker,
   peers,
   channelsLoading,
@@ -22,60 +24,94 @@ const Channels = ({
   closeChannel,
   currentTicker,
   explorerLinkBase
-}) => (
-  <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>
-      <div
-        className={`${styles.openChannel} hint--top`}
-        data-hint='Open a channel'
-        onClick={() => setChannelForm({ isOpen: true })}
-      >
-        <TiPlus />
+}) => {
+  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>
-    </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}
-                />
-              )
+      <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}
+                  />
+                )
+              } else {
+                return (
+                  <Channel
+                    key={index}
+                    ticker={ticker}
+                    channel={channel}
+                    setChannel={setChannel}
+                    currentTicker={currentTicker}
+                  />
+                )
+              }
             }
-            return (
-              <Channel
-                key={index}
-                ticker={ticker}
-                channel={channel}
-                setChannel={setChannel}
-                currentTicker={currentTicker}
-              />
-            )
           })
           :
           'Loading...'
@@ -85,6 +121,7 @@ const Channels = ({
 )
 
 Channels.propTypes = {
+  fetchChannels: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
   peers: PropTypes.array.isRequired,
   channelsLoading: PropTypes.bool.isRequired,

app/components/Channels/Channels.scss

@@ -1,5 +1,15 @@
 @import '../../variables.scss';
 
+@keyframes spin {
+    from {
+      transform: rotate(0deg)
+    }
+    
+    to {
+      transform: rotate(360deg);
+    }
+}
+
 .channels {
 	width: 75%;
 	margin: 50px auto;
@@ -15,6 +25,20 @@
 			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;

app/components/LndSyncing/LndSyncing.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styles from './LndSyncing.scss'
 
 class LndSyncing extends Component {
@@ -8,7 +9,7 @@ class LndSyncing extends Component {
       facts: [
         {
           title: 'No2x',
-          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA signers. The idea was drawn up and signed in a locked hotel room with select individuals and goes against everything that Bitcoin stands for. There is no favoritism in Bitcoin. There are no politicians. Hash power and business don\'t speak for us. Don\'t trust, verify.'
+          description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA signers. The idea was drawn up and signed in a locked hotel room with select individuals and goes against everything that Bitcoin stands for. There is no favoritism in Bitcoin. There are no politicians. Hash power and business don\'t speak for us. Don\'t trust, verify.' // eslint-disable-line
         },
         {
           title: 'Gang',
@@ -51,7 +52,7 @@ class LndSyncing extends Component {
           </div>
           <ul>
             {
-              facts.map((facts, index) => (
+              facts.map((fact, index) => (
                 <li
                   className={`${styles.factButton} ${currentFact === index && styles.active}`}
                   key={index}
@@ -66,4 +67,10 @@ class LndSyncing extends Component {
   }
 }
 
+LndSyncing.propTypes = {
+  fetchBlockHeight: PropTypes.func.isRequired,
+  fetchingBlockHeight: PropTypes.bool.isRequired,
+  syncPercentage: PropTypes.number.isRequired
+}
+
 export default LndSyncing

app/components/Peers/Peers.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TiPlus } from 'react-icons/lib/ti'
+import { FaRepeat } from 'react-icons/lib/fa'
 import PeerModal from './PeerModal'
 import PeerForm from './PeerForm'
 import Peer from './Peer'
 import styles from './Peers.scss'
 
 const Peers = ({
+  fetchPeers,
   peersLoading,
   peers,
   setPeer,
@@ -16,32 +18,59 @@ const Peers = ({
   setPeerForm,
   connect,
   disconnect
-}) => (
-  <div className={styles.peers}>
-    <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
-    <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
-    <div className={styles.header}>
-      <h3>Peers</h3>
-      <div
-        className={`${styles.connectPeer} hint--top`}
-        data-hint='Connect to a peer'
-        onClick={() => setPeerForm({ isOpen: true })}
-      >
-        <TiPlus />
+}) => {
+  const refreshClicked = (event) => {
+    // store event in icon so we dont get an error when react clears it
+    const icon = event.currentTarget
+
+    // fetch peers
+    fetchPeers()
+
+    // 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.peers}>
+      <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
+      <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
+      <div className={styles.header}>
+        <h3>Peers</h3>
+        <span
+          className={`${styles.refresh} hint--top`}
+          data-hint='Refresh your peers list'
+
+        >
+          <FaRepeat
+            style={{ verticalAlign: 'baseline' }}
+            onClick={refreshClicked}
+          />
+        </span>
+        <div
+          className={`${styles.connectPeer} hint--top`}
+          data-hint='Connect to a peer'
+          onClick={() => setPeerForm({ isOpen: true })}
+        >
+          <TiPlus />
+        </div>
       </div>
+      <ul>
+        {
+          !peersLoading ?
+            peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
+            :
+            'Loading...'
+        }
+      </ul>
     </div>
-    <ul>
-      {
-        !peersLoading ?
-          peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
-          :
-          'Loading...'
-      }
-    </ul>
-  </div>
-)
+  )
+}
 
 Peers.propTypes = {
+  fetchPeers: PropTypes.func.isRequired,
   peersLoading: PropTypes.bool.isRequired,
   peers: PropTypes.array.isRequired,
   setPeer: PropTypes.func.isRequired,

app/components/Peers/Peers.scss

@@ -15,6 +15,20 @@
 			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;
+			}
+		}
+
 		.connectPeer {
 			float: right;
 			cursor: pointer;

app/keyframes.scss

@@ -30,4 +30,14 @@
   50%  { color: $white; }
   75%  { color: $gold; }
   100% { color: $white; }
+}
+
+@keyframes spin {
+    from {
+      transform:rotate(0deg)
+    }
+    
+    to {
+      transform:rotate(360deg);
+    }
 }

app/reducers/lnd.js

@@ -32,7 +32,9 @@ export const lndSynced = () => (dispatch) => {
 }
 
 // Receive IPC event for LND streaming a line
-export const lndStdout = (event, lndBlockHeight) => dispatch => dispatch({ type: RECEIVE_LINE, lndBlockHeight: lndBlockHeight.split(' ')[0].split(/(\r\n|\n|\r)/gm)[0] })
+export const lndStdout = (event, lndBlockHeight) => dispatch => (
+  dispatch({ type: RECEIVE_LINE, lndBlockHeight: lndBlockHeight.split(' ')[0].split(/(\r\n|\n|\r)/gm)[0] })
+)
 
 export function getBlockHeight() {
   return {

app/routes/app/components/App.js

@@ -12,10 +12,6 @@ class App extends Component {
   componentWillMount() {
     const { fetchTicker, fetchBalance, fetchInfo, newAddress, lnd: { syncing } } = this.props
 
-    if (syncing) {
-      fetchBlockHeight()
-    }
-
     if (!syncing) {
       fetchTicker()
       fetchBalance()
@@ -99,6 +95,11 @@ class App extends Component {
 }
 
 App.propTypes = {
+  lnd: PropTypes.object.isRequired,
+
+  syncPercentage: PropTypes.number.isRequired,
+  fetchBlockHeight: PropTypes.func.isRequired,
+
   modal: PropTypes.object.isRequired,
   ticker: PropTypes.object.isRequired,
   address: PropTypes.object.isRequired,

app/routes/wallet/components/Wallet.js

@@ -21,6 +21,8 @@ class Wallet extends Component {
       ticker,
       peers: { peersLoading, peers, peer, peerForm },
       channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
+      fetchPeers,
+      fetchChannels,
       setPeer,
       setChannel,
       peerModalOpen,
@@ -40,6 +42,7 @@ class Wallet extends Component {
       <div className={styles.wallet}>
         <section className={styles.walletData}>
           <Peers
+            fetchPeers={fetchPeers}
             peersLoading={peersLoading}
             peers={peers}
             modalPeer={peer}
@@ -51,6 +54,7 @@ class Wallet extends Component {
             disconnect={disconnectRequest}
           />
           <Channels
+            fetchChannels={fetchChannels}
             ticker={ticker}
             peers={peers}
             channelsLoading={channelsLoading}