Skip to content
Permalink
Browse files

feat(ui): new channel info bar design

  • Loading branch information...
mrfelton committed Jun 1, 2019
1 parent d7e4b79 commit 3ecb0a24d9af58ac93b79e511f25ac47addfbc06
@@ -6,7 +6,6 @@ import ChannelsActions from './ChannelsActions'

const ChannelsHeader = ({
channels,
channelBalance,
channelViewMode,
changeFilter,
fetchChannels,
@@ -21,10 +20,19 @@ const ChannelsHeader = ({
openModal,
sortOrder,
switchSortOrder,
sendCapacity,
receiveCapacity,
...rest
}) => (
<Box as="header" mb={3} {...rest}>
<ChannelsInfo channelBalance={channelBalance} channels={channels} mb={3} />
<ChannelsInfo
channels={channels}
mb={2}
pt={3}
px={4}
receiveCapacity={receiveCapacity}
sendCapacity={sendCapacity}
/>
<ChannelsActions
changeFilter={changeFilter}
changeSort={changeSort}
@@ -48,14 +56,15 @@ const ChannelsHeader = ({
ChannelsHeader.propTypes = {
changeFilter: PropTypes.func.isRequired,
changeSort: PropTypes.func.isRequired,
channelBalance: PropTypes.number.isRequired,
channels: PropTypes.array,
channelViewMode: PropTypes.string.isRequired,
fetchChannels: PropTypes.func.isRequired,
filter: PropTypes.string.isRequired,
filters: PropTypes.array.isRequired,
openModal: PropTypes.func.isRequired,
receiveCapacity: PropTypes.number.isRequired,
searchQuery: PropTypes.string,
sendCapacity: PropTypes.number.isRequired,
setChannelViewMode: PropTypes.func.isRequired,
sort: PropTypes.string.isRequired,
sorters: PropTypes.array.isRequired,
@@ -1,17 +1,42 @@
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Flex } from 'rebass'
import ChannelBalance from './ChannelBalance'
import { Card } from 'components/UI'
import ChannelsCapacity from './ChannelsCapacity'
import ChannelsSummaryDonut from './ChannelsSummaryDonut'
import messages from './messages'

const ChannelsInfo = ({ channels, channelBalance, ...rest }) => (
<Flex alignItems="center" as="section" {...rest}>
<ChannelBalance channelBalance={channelBalance} />
</Flex>
const ChannelsInfo = ({ channels, receiveCapacity, sendCapacity, ...rest }) => (
<Card pb={2} pt={2} px={3} width={1} {...rest}>
<Flex alignItems="center" as="section" justifyContent="space-between">
<Flex alignItems="center" as="section">
<ChannelsSummaryDonut
mr={3}
my={1}
receiveCapacity={receiveCapacity}
sendCapacity={sendCapacity}
width={40}
/>
<ChannelsCapacity
capacity={sendCapacity}
message={<FormattedMessage {...messages.total_capacity_send} />}
mr={3}
/>
<ChannelsCapacity
capacity={receiveCapacity}
color="superBlue"
message={<FormattedMessage {...messages.total_capacity_receive} />}
/>
</Flex>
</Flex>
</Card>
)

ChannelsInfo.propTypes = {
channelBalance: PropTypes.number.isRequired,
channels: PropTypes.array,
receiveCapacity: PropTypes.number.isRequired,
sendCapacity: PropTypes.number.isRequired,
}

ChannelsInfo.defaultProps = {
@@ -8,8 +8,10 @@ export default defineMessages({
capacity: 'Capacity',
error_not_enough_funds: 'Not enough funds',
total_capacity: 'Total Capacity',
total_capacity_send: 'Total can send',
total_capacity_receive: 'Total can receive',
more_button_text: 'More',
create_new_button_text: 'Create New',
create_new_button_text: 'Create New Channel',
loading: 'loading',
pending_open: 'pending open',
pending_close: 'pending close',
@@ -17,7 +17,8 @@ import { tickerSelectors } from 'reducers/ticker'

const mapStateToProps = state => ({
channels: channelsSelectors.allChannels(state),
channelBalance: state.balance.channelBalance,
sendCapacity: channelsSelectors.sendCapacity(state),
receiveCapacity: channelsSelectors.receiveCapacity(state),
channelViewMode: state.channels.viewMode,
currencyName: tickerSelectors.currencyName(state),
filter: state.channels.filter,

0 comments on commit 3ecb0a2

Please sign in to comment.
You can’t perform that action at this time.