feat: Add advanced details tooltip

MetaMask · Feb 7, 2025 · 971841c · 971841c
1 parent 07cc430
commit 971841c
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 70 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/...nfirmations/components/confirm/header/__snapshots__/advanced-details-button.test.tsx.snap b/...nfirmations/components/confirm/header/__snapshots__/advanced-details-button.test.tsx.snap
@@ -5,16 +5,27 @@ exports[`<AdvancedDetailsButton /> should match snapshot 1`] = `
   <div
     class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
   >
-    <button
-      aria-label="Advanced tx details"
-      class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-      data-testid="header-advanced-details-button"
-    >
-      <span
-        class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-        style="mask-image: url('./images/icons/customize.svg');"
-      />
-    </button>
+    <div>
+      <div
+        aria-describedby="tippy-tooltip-1"
+        class=""
+        data-original-title="Show advanced details"
+        data-tooltipped=""
+        style="display: inline;"
+        tabindex="0"
+      >
+        <button
+          aria-label="Advanced tx details"
+          class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+          data-testid="header-advanced-details-button"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/customize.svg');"
+          />
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/...confirmations/components/confirm/header/__snapshots__/dapp-initiated-header.test.tsx.snap b/...confirmations/components/confirm/header/__snapshots__/dapp-initiated-header.test.tsx.snap
@@ -18,16 +18,27 @@ exports[`<DAppInitiatedHeader /> should match snapshot 1`] = `
       <div
         class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
       >
-        <button
-          aria-label="Advanced tx details"
-          class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-          data-testid="header-advanced-details-button"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-            style="mask-image: url('./images/icons/customize.svg');"
-          />
-        </button>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-1"
+            class=""
+            data-original-title="Show advanced details"
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <button
+              aria-label="Advanced tx details"
+              class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              data-testid="header-advanced-details-button"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/customize.svg');"
+              />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>

diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap
@@ -131,16 +131,27 @@ exports[`Header should match snapshot with token transfer confirmation initiated
       <div
         class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
       >
-        <button
-          aria-label="Advanced tx details"
-          class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-          data-testid="header-advanced-details-button"
-        >
-          <span
-            class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-            style="mask-image: url('./images/icons/customize.svg');"
-          />
-        </button>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-4"
+            class=""
+            data-original-title="Show advanced details"
+            data-tooltipped=""
+            style="display: inline;"
+            tabindex="0"
+          >
+            <button
+              aria-label="Advanced tx details"
+              class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              data-testid="header-advanced-details-button"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/customize.svg');"
+              />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -171,16 +182,27 @@ exports[`Header should match snapshot with token transfer confirmation initiated
     <div
       class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
     >
-      <button
-        aria-label="Advanced tx details"
-        class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-        data-testid="header-advanced-details-button"
-      >
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-          style="mask-image: url('./images/icons/customize.svg');"
-        />
-      </button>
+      <div>
+        <div
+          aria-describedby="tippy-tooltip-5"
+          class=""
+          data-original-title="Show advanced details"
+          data-tooltipped=""
+          style="display: inline;"
+          tabindex="0"
+        >
+          <button
+            aria-label="Advanced tx details"
+            class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+            data-testid="header-advanced-details-button"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+              style="mask-image: url('./images/icons/customize.svg');"
+            />
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -294,16 +316,27 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
         <div
           class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
         >
-          <button
-            aria-label="Advanced tx details"
-            class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-            data-testid="header-advanced-details-button"
-          >
-            <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-              style="mask-image: url('./images/icons/customize.svg');"
-            />
-          </button>
+          <div>
+            <div
+              aria-describedby="tippy-tooltip-3"
+              class=""
+              data-original-title="Show advanced details"
+              data-tooltipped=""
+              style="display: inline;"
+              tabindex="0"
+            >
+              <button
+                aria-label="Advanced tx details"
+                class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                data-testid="header-advanced-details-button"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/customize.svg');"
+                />
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/...nfirmations/components/confirm/header/__snapshots__/wallet-initiated-header.test.tsx.snap b/...nfirmations/components/confirm/header/__snapshots__/wallet-initiated-header.test.tsx.snap
@@ -24,16 +24,27 @@ exports[`<WalletInitiatedHeader /> should match snapshot 1`] = `
     <div
       class="mm-box mm-box--margin-right-1 mm-box--background-color-transparent mm-box--rounded-md"
     >
-      <button
-        aria-label="Advanced tx details"
-        class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
-        data-testid="header-advanced-details-button"
-      >
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
-          style="mask-image: url('./images/icons/customize.svg');"
-        />
-      </button>
+      <div>
+        <div
+          aria-describedby="tippy-tooltip-1"
+          class=""
+          data-original-title="Show advanced details"
+          data-tooltipped=""
+          style="display: inline;"
+          tabindex="0"
+        >
+          <button
+            aria-label="Advanced tx details"
+            class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+            data-testid="header-advanced-details-button"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+              style="mask-image: url('./images/icons/customize.svg');"
+            />
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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>
   );
 };