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.
80 lines
1.9 KiB
80 lines
1.9 KiB
// @flow
|
|
import React from 'react'
|
|
import styled from 'styled-components'
|
|
import type { Operation } from '@ledgerhq/live-common/lib/types'
|
|
import type { T } from 'types/common'
|
|
|
|
import Spinner from 'components/base/Spinner'
|
|
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 TranslatedError from '../../TranslatedError'
|
|
|
|
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: 2,
|
|
})`
|
|
text-align: center;
|
|
`
|
|
|
|
const Text = styled(Box).attrs({
|
|
ff: 'Open Sans',
|
|
fontSize: 4,
|
|
mt: 2,
|
|
})`
|
|
text-align: center;
|
|
`
|
|
|
|
type Props = {
|
|
optimisticOperation: ?Operation,
|
|
t: T,
|
|
error: ?Error,
|
|
}
|
|
|
|
function StepConfirmation(props: Props) {
|
|
const { t, optimisticOperation, error } = props
|
|
const Icon = optimisticOperation ? IconCheckCircle : error ? IconExclamationCircleThin : Spinner
|
|
const iconColor = optimisticOperation
|
|
? colors.positiveGreen
|
|
: error
|
|
? colors.alertRed
|
|
: colors.grey
|
|
const tPrefix = optimisticOperation
|
|
? 'app:send.steps.confirmation.success'
|
|
: error
|
|
? 'app:send.steps.confirmation.error'
|
|
: 'app:send.steps.confirmation.pending'
|
|
|
|
return (
|
|
<Container>
|
|
<span style={{ color: iconColor }}>
|
|
<Icon size={43} />
|
|
</span>
|
|
<Title>{t(`${tPrefix}.title`)}</Title>
|
|
<Text style={{ userSelect: 'text' }}>
|
|
{optimisticOperation ? (
|
|
multiline(t(`${tPrefix}.text`))
|
|
) : error ? (
|
|
<TranslatedError error={error} />
|
|
) : null}
|
|
</Text>
|
|
<Text style={{ userSelect: 'text' }}>
|
|
{optimisticOperation ? optimisticOperation.hash : ''}
|
|
</Text>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default StepConfirmation
|
|
|