You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.4 KiB
61 lines
1.4 KiB
// @flow
|
|
import React from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
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: ?string,
|
|
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>
|
|
<Text>{txValidated || ''}</Text>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default StepConfirmation
|
|
|