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} />