diff --git a/app/components/Channels/Channel.js b/app/components/Channels/Channel.js index e0ebf84b..5c39249a 100644 --- a/app/components/Channels/Channel.js +++ b/app/components/Channels/Channel.js @@ -4,68 +4,80 @@ import { FaCircle } from 'react-icons/lib/fa' import { btc } from 'utils' import styles from './Channel.scss' -const Channel = ({ ticker, channel, setChannel, currentTicker }) => ( +const Channel = ({ ticker, channel, closeChannel, currentTicker }) => (
  • setChannel(channel)}> -
    - Open - { - channel.active ? - - - Active - - : - - - Not Active - - } +
    +
    + Open + { + channel.active ? + + + Active + + : + + + Not Active + + } +
    +
    +

    closeChannel({ channel_point: channel.channel_point })} + > + Close channel +

    +
    -
    -
    - Remote Pubkey -

    {channel.remote_pubkey}

    -
    -
    - Channel Point -

    {channel.channel_point}

    -
    -
    -
    -
    - Capacity -

    - { - ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.capacity) - : - btc.satoshisToUsd(channel.capacity, currentTicker.price_usd) - } -

    -
    -
    -
    - Local -

    - { - ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.local_balance) - : - btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd) - } -

    +
    +
    +
    + Remote Pubkey +

    {channel.remote_pubkey}

    -
    - Remote -

    +
    + Channel Point +

    {channel.channel_point}

    +
    +

    +
    +
    + Capacity +

    { ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.remote_balance) + btc.satoshisToBtc(channel.capacity) : - btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd) + btc.satoshisToUsd(channel.capacity, currentTicker.price_usd) } -

    +
    +
    +
    + Local +

    + { + ticker.currency === 'btc' ? + btc.satoshisToBtc(channel.local_balance) + : + btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd) + } +

    +
    +
    + Remote +

    + { + ticker.currency === 'btc' ? + btc.satoshisToBtc(channel.remote_balance) + : + btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd) + } +

    +
    +
  • @@ -74,7 +86,7 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => ( Channel.propTypes = { ticker: PropTypes.object.isRequired, channel: PropTypes.object.isRequired, - setChannel: PropTypes.func.isRequired, + closeChannel: PropTypes.func.isRequired, currentTicker: PropTypes.object.isRequired } diff --git a/app/components/Channels/Channel.scss b/app/components/Channels/Channel.scss index 3fe5376d..a2508fb7 100644 --- a/app/components/Channels/Channel.scss +++ b/app/components/Channels/Channel.scss @@ -5,9 +5,6 @@ background: $lightgrey; margin: 5px 0; padding: 10px; - display: flex; - flex-direction: row; - justify-content: space-between; border-top: 1px solid $white; cursor: pointer; transition: all 0.25s; @@ -20,10 +17,10 @@ border: none; } - header { - position: absolute; - top: 10px; - left: 10px; + .header { + display: flex; + flex-direction: row; + justify-content: space-between; .status, .active, .notactive { padding: 10px; @@ -47,6 +44,25 @@ .notactive { color: $red; } + + .close { + padding: 10px; + font-size: 10px; + text-transform: uppercase; + color: $red; + cursor: pointer; + + &:hover { + color: lighten($red, 10%); + text-decoration: underline; + } + } + } + + .content { + display: flex; + flex-direction: row; + justify-content: space-between; } diff --git a/app/reducers/channels.js b/app/reducers/channels.js index 0fd2aa82..66e0a8ff 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -206,7 +206,7 @@ const ACTION_HANDLERS = { [GET_CHANNELS]: state => ({ ...state, channelsLoading: true }), [RECEIVE_CHANNELS]: (state, { channels, pendingChannels }) => ( - { ...state, channelsLoading: false, channels, pendingChannels: state.pendingChannels } + { ...state, channelsLoading: false, channels, pendingChannels } ), [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }), diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js index 19c2d944..7499c932 100644 --- a/app/routes/channels/components/Channels.js +++ b/app/routes/channels/components/Channels.js @@ -24,6 +24,7 @@ class Channels extends Component { render() { const { fetchChannels, + closeChannel, channels: { searchQuery, filterPulldown, @@ -157,7 +158,7 @@ class Channels extends Component { key={index} ticker={ticker} channel={channel} - setChannel={() => {}} + closeChannel={closeChannel} currentTicker={currentTicker} /> ) diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js index fecdc1d0..a5cb4e8f 100644 --- a/app/routes/channels/containers/ChannelsContainer.js +++ b/app/routes/channels/containers/ChannelsContainer.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux' import { fetchChannels, openChannel, + closeChannel, updateChannelSearchQuery, setViewType, currentChannels, @@ -35,6 +36,7 @@ import Channels from '../components/Channels' const mapDispatchToProps = { fetchChannels, openChannel, + closeChannel, updateChannelSearchQuery, setViewType, toggleFilterPulldown,