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