From 1295474dc3101d9c98f0d59f8e131536b639316f Mon Sep 17 00:00:00 2001 From: Daniel <80175477+dan437@users.noreply.github.com> Date: Fri, 14 Jul 2023 20:48:46 +0200 Subject: [PATCH] Show a balance for the Token To, update position of the MM fee, removes a link (#20030) --- app/_locales/en/messages.json | 10 +++- test/e2e/swaps/shared.js | 4 +- .../exchange-rate-display.test.js.snap | 2 +- .../exchange-rate-display.js | 11 +++- .../swaps/exchange-rate-display/index.scss | 4 ++ ...swaps-quotes-stories-metadata.test.js.snap | 2 +- .../main-quote-summary.test.js.snap | 2 +- .../prepare-swap-page/prepare-swap-page.js | 16 +++++- .../swaps/prepare-swap-page/review-quote.js | 55 +++++++++---------- .../prepare-swap-page/review-quote.test.js | 9 ++- .../__snapshots__/view-quote.test.js.snap | 4 +- 11 files changed, 72 insertions(+), 47 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index d801f338317d..862ca35ce427 100644 --- 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" }, diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js index 12fbe4ccb039..efef3b4b00d4 100644 --- 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( diff --git 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 index 7dc3b1256c6a..bdd3b3dfab0d 100644 --- 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" >
diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js index 413730c2894a..12a38e12c8eb 100644 --- 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 (
1 diff --git a/ui/pages/swaps/exchange-rate-display/index.scss b/ui/pages/swaps/exchange-rate-display/index.scss index 9a397f9822a0..f59713639344 100644 --- 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; + } } diff --git 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 index 6581c8123ee8..66be56d52a69 100644 --- 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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", }, } -`; \ No newline at end of file +`; diff --git 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 index 7b58f794feb2..b36e37007e03 100644 --- 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" >
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js index f83ad48001d3..654d2b766612 100644 --- 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} >
- {fromTokenSymbol && swapYourTokenBalance} + {fromTokenSymbol && yourTokenFromBalance} {showMaxBalanceLink && (
+ +
+ {selectedToToken?.string && yourTokenToBalance} +
+
{!showReviewQuote && toTokenIsNotDefault && occurrences < 2 && ( diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js index a363747b981b..3e73d97ce15d 100644 --- 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 }) { > @@ -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} /> - - - {t('swapMetaMaskFee')} - - - {t('percentage', [metaMaskFee])} - - )} + + + {t('swapIncludesMetaMaskFeeViewAllQuotes', [ + metaMaskFee, + { + trackAllAvailableQuotesOpened(); + setSelectQuotePopoverShown(true); + } + } + size={Size.inherit} + > + {t('viewAllQuotes')} + , + ])} + +
{ const { getByText } = renderWithProvider(, 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(, 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(, 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(); diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap index 9d8204c51d4f..d9ed7df327f1 100644 --- 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" >
@@ -110,7 +110,7 @@ exports[`ViewQuote renders the component with initial props 2`] = ` class="exchange-rate-display main-quote-summary__exchange-rate-display" >