Last step (confirmation) for sending modal

src/components/modals/Send/04-step-confirmation.js

@@ -1,7 +1,60 @@
+// @flow
 import React from 'react'
+import styled from 'styled-components'
 
-function StepConfirmation() {
+import IconCheckCircle from 'icons/CheckCircle'
-  return <div>step confirmation</div>
+import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
+import Box from 'components/base/Box'
+import { multiline } from 'styles/helpers'
+import { colors } from 'styles/theme'
+
+import type { T } from 'types/common'
+
+const Container = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  grow: true,
+  color: 'dark',
+})`
+  height: 220px;
+`
+
+const Title = styled(Box).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  mt: 4,
+})`
+  text-align: center;
+`
+
+const Text = styled(Box).attrs({
+  ff: 'Open Sans',
+  fontSize: 4,
+  mt: 2,
+})`
+  text-align: center;
+`
+
+type Props = {
+  txValidated: boolean,
+  t: T,
+}
+
+function StepConfirmation(props: Props) {
+  const { t, txValidated } = props
+  const Icon = txValidated ? IconCheckCircle : IconExclamationCircleThin
+  const iconColor = txValidated ? colors.positiveGreen : colors.alertRed
+  const tPrefix = txValidated ? 'send:steps.confirmation.success' : 'send:steps.confirmation.error'
+
+  return (
+    <Container>
+      <span style={{ color: iconColor }}>
+        <Icon size={43} />
+      </span>
+      <Title>{t(`${tPrefix}.title`)}</Title>
+      <Text>{multiline(t(`${tPrefix}.text`))}</Text>
+    </Container>
+  )
 }
 
 export default StepConfirmation

src/components/modals/Send/index.js

@@ -139,13 +139,12 @@ class SendModal extends PureComponent<Props, State> {
   }
 
   handleValidate = isValidated => {
+    const { stepIndex } = this.state
+
     this.setState({
       txValidated: isValidated,
+      stepIndex: stepIndex + 1,
     })
-
-    if (isValidated === true) {
-      this.handleNextStep()
-    }
   }
 
   createChangeHandler = key => value => {
@@ -193,6 +192,9 @@ class SendModal extends PureComponent<Props, State> {
         device: deviceSelected,
         onValidate: this.handleValidate,
       }),
+      ...props(stepIndex === 3, {
+        txValidated,
+      }),
     }
 
     return <Comp onChange={this.createChangeHandler} {...stepProps} />
@@ -200,7 +202,7 @@ class SendModal extends PureComponent<Props, State> {
 
   render() {
     const { accounts, t } = this.props
-    const { stepIndex, amount, account, fees } = this.state
+    const { stepIndex, amount, account, fees, txValidated } = this.state
 
     const canNext = this.canNext()
     const canPrev = this.canPrev()
@@ -239,7 +241,16 @@ class SendModal extends PureComponent<Props, State> {
               {stepIndex === 3 && (
                 <ModalFooter horizontal alignItems="center" justifyContent="flex-end" flow={2}>
                   <Button onClick={onClose}>{t('common:close')}</Button>
-                  <Button primary>{t('send:steps.confirmation.cta')}</Button>
+                  {txValidated ? (
+                    // TODO: actually go to operations details
+                    <Button onClick={onClose} primary>
+                      {t('send:steps.confirmation.success.cta')}
+                    </Button>
+                  ) : (
+                    <Button onClick={() => this.setState({ stepIndex: 0 })} primary>
+                      {t('send:steps.confirmation.error.cta')}
+                    </Button>
+                  )}
                 </ModalFooter>
               )}
             </ModalBody>

static/i18n/en/send.yml

@@ -21,4 +21,13 @@ steps:
     body: Once you have checked everything is ok, you can validate securely the transaction on your device.
   confirmation:
     title: Confirmation
-    cta: View operation details
+    success:
+      title: Transaction successfully completed
+      text: You may have to wait few confirmations unitl the transaction appear  
+      cta: View operation details
+    error:
+      title: Transaction aborted
+      text: |
+        The transaction have been aborted on your device.
+        You can try again the operation.
+      cta: Retry operation