Skip to content

Commit

Permalink
feat(display unknown amount below pie chart if endpoint fails)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sixtedemaupeou
sixtedemaupeou committed Jul 2, 2018
1 parent 1461074 commit 2c6366a
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 16 deletions.
6 changes: 3 additions & 3 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Home/BalancesChart/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const getBtcBalance = state => createDeepEqualSelector(
],
(context) => {
const getBalance = address => selectors.core.data.bitcoin.getFinalBalance(address, state)
const balancesR = context.map(x => getBalance(x).getOrElse(0))
const balancesR = context.map(x => getBalance(x).getOrElse(undefined))
return Remote.of(reduce(add, 0, balancesR))
}
)(state)
Expand All @@ -21,7 +21,7 @@ export const getBchBalance = state => createDeepEqualSelector(
],
(context) => {
const getBalance = address => selectors.core.data.bch.getFinalBalance(address, state)
const balancesR = context.map(x => getBalance(x).getOrElse(0))
const balancesR = context.map(x => getBalance(x).getOrElse(undefined))
return Remote.of(reduce(add, 0, balancesR))
}
)(state)
Expand All @@ -31,7 +31,7 @@ export const getEthBalance = state => createDeepEqualSelector(
selectors.core.data.ethereum.getBalance
],
(balance) => {
return Remote.of(balance.getOrElse(0))
return Remote.of(balance.getOrElse(undefined))
}
)(state)

Expand Down
46 changes: 33 additions & 13 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Home/BalancesChart/template.success.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import ReactHighcharts from 'react-highcharts'
import { FormattedMessage } from 'react-intl'
import { gt, gte } from 'ramda'

import { Text, Link } from 'blockchain-info-components'
import configure from './chart.config.js'
import SwitchableDisplay from 'components/Display/SwitchableDisplay'
Expand All @@ -27,7 +29,7 @@ const Wrapper = styled.div`
fill: ${props => props.theme['gray-5']} !important;
}
.highcharts-color-0 {
fill: ${props => props.btcBalance > 0 ? props.theme['brand-primary'] : props.theme['gray-2']} !important;
fill: ${props => gt(props.btcBalance, 0) ? props.theme['brand-primary'] : props.theme['gray-2']} !important;
}
.highcharts-color-1 {
fill: ${props => props.theme['brand-secondary']} !important;
Expand Down Expand Up @@ -96,21 +98,27 @@ const BalancesChart = (props) => {
<FormattedMessage id='scenes.home.balanceschart.btc' defaultMessage='Bitcoin' />
</Text>
<CoinBalance onClick={handleCoinDisplay}>
<SwitchableDisplay coin='BTC' cursor='pointer' size='14px' weight={200}>{btcBalance}</SwitchableDisplay>
{
!gte(btcBalance, 0)
? <Text size='14px' weight={200}>
<FormattedMessage id='scenes.home.balanceschart.btc.unkown' defaultMessage='Unknown amount' />
</Text>
: <SwitchableDisplay coin='BTC' cursor='pointer' size='14px' weight={200}>{btcBalance}</SwitchableDisplay>
}
</CoinBalance>
{ partner
? btcBalance <= 0 && <WalletLink to='/buy-sell' size='10px' weight={300}>
? gt(0, btcBalance) && <WalletLink to='/buy-sell' size='10px' weight={300}>
<FormattedMessage id='scenes.home.balanceschart.buybtc' defaultMessage='Buy Bitcoin' />
</WalletLink>
: ethBalance > 0 || bchBalance > 0
: gt(ethBalance, 0) || gt(bchBalance, 0)
? <WalletLink to='/exchange' size='10px' weight={300}>
<FormattedMessage id='scenes.home.balanceschart.getstarted' defaultMessage='Get Started' />
</WalletLink>
: btcBalance <= 0 && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestBitcoin')}>
: gt(0, btcBalance) && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestBitcoin')}>
<FormattedMessage id='scenes.home.balanceschart.requestbtc' defaultMessage='Request Bitcoin' />
</Link>
}
{btcAccountsLength > 1 && btcBalance > 0
{btcAccountsLength > 1 && gt(btcBalance, 0)
? <NavLink to='/settings/addresses' style={{ textDecoration: 'none' }}>
<ViewAllText weight={300} size='10px'>
<FormattedMessage id='scenes.home.balanceschart.btc.viewall' defaultMessage='View All Balances' />
Expand All @@ -125,13 +133,19 @@ const BalancesChart = (props) => {
<FormattedMessage id='scenes.home.balanceschart.eth' defaultMessage='Ether' />
</Text>
<CoinBalance onClick={handleCoinDisplay}>
<SwitchableDisplay coin='ETH' cursor='pointer' size='14px' weight={200}>{ethBalance}</SwitchableDisplay>
{
!gte(ethBalance, 0)
? <Text size='14px' weight={200}>
<FormattedMessage id='scenes.home.balanceschart.eth.unkown' defaultMessage='Unknown amount' />
</Text>
: <SwitchableDisplay coin='ETH' cursor='pointer' size='14px' weight={200}>{ethBalance}</SwitchableDisplay>
}
</CoinBalance>
{ (btcBalance > 0 || bchBalance > 0) && ethBalance <= 0
{ (gt(btcBalance, 0) || gt(bchBalance, 0)) && !gt(ethBalance, 0)
? <WalletLink to='/exchange' size='10px' weight={300}>
<FormattedMessage id='scenes.home.balanceschart.getstarted' defaultMessage='Get Started' />
</WalletLink>
: ethBalance <= 0 && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestEther')}>
: gt(0, ethBalance) && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestEther')}>
<FormattedMessage id='scenes.home.balanceschart.requesteth' defaultMessage='Request Ether' />
</Link>
}
Expand All @@ -142,17 +156,23 @@ const BalancesChart = (props) => {
<FormattedMessage id='scenes.home.balanceschart.bch' defaultMessage='Bitcoin Cash' />
</Text>
<CoinBalance onClick={handleCoinDisplay}>
<SwitchableDisplay coin='BCH' cursor='pointer' size='14px' weight={200}>{bchBalance}</SwitchableDisplay>
{
!gte(bchBalance, 0)
? <Text size='14px' weight={200}>
<FormattedMessage id='scenes.home.balanceschart.bch.unkown' defaultMessage='Unknown amount' />
</Text>
: <SwitchableDisplay coin='BCH' cursor='pointer' size='14px' weight={200}>{bchBalance}</SwitchableDisplay>
}
</CoinBalance>
{ (btcBalance > 0 || ethBalance > 0) && bchBalance <= 0
{ (gt(btcBalance, 0) || gt(ethBalance, 0)) && !gt(bchBalance, 0)
? <WalletLink to='/exchange' size='10px' weight={300}>
<FormattedMessage id='scenes.home.balanceschart.getstarted' defaultMessage='Get Started' />
</WalletLink>
: bchBalance <= 0 && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestBch')}>
: gt(0, bchBalance) && <Link size='10px' weight={300} onClick={() => modalsActions.showModal('RequestBch')}>
<FormattedMessage id='scenes.home.balanceschart.requestbch' defaultMessage='Request Bitcoin Cash' />
</Link>
}
{bchAccountsLength > 1 && bchBalance > 0
{bchAccountsLength > 1 && gt(bchBalance, 0)
? <NavLink to='/settings/addresses/bch' style={{ textDecoration: 'none' }}>
<ViewAllText weight={300} size='10px'>
<FormattedMessage id='scenes.home.balanceschart.bch.viewall' defaultMessage='View All Balances' />
Expand Down

0 comments on commit 2c6366a

Please sign in to comment.