m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

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

Browse Source
This commit is contained in:
Daniel 2023-07-14 20:48:46 +02:00 committed by GitHub
parent 74cc312cb1
commit 1295474dc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/_locales/en/messages.json generated
View File

@ -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"
},

4
test/e2e/swaps/shared.js
View File

@ -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(

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

@ -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>

11
ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
View File

@ -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>

4
ui/pages/swaps/exchange-rate-display/index.scss
View File

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

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

@ -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>

16
ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
View File

@ -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}>

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

@ -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

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

@ -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();

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

@ -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>