diff --git a/src/components/base/CurrencyBadge.js b/src/components/base/CurrencyBadge.js
new file mode 100644
index 00000000..0e4de748
--- /dev/null
+++ b/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 (
+
+ {Icon && }
+
+ )
+}
+
+function CurrencyBadge({ currency, ...props }: { currency: Currency }) {
+ return (
+
+
+
+
+ {currency.ticker}
+
+
+ {currency.name}
+
+
+
+ )
+}
+
+export default CurrencyBadge
diff --git a/src/components/modals/ImportAccounts/index.js b/src/components/modals/ImportAccounts/index.js
index 46990505..02e709f7 100644
--- a/src/components/modals/ImportAccounts/index.js
+++ b/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 {
{!hideFooter && (
-
-
- {StepFooter ? : footer}
-
+
+ {StepFooter ? : footer}
)}
diff --git a/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js b/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js
index 90179ba8..27f6136e 100644
--- a/src/components/modals/ImportAccounts/steps/01-step-choose-currency.js
+++ b/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 (
-
+
+ {currency && }
+
+
)
}
diff --git a/src/components/modals/ImportAccounts/steps/02-step-connect-device.js b/src/components/modals/ImportAccounts/steps/02-step-connect-device.js
index c807ce56..89ee79d2 100644
--- a/src/components/modals/ImportAccounts/steps/02-step-connect-device.js
+++ b/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 (
- {
- if (s === 'connected') {
- setState({ isAppOpened: true })
- }
- }}
- />
+
+
+
+
+
+ {`You're about to import your `}
+ {`${currency.name} (${
+ currency.ticker
+ })`}
+ {` account(s) from your Ledger device. Please follow the steps below:`}
+
+
+
+ {
+ if (s === 'connected') {
+ setState({ isAppOpened: true })
+ }
+ }}
+ />
+
)
}
diff --git a/static/i18n/en/common.yml b/static/i18n/en/common.yml
index 8a75b33d..d158d1fe 100644
--- a/static/i18n/en/common.yml
+++ b/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
diff --git a/static/i18n/en/importAccounts.yml b/static/i18n/en/importAccounts.yml
index 4d122a82..0fbb3e0c 100644
--- a/static/i18n/en/importAccounts.yml
+++ b/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