feat: Add advanced details tooltip

MetaMask · Feb 7, 2025 · 3ac7bc7 · 3ac7bc7
1 parent 07cc430
commit 3ac7bc7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/pages/confirmations/components/confirm/header/advanced-details-button.tsx b/ui/pages/confirmations/components/confirm/header/advanced-details-button.tsx
@@ -6,15 +6,18 @@ import {
   ButtonIconSize,
   IconName,
 } from '../../../../../components/component-library';
+import Tooltip from '../../../../../components/ui/tooltip';
 import {
   BackgroundColor,
   BorderRadius,
   IconColor,
 } from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { setConfirmationAdvancedDetailsOpen } from '../../../../../store/actions';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../selectors/preferences';
 
 export const AdvancedDetailsButton = () => {
+  const t = useI18nContext();
   const dispatch = useDispatch();
 
   const showAdvancedDetails = useSelector(
@@ -35,16 +38,24 @@ export const AdvancedDetailsButton = () => {
       borderRadius={BorderRadius.MD}
       marginRight={1}
     >
-      <ButtonIcon
-        ariaLabel="Advanced tx details"
-        color={IconColor.iconDefault}
-        iconName={IconName.Customize}
-        data-testid="header-advanced-details-button"
-        size={ButtonIconSize.Md}
-        onClick={() => {
-          setShowAdvancedDetails(!showAdvancedDetails);
-        }}
-      />
+      <Tooltip
+        title={
+          showAdvancedDetails
+            ? t('hideAdvancedDetails')
+            : t('showAdvancedDetails')
+        }
+      >
+        <ButtonIcon
+          ariaLabel="Advanced tx details"
+          color={IconColor.iconDefault}
+          iconName={IconName.Customize}
+          data-testid="header-advanced-details-button"
+          size={ButtonIconSize.Md}
+          onClick={() => {
+            setShowAdvancedDetails(!showAdvancedDetails);
+          }}
+        />
+      </Tooltip>
     </Box>
   );
 };