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