Skip to content

Commit

Permalink
Show a balance for the Token To, update position of the MM fee, remov…
Browse files Browse the repository at this point in the history
…es a link (#20030)
  • Loading branch information
dan437 authored Jul 14, 2023
1 parent 74cc312 commit 1295474
Show file tree
Hide file tree
Showing 11 changed files with 72 additions and 47 deletions.
10 changes: 7 additions & 3 deletions app/_locales/en/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions test/e2e/swaps/shared.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,22 @@ 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
display={DISPLAY.FLEX}
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>
Expand Down
4 changes: 4 additions & 0 deletions ui/pages/swaps/exchange-rate-display/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,8 @@
&__quote-rate {
cursor: pointer;
}

&__quote-rate--no-link {
cursor: text;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@ exports[`storiesMetadata matches expected values for storiesMetadata 1`] = `
"icon": "data:image/png;base64,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",
},
}
`;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 14 additions & 2 deletions ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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}>
Expand Down
55 changes: 26 additions & 29 deletions ui/pages/swaps/prepare-swap-page/review-quote.js
Original file line number Diff line number Diff line change
Expand Up @@ -1047,7 +1047,6 @@ export default function ReviewQuote({ setReceiveToAmount }) {
>
<Text
variant={TextVariant.bodyMd}
as="h6"
marginRight={1}
color={TextColor.textAlternative}
>
Expand All @@ -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}
Expand Down Expand Up @@ -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
Expand Down
9 changes: 6 additions & 3 deletions ui/pages/swaps/prepare-swap-page/review-quote.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 1295474

Please sign in to comment.