-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.tsx
110 lines (100 loc) · 3.2 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { FC, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import Box from '@mui/material/Box'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import CancelIcon from '@mui/icons-material/Cancel'
import { styled } from '@mui/material/styles'
import { COLORS } from '../../../styles/theme/colors'
import HelpIcon from '@mui/icons-material/Help'
import { TxError } from '../../../oasis-nexus/api'
import Tooltip from '@mui/material/Tooltip'
type TxStatus = 'unknown' | 'success' | 'failure'
const statusBgColor: Record<TxStatus, string> = {
unknown: COLORS.grayMediumLight,
success: COLORS.honeydew,
failure: COLORS.linen,
}
const statusFgColor: Record<TxStatus, string> = {
unknown: COLORS.grayMedium,
success: COLORS.eucalyptus,
failure: COLORS.errorIndicatorBackground,
}
export const statusIcon: Record<TxStatus, ReactNode> = {
unknown: <HelpIcon color="inherit" fontSize="inherit" />,
success: <CheckCircleIcon color="success" fontSize="inherit" />,
failure: <CancelIcon color="error" fontSize="inherit" />,
}
export const StyledBox = styled(Box, {
shouldForwardProp: prop => prop !== 'success' && prop !== 'withText',
})(({ success, withText }: StatusIconProps) => {
const status: TxStatus = success === undefined ? 'unknown' : success ? 'success' : 'failure'
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: withText ? undefined : '28px',
minHeight: '28px',
fontSize: '15px',
backgroundColor: statusBgColor[status],
color: statusFgColor[status],
borderRadius: 10,
padding: 4,
paddingLeft: 12,
paddingRight: 12,
}
})
export const ErrorBox = styled(Box)(() => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '28px',
fontSize: '12px',
backgroundColor: COLORS.grayLight,
color: COLORS.errorIndicatorBackground,
borderRadius: 10,
paddingLeft: 12,
paddingRight: 12,
}))
type StatusIconProps = {
/**
* Did the transaction succeed?
* A missing value means unknown. (For encrypted transactions).
*/
success: undefined | boolean
error: undefined | TxError
withText?: boolean
}
export const StatusIcon: FC<StatusIconProps> = ({ success, error, withText }) => {
const { t } = useTranslation()
const status: TxStatus = success === undefined ? 'unknown' : success ? 'success' : 'failure'
const statusLabel: Record<TxStatus, string> = {
unknown: t('common.unknown'),
success: t('common.success'),
failure: t('common.failed'),
}
const errorMessage = error ? `${error.message} (${t('errors.code')} ${error.code})` : undefined
if (withText) {
return (
<>
<StyledBox success={success} error={error} withText={withText}>
{statusLabel[status]}
{statusIcon[status]}
</StyledBox>
{error && <ErrorBox>{errorMessage}</ErrorBox>}
</>
)
} else {
return (
<Tooltip
arrow
placement="top"
title={errorMessage ? `${statusLabel[status]}: ${errorMessage}` : statusLabel[status]}
>
<StyledBox success={success} error={error} withText={withText}>
{statusIcon[status]}
</StyledBox>
</Tooltip>
)
}
}