Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Jul 14, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc9801a
Show balance for the Token To, update position of the MM fee
dan437 Jul 14, 2023
e8c2521
Fix linting
dan437 Jul 14, 2023
1e72e45
Update tests, remove unused message
dan437 Jul 14, 2023
83531e0
Update a snapshot
dan437 Jul 14, 2023
7884cda
Update an E2E test and a snapshot
dan437 Jul 14, 2023
11719ef
Use the "color" prop instead of scss, update snapshots
dan437 Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions app/_locales/en/messages.json
View file
Open in desktop

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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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;
}
}
2 changes: 1 addition & 1 deletion ...aps/loading-swaps-quotes/__snapshots__/loading-swaps-quotes-stories-metadata.test.js.snap
View file
Open in desktop
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,iVBORw0KGgoAAAANSUhEUgAAASkAAAB5CAYAAABlYNfBAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAlASURBVHgB7d3/eeO2GcDx1336f3UThNcF4g3KLNA4HaDnywC5Xgeo6Q5Q+zpAz+kCd+0AJyUDxNcFTsoCsbtA3gIVFL0CIRGgKMm2vp/nwWPxF0hT4isABCERAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADhCJ4LeVLVyf05d+sylZy7dufSjS7OTk5OPgrXcufN/KpfO16zyfqhzmLGvEjOX7mWA9zgcVx3SwrXL916AvtwHa+TShUtT3cwvfxUCGSLuvJy4dLPh/H2Qgfhg4NIXOrw7l9659EJ6CMfVmPx+5vOCrYSgc6dlpi79SbBC50FquuG8+Qt2JAPQ3QUp65NLdY/jIkh1+LUgi/vwXLk/qWDz/6J/+Ov56p+9uCqXrtz2n7li/GvBoppzJvNzs8m5S9eyG/eyfM9KjGT1/V147tIH979duvf5UoB98gEq8c35dt03p5t/qumqzFvBohT1zpyXqUvnLr3U1ZLqIFU+bZekfInlXHoIefkq/9ma99jnnVVypiSFQei8/UmjC6rO3LZOfIiPuuoXLszn0Tn5h1kWX7RbV/mGDFKJfKtEsPo55zNCkMLWwgcwDlBVwfYXmnYqRypcmC+jC/PULIvbjhrZ0q6ClMnflwyvo+PuLAUSpLA194EZRx+8unD7qaaN5UiFC9qe108dy3+QLe06SIV9xMfdWZoiSOX5lSApfMBqM+vGNYhOJFO4CCoz61vzutbCgPcU6LK/Um1m/zNezaXvzPTpIzlX/rj/aqZ9H8RasDWC1Hrn0XTpHZsL83oi7TuDF3KcavPaX9g3iXXemNf+Yv9SHoe4c+fngq0RpNazF8bElaJmkilRiroMvYgnZp4vIQzSD+gR8QHnGzP9MT6vbtr/ic9Vr86S+2SOe2ZmE6QGQJBKCNULG0BupMxKKcpUE22Vz+d/NA3ooap3Ksv/2c94s251l/5tpkePqHo8EwyKIJV2Fk1/J5lSpSjz+n3HfuK8LnTeH8unRrag897yi7wO0V/LFzVeRfM2ndebaNs/CoC56C7NtHDbqdn2tmP5uCOvM13Vq4+VtrtSNLJn2n4M5kPG+mOz/k99q8e6h7t7sjzmW7OfHzKOi7t7HShJpdlq2EwyabsUlXqkY+XOlWzgqom+5DUxsy56Xqg2GPqn9xvZI10+7V8tZslq1Te5maze+fP/95k8fPY9ZTSDARCk0mwg+I/ks21RPhikLkT7wR1lBJ3X0XEV3RVMBM5G9s9X1+LG75wqtA/S9yaPB1vlC4H4PJr9vQBDS1SNcp/DOo+2e5G5XpWRd9ybuZYM4X+Zmu0O8uygtqt67wq2exdVh4pLkrq/zpzTaB+nGcdFda8DJam2KprOLbLnlKJy9pfSRMeRW5pqZH0j/l5oe8QDP+N97uYu/T2ady4PTPgf/XtSmdkTBj4cBkGq26xrhVCyqcyspiC/30iH0MfKVvtq7RhoLXyL23UuS/p6DSiupt0XBHDPX+i2yvd7eSBCSciPyOpLqPaLw0etrwXYBW2PXFBnbDM2608L8z+X/GOz+7nbVPWJqh5FdyiHohtGPCjII354t7hKpLsbquVa04MgNgV5Ud3rwKB3bVXJytp+xq+R3bk0+1o0or9OHJPvj1SZWYccbK82r+M7djn8Nv+SZR8rX5o6l+3Os8/DjxHW59GkdYPeLVzu++4pjoy2+ybVHeuPS0osukVJKmwfN6KfRssfRGN5OJaNIx4U5nPXNx9l+OBHjTaptrihfG2bUfhA1WZWI+XuCtdvZPUYrxLLq/B6JgdoLPc0PeLBRPqz7ViVPozHZBbPGH7lSk+/LRklA/mo7nV7tmFZY17n3tGLqwr/lQK+Ed1doD7wLILTohHd9zuqZLWx/M2BGssXbOdLH7W+36KkYPurLUZGmEh/76WsD9zCLPz9yN07HIRm9pNKrJf1pL62+0nV0oO2B+SLHaSx3Bxf16/BbOungmPZeT+pPpTqXhaqe21xda9as15jXs8k/yHkKpru+23cVY17KQeiyxEPKtmdxzQyArZAkIqEPkk2ULXapMK3nS05fVtQrfo8sb8+ftex/JUcTmrEg13s4xvBk0ebVNpMlg+K1onlTbTujeSrzOtepagQJBtZPQaf7BhV/i5lfcDGXBtE/WgQf5Dt+cDk+1nVYdq3x434WXIcHW3f5h+ZZXFb1FVBvqNo217dA7TdqbMy+dtb9VPd8+ifa9p/sp5/zMz7dWnetEk9blT30uISji0VNNGydaNLptTR9EQKhYurNrN+edwllChsW1Ul6V9d3qXUiAe5z+rluIn29WAekwH2Zl2JJ1GKKioJaftHJKvC7eOOmtM1642j/ZzKnmi74+Ugv0Ic5T+OSh+jjm0oSeHp0cRzctsEGW0HuLEUyt2/zn/mXXcVKDYcn0/xD39mdc0o3EdRlY8ghSdJ24+vvI2nC/O7iLYvuni13b+q6Vj/uuRCHoKmx3+qZEDhwn4WnYsPGdsQpPD06ObOiFVBPnEpqnTc9FF0LP71KGMbW+3qPUZ45jGmRjzYSQlOC38tmCD1uNFwvtm6DpE3uf2iQmCIq3aNlIlHNWgybrv75X820/7xnr/JbtXmdc445n3Foynwa8E4XtpuB1ItG773Ntr2WgroFo31pSWObWiPBu0t9rWo8q2UFDvWpySFp0nn1aY40ExdeqHrG679NhfaHhDttvTC1XY1ryrYNlUF+6QDBw8dYHC7Hvv0QfEmusBrWX98BCk8XWsC1cJYzY9uhunUaI19AtRFlEfxnbLEheA1MiBN33H7UnZI02NEXWWuS5DC06Ttnui5/HalAcpX82ywu5UedFk1mu7qYtD2iAfZIxQMsN/OmwNKkHrUaDgv4Bqr/W3855LfIDxx6Qu/XY/ny3ypyW8zC+kr6cHt1//xA+t9bfL60aW/yAB0ObidmPx31WDe2r3Mf4B1FtK9rB95wZ5Ln0oHG9wVfxwzkxA5EfQSvrFrmT/Q618vRkvwAcA/VjPhwVcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwJH7H5NlZI/0GQ+cAAAAAElFTkSuQmCC",
},
}
`;
`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change seems unintentional, and should likely be removed from the PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated snapshots and this is what I got. When I run yarn jest --updateSnapshot now, it doesn't give me anything new.

2 changes: 1 addition & 1 deletion ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1050,7 +1050,6 @@ export default function ReviewQuote({ setReceiveToAmount }) {
>
<Text
variant={TextVariant.bodyMd}
as="h6"
marginRight={1}
color={TextColor.textAlternative}
>
Expand All @@ -1066,39 +1065,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 @@ -1229,6 +1200,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
View file
Open in desktop
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();
Comment on lines +98 to +99
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this constitute a change in our fee or just moving it around?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change in the fee logic, just making it clearer that our MM fee is included in quotes already.

expect(getByText('Estimated gas fee')).toBeInTheDocument();
expect(getByText('0.00008 ETH')).toBeInTheDocument();
expect(getByText('Max fee:')).toBeInTheDocument();
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
View file
Open in desktop
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