fix: UI improvements on dapp swap comparison banner (#38517)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

UI improvements on dapp swap comparison banner.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: MetaMask/MetaMask-planning#6382

## **Manual testing steps**

1. Submit swap
2. Check dapp-swap comparison banner

## **Screenshots/Recordings**

<img width="395" height="604" alt="Screenshot 2025-12-03 at 5 25 55 PM"
src="https://github.com/user-attachments/assets/84bb9c52-e1a9-46ac-9f99-ffdc7db97614"
/>

<img width="393" height="612" alt="Screenshot 2025-12-03 at 5 25 49 PM"
src="https://github.com/user-attachments/assets/d4417e07-21be-4f79-8d77-51fb5824a343"
/>

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refines the dapp swap comparison banner UI/behavior and adds robust
error handling in comparison logic, plus a minor token amount
calculation tweak.
> 
> - **UI (banner)**:
> - Banner now remains visible when switching tabs; close button/arrow
only show on current tab.
> - Restyles savings/rewards line using layout components; highlights
savings in success color and separates rewards text.
> - **Hooks (comparison info)**:
> - Wraps best-quote selection, metrics capture, and value-difference
calculations in try/catch with `captureException` and failure metrics.
> - **Utils**:
> - `calculateTokenAmount` multiplies by a `BigNumber` conversion rate
for numeric safety.
> - Temporarily comments out a catch-all `captureException` in
`dapp-swap-util.ts` top-level error path.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a143a54. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

app/scripts/lib/dapp-swap/dapp-swap-util.ts

@@ -157,8 +157,10 @@ export function getQuotesForConfirmation({
         commands,
       });
     }
-    captureException(
-      `Error fetching bridge quotes: ${(error as Error).message}`,
-    );
+    // The error capturing to be uncommented as we address this issue:
+    // https://github.com/MetaMask/MetaMask-planning/issues/6387
+    // captureException(
+    //   `Error fetching bridge quotes: ${(error as Error).toString()}`,
+    // );
   }
 }

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/dapp-swap-comparison-banner.tsx

@@ -2,7 +2,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   Box,
+  BoxAlignItems,
   BoxBackgroundColor,
+  BoxFlexDirection,
   ButtonIcon,
   ButtonIconSize,
   IconName,
@@ -117,12 +119,10 @@ const DappSwapComparisonInner = () => {
       swap_mm_opened: 'true',
     });
     setSelectedSwapType(SwapType.Metamask);
-    setShowDappSwapComparisonBanner(false);
   }, [
     captureDappSwapComparisonDisplayProperties,
     setQuotedSwapDisplayedInInfo,
     setSelectedSwapType,
-    setShowDappSwapComparisonBanner,
     selectedQuote,
   ]);
 
@@ -163,7 +163,7 @@ const DappSwapComparisonInner = () => {
   return (
     <Box>
       <SwapTabs onTabClick={onTabClick} activeTabKey={selectedSwapType} />
-      {showDappSwapComparisonBanner && dappTypeSelected && (
+      {showDappSwapComparisonBanner && (
         <Box
           className="dapp-swap_callout"
           backgroundColor={BoxBackgroundColor.BackgroundSection}
@@ -172,31 +172,53 @@ const DappSwapComparisonInner = () => {
           role="button"
           onClick={updateSwapToSelectedQuote}
         >
-          <ButtonIcon
-            className="dapp-swap_close-button"
-            iconName={IconName.Close}
-            size={ButtonIconSize.Sm}
-            onClick={hideDappSwapComparisonBanner}
-            ariaLabel="close-dapp-swap-comparison-banner"
-          />
-          <div className="dapp-swap_callout-arrow" />
+          {dappTypeSelected && (
+            <>
+              <ButtonIcon
+                className="dapp-swap_close-button"
+                iconName={IconName.Close}
+                size={ButtonIconSize.Sm}
+                onClick={hideDappSwapComparisonBanner}
+                ariaLabel="close-dapp-swap-comparison-banner"
+              />
+              <div className="dapp-swap_callout-arrow" />
+            </>
+          )}
           <Text
             className="dapp-swap_callout-text"
             color={TextColor.TextDefault}
             variant={TextVariant.BodySm}
           >
             {rewards ? t('dappSwapAdvantage') : t('dappSwapAdvantageSaveOnly')}
           </Text>
-          <Text
-            className="dapp-swap_text-save"
-            color={TextColor.TextAlternative}
-            variant={TextVariant.BodyXs}
+          <Box
+            flexDirection={BoxFlexDirection.Row}
+            alignItems={BoxAlignItems.Center}
+            gap={2}
+            marginBottom={2}
           >
-            {t('dappSwapQuoteDifference', [
-              `$${selectedQuoteValueDifference.toFixed(2)}`,
-            ])}
-            {rewards && <span>{` • ${rewards.text}`}</span>}
-          </Text>
+            <Text color={TextColor.SuccessDefault} variant={TextVariant.BodyXs}>
+              {t('dappSwapQuoteDifference', [
+                `$${selectedQuoteValueDifference.toFixed(2)}`,
+              ])}
+            </Text>
+            {rewards && (
+              <>
+                <Text
+                  color={TextColor.TextAlternative}
+                  variant={TextVariant.BodyXs}
+                >
+                  {` • `}
+                </Text>
+                <Text
+                  className="dapp-swap_text-rewards"
+                  variant={TextVariant.BodyXs}
+                >
+                  {rewards.text}
+                </Text>
+              </>
+            )}
+          </Box>
           <Text color={TextColor.TextAlternative} variant={TextVariant.BodyXs}>
             {t('dappSwapBenefits')}
           </Text>

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/index.scss

@@ -45,8 +45,8 @@ Disabling Stylelint's hex color rule here because the TypeScript migration dashb
     margin-bottom: 4px;
   }
 
-  &_text-save {
-    margin-bottom: 4px;
+  &_text-rewards {
+    color: var(--color-accent01-light);
   }
 
   &_callout-arrow {