Merge pull request #367 from gre/tmp-import-rendering

improve a bit with a tmp design for step import

src/components/modals/AddAccount/03-step-import.js

@@ -5,6 +5,8 @@ import React from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
 import Box from 'components/base/Box'
+import CheckBox from 'components/base/CheckBox'
+import FormattedVal from 'components/base/FormattedVal'
 
 type Props = {
   scannedAccounts: Account[],
@@ -17,16 +19,28 @@ function StepImport(props: Props) {
   const { scannedAccounts, selectedAccounts, existingAccounts, onToggleAccount } = props
   return (
     <Box flow={4}>
+      <strong>(design is not yet integrated!)</strong>
       {scannedAccounts.map(account => {
         const isSelected = selectedAccounts.find(a => a.id === account.id)
         const isExisting = existingAccounts.find(a => a.id === account.id && a.archived === false)
         return (
           <Box
-            bg="lightgrey"
+            horizontal
             key={account.id}
             onClick={onToggleAccount && !isExisting ? () => onToggleAccount(account) : undefined}
           >
-            {isSelected && `[SELECTED]`} {isExisting && `[ALREADY IMPORTED]`} {account.name}
+            <CheckBox isChecked={!!isSelected} onChange={onToggleAccount} />
+            <Box grow fontSize={6} style={{ paddingLeft: 10 }}>
+              {account.name}
+            </Box>
+            <FormattedVal
+              alwaysShowSign={false}
+              color="warmGrey"
+              fontSize={6}
+              showCode
+              fiat={account.currency.ticker}
+              val={account.balance}
+            />
           </Box>
         )
       })}