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

2024-11-22 09:57:02 +01:00 · 2023-07-14 20:48:46 +02:00 · 2023-07-14 20:48:46 +02:00 · 1295474dc3
commit 1295474dc3
parent 74cc312cb1
11 changed files with 72 additions and 47 deletions
--- a/app/_locales/en/messages.json
+++ b/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"
  },
--- a/test/e2e/swaps/shared.js
+++ b/test/e2e/swaps/shared.js
@ -173,9 +173,7 @@ const checkNotification = async (driver, options) => {
 };

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

  const networkFees = await driver.findElements(
--- a/ui/pages/swaps/exchange-rate-display/snapshots/exchange-rate-display.test.js.snap
+++ b/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>
--- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
+++ b/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}
-        className="exchange-rate-display__quote-rate"
+        color={quoteRateColor}
+        className={quoteRateClassName}
        data-testid="exchange-rate-display-quote-rate"
      >
        <span>1</span>
--- a/ui/pages/swaps/exchange-rate-display/index.scss
+++ b/ui/pages/swaps/exchange-rate-display/index.scss
@ -19,4 +19,8 @@
  &__quote-rate {
    cursor: pointer;
  }
+
+  &__quote-rate--no-link {
+    cursor: text;
+  }
 }
--- a/ui/pages/swaps/loading-swaps-quotes/snapshots/loading-swaps-quotes-stories-metadata.test.js.snap
+++ b/ui/pages/swaps/loading-swaps-quotes/snapshots/loading-swaps-quotes-stories-metadata.test.js.snap
@ -27,4 +27,4 @@ exports[`storiesMetadata matches expected values for storiesMetadata 1`] = `
    "icon": "data:image/png;base64,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",
  },
 }
-`;
+`;
--- a/ui/pages/swaps/main-quote-summary/snapshots/main-quote-summary.test.js.snap
+++ b/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>
--- a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
+++ b/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}>
--- a/ui/pages/swaps/prepare-swap-page/review-quote.js
+++ b/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
--- a/ui/pages/swaps/prepare-swap-page/review-quote.test.js
+++ b/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();
--- a/ui/pages/swaps/view-quote/snapshots/view-quote.test.js.snap
+++ b/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>