From 3f2b838cf37b9d6bc0c013b9e6f0aadb0dbbb3b0 Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 13:28:12 +0300
Subject: [PATCH 1/6] feat: change tooltip in header, add tooltip to the value
 cell

---
 .../cells/TransactionTableCellValue.tsx       | 27 +++++++++++++++++--
 .../tableComponents/TransactionsTableBody.tsx | 10 +++++--
 .../tableComponents/TransactionsTableHead.tsx |  2 +-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
index ba4573a6bb..bdeb7efb85 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
@@ -1,9 +1,29 @@
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Typography from '@mui/material/Typography';
 
+import CustomTooltip from '@/components/CustomTooltip';
 import { formatHMTDecimals } from '@/helpers/formatHMTDecimals';
 import { useHMTPrice } from '@/services/api/use-hmt-price';
 
-export const TransactionTableCellValue = ({ value }: { value: string }) => {
+const InfoTooltip = ({ title }: { title: string }) => (
+  <CustomTooltip title={title}>
+    <HelpOutlineIcon
+      fontSize="small"
+      sx={{
+        color: 'text.secondary',
+        ml: 0.5,
+      }}
+    />
+  </CustomTooltip>
+);
+
+export const TransactionTableCellValue = ({
+  value,
+  method,
+}: {
+  value: string;
+  method: string;
+}) => {
   const { isError, isPending } = useHMTPrice();
 
   if (isError) {
@@ -15,9 +35,12 @@ export const TransactionTableCellValue = ({ value }: { value: string }) => {
   }
 
   return (
-    <Typography>
+    <Typography display="flex" alignItems="center">
       {formatHMTDecimals(value)}
       <Typography component="span"> HMT</Typography>
+      {method === 'approve' && (
+        <InfoTooltip title="Approved amount (not a transfer)" />
+      )}
     </Typography>
   );
 };
diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx
index cd1c80535a..3edd02e454 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx
@@ -120,7 +120,10 @@ export const TransactionsTableBody: React.FC = () => {
             </TableCell>
             <TableCell>{elem.block}</TableCell>
             <TableCell>
-              <TransactionTableCellValue value={elem.value} />
+              <TransactionTableCellValue
+                value={elem.value}
+                method={elem.method}
+              />
             </TableCell>
           </TableRow>
           {elem.internalTransactions?.map((internalTx, internalIdx) => (
@@ -153,7 +156,10 @@ export const TransactionsTableBody: React.FC = () => {
               </TableCell>
               <TableCell></TableCell>
               <TableCell>
-                <TransactionTableCellValue value={internalTx.value} />
+                <TransactionTableCellValue
+                  value={internalTx.value}
+                  method={internalTx.method}
+                />
               </TableCell>
             </TableRow>
           ))}
diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
index 1d3572a9e4..e5facac81e 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
@@ -50,7 +50,7 @@ export const TransactionsTableHead = () => {
         <TableCell>
           <Stack direction="row" alignItems="center">
             Value
-            <InfoTooltip title="Amount of HMT transferred in the transaction" />
+            <InfoTooltip title="This column reflects transacted and approved amounts" />
           </Stack>
         </TableCell>
       </TableRow>

From c7a371b78c48c51d83c15795d4d53d738003e2d9 Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 13:41:41 +0300
Subject: [PATCH 2/6] fix: styles

---
 .../cells/TransactionTableCellValue.tsx                     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
index bdeb7efb85..1cbb116fbe 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
@@ -11,7 +11,7 @@ const InfoTooltip = ({ title }: { title: string }) => (
       fontSize="small"
       sx={{
         color: 'text.secondary',
-        ml: 0.5,
+        //ml: 0.5,
       }}
     />
   </CustomTooltip>
@@ -35,9 +35,9 @@ export const TransactionTableCellValue = ({
   }
 
   return (
-    <Typography display="flex" alignItems="center">
+    <Typography variant="body2" display="flex" alignItems="center" gap={0.5}>
       {formatHMTDecimals(value)}
-      <Typography component="span"> HMT</Typography>
+      <Typography variant="body2">HMT</Typography>
       {method === 'approve' && (
         <InfoTooltip title="Approved amount (not a transfer)" />
       )}

From 1e12db5c3645f87a5af637bf4521bdcdbf8b1705 Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 13:44:29 +0300
Subject: [PATCH 3/6] fix: remove commented code

---
 .../cells/TransactionTableCellValue.tsx                          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
index 1cbb116fbe..99ed5fd561 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
@@ -11,7 +11,6 @@ const InfoTooltip = ({ title }: { title: string }) => (
       fontSize="small"
       sx={{
         color: 'text.secondary',
-        //ml: 0.5,
       }}
     />
   </CustomTooltip>

From e2d777d74a6e6c70ce00bfaa64ea3a482c5be5b5 Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 13:45:36 +0300
Subject: [PATCH 4/6] fix: add arrow to tooltip

---
 .../cells/TransactionTableCellValue.tsx                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
index 99ed5fd561..cc961ba6c6 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
@@ -6,7 +6,7 @@ import { formatHMTDecimals } from '@/helpers/formatHMTDecimals';
 import { useHMTPrice } from '@/services/api/use-hmt-price';
 
 const InfoTooltip = ({ title }: { title: string }) => (
-  <CustomTooltip title={title}>
+  <CustomTooltip title={title} arrow>
     <HelpOutlineIcon
       fontSize="small"
       sx={{

From 41343fc0278f2fd28f64535c928e17c7c8152e6d Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 14:10:34 +0300
Subject: [PATCH 5/6] refactor: typography in table; using chip in the method
 cell

---
 .../SearchResults/AbbreviateClipboard.tsx     |  1 +
 .../cells/TransactionTableCellMethod.tsx      | 26 +++++++------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx b/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx
index 599916f2a0..f59a321b95 100644
--- a/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx
+++ b/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx
@@ -20,6 +20,7 @@ const AbbreviateClipboard = ({ value, link }: AbbreviateClipboardProps) => {
   return (
     <Stack direction="row" gap={1}>
       <Typography
+        variant="body2"
         sx={{
           whiteSpace: 'nowrap',
           textDecoration: 'inherit',
diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx
index e2e39fb818..72d63b90a9 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx
@@ -1,6 +1,5 @@
-import Box from '@mui/material/Box/Box';
+import Chip from '@mui/material/Chip';
 import { useTheme } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
 
 type PaletteColorKey =
   | 'primary'
@@ -87,19 +86,14 @@ export const TransactionTableCellMethod = ({ method }: { method: string }) => {
   };
 
   return (
-    <Box
-      display="inline-flex"
-      px={1.5}
-      py={1}
-      borderRadius={8}
-      border={`1px solid ${getColorFromTheme(currentStatusColors.border)}`}
-    >
-      <Typography
-        textTransform="capitalize"
-        color={getColorFromTheme(currentStatusColors.text)}
-      >
-        {method}
-      </Typography>
-    </Box>
+    <Chip
+      label={method}
+      variant="outlined"
+      sx={{
+        borderColor: getColorFromTheme(currentStatusColors.border),
+        color: getColorFromTheme(currentStatusColors.text),
+        textTransform: 'capitalize',
+      }}
+    />
   );
 };

From 9bbde4f23a57c841b94c70f301be36029f8a1907 Mon Sep 17 00:00:00 2001
From: kirill <kirill@hmt.ai>
Date: Mon, 16 Jun 2025 15:44:10 +0300
Subject: [PATCH 6/6] fix: increase max width of tooltip

---
 .../cells/TransactionTableCellValue.tsx               |  4 +++-
 .../tableComponents/TransactionsTableHead.tsx         | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
index cc961ba6c6..ee8a5ecc2f 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue.tsx
@@ -36,7 +36,9 @@ export const TransactionTableCellValue = ({
   return (
     <Typography variant="body2" display="flex" alignItems="center" gap={0.5}>
       {formatHMTDecimals(value)}
-      <Typography variant="body2">HMT</Typography>
+      <Typography variant="body2" component="span">
+        HMT
+      </Typography>
       {method === 'approve' && (
         <InfoTooltip title="Approved amount (not a transfer)" />
       )}
diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
index e5facac81e..5a5fbf0538 100644
--- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
+++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableHead.tsx
@@ -7,7 +7,16 @@ import TableRow from '@mui/material/TableRow';
 import CustomTooltip from '@/components/CustomTooltip';
 
 const InfoTooltip = ({ title }: { title: string }) => (
-  <CustomTooltip title={title}>
+  <CustomTooltip
+    title={title}
+    slotProps={{
+      tooltip: {
+        sx: {
+          maxWidth: '320px',
+        },
+      },
+    }}
+  >
     <HelpOutlineIcon
       fontSize="small"
       sx={{