diff --git a/src/components/DashboardPage/BalanceInfos.js b/src/components/DashboardPage/BalanceInfos.js index b585bfeb..44886ecd 100644 --- a/src/components/DashboardPage/BalanceInfos.js +++ b/src/components/DashboardPage/BalanceInfos.js @@ -6,11 +6,11 @@ import styled from 'styled-components' import type { MapStateToProps } from 'react-redux' -import { formatBTC } from 'helpers/format' import { getTotalBalance } from 'reducers/accounts' import Box from 'components/base/Box' import Text from 'components/base/Text' +import FormattedVal from 'components/base/FormattedVal' const mapStateToProps: MapStateToProps<*, *, *> = state => ({ totalBalance: getTotalBalance(state), @@ -31,21 +31,24 @@ function BalanceInfos(props: Props) { return ( - - {formatBTC(totalBalance, { - alwaysShowSign: false, - showCode: true, - })} - + {'Total balance'} - {'+9.25%'} - {'Since one week'} + + {'since one week'} - {'+ USD 6,132.23'} - {'Since one week'} + + {'since one week'} ) diff --git a/src/components/base/FormattedVal.js b/src/components/base/FormattedVal.js new file mode 100644 index 00000000..6e468dfd --- /dev/null +++ b/src/components/base/FormattedVal.js @@ -0,0 +1,72 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' + +import { formatCurrencyUnit } from '@ledgerhq/currencies' + +import Text from 'components/base/Text' + +const T = styled(Text).attrs({ + ff: 'Rubik', + color: p => (p.isNegative ? p.theme.colors.grenade : p.theme.colors.green), +})`` + +const currencies = { + BTC: { + name: 'bitcoin', + code: 'BTC', + symbol: 'b', + magnitude: 8, + }, + USD: { + name: 'dollar', + code: 'USD', + symbol: '$', + magnitude: 0, + }, +} + +type Props = { + val: number, + isPercent?: boolean, + currency?: any, + alwaysShowSign?: boolean, + showCode?: boolean, +} + +function FormattedVal(props: Props) { + const { val, isPercent, currency, alwaysShowSign, showCode, ...p } = props + + const isNegative = val < 0 + + let text = '' + + if (isPercent) { + text = `${alwaysShowSign ? (isNegative ? '- ' : '+ ') : ''}${val} %` + } else { + const curr = currency ? currencies[currency] : null + if (!curr) { + return `[invalid currency ${currency || '(null)'}]` + } + text = formatCurrencyUnit(curr, val, { + alwaysShowSign, + showCode, + }) + } + + return ( + + {text} + + ) +} + +FormattedVal.defaultProps = { + currency: null, + isPercent: false, + alwaysShowSign: false, + showCode: false, +} + +export default FormattedVal