feature(refresh channels): ability to refresh channels

app/app.global.scss

@@ -67,3 +67,9 @@ body {
     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,7 +24,22 @@ const Channels = ({
   closeChannel,
   currentTicker,
   explorerLinkBase
-}) => (
+}) => {
+  const refreshClicked = (event) => {
+    // store event in icon so we dont get an error when react clears it
+    let 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}
@@ -34,6 +51,16 @@ const Channels = ({
       <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'
@@ -82,7 +109,8 @@ const Channels = ({
         }
       </ul>
     </div>
-)
+  )
+}
 
 Channels.propTypes = {
   ticker: PropTypes.object.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/keyframes.scss

@@ -31,3 +31,13 @@
   75%  { color: $gold; }
   100% { color: $white; }
 }
+
+@keyframes spin {
+    from {
+      transform:rotate(0deg)
+    }
+    
+    to {
+      transform:rotate(360deg);
+    }
+}

app/routes/wallet/components/Wallet.js

@@ -21,6 +21,7 @@ class Wallet extends Component {
       ticker,
       peers: { peersLoading, peers, peer, peerForm },
       channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
+      fetchChannels,
       setPeer,
       setChannel,
       peerModalOpen,
@@ -64,6 +65,7 @@ class Wallet extends Component {
             disconnect={disconnectRequest}
           />
           <Channels
+            fetchChannels={fetchChannels}
             ticker={ticker}
             peers={peers}
             channelsLoading={channelsLoading}