diff --git a/app/app.global.scss b/app/app.global.scss
index d55b7f23..0a946033 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -66,4 +66,10 @@ body {
opacity: 1;
stroke: darken($main, 10%);
}
+}
+
+@keyframes spin {
+ 100% {
+ transform: rotate(360deg);
+ }
}
\ No newline at end of file
diff --git a/app/components/Channels/Channels.js b/app/components/Channels/Channels.js
index 18c73cee..4ad0929e 100644
--- a/app/components/Channels/Channels.js
+++ b/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,67 +24,93 @@ const Channels = ({
closeChannel,
currentTicker,
explorerLinkBase
-}) => (
-
-
-
-
-
Channels
-
setChannelForm({ isOpen: true })}
- >
-
+}) => {
+ 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 (
+
+
+
+
+
Channels
+
+
+
+
setChannelForm({ isOpen: true })}
+ >
+
+
-
-
- {
- !channelsLoading ?
- allChannels.map((channel, index) => {
- if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+
+ {
+ !channelsLoading ?
+ allChannels.map((channel, index) => {
+ if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
+ return (
+
+ )
+ } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
+ return (
+
+ )
+ }
return (
-
- )
- } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
- return (
-
)
- }
- return (
-
- )
- })
- :
- 'Loading...'
- }
-
-
-)
+ })
+ :
+ 'Loading...'
+ }
+
+
+ )
+}
Channels.propTypes = {
ticker: PropTypes.object.isRequired,
diff --git a/app/components/Channels/Channels.scss b/app/components/Channels/Channels.scss
index 8d73c905..df5f7b38 100644
--- a/app/components/Channels/Channels.scss
+++ b/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;
diff --git a/app/keyframes.scss b/app/keyframes.scss
index a5cc3fe8..c5317b88 100644
--- a/app/keyframes.scss
+++ b/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);
+ }
}
\ No newline at end of file
diff --git a/app/routes/wallet/components/Wallet.js b/app/routes/wallet/components/Wallet.js
index e21cbe02..62081b61 100644
--- a/app/routes/wallet/components/Wallet.js
+++ b/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}
/>