Integrate new design of step 4 of Add Accounts

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,
     },

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 (
     <Box align="center" py={6}>
       <TrackPage category="AddAccounts" name="Step4" />
-      <Box color="positiveGreen">
-        <IconCheckCircle size={40} />
-      </Box>
-      <Box p={4}>{t('app:addAccounts.success')}</Box>
-      <Box horizontal>
-        <Button mr={2} outline onClick={onGoStep1}>
-          {t('app:addAccounts.cta.addMore')}
-        </Button>
-        <Button primary onClick={onCloseModal}>
-          {t('app:common.close')}
-        </Button>
-      </Box>
+      {currency ? (
+        <Box color="positiveGreen" style={{ position: 'relative' }}>
+          <CurrencyCircleIcon size={50} currency={currency} />
+          <IconCheckFull size={18} style={{ position: 'absolute', top: 0, right: 0 }} />
+        </Box>
+      ) : null}
+      <Title>{t('app:addAccounts.success', { count: checkedAccountsIds.length })}</Title>
+      <Text>{t('app:addAccounts.successDescription', { count: checkedAccountsIds.length })}</Text>
     </Box>
   )
 }
 
 export default StepFinish
+
+export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => (
+  <Fragment>
+    <Button mr={2} outline onClick={onGoStep1}>
+      {t('app:addAccounts.cta.addMore')}
+    </Button>
+    <Button primary onClick={onCloseModal}>
+      {t('app:common.close')}
+    </Button>
+  </Fragment>
+)

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}}</0></1> before you can create a new account.'