Show a balance for the Token To, update position of the MM fee, removes a link (#20030)

app/_locales/en/messages.json

@@ -3086,9 +3086,6 @@
     "message": "You have (1) pending transaction.",
     "description": "$1 is count of pending transactions"
   },
-  "percentage": {
-    "message": "$1%"
-  },
   "permissionRequest": {
     "message": "Permission request"
   },
@@ -4469,6 +4466,10 @@
     "message": "Includes a $1% MetaMask fee.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
+  "swapIncludesMetaMaskFeeViewAllQuotes": {
+    "message": "Includes a $1% MetaMask fee – $2",
+    "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number and $2 is a link to view all quotes."
+  },
   "swapLearnMore": {
     "message": "Learn more about Swaps"
   },
@@ -5233,6 +5234,9 @@
   "viewAllDetails": {
     "message": "View all details"
   },
+  "viewAllQuotes": {
+    "message": "view all quotes"
+  },
   "viewContact": {
     "message": "View contact"
   },

test/e2e/swaps/shared.js

@@ -173,9 +173,7 @@ const checkNotification = async (driver, options) => {
 };
 
 const changeExchangeRate = async (driver) => {
-  await driver.clickElement(
+  await driver.clickElement('[data-testid="review-quote-view-all-quotes"]');
-    '[data-testid="exchange-rate-display-base-symbol"]',
-  );
   await driver.waitForSelector({ text: 'Quote details', tag: 'h2' });
 
   const networkFees = await driver.findElements(

ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap

@@ -6,7 +6,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
     class="exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>

ui/pages/swaps/exchange-rate-display/exchange-rate-display.js

@@ -72,6 +72,13 @@ export default function ExchangeRateDisplay({
     rateToDisplay = formatSwapsValueForDisplay(rate);
   }
 
+  const quoteRateClassName = onQuotesClick
+    ? 'exchange-rate-display__quote-rate'
+    : 'exchange-rate-display__quote-rate--no-link';
+  const quoteRateColor = onQuotesClick
+    ? TextColor.primaryDefault
+    : TextColor.textDefault;
+
   return (
     <div className={classnames('exchange-rate-display', className)}>
       <Box
@@ -79,8 +86,8 @@ export default function ExchangeRateDisplay({
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
         onClick={onQuotesClick}
-        color={TextColor.primaryDefault}
+        color={quoteRateColor}
-        className="exchange-rate-display__quote-rate"
+        className={quoteRateClassName}
         data-testid="exchange-rate-display-quote-rate"
       >
         <span>1</span>

ui/pages/swaps/exchange-rate-display/index.scss

@@ -19,4 +19,8 @@
   &__quote-rate {
     cursor: pointer;
   }
+
+  &__quote-rate--no-link {
+    cursor: text;
+  }
 }

ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap

@@ -81,7 +81,7 @@ exports[`MainQuoteSummary renders the component with initial props 4`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

@@ -586,7 +586,10 @@ export default function PrepareSwapPage({
     );
   };
 
-  const swapYourTokenBalance = `${t('balance')}: ${fromTokenString || '0'}`;
+  const yourTokenFromBalance = `${t('balance')}: ${fromTokenString || '0'}`;
+  const yourTokenToBalance = `${t('balance')}: ${
+    selectedToToken?.string || '0'
+  }`;
 
   const isDirectWrappingEnabled = shouldEnableDirectWrapping(
     chainId,
@@ -883,7 +886,7 @@ export default function PrepareSwapPage({
             alignItems={AlignItems.stretch}
           >
             <div className="prepare-swap-page__balance-message">
-              {fromTokenSymbol && swapYourTokenBalance}
+              {fromTokenSymbol && yourTokenFromBalance}
               {showMaxBalanceLink && (
                 <div
                   className="prepare-swap-page__max-balance"
@@ -997,6 +1000,15 @@ export default function PrepareSwapPage({
               </Text>
             </Box>
           </Box>
+          <Box
+            display={DISPLAY.FLEX}
+            justifyContent={JustifyContent.spaceBetween}
+            alignItems={AlignItems.stretch}
+          >
+            <div className="prepare-swap-page__balance-message">
+              {selectedToToken?.string && yourTokenToBalance}
+            </div>
+          </Box>
         </div>
         {!showReviewQuote && toTokenIsNotDefault && occurrences < 2 && (
           <Box display={DISPLAY.FLEX} marginTop={2}>

ui/pages/swaps/prepare-swap-page/review-quote.js

@@ -1047,7 +1047,6 @@ export default function ReviewQuote({ setReceiveToAmount }) {
           >
             <Text
               variant={TextVariant.bodyMd}
-              as="h6"
               marginRight={1}
               color={TextColor.textAlternative}
             >
@@ -1063,39 +1062,11 @@ export default function ReviewQuote({ setReceiveToAmount }) {
               secondaryTokenValue={destinationValue}
               secondaryTokenDecimals={destinationTokenDecimals}
               secondaryTokenSymbol={destinationTokenSymbol}
-              arrowColor="var(--color-primary-default)"
               boldSymbols={false}
               className="main-quote-summary__exchange-rate-display"
-              onQuotesClick={
-                /* istanbul ignore next */
-                () => {
-                  trackAllAvailableQuotesOpened();
-                  setSelectQuotePopoverShown(true);
-                }
-              }
               showIconForSwappingTokens={false}
             />
           </Box>
-          <Box
-            display={DISPLAY.FLEX}
-            justifyContent={JustifyContent.spaceBetween}
-            alignItems={AlignItems.stretch}
-          >
-            <Text
-              variant={TextVariant.bodyMd}
-              as="h6"
-              color={TextColor.textAlternative}
-            >
-              {t('swapMetaMaskFee')}
-            </Text>
-            <Text
-              variant={TextVariant.bodyMd}
-              as="h6"
-              color={TextColor.textAlternative}
-            >
-              {t('percentage', [metaMaskFee])}
-            </Text>
-          </Box>
           <Box
             display={DISPLAY.FLEX}
             justifyContent={JustifyContent.spaceBetween}
@@ -1226,6 +1197,32 @@ export default function ReviewQuote({ setReceiveToAmount }) {
               </Text>
             </Box>
           )}
+          <Box
+            display={DISPLAY.FLEX}
+            marginTop={3}
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.center}
+          >
+            <Text variant={TextVariant.bodySm} color={TextColor.textDefault}>
+              {t('swapIncludesMetaMaskFeeViewAllQuotes', [
+                metaMaskFee,
+                <ButtonLink
+                  key="view-all-quotes"
+                  data-testid="review-quote-view-all-quotes"
+                  onClick={
+                    /* istanbul ignore next */
+                    () => {
+                      trackAllAvailableQuotesOpened();
+                      setSelectQuotePopoverShown(true);
+                    }
+                  }
+                  size={Size.inherit}
+                >
+                  {t('viewAllQuotes')}
+                </ButtonLink>,
+              ])}
+            </Text>
+          </Box>
         </Box>
       </div>
       <SwapsFooter

ui/pages/swaps/prepare-swap-page/review-quote.test.js

@@ -52,7 +52,8 @@ describe('ReviewQuote', () => {
     const { getByText } = renderWithProvider(<ReviewQuote {...props} />, store);
     expect(getByText('New quotes in')).toBeInTheDocument();
     expect(getByText('Quote rate')).toBeInTheDocument();
-    expect(getByText('MetaMask fee')).toBeInTheDocument();
+    expect(getByText('Includes a 1% MetaMask fee –')).toBeInTheDocument();
+    expect(getByText('view all quotes')).toBeInTheDocument();
     expect(getByText('Estimated gas fee')).toBeInTheDocument();
     expect(getByText('0.00008 ETH')).toBeInTheDocument();
     expect(getByText('Max fee:')).toBeInTheDocument();
@@ -71,7 +72,8 @@ describe('ReviewQuote', () => {
     const { getByText } = renderWithProvider(<ReviewQuote {...props} />, store);
     expect(getByText('New quotes in')).toBeInTheDocument();
     expect(getByText('Quote rate')).toBeInTheDocument();
-    expect(getByText('MetaMask fee')).toBeInTheDocument();
+    expect(getByText('Includes a 1% MetaMask fee –')).toBeInTheDocument();
+    expect(getByText('view all quotes')).toBeInTheDocument();
     expect(getByText('Estimated gas fee')).toBeInTheDocument();
     expect(getByText('0.00008 ETH')).toBeInTheDocument();
     expect(getByText('Max fee:')).toBeInTheDocument();
@@ -93,7 +95,8 @@ describe('ReviewQuote', () => {
     const { getByText } = renderWithProvider(<ReviewQuote {...props} />, store);
     expect(getByText('New quotes in')).toBeInTheDocument();
     expect(getByText('Quote rate')).toBeInTheDocument();
-    expect(getByText('MetaMask fee')).toBeInTheDocument();
+    expect(getByText('Includes a 1% MetaMask fee –')).toBeInTheDocument();
+    expect(getByText('view all quotes')).toBeInTheDocument();
     expect(getByText('Estimated gas fee')).toBeInTheDocument();
     expect(getByText('0.00008 ETH')).toBeInTheDocument();
     expect(getByText('Max fee:')).toBeInTheDocument();

ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap

@@ -38,7 +38,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>
@@ -110,7 +110,7 @@ exports[`ViewQuote renders the component with initial props 2`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>