diff --git a/src/components/modals/Send/04-step-confirmation.js b/src/components/modals/Send/04-step-confirmation.js
index 95d4bc2b..7636ab7d 100644
--- a/src/components/modals/Send/04-step-confirmation.js
+++ b/src/components/modals/Send/04-step-confirmation.js
@@ -1,7 +1,60 @@
+// @flow
import React from 'react'
+import styled from 'styled-components'
-function StepConfirmation() {
- return
step confirmation
+import IconCheckCircle from 'icons/CheckCircle'
+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 (
+
+
+
+
+ {t(`${tPrefix}.title`)}
+ {multiline(t(`${tPrefix}.text`))}
+
+ )
}
export default StepConfirmation
diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js
index f7fa32ae..0347b22b 100644
--- a/src/components/modals/Send/index.js
+++ b/src/components/modals/Send/index.js
@@ -139,13 +139,12 @@ class SendModal extends PureComponent {
}
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 {
device: deviceSelected,
onValidate: this.handleValidate,
}),
+ ...props(stepIndex === 3, {
+ txValidated,
+ }),
}
return
@@ -200,7 +202,7 @@ class SendModal extends PureComponent {
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 {
{stepIndex === 3 && (
-
+ {txValidated ? (
+ // TODO: actually go to operations details
+
+ ) : (
+
+ )}
)}
diff --git a/static/i18n/en/send.yml b/static/i18n/en/send.yml
index f0555ff7..4d2ee7c8 100644
--- a/static/i18n/en/send.yml
+++ b/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