From e1e1f5f090d2b51d80410e09940b44fed88c8c4e Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Wed, 21 Jun 2023 21:59:37 +0200
Subject: [PATCH 1/2] Move tx error into TransactionStatusIcon

---
 .../TransactionStatusIcon/index.tsx           | 42 ++++++++++++++-----
 src/app/components/Transactions/index.tsx     |  2 +-
 src/app/pages/TransactionDetailPage/index.tsx | 21 +---------
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/app/components/TransactionStatusIcon/index.tsx b/src/app/components/TransactionStatusIcon/index.tsx
index 908999226..c48e7f405 100644
--- a/src/app/components/TransactionStatusIcon/index.tsx
+++ b/src/app/components/TransactionStatusIcon/index.tsx
@@ -6,6 +6,7 @@ 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'
 
 type TxStatus = 'unknown' | 'success' | 'failure'
 
@@ -48,16 +49,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<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> = {
@@ -67,14 +82,21 @@ export const TransactionStatusIcon: FC<TransactionStatusIconProps> = ({ success,
   }
 
   return (
-    <StyledBox success={success} withText={withText}>
-      {withText && (
-        <span>
-          {statusLabel[status]}
-          &nbsp;
-        </span>
+    <>
+      <StyledBox success={success} error={error} withText={withText}>
+        {withText && (
+          <span>
+            {statusLabel[status]}
+            &nbsp;
+          </span>
+        )}
+        {statusIcon[status]}
+      </StyledBox>
+      {withText && error && (
+        <ErrorBox>
+          {error.message} ({t('errors.code')} {error.code})
+        </ErrorBox>
       )}
-      {statusIcon[status]}
-    </StyledBox>
+    </>
   )
 }
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<TransactionsProps> = ({
     key: transaction.hash,
     data: [
       {
-        content: <TransactionStatusIcon success={transaction.success} />,
+        content: <TransactionStatusIcon success={transaction.success} error={transaction.error} />,
         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<{
 
           <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>

From fac4b24501f9ed4b286b0ee6bb472b3772280409 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Wed, 21 Jun 2023 22:15:08 +0200
Subject: [PATCH 2/2] Add tooltip to TransactionStatusIcon if withText=false

---
 .changelog/577.feature.md                     |  1 +
 .../TransactionStatusIcon/index.tsx           | 44 +++++++++++--------
 2 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 .changelog/577.feature.md

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 c48e7f405..bb4ac9c93 100644
--- a/src/app/components/TransactionStatusIcon/index.tsx
+++ b/src/app/components/TransactionStatusIcon/index.tsx
@@ -7,6 +7,7 @@ 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'
 
@@ -80,23 +81,30 @@ export const TransactionStatusIcon: FC<TransactionStatusIconProps> = ({ success,
     success: t('common.success'),
     failure: t('common.failed'),
   }
+  const errorMessage = error ? `${error.message} (${t('errors.code')} ${error.code})` : undefined
 
-  return (
-    <>
-      <StyledBox success={success} error={error} withText={withText}>
-        {withText && (
-          <span>
-            {statusLabel[status]}
-            &nbsp;
-          </span>
-        )}
-        {statusIcon[status]}
-      </StyledBox>
-      {withText && error && (
-        <ErrorBox>
-          {error.message} ({t('errors.code')} {error.code})
-        </ErrorBox>
-      )}
-    </>
-  )
+  if (withText) {
+    return (
+      <>
+        <StyledBox success={success} error={error} withText={withText}>
+          {statusLabel[status]}
+          &nbsp;
+          {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>
+    )
+  }
 }