diff --git a/.changelog/577.feature.md b/.changelog/577.feature.md new file mode 100644 index 000000000..f45a4bd34 --- /dev/null +++ b/.changelog/577.feature.md @@ -0,0 +1 @@ +Add tooltip with error message to transaction status icons on lists diff --git a/src/app/components/TransactionStatusIcon/index.tsx b/src/app/components/TransactionStatusIcon/index.tsx index 908999226..bb4ac9c93 100644 --- a/src/app/components/TransactionStatusIcon/index.tsx +++ b/src/app/components/TransactionStatusIcon/index.tsx @@ -6,6 +6,8 @@ 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-indexer/api' +import Tooltip from '@mui/material/Tooltip' type TxStatus = 'unknown' | 'success' | 'failure' @@ -48,16 +50,30 @@ const StyledBox = styled(Box, { } }) +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 TransactionStatusIconProps = { /** * Did the transaction succeed? * A missing value means unknown. (For encrypted transactions). */ - success?: boolean + success: undefined | boolean + error: undefined | TxError withText?: boolean } -export const TransactionStatusIcon: FC = ({ success, withText }) => { +export const TransactionStatusIcon: FC = ({ success, error, withText }) => { const { t } = useTranslation() const status: TxStatus = success === undefined ? 'unknown' : success ? 'success' : 'failure' const statusLabel: Record = { @@ -65,16 +81,30 @@ export const TransactionStatusIcon: FC = ({ success, success: t('common.success'), failure: t('common.failed'), } + const errorMessage = error ? `${error.message} (${t('errors.code')} ${error.code})` : undefined - return ( - - {withText && ( - + if (withText) { + return ( + <> + {statusLabel[status]}   - - )} - {statusIcon[status]} - - ) + {statusIcon[status]} + + {error && {errorMessage}} + + ) + } else { + return ( + + + {statusIcon[status]} + + + ) + } } diff --git a/src/app/components/Transactions/index.tsx b/src/app/components/Transactions/index.tsx index 3d8f6af88..acd735f9e 100644 --- a/src/app/components/Transactions/index.tsx +++ b/src/app/components/Transactions/index.tsx @@ -89,7 +89,7 @@ export const Transactions: FC = ({ key: transaction.hash, data: [ { - content: , + content: , key: 'success', }, ...(verbose && canHaveEncryption diff --git a/src/app/pages/TransactionDetailPage/index.tsx b/src/app/pages/TransactionDetailPage/index.tsx index b7f068b4d..7337b25d2 100644 --- a/src/app/pages/TransactionDetailPage/index.tsx +++ b/src/app/pages/TransactionDetailPage/index.tsx @@ -21,7 +21,6 @@ import { CopyToClipboard } from '../../components/CopyToClipboard' import { AppErrors } from '../../../types/errors' import { TextSkeleton } from '../../components/Skeleton' import Box from '@mui/material/Box' -import { COLORS } from '../../../styles/theme/colors' import { BlockLink } from '../../components/Blocks/BlockLink' import { TransactionLink } from '../../components/Transactions/TransactionLink' import { TransactionLogs } from '../../components/Transactions/Logs' @@ -74,19 +73,6 @@ const StyledAlert = styled(Alert)(() => ({ marginBottom: '1em', })) -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, -})) - export const TransactionDetailPage: FC = () => { const { t } = useTranslation() @@ -251,12 +237,7 @@ export const TransactionDetailView: FC<{
{t('common.status')}
- - {transaction.error && ( - - {transaction.error.message} ({t('errors.code')} {transaction.error.code}) - - )} +
{t('common.block')}