Integrate the connect device step of import accounts

src/components/base/CurrencyBadge.js

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react'
+
+import type { Currency } from '@ledgerhq/live-common/lib/types'
+
+import { rgba } from 'styles/helpers'
+
+import Box from 'components/base/Box'
+
+const CryptoIconWrapper = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  bg: p => rgba(p.cryptoColor, 0.1),
+  color: p => p.cryptoColor,
+})`
+  border-radius: 50%;
+  width: ${p => p.size || 40}px;
+  height: ${p => p.size || 40}px;
+`
+
+export function CurrencyCircleIcon({
+  currency,
+  size,
+  ...props
+}: {
+  currency: Currency,
+  size: number,
+}) {
+  const Icon = getCryptoCurrencyIcon(currency)
+  return (
+    <CryptoIconWrapper size={size} cryptoColor={currency.color} {...props}>
+      {Icon && <Icon size={size / 2} />}
+    </CryptoIconWrapper>
+  )
+}
+
+function CurrencyBadge({ currency, ...props }: { currency: Currency }) {
+  return (
+    <Box horizontal flow={3} {...props}>
+      <CurrencyCircleIcon size={40} currency={currency} />
+      <Box>
+        <Box ff="Museo Sans|ExtraBold" color="dark" fontSize={2} style={{ letterSpacing: 2 }}>
+          {currency.ticker}
+        </Box>
+        <Box ff="Open Sans" color="dark" fontSize={5}>
+          {currency.name}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default CurrencyBadge

src/components/modals/ImportAccounts/index.js

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
+
 import type { Currency } from '@ledgerhq/live-common/lib/types'
 
 import type { T, Device } from 'types/common'
@@ -129,10 +130,8 @@ class ImportAccounts extends PureComponent<Props, State> {
               <StepComponent {...stepProps} />
             </ModalContent>
             {!hideFooter && (
-              <ModalFooter>
+              <ModalFooter horizontal align="center" justify="flex-end" style={{ height: 80 }}>
-                <Box horizontal alignItems="center" justifyContent="flex-end">
+                {StepFooter ? <StepFooter {...stepProps} /> : <Box>footer</Box>}
-                  {StepFooter ? <StepFooter {...stepProps} /> : <Box>footer</Box>}
-                </Box>
               </ModalFooter>
             )}
           </ModalBody>

src/components/modals/ImportAccounts/steps/01-step-choose-currency.js

@@ -1,9 +1,10 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
 
 import SelectCurrency from 'components/SelectCurrency'
 import Button from 'components/base/Button'
+import CurrencyBadge from 'components/base/CurrencyBadge'
 
 import type { StepProps } from '../index'
 
@@ -13,9 +14,12 @@ function StepChooseCurrency({ currency, setState }: StepProps) {
 
 export function StepChooseCurrencyFooter({ transitionTo, currency, t }: StepProps) {
   return (
-    <Button primary disabled={!currency} onClick={() => transitionTo('connectDevice')}>
+    <Fragment>
-      {t('common:next')}
+      {currency && <CurrencyBadge mr="auto" currency={currency} />}
-    </Button>
+      <Button primary disabled={!currency} onClick={() => transitionTo('connectDevice')}>
+        {t('common:next')}
+      </Button>
+    </Fragment>
   )
 }
 

src/components/modals/ImportAccounts/steps/02-step-connect-device.js

@@ -1,24 +1,44 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
+import { Trans } from 'react-i18next'
 
 import Button from 'components/base/Button'
+import Box from 'components/base/Box'
 import ConnectDevice from 'components/modals/StepConnectDevice'
+import { CurrencyCircleIcon } from 'components/base/CurrencyBadge'
 
 import type { StepProps } from '../index'
 
 function StepConnectDevice({ t, currency, currentDevice, setState }: StepProps) {
+  if (!currency) {
+    throw new Error('No currency given')
+  }
   return (
-    <ConnectDevice
+    <Fragment>
-      t={t}
+      <Box align="center" mb={6}>
-      deviceSelected={currentDevice}
+        <CurrencyCircleIcon mb={3} size={40} currency={currency} />
-      currency={currency}
+        <Box ff="Open Sans" fontSize={4} color="dark" textAlign="center" style={{ width: 370 }}>
-      onStatusChange={s => {
+          <Trans i18nKey="importAccounts:connectDevice.desc" parent="div">
-        if (s === 'connected') {
+            {`You're about to import your `}
-          setState({ isAppOpened: true })
+            <strong style={{ fontWeight: 'bold' }}>{`${currency.name} (${
-        }
+              currency.ticker
-      }}
+            })`}</strong>
-    />
+            {` account(s) from your Ledger device. Please follow the steps below:`}
+          </Trans>
+        </Box>
+      </Box>
+      <ConnectDevice
+        t={t}
+        deviceSelected={currentDevice}
+        currency={currency}
+        onStatusChange={s => {
+          if (s === 'connected') {
+            setState({ isAppOpened: true })
+          }
+        }}
+      />
+    </Fragment>
   )
 }
 

static/i18n/en/common.yml

@@ -8,7 +8,7 @@ continue: Continue
 chooseWalletPlaceholder: Choose a wallet...
 currency: Currency
 selectAccount: Select an account
-selectCurrency: Select an currency
+selectCurrency: Select a currency
 sortBy: Sort by
 search: Search
 save: Save

static/i18n/en/importAccounts.yml

@@ -2,5 +2,5 @@ title: Import accounts
 breadcrumb:
   informations: Informations
   connectDevice: Connect device
-  import: Import accounts
+  import: Import
   finish: Confirm