Better handling fiat units in FormattedVal

src/components/DashboardPage/BalanceInfos.js

@@ -3,6 +3,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
+import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 
 import type { MapStateToProps } from 'react-redux'
 
@@ -33,7 +34,7 @@ function BalanceInfos(props: Props) {
       <Box grow>
         <FormattedVal
           val={totalBalance}
-          currency="BTC"
+          unit={getDefaultUnitByCoinType(0)}
           alwaysShowSign={false}
           showCode
           fontSize={8}
@@ -47,7 +48,7 @@ function BalanceInfos(props: Props) {
         <Sub>{'since one week'}</Sub>
       </Box>
       <Box alignItems="flex-end">
-        <FormattedVal currency="USD" alwaysShowSign showCode val={6132.23} fontSize={7} />
+        <FormattedVal fiat="USD" alwaysShowSign showCode val={6132.23} fontSize={7} />
         <Sub>{'since one week'}</Sub>
       </Box>
     </Box>

src/components/TransactionsList/index.js

@@ -78,7 +78,7 @@ const Transaction = ({
   tx: TransactionType,
 }) => {
   const time = moment(tx.received_at)
-  const Icon = getIconByCoinType(tx.account.currency.coinType)
+  const Icon = getIconByCoinType(get(tx, 'account.currency.coinType'))
   return (
     <TransactionRaw>
       <Cell size={DATE_COL_SIZE} justifyContent="space-between">
@@ -123,7 +123,7 @@ const Transaction = ({
       <Cell size={AMOUNT_COL_SIZE} justifyContent="flex-end">
         <FormattedVal
           val={tx.balance}
-          unit={tx.account.unit}
+          unit={get(tx, 'account.unit')}
           showCode
           fontSize={4}
           alwaysShowSign

src/components/base/FormattedVal.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { formatCurrencyUnit } from '@ledgerhq/currencies'
+import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies'
 import type { Unit } from '@ledgerhq/currencies'
 
 import Text from 'components/base/Text'
@@ -15,6 +15,7 @@ const T = styled(Text).attrs({
 
 type Props = {
   val: number,
+  fiat?: string | null,
   isPercent?: boolean,
   unit?: Unit | null,
   alwaysShowSign?: boolean,
@@ -22,7 +23,8 @@ type Props = {
 }
 
 function FormattedVal(props: Props) {
-  const { val, isPercent, unit, alwaysShowSign, showCode, ...p } = props
+  const { val, fiat, isPercent, alwaysShowSign, showCode, ...p } = props
+  let { unit } = props
 
   const isNegative = val < 0
 
@@ -31,7 +33,9 @@ function FormattedVal(props: Props) {
   if (isPercent) {
     text = `${alwaysShowSign ? (isNegative ? '- ' : '+ ') : ''}${val} %`
   } else {
-    if (!unit) {
+    if (fiat) {
+      unit = getFiatUnit(fiat)
+    } else if (!unit) {
       return ''
     }
     text = formatCurrencyUnit(unit, val, {
@@ -52,6 +56,7 @@ FormattedVal.defaultProps = {
   isPercent: false,
   alwaysShowSign: false,
   showCode: false,
+  fiat: null,
 }
 
 export default FormattedVal

src/stories/currencies.stories.js

@@ -1,9 +1,10 @@
 // @flow
 
-import React, { Fragment, createElement } from 'react'
+import React, { Fragment } from 'react'
 import { storiesOf } from '@storybook/react'
-
 import { listCurrencies } from '@ledgerhq/currencies'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
+
 import type { Currency } from '@ledgerhq/currencies'
 
 const stories = storiesOf('currencies', module)
@@ -23,40 +24,43 @@ stories.add('currencies list', () => (
         </tr>
       </thead>
       <tbody>
-        {currencies.map(cur => (
+        {currencies.map(cur => {
-          <tr key={cur.coinType}>
+          const Icon = getIconByCoinType(cur.coinType)
-            <td>{cur.coinType}</td>
+          return (
-            <td>{cur.name}</td>
+            <tr key={cur.coinType}>
-            <td>
+              <td>{cur.coinType}</td>
-              {cur.color ? (
+              <td>{cur.name}</td>
-                <Fragment>
+              <td>
-                  <div
+                {cur.color ? (
-                    style={{
+                  <Fragment>
-                      width: 50,
+                    <div
-                      height: 25,
+                      style={{
-                      backgroundColor: cur.color,
+                        width: 50,
-                    }}
+                        height: 25,
-                  />
+                        backgroundColor: cur.color,
-                  <div>{cur.color}</div>
+                      }}
-                </Fragment>
+                    />
-              ) : (
+                    <div>{cur.color}</div>
-                '-'
+                  </Fragment>
-              )}
+                ) : (
-            </td>
+                  '-'
-            <td>{cur.icon ? createElement(cur.icon, { size: 30 }) : '-'}</td>
+                )}
-            <td>
+              </td>
-              {cur.units && (
+              <td>{Icon ? <Icon size={30} /> : '-'}</td>
-                <ul style={{ paddingRight: 10 }}>
+              <td>
-                  {cur.units.map(unit => (
+                {cur.units && (
-                    <li key={unit.code}>
+                  <ul style={{ paddingRight: 10 }}>
-                      {unit.code} ({unit.magnitude})
+                    {cur.units.map(unit => (
-                    </li>
+                      <li key={unit.code}>
-                  ))}
+                        {unit.code} ({unit.magnitude})
-                </ul>
+                      </li>
-              )}
+                    ))}
-            </td>
+                  </ul>
-          </tr>
+                )}
-        ))}
+              </td>
+            </tr>
+          )
+        })}
       </tbody>
     </table>
   </div>