Use icons from api for apps list

src/components/ManagerPage/ManagerApp.js

@@ -9,27 +9,39 @@ import Text from 'components/base/Text'
 const Container = styled(Box).attrs({
   align: 'center',
   justify: 'center',
-  m: 1,
+  m: 2,
 })`
   width: 150px;
   height: 150px;
-  background: rgba(0, 0, 0, 0.05);
+  background: white;
 `
 
+// https://api.ledgerwallet.com/update/assets/icons/bitcoin
+
 const ActionBtn = styled(Tabbable).attrs({
   fontSize: 3,
 })``
 
+const AppIcon = styled.img`
+  display: block;
+  width: 50px;
+  height: 50px;
+`
+
 type Props = {
   name: string,
+  icon: string,
   onInstall: Function,
   onUninstall: Function,
 }
 
 export default function ManagerApp(props: Props) {
-  const { name, onInstall, onUninstall } = props
+  const { name, icon, onInstall, onUninstall } = props
+  const iconUrl = `https://api.ledgerwallet.com/update/assets/icons/${icon}`
   return (
     <Container flow={3}>
+      <AppIcon src={iconUrl} />
+
       <Text ff="Museo Sans|Bold">{name}</Text>
       <Box horizontal flow={2}>
         <ActionBtn onClick={onInstall}>{'Install'}</ActionBtn>

src/components/ManagerPage/index.js

@@ -17,9 +17,13 @@ import Modal, { ModalBody } from 'components/base/Modal'
 
 import ManagerApp from './ManagerApp'
 
+const ICONS_FALLBACK = {
+  bitcoin_testnet: 'bitcoin',
+}
+
 const List = styled(Box).attrs({
   horizontal: true,
-  m: -1,
+  m: -2,
 })`
   flex-wrap: wrap;
 `
@@ -36,6 +40,7 @@ type Status = 'loading' | 'idle' | 'busy' | 'success' | 'error'
 
 type LedgerApp = {
   name: string,
+  icon: string,
   app: Object,
 }
 
@@ -107,6 +112,7 @@ class ManagerPage extends PureComponent<Props, State> {
         <ManagerApp
           key={c.name}
           name={c.name}
+          icon={ICONS_FALLBACK[c.icon] || c.icon}
           onInstall={this.handleInstall(c)}
           onUninstall={this.handleUninstall(c)}
         />