Use the common currencies icons instead of local ones

src/components/DashboardPage/AccountCard.js

@@ -1,11 +1,10 @@
 // @flow
 
 import React from 'react'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { Account } from 'types/common'
 
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
-
 import { AreaChart } from 'components/base/Chart'
 import Bar from 'components/base/Bar'
 import Box, { Card } from 'components/base/Box'
@@ -19,43 +18,46 @@ const AccountCard = ({
   account: Account,
   data: Array<Object>,
   onClick: Function,
-}) => (
-  <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
-    <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-      <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
-        <IconCurrencyBitcoin height={20} width={20} />
-      </Box>
-      <Box>
-        <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
-          {account.unit.code}
+}) => {
+  const Icon = getIconByCoinType(account.currency.coinType)
+  return (
+    <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
+      <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
+        <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
+          {Icon && <Icon size={20} />}
         </Box>
-        <Box fontSize={4} color="dark">
-          {account.name}
+        <Box>
+          <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
+            {account.unit.code}
+          </Box>
+          <Box fontSize={4} color="dark">
+            {account.name}
+          </Box>
         </Box>
       </Box>
-    </Box>
-    <Bar size={1} color="argile" />
-    <Box grow justifyContent="center" color="dark">
-      {account.data && (
-        <FormattedVal
-          alwaysShowSign={false}
-          color="dark"
-          unit={account.unit}
-          showCode
-          val={account.data.balance}
-        />
-      )}
-    </Box>
-    <AreaChart
-      tiny
-      id={`account-chart-${account.id}`}
-      color="#fcb653"
-      height={52}
-      data={data}
-      strokeWidth={1}
-      linearGradient={[[5, 0.4], [80, 0]]}
-    />
-  </Card>
-)
+      <Bar size={1} color="argile" />
+      <Box grow justifyContent="center" color="dark">
+        {account.data && (
+          <FormattedVal
+            alwaysShowSign={false}
+            color="dark"
+            unit={account.unit}
+            showCode
+            val={account.data.balance}
+          />
+        )}
+      </Box>
+      <AreaChart
+        tiny
+        id={`account-chart-${account.id}`}
+        color="#fcb653"
+        height={52}
+        data={data}
+        strokeWidth={1}
+        linearGradient={[[5, 0.4], [80, 0]]}
+      />
+    </Card>
+  )
+}
 
 export default AccountCard

src/components/SideBar/index.js

@@ -5,6 +5,7 @@ import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import { MODAL_SEND, MODAL_RECEIVE, MODAL_ADD_ACCOUNT } from 'constants'
 
@@ -19,7 +20,6 @@ import IconArrowDown from 'icons/ArrowDown'
 import IconArrowUp from 'icons/ArrowUp'
 import IconSettings from 'icons/Settings'
 import IconPlus from 'icons/Plus'
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 
 import Box, { Tabbable } from 'components/base/Box'
 import FormattedVal from 'components/base/FormattedVal'
@@ -99,26 +99,29 @@ class SideBar extends PureComponent<Props> {
               </Tooltip>
             </CapsSubtitle>
             <GrowScroll pb={4} px={4} flow={2}>
-              {accounts.map(account => (
-                <Item
-                  big
-                  desc={
-                    <FormattedVal
-                      alwaysShowSign={false}
-                      color="warmGrey"
-                      unit={account.unit}
-                      showCode
-                      val={account.data ? account.data.balance : 0}
-                    />
-                  }
-                  iconActiveColor="#fcb653"
-                  icon={<IconCurrencyBitcoin height={16} width={16} />}
-                  key={account.id}
-                  linkTo={`/account/${account.id}`}
-                >
-                  {account.name}
-                </Item>
-              ))}
+              {accounts.map(account => {
+                const Icon = getIconByCoinType(account.currency.coinType)
+                return (
+                  <Item
+                    big
+                    desc={
+                      <FormattedVal
+                        alwaysShowSign={false}
+                        color="warmGrey"
+                        unit={account.unit}
+                        showCode
+                        val={account.data ? account.data.balance : 0}
+                      />
+                    }
+                    iconActiveColor={account.currency.color}
+                    icon={Icon ? <Icon size={16} /> : null}
+                    key={account.id}
+                    linkTo={`/account/${account.id}`}
+                  >
+                    {account.name}
+                  </Item>
+                )
+              })}
             </GrowScroll>
           </Box>
         </Box>

src/components/TransactionsList/index.js

@@ -6,6 +6,7 @@ import moment from 'moment'
 import get from 'lodash/get'
 import noop from 'lodash/noop'
 import isEqual from 'lodash/isEqual'
+import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
 import type { Transaction as TransactionType } from 'types/common'
 
@@ -14,8 +15,6 @@ import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
 import Text from 'components/base/Text'
 
-import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
-
 const DATE_COL_SIZE = 80
 const ACCOUNT_COL_SIZE = 150
 const AMOUNT_COL_SIZE = 150
@@ -79,6 +78,7 @@ const Transaction = ({
   tx: TransactionType,
 }) => {
   const time = moment(tx.received_at)
+  const Icon = getIconByCoinType(tx.account.currency.coinType)
   return (
     <TransactionRaw>
       <Cell size={DATE_COL_SIZE} justifyContent="space-between">
@@ -96,7 +96,7 @@ const Transaction = ({
           onClick={() => onAccountClick && onAccountClick(tx.account)}
         >
           <Box alignItems="center" justifyContent="center" style={{ color: '#fcb653' }}>
-            <IconCurrencyBitcoin height={16} width={16} />
+            {Icon && <Icon size={16} />}
           </Box>
           <Box ff="Open Sans|SemiBold" fontSize={4} color="dark">
             {tx.account.name}

src/icons/currencies/Bitcoin.js

@@ -1,10 +0,0 @@
-import React from 'react'
-
-export default props => (
-  <svg viewBox="0 0 16 16" {...props}>
-    <path
-      fill="currentColor"
-      d="M7.61970553 0h1.70000005v3.05846154H7.61970553V0zm1.70000005 0v3.05846154H7.61970553V0h1.70000005zM7.81303887 12.9415385h1.70000004V16H7.81303887v-3.0584615zm1.70000004 0V16H7.81303887v-3.0584615h1.70000004zM4.4063722 0h1.70000005v3.05846154H4.4063722V0zm1.70000005 0v3.05846154H4.4063722V0h1.70000005zM4.59970553 12.9415385h1.70000005V16H4.59970553v-3.0584615zm1.70000005 0V16H4.59970553v-3.0584615h1.70000005zM2.6663722 8.81307695V1.94999998h.85000002l6.13827333.00156806c1.80778725.10996034 3.21199965 1.5663186 3.11839335 3.25458581l-.0017039.27851419c.110634 1.74464117-1.2981636 3.21696546-3.16829611 3.32840891H2.6663722zm.85000002 0l.85000003-.85000003v4.31926938l5.60765891.000255c.95057664-.0249932 1.67559124-.7265334 1.65900774-1.5564475l.0002249-.3703244c.0187355-.81415185-.7068616-1.51805139-1.63689158-1.54275245h-6.48zm7.55666668-3.27461541l.0012684-.37872715c.042116-.77004688-.6196246-1.45636138-1.47126841-1.50973437H4.36637225v3.46311513l5.20484808.0002342c.89861507-.06354201 1.55224847-.7529014 1.50181857-1.57488781zM4.36637225 7.11311515l5.18540306.00150901c.00432951-.00026159.15996192-.00067981.46689729-.00125468 1.859875.04881191 3.3551536 1.49937703 3.3143663 3.26201512l-.0001732.3336104c.0359164 1.7788337-1.4578252 3.2242112-3.33649348 3.2733127H2.6663722V7.1130769h.85000002l.85000003.00003825zm0 .00017966v.84978211l-.85000003-.85000002.85000003.00021791z"
-    />
-  </svg>
-)