diff --git a/src/components/modals/AddAccounts/index.js b/src/components/modals/AddAccounts/index.js index ba0388f8..8c5230f5 100644 --- a/src/components/modals/AddAccounts/index.js +++ b/src/components/modals/AddAccounts/index.js @@ -28,7 +28,7 @@ import { validateNameEdition } from 'helpers/accountName' import StepChooseCurrency, { StepChooseCurrencyFooter } from './steps/01-step-choose-currency' import StepConnectDevice, { StepConnectDeviceFooter } from './steps/02-step-connect-device' import StepImport, { StepImportFooter } from './steps/03-step-import' -import StepFinish from './steps/04-step-finish' +import StepFinish, { StepFinishFooter } from './steps/04-step-finish' const createSteps = ({ t }: { t: T }) => { const onBack = ({ transitionTo, resetScanState }: StepProps) => { @@ -64,7 +64,7 @@ const createSteps = ({ t }: { t: T }) => { id: 'finish', label: t('app:addAccounts.breadcrumb.finish'), component: StepFinish, - footer: null, + footer: StepFinishFooter, onBack: null, hideFooter: true, }, diff --git a/src/components/modals/AddAccounts/steps/04-step-finish.js b/src/components/modals/AddAccounts/steps/04-step-finish.js index 6f6e0470..77e410c7 100644 --- a/src/components/modals/AddAccounts/steps/04-step-finish.js +++ b/src/components/modals/AddAccounts/steps/04-step-finish.js @@ -1,32 +1,57 @@ // @flow -import React from 'react' +import React, { Fragment } from 'react' +import styled from 'styled-components' import TrackPage from 'analytics/TrackPage' import Box from 'components/base/Box' import Button from 'components/base/Button' -import IconCheckCircle from 'icons/CheckCircle' - +import IconCheckFull from 'icons/CheckFull' +import { CurrencyCircleIcon } from '../../../base/CurrencyBadge' import type { StepProps } from '../index' -function StepFinish({ onCloseModal, onGoStep1, t }: StepProps) { +const Title = styled(Box).attrs({ + ff: 'Museo Sans', + fontSize: 5, + mt: 2, + color: 'dark', +})` + text-align: center; +` + +const Text = styled(Box).attrs({ + ff: 'Open Sans', + fontSize: 4, + mt: 2, +})` + text-align: center; +` + +function StepFinish({ currency, t, checkedAccountsIds }: StepProps) { return ( - - - - {t('app:addAccounts.success')} - - - - + {currency ? ( + + + + + ) : null} + {t('app:addAccounts.success', { count: checkedAccountsIds.length })} + {t('app:addAccounts.successDescription', { count: checkedAccountsIds.length })} ) } export default StepFinish + +export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => ( + + + + +) diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index 400b01dc..241af615 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -163,8 +163,10 @@ addAccounts: newAccount: New account legacyAccount: '{{accountName}} (legacy)' noAccountToImport: No existing {{currencyName}} accounts to add - success: Account added to your portfolio -# success_plural: Accounts successfully added to your portfolio. + success: Account successfully added to your portfolio + success_plural: Accounts successfully added to your portfolio + successDescription: Your account have been created. + successDescription_plural: Your accounts have been created. createNewAccount: title: Add a new account noOperationOnLastAccount: 'You have to receive crypto assets on <1><0>{{accountName}} before you can create a new account.'