From e8303ce0ba63955c36c10fc8f6a9d64eb653e06d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Fri, 25 May 2018 17:48:00 +0200
Subject: [PATCH] improve a bit with a tmp design for step import

---
 .../modals/AddAccount/03-step-import.js        | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/AddAccount/03-step-import.js b/src/components/modals/AddAccount/03-step-import.js
index 9f868363..05482527 100644
--- a/src/components/modals/AddAccount/03-step-import.js
+++ b/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>
         )
       })}