Add tooltip with error message to TransactionStatusIcon if withText=false

.changelog/577.feature.md

@@ -0,0 +1 @@
+Add tooltip with error message to transaction status icons on lists

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,33 +50,61 @@ 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<TransactionStatusIconProps> = ({ success, withText }) => {
+export const TransactionStatusIcon: FC<TransactionStatusIconProps> = ({ 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
 
-  return (
-    <StyledBox success={success} withText={withText}>
-      {withText && (
-        <span>
+  if (withText) {
+    return (
+      <>
+        <StyledBox success={success} error={error} withText={withText}>
           {statusLabel[status]}
           &nbsp;
-        </span>
-      )}
-      {statusIcon[status]}
-    </StyledBox>
-  )
+          {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>
+    )
+  }
 }

src/app/components/Transactions/index.tsx

@@ -89,7 +89,7 @@ export const Transactions: FC<TransactionsProps> = ({
     key: transaction.hash,
     data: [
       {
-        content: <TransactionStatusIcon success={transaction.success} />,
+        content: <TransactionStatusIcon success={transaction.success} error={transaction.error} />,
         key: 'success',
       },
       ...(verbose && canHaveEncryption

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<{
 
           <dt>{t('common.status')}</dt>
           <dd style={{ flexWrap: 'wrap', gap: '10px' }}>
-            <TransactionStatusIcon success={transaction.success} withText={true} />
-            {transaction.error && (
-              <ErrorBox>
-                {transaction.error.message} ({t('errors.code')} {transaction.error.code})
-              </ErrorBox>
-            )}
+            <TransactionStatusIcon success={transaction.success} error={transaction.error} withText={true} />
           </dd>
 
           <dt>{t('common.block')}</dt>