-
+
{primaryCurrency}
diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 7393cd6f4..502f62d94 100644
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -253,7 +253,10 @@ export default class TransactionListItemDetails extends PureComponent {
-
+
diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
index 604ab19bd..d14c06b7f 100644
--- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
+++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
@@ -18,6 +18,7 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
);
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index cef5e357d..7e2a5742b 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -80,6 +80,7 @@ export default function Typography({
marginLeft,
boxProps = {},
className,
+ testId,
children,
}) {
let Tag = as ?? variant;
@@ -123,6 +124,7 @@ export default function Typography({
{children}
@@ -188,6 +190,10 @@ Typography.propTypes = {
* Title attribute to include on the element. Will show as tooltip on hover.
*/
title: PropTypes.string,
+ /**
+ * Data test ID for the Tag component
+ */
+ testId: PropTypes.string,
/**
* The text content of the Typography component
*/
diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js
index 47730bd2b..1c3501cb2 100644
--- a/ui/ducks/swaps/swaps.js
+++ b/ui/ducks/swaps/swaps.js
@@ -120,6 +120,7 @@ const initialState = {
},
currentSmartTransactionsError: '',
swapsSTXLoading: false,
+ transactionSettingsOpened: false,
};
const slice = createSlice({
@@ -208,6 +209,9 @@ const slice = createSlice({
setSwapsSTXSubmitLoading: (state, action) => {
state.swapsSTXLoading = action.payload || false;
},
+ setTransactionSettingsOpened: (state, action) => {
+ state.transactionSettingsOpened = Boolean(action.payload);
+ },
},
});
@@ -268,6 +272,9 @@ export const getSwapsFallbackGasPrice = (state) =>
export const getCurrentSmartTransactionsError = (state) =>
state.swaps.currentSmartTransactionsError;
+export const getTransactionSettingsOpened = (state) =>
+ state.swaps.transactionSettingsOpened;
+
export function shouldShowCustomPriceTooLowWarning(state) {
const { average } = getSwapGasPriceEstimateData(state);
@@ -325,6 +332,15 @@ export const getCurrentSmartTransactionsEnabled = (state) => {
return smartTransactionsEnabled && !currentSmartTransactionsError;
};
+export const getSwapRedesignEnabled = (state) => {
+ const swapRedesign =
+ state.metamask.swapsState?.swapsFeatureFlags?.swapRedesign;
+ if (swapRedesign === undefined) {
+ return true; // By default show the redesign if we don't have feature flags returned yet.
+ }
+ return swapRedesign.extensionActive;
+};
+
export const getSwapsQuoteRefreshTime = (state) =>
state.metamask.swapsState.swapsQuoteRefreshTime;
@@ -478,6 +494,7 @@ const {
swapCustomGasModalClosed,
setCurrentSmartTransactionsError,
setSwapsSTXSubmitLoading,
+ setTransactionSettingsOpened,
} = actions;
export {
@@ -497,6 +514,7 @@ export {
swapCustomGasModalPriceEdited,
swapCustomGasModalLimitEdited,
swapCustomGasModalClosed,
+ setTransactionSettingsOpened,
};
export const navigateBackToBuildQuote = (history) => {
@@ -647,12 +665,7 @@ export const fetchQuotesAndSetQuoteState = (
iconUrl: fromTokenIconUrl,
balance: fromTokenBalance,
} = selectedFromToken;
- const {
- address: toTokenAddress,
- symbol: toTokenSymbol,
- decimals: toTokenDecimals,
- iconUrl: toTokenIconUrl,
- } = selectedToToken;
+ const { address: toTokenAddress, symbol: toTokenSymbol } = selectedToToken;
// pageRedirectionDisabled is true if quotes prefetching is active (a user is on the Build Quote page).
// In that case we just want to silently prefetch quotes without redirecting to the quotes loading page.
if (!pageRedirectionDisabled) {
@@ -663,24 +676,6 @@ export const fetchQuotesAndSetQuoteState = (
const contractExchangeRates = getTokenExchangeRates(state);
- let destinationTokenAddedForSwap = false;
- if (
- toTokenAddress &&
- toTokenSymbol !== swapsDefaultToken.symbol &&
- contractExchangeRates[toTokenAddress] === undefined &&
- !isTokenAlreadyAdded(toTokenAddress, getTokens(state))
- ) {
- destinationTokenAddedForSwap = true;
- await dispatch(
- addToken(
- toTokenAddress,
- toTokenSymbol,
- toTokenDecimals,
- toTokenIconUrl,
- true,
- ),
- );
- }
if (
fromTokenAddress &&
fromTokenSymbol !== swapsDefaultToken.symbol &&
@@ -749,7 +744,6 @@ export const fetchQuotesAndSetQuoteState = (
destinationToken: toTokenAddress,
value: inputValue,
fromAddress: selectedAccount.address,
- destinationTokenAddedForSwap,
balanceError,
sourceDecimals: fromTokenDecimals,
},
@@ -837,6 +831,36 @@ export const fetchQuotesAndSetQuoteState = (
};
};
+const addTokenTo = (dispatch, state) => {
+ const fetchParams = getFetchParams(state);
+ const swapsDefaultToken = getSwapsDefaultToken(state);
+ const contractExchangeRates = getTokenExchangeRates(state);
+ const selectedToToken =
+ getToToken(state) || fetchParams?.metaData?.destinationTokenInfo || {};
+ const {
+ address: toTokenAddress,
+ symbol: toTokenSymbol,
+ decimals: toTokenDecimals,
+ iconUrl: toTokenIconUrl,
+ } = selectedToToken;
+ if (
+ toTokenAddress &&
+ toTokenSymbol !== swapsDefaultToken.symbol &&
+ contractExchangeRates[toTokenAddress] === undefined &&
+ !isTokenAlreadyAdded(toTokenAddress, getTokens(state))
+ ) {
+ dispatch(
+ addToken(
+ toTokenAddress,
+ toTokenSymbol,
+ toTokenDecimals,
+ toTokenIconUrl,
+ true,
+ ),
+ );
+ }
+};
+
export const signAndSendSwapsSmartTransaction = ({
unsignedTransaction,
trackEvent,
@@ -936,6 +960,7 @@ export const signAndSendSwapsSmartTransaction = ({
dispatch(setCurrentSmartTransactionsError(StxErrorTypes.unavailable));
return;
}
+ addTokenTo(dispatch, state);
if (approveTxParams) {
updatedApproveTxParams.gas = `0x${decimalToHex(
fees.approvalTxFees?.gasLimit || 0,
@@ -1179,6 +1204,7 @@ export const signAndSendTransactions = (
history.push(AWAITING_SIGNATURES_ROUTE);
}
+ addTokenTo(dispatch, state);
if (approveTxParams) {
if (networkAndAccountSupports1559) {
approveTxParams.maxFeePerGas = maxFeePerGas;
diff --git a/ui/ducks/swaps/swaps.test.js b/ui/ducks/swaps/swaps.test.js
index a537223d4..6ba7c7677 100644
--- a/ui/ducks/swaps/swaps.test.js
+++ b/ui/ducks/swaps/swaps.test.js
@@ -956,5 +956,24 @@ describe('Ducks - Swaps', () => {
expect(newState.customGas.limit).toBe(null);
});
});
+
+ describe('getSwapRedesignEnabled', () => {
+ it('returns true if feature flags are not returned from backend yet', () => {
+ const state = createSwapsMockStore();
+ delete state.metamask.swapsState.swapsFeatureFlags.swapRedesign;
+ expect(swaps.getSwapRedesignEnabled(state)).toBe(true);
+ });
+
+ it('returns false if the extension feature flag for swaps redesign is false', () => {
+ const state = createSwapsMockStore();
+ state.metamask.swapsState.swapsFeatureFlags.swapRedesign.extensionActive = false;
+ expect(swaps.getSwapRedesignEnabled(state)).toBe(false);
+ });
+
+ it('returns true if the extension feature flag for swaps redesign is true', () => {
+ const state = createSwapsMockStore();
+ expect(swaps.getSwapRedesignEnabled(state)).toBe(true);
+ });
+ });
});
});
diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
index eed593c36..e11b9466d 100644
--- a/ui/helpers/constants/routes.ts
+++ b/ui/helpers/constants/routes.ts
@@ -52,6 +52,8 @@ const NOTIFICATIONS_ROUTE = '/notifications';
const CONNECTED_ROUTE = '/connected';
const CONNECTED_ACCOUNTS_ROUTE = '/connected/accounts';
const SWAPS_ROUTE = '/swaps';
+const PREPARE_SWAP_ROUTE = '/swaps/prepare-swap-page';
+const SWAPS_NOTIFICATION_ROUTE = '/swaps/notification-page';
const BUILD_QUOTE_ROUTE = '/swaps/build-quote';
const VIEW_QUOTE_ROUTE = '/swaps/view-quote';
const LOADING_QUOTES_ROUTE = '/swaps/loading-quotes';
@@ -174,6 +176,8 @@ const PATH_NAME_MAP = {
[`${CONFIRM_TRANSACTION_ROUTE}/:id${ENCRYPTION_PUBLIC_KEY_REQUEST_PATH}`]:
'Encryption Public Key Request Page',
[BUILD_QUOTE_ROUTE]: 'Swaps Build Quote Page',
+ [PREPARE_SWAP_ROUTE]: 'Prepare Swap Page',
+ [SWAPS_NOTIFICATION_ROUTE]: 'Swaps Notification Page',
[VIEW_QUOTE_ROUTE]: 'Swaps View Quotes Page',
[LOADING_QUOTES_ROUTE]: 'Swaps Loading Quotes Page',
[AWAITING_SWAP_ROUTE]: 'Swaps Awaiting Swaps Page',
@@ -246,6 +250,8 @@ export {
CONNECTED_ACCOUNTS_ROUTE,
PATH_NAME_MAP,
SWAPS_ROUTE,
+ PREPARE_SWAP_ROUTE,
+ SWAPS_NOTIFICATION_ROUTE,
BUILD_QUOTE_ROUTE,
VIEW_QUOTE_ROUTE,
LOADING_QUOTES_ROUTE,
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 140f637f2..d7d945536 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -358,6 +358,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
-
diff --git a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
index 955899c2b..940bf41b4 100644
--- a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
+++ b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
@@ -13,6 +13,11 @@ import { I18nContext } from '../../../contexts/i18n';
import SearchableItemList from '../searchable-item-list';
import PulseLoader from '../../../components/ui/pulse-loader';
import UrlIcon from '../../../components/ui/url-icon';
+import {
+ Icon,
+ IconName,
+ IconSize,
+} from '../../../components/component-library';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
import ImportToken from '../import-token';
import {
@@ -210,7 +215,7 @@ export default function DropdownSearchList({
-
+ {
diff --git a/ui/pages/swaps/dropdown-search-list/index.scss b/ui/pages/swaps/dropdown-search-list/index.scss
index e08d025e5..7f5305c85 100644
--- a/ui/pages/swaps/dropdown-search-list/index.scss
+++ b/ui/pages/swaps/dropdown-search-list/index.scss
@@ -51,7 +51,7 @@
&__caret {
position: absolute;
right: 16px;
- color: var(--color-icon-muted);
+ color: var(--color-icon-default);
}
&__selector-closed {
@@ -71,7 +71,7 @@
}
.dropdown-search-list__item-labels {
- width: 56%;
+ width: 100%;
}
}
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 ff4edda34..7dc3b1256 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
@@ -5,43 +5,37 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
`;
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 55dcfdc3a..413730c28 100644
--- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
+++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
@@ -1,9 +1,19 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import BigNumber from 'bignumber.js';
import classnames from 'classnames';
import { formatSwapsValueForDisplay } from '../swaps.util';
import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
+import Box from '../../../components/ui/box';
+import {
+ JustifyContent,
+ DISPLAY,
+ AlignItems,
+ IconColor,
+ TextColor,
+} from '../../../helpers/constants/design-system';
+import { Icon, IconName } from '../../../components/component-library';
+import { I18nContext } from '../../../contexts/i18n';
export default function ExchangeRateDisplay({
primaryTokenValue,
@@ -12,12 +22,13 @@ export default function ExchangeRateDisplay({
secondaryTokenValue,
secondaryTokenDecimals = 18,
secondaryTokenSymbol,
- arrowColor = 'var(--color-primary-default)',
boldSymbols = true,
+ showIconForSwappingTokens = true,
className,
+ onQuotesClick,
}) {
const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true);
- const [rotating, setRotating] = useState(false);
+ const t = useContext(I18nContext);
const primaryTokenAmount = calcTokenAmount(
primaryTokenValue,
@@ -63,44 +74,42 @@ export default function ExchangeRateDisplay({
return (
{t('status')}
BannerAlert test
diff --git a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap index 12dd091d2..09de86c7f 100644 --- a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap +++ b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap @@ -9,6 +9,7 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `Bannerbase test
diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js index adb28f82d..cc9f5575e 100644 --- a/ui/components/component-library/banner-base/banner-base.js +++ b/ui/components/component-library/banner-base/banner-base.js @@ -46,6 +46,7 @@ export const BannerBase = ({BannerTip test
diff --git a/ui/components/component-library/text-field/text-field.js b/ui/components/component-library/text-field/text-field.js index d8cc8b9ed..9cccd1bb7 100644 --- a/ui/components/component-library/text-field/text-field.js +++ b/ui/components/component-library/text-field/text-field.js @@ -38,6 +38,7 @@ export const TextField = ({ readOnly, required, size = Size.MD, + testId, type = 'text', truncate = true, value, @@ -116,6 +117,7 @@ export const TextField = ({ autoComplete={autoComplete} autoFocus={autoFocus} backgroundColor={BackgroundColor.transparent} + data-testid={testId} defaultValue={defaultValue} disabled={disabled} focused={focused.toString()} @@ -249,6 +251,10 @@ TextField.propTypes = { * The input value, required for a controlled component. */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + /** + * Data test ID for the InputComponent component + */ + testId: PropTypes.string, /** * TextField accepts all the props from Box */ diff --git a/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap b/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap index 2cd5c29ec..bd4b24a02 100644 --- a/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap +++ b/ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap @@ -32,6 +32,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
+
@@ -55,6 +56,7 @@ exports[`ListItem should match snapshot with props 1`] = `
>
Hello World
@@ -125,6 +127,7 @@ exports[`ListItem should match snapshot with props 1`] = `Content rendered to the right diff --git a/ui/components/ui/list-item/list-item.component.js b/ui/components/ui/list-item/list-item.component.js index 9a13cbaf1..eb851e9f8 100644 --- a/ui/components/ui/list-item/list-item.component.js +++ b/ui/components/ui/list-item/list-item.component.js @@ -38,7 +38,9 @@ export default function ListItem({ {React.isValidElement(title) ? ( title ) : ( -
{title}
++ {title} +
)} {titleIcon && ({titleIcon}
@@ -52,7 +54,12 @@ export default function ListItem({
{midContent}
) : null}
{rightContent ? (
- {rightContent}
+
+ {rightContent}
+
) : null}
Your
USDC
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
index 29a91619b..d991452f2 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@@ -230,6 +230,7 @@ export default function AwaitingSwap({
{swapMetaData?.token_to}
,
@@ -278,8 +279,18 @@ export default function AwaitingSwap({
/>
)}
{!errorKey && swapComplete ? (
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 084969fa3..7c2836703 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -18,17 +18,7 @@ import DropdownSearchList from '../dropdown-search-list';
import SlippageButtons from '../slippage-buttons';
import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
import InfoTooltip from '../../../components/ui/info-tooltip';
-import Popover from '../../../components/ui/popover';
-import Button from '../../../components/ui/button';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
-import Box from '../../../components/ui/box';
-import {
- TextVariant,
- DISPLAY,
- FLEX_DIRECTION,
- FontWeight,
- TextColor,
-} from '../../../helpers/constants/design-system';
import {
VIEW_QUOTE_ROUTE,
LOADING_QUOTES_ROUTE,
@@ -94,7 +84,6 @@ import {
import {
resetSwapsPostFetchState,
- ignoreTokens,
setBackgroundSwapRouteState,
clearSwapsQuotes,
stopPollingForQuotes,
@@ -111,7 +100,7 @@ import {
getValueFromWeiHex,
hexToDecimal,
} from '../../../../shared/modules/conversion.utils';
-import { Text } from '../../../components/component-library';
+import SmartTransactionsPopover from '../prepare-swap-page/smart-transactions-popover';
const fuseSearchKeys = [
{ name: 'name', weight: 0.499 },
@@ -358,22 +347,12 @@ export default function BuildQuote({
? getURLHostName(blockExplorerTokenLink)
: t('etherscan');
- const { destinationTokenAddedForSwap } = fetchParams || {};
- const { address: toAddress } = toToken || {};
const onToSelect = useCallback(
(token) => {
- if (destinationTokenAddedForSwap && token.address !== toAddress) {
- dispatch(
- ignoreTokens({
- tokensToIgnore: toAddress,
- dontShowLoadingIndicator: true,
- }),
- );
- }
dispatch(setSwapToToken(token));
setVerificationClicked(false);
},
- [dispatch, destinationTokenAddedForSwap, toAddress],
+ [dispatch],
);
const hideDropdownItemIf = useCallback(
@@ -585,82 +564,12 @@ export default function BuildQuote({
{statusImage}
- {headerText}
- {descriptionText}
+
+ {headerText}
+
+
+ {descriptionText}
+
{content}
{showSmartTransactionsOptInPopover && (
-
-
-
-
-
-
-
-
+
-
-
- 
-
-
- {t('stxDescription')}
-
-
- {t('stxBenefit1')}
- {t('stxBenefit2')}
- {t('stxBenefit3')}
-
- {t('stxBenefit4')}
-
- {' *'}
-
-
-
-
- {t('stxSubDescription')}
- {t('stxYouCanOptOut')}
-
-
-
+ />
)}
- {t('swapSwapFrom')}
diff --git a/ui/pages/swaps/build-quote/build-quote.test.js b/ui/pages/swaps/build-quote/build-quote.test.js
index ea8c2cc70..e09ec1149 100644
--- a/ui/pages/swaps/build-quote/build-quote.test.js
+++ b/ui/pages/swaps/build-quote/build-quote.test.js
@@ -29,7 +29,6 @@ const createProps = (customProps = {}) => {
setBackgroundConnection({
resetPostFetchState: jest.fn(),
- ignoreTokens: jest.fn(),
setBackgroundSwapRouteState: jest.fn(),
clearSwapsQuotes: jest.fn(),
stopPollingForQuotes: jest.fn(),
diff --git a/ui/pages/swaps/countdown-timer/countdown-timer.js b/ui/pages/swaps/countdown-timer/countdown-timer.js
index 87ccf1b4f..153cf093e 100644
--- a/ui/pages/swaps/countdown-timer/countdown-timer.js
+++ b/ui/pages/swaps/countdown-timer/countdown-timer.js
@@ -10,7 +10,6 @@ import {
getSwapsQuotePrefetchingRefreshTime,
} from '../../../ducks/swaps/swaps';
import { SECOND } from '../../../../shared/constants/time';
-import TimerIcon from './timer-icon';
// Return the mm:ss start time of the countdown timer.
// If time has elapsed between `timeStarted` the time current time,
@@ -111,7 +110,6 @@ export default function CountdownTimer({
warningTime && timeBelowWarningTime(timer, warningTime),
})}
>
-
-
- 1
-
-
- ETH
-
-
- =
-
-
- 0.1
-
-
- BAT
-
-
+ ETH
+
+
+ =
+
+
+ 0.1
+
+
+ BAT
+
+
- 1
-
- {baseSymbol}
-
- {comparisonSymbol}
- {rateToDisplay}
-
- {ratiodSymbol}
-
- {
+ setShowPrimaryToSecondary(!showPrimaryToSecondary);
+ }}
+ color={IconColor.iconAlternative}
+ style={{ cursor: 'pointer' }}
+ title={t('switch')}
+ data-testid="exchange-rate-display-switch"
+ />
+ )}
);
}
@@ -125,6 +134,7 @@ ExchangeRateDisplay.propTypes = {
]),
secondaryTokenSymbol: PropTypes.string.isRequired,
className: PropTypes.string,
- arrowColor: PropTypes.string,
boldSymbols: PropTypes.bool,
+ showIconForSwappingTokens: PropTypes.bool,
+ onQuotesClick: PropTypes.func,
};
diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.test.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.test.js
index 6f0ddd661..a4433da6a 100644
--- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.test.js
+++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.test.js
@@ -28,14 +28,15 @@ describe('ExchangeRateDisplay', () => {
it('clicks on the switch link', () => {
const props = createProps();
+ props.showIconForSwappingTokens = true;
const { getByTestId } = renderWithProvider(
{
- setShowPrimaryToSecondary(!showPrimaryToSecondary);
- setRotating(true);
- }}
- onAnimationEnd={() => setRotating(false)}
- >
-
-
+ {baseSymbol}
+
+ {comparisonSymbol}
+ {rateToDisplay}
+
+ {ratiodSymbol}
+
+
+ {showIconForSwappingTokens && (
+ approveTxId === id);
const tradeTxData = tradeTxId && txList.find(({ id }) => tradeTxId === id);
@@ -194,35 +209,6 @@ export default function Swap() {
swapsErrorKey = SWAP_FAILED_ERROR;
}
- const clearTemporaryTokenRef = useRef();
- useEffect(() => {
- clearTemporaryTokenRef.current = () => {
- if (
- destinationTokenAddedForSwap &&
- (!isAwaitingSwapRoute || conversionError)
- ) {
- dispatch(
- ignoreTokens({
- tokensToIgnore: destinationTokenInfo?.address,
- dontShowLoadingIndicator: true,
- }),
- );
- }
- };
- }, [
- conversionError,
- dispatch,
- destinationTokenAddedForSwap,
- destinationTokenInfo,
- fetchParams,
- isAwaitingSwapRoute,
- ]);
- useEffect(() => {
- return () => {
- clearTemporaryTokenRef.current();
- };
- }, []);
-
// eslint-disable-next-line
useEffect(() => {
if (!isSwapsChain) {
@@ -297,7 +283,6 @@ export default function Swap() {
const beforeUnloadEventAddedRef = useRef();
useEffect(() => {
const fn = () => {
- clearTemporaryTokenRef.current();
if (isLoadingQuotesRoute) {
dispatch(prepareToLeaveSwaps());
}
@@ -363,35 +348,102 @@ export default function Swap() {
return <>;
}
+ const redirectToDefaultRoute = async () => {
+ dispatch(clearSwapsState());
+ await dispatch(resetBackgroundSwapsState());
+ history.push(DEFAULT_ROUTE);
+ };
+
return (
- {
+ if (e.key === 'Enter') {
+ redirectToDefaultRoute();
+ }
+ }}
+ >
+ {!isAwaitingSwapRoute &&
+ !isAwaitingSignaturesRoute &&
+ !isSmartTransactionStatusRoute && (
+
+ )}
{
+ if (e.key === 'Enter') {
+ dispatch(setTransactionSettingsOpened(true));
+ }
+ }}
+ >
+ {isPrepareSwapRoute && (
+ {
+ dispatch(setTransactionSettingsOpened(true));
+ }}
+ style={{ cursor: 'pointer' }}
+ title={t('transactionSettings')}
+ />
+ )}
+
+ )}
- {
- await dispatch(navigateBackToBuildQuote(history));
- }}
- >
- {isViewQuoteRoute && t('edit')}
-
+ {!swapRedesignEnabled && (
+ {
+ await dispatch(navigateBackToBuildQuote(history));
+ }}
+ >
+ {isViewQuoteRoute && t('edit')}
+
+ )}
+ {swapRedesignEnabled && (
+ {t('swap')}
- {
- clearTemporaryTokenRef.current();
- dispatch(clearSwapsState());
- await dispatch(resetBackgroundSwapsState());
- history.push(DEFAULT_ROUTE);
- }}
- >
- {!isAwaitingSwapRoute &&
- !isAwaitingSignaturesRoute &&
- !isSmartTransactionStatusRoute &&
- t('cancel')}
-
+ {!swapRedesignEnabled && (
+ {
+ dispatch(clearSwapsState());
+ await dispatch(resetBackgroundSwapsState());
+ history.push(DEFAULT_ROUTE);
+ }}
+ >
+ {!isAwaitingSwapRoute &&
+ !isAwaitingSignaturesRoute &&
+ !isSmartTransactionStatusRoute &&
+ t('cancel')}
+
+ )}
+ {swapRedesignEnabled && (
+
+
{
+ if (swapRedesignEnabled) {
+ return {
+ if (!swapRedesignEnabled) {
+ return {
+ if (!swapsErrorKey) {
+ return {
});
it('renders the component with initial props', async () => {
- const store = configureMockStore(middleware)(createSwapsMockStore());
+ const swapsMockStore = createSwapsMockStore();
+ swapsMockStore.metamask.swapsState.swapsFeatureFlags.swapRedesign.extensionActive = false;
+ const store = configureMockStore(middleware)(swapsMockStore);
const { container, getByText } = renderWithProvider(
+
+ handleSearch(e.target.value)}
+ clearButtonOnClick={handleOnClear}
+ value={searchQuery}
+ placeholder={t('enterTokenNameOrAddress')}
+ inputProps={{ marginRight: 0 }}
+ className="list-with-search__text-search"
+ autoFocus
+ tabIndex="0"
+ />
+
+ {items?.length > 0 && (
+
+
+ {t('swapNoTokensAvailable', [searchQuery])}
+
+
+ )}
+
+ );
+}
+
+ListWithSearch.propTypes = {
+ itemsToSearch: PropTypes.array,
+ onClickItem: PropTypes.func,
+ onOpenImportTokenModalClick: PropTypes.func,
+ Placeholder: PropTypes.func,
+ listTitle: PropTypes.string,
+ maxListItems: PropTypes.number,
+ hideRightLabels: PropTypes.bool,
+ shouldSearchForImports: PropTypes.bool,
+ hideItemIf: PropTypes.func,
+ listContainerClassName: PropTypes.string,
+ searchQuery: PropTypes.string,
+ setSearchQuery: PropTypes.func,
+};
diff --git a/ui/pages/swaps/list-with-search/list-with-search.test.js b/ui/pages/swaps/list-with-search/list-with-search.test.js
new file mode 100644
index 000000000..98ab4c1f3
--- /dev/null
+++ b/ui/pages/swaps/list-with-search/list-with-search.test.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import {
+ renderWithProvider,
+ createSwapsMockStore,
+} from '../../../../test/jest';
+import ListWithSearch from './list-with-search';
+
+const createProps = (customProps = {}) => {
+ return {
+ itemsToSearch: [
+ {
+ iconUrl: 'iconUrl',
+ selected: true,
+ primaryLabel: 'primaryLabel',
+ secondaryLabel: 'secondaryLabel',
+ rightPrimaryLabel: 'rightPrimaryLabel',
+ rightSecondaryLabel: 'rightSecondaryLabel',
+ },
+ ],
+ onClickItem: jest.fn(),
+ onOpenImportTokenModalClick: jest.fn(),
+ setSearchQuery: jest.fn(),
+ Placeholder: <>,
+ listTitle: 'listTitle',
+ ...customProps,
+ };
+};
+
+describe('ListWithSearch', () => {
+ it('renders the component with initial props', () => {
+ const store = configureMockStore()(createSwapsMockStore());
+ const props = createProps();
+ const { getByText, getByPlaceholderText } = renderWithProvider(
+
+
+
+
+`;
diff --git a/ui/pages/swaps/list-with-search/index.scss b/ui/pages/swaps/list-with-search/index.scss
new file mode 100644
index 000000000..baaf9a15e
--- /dev/null
+++ b/ui/pages/swaps/list-with-search/index.scss
@@ -0,0 +1,23 @@
+.list-with-search {
+ .searchable-item-list {
+ &__list-container {
+ height: 320px;
+ overflow-y: auto;
+ padding-right: 8px;
+
+ @include screen-sm-min {
+ height: 600px;
+ }
+ }
+ }
+
+ &__text-search {
+ outline: none;
+ }
+
+ .mm-button-icon {
+ .mm-icon--size-lg {
+ --size: 20px;
+ }
+ }
+}
diff --git a/ui/pages/swaps/list-with-search/list-with-search.js b/ui/pages/swaps/list-with-search/list-with-search.js
new file mode 100644
index 000000000..64223da18
--- /dev/null
+++ b/ui/pages/swaps/list-with-search/list-with-search.js
@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useRef, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { filter } from 'lodash';
+import log from 'loglevel';
+
+import Box from '../../../components/ui/box';
+import {
+ DISPLAY,
+ FLEX_DIRECTION,
+ JustifyContent,
+ AlignItems,
+ TextVariant,
+ BLOCK_SIZES,
+} from '../../../helpers/constants/design-system';
+import { TextFieldSearch, Text } from '../../../components/component-library';
+import ItemList from '../searchable-item-list/item-list';
+import { isValidHexAddress } from '../../../../shared/modules/hexstring-utils';
+import { I18nContext } from '../../../contexts/i18n';
+import { fetchToken } from '../swaps.util';
+import { getCurrentChainId } from '../../../selectors/selectors';
+
+let timeoutIdForSearch;
+
+export default function ListWithSearch({
+ itemsToSearch = [],
+ listTitle,
+ maxListItems,
+ onClickItem,
+ onOpenImportTokenModalClick,
+ shouldSearchForImports,
+ Placeholder,
+ hideRightLabels,
+ hideItemIf,
+ listContainerClassName,
+ searchQuery,
+ setSearchQuery,
+}) {
+ const itemListRef = useRef();
+ const t = useContext(I18nContext);
+
+ const [items, setItems] = useState(itemsToSearch);
+ const chainId = useSelector(getCurrentChainId);
+
+ /**
+ * Search a custom token for import based on a contract address.
+ *
+ * @param {string} contractAddress
+ */
+ const handleSearchTokenForImport = async (contractAddress) => {
+ try {
+ const token = await fetchToken(contractAddress, chainId);
+ if (token) {
+ token.primaryLabel = token.symbol;
+ token.secondaryLabel = token.name;
+ token.notImported = true;
+ setItems([token]);
+ return;
+ }
+ } catch (e) {
+ log.error('Token not found, show 0 results.', e);
+ }
+ setItems([]); // No token for import found.
+ };
+
+ const handleSearch = async (newSearchQuery) => {
+ setSearchQuery(newSearchQuery);
+ if (timeoutIdForSearch) {
+ clearTimeout(timeoutIdForSearch);
+ }
+ timeoutIdForSearch = setTimeout(async () => {
+ timeoutIdForSearch = null;
+ const trimmedNewSearchQuery = newSearchQuery.trim();
+ const trimmedNewSearchQueryUpperCase =
+ trimmedNewSearchQuery.toUpperCase();
+ const trimmedNewSearchQueryLowerCase =
+ trimmedNewSearchQuery.toLowerCase();
+ if (!trimmedNewSearchQuery) {
+ setItems(itemsToSearch);
+ return;
+ }
+ const validHexAddress = isValidHexAddress(trimmedNewSearchQuery);
+ let filteredItems = [];
+ if (validHexAddress) {
+ // E.g. DAI token: 0x6b175474e89094c44da98b954eedeac495271D0f
+ const foundItem = itemsToSearch.find((item) => {
+ return item.address === trimmedNewSearchQueryLowerCase;
+ });
+ if (foundItem) {
+ filteredItems.push(foundItem);
+ }
+ } else {
+ filteredItems = filter(itemsToSearch, function (item) {
+ return item.symbol.includes(trimmedNewSearchQueryUpperCase);
+ });
+ }
+ const results = newSearchQuery === '' ? itemsToSearch : filteredItems;
+ if (shouldSearchForImports && results.length === 0 && validHexAddress) {
+ await handleSearchTokenForImport(trimmedNewSearchQuery);
+ return;
+ }
+ setItems(results);
+ }, 350);
+ };
+
+ useEffect(() => {
+ handleSearch(searchQuery);
+ }, [searchQuery]);
+
+ const handleOnClear = () => {
+ setSearchQuery('');
+ };
+
+ return (
+
+
-
+
`;
diff --git a/ui/pages/swaps/mascot-background-animation/index.scss b/ui/pages/swaps/mascot-background-animation/index.scss
new file mode 100644
index 000000000..be05be84c
--- /dev/null
+++ b/ui/pages/swaps/mascot-background-animation/index.scss
@@ -0,0 +1,60 @@
+.mascot-background-animation {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ flex: 1;
+ width: 100%;
+
+ &__background-1,
+ &__background-2 {
+ width: 120px;
+ height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ -webkit-animation: spin 38s linear infinite;
+ -moz-animation: spin 38s linear infinite;
+ animation: spin 38s linear infinite;
+
+ @-moz-keyframes spin {
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
+ }
+
+ @-webkit-keyframes spin {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+ }
+
+ @keyframes spin {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ }
+
+ &__background-2 {
+ width: 120px;
+ height: 128px;
+ -webkit-animation: spin 42s linear infinite;
+ -moz-animation: spin 42s linear infinite;
+ animation: spin 42s linear infinite;
+ }
+
+ &__mascot-container {
+ position: relative;
+ }
+
+ &__animation {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ margin-top: 40px;
+ margin-bottom: 40px;
+ }
+}
diff --git a/ui/pages/swaps/mascot-background-animation/mascot-background-animation.js b/ui/pages/swaps/mascot-background-animation/mascot-background-animation.js
new file mode 100644
index 000000000..805c56f7a
--- /dev/null
+++ b/ui/pages/swaps/mascot-background-animation/mascot-background-animation.js
@@ -0,0 +1,229 @@
+import EventEmitter from 'events';
+import React, { useRef } from 'react';
+
+import Mascot from '../../../components/ui/mascot';
+
+export default function MascotBackgroundAnimation() {
+ const animationEventEmitter = useRef(new EventEmitter());
+
+ return (
+
+
+
+ {t('swapFetchingQuote')}
+
+
+ {t('swapQuoteNofM', [
+ Math.min(quoteCount + 1, numberOfAggregators),
+ numberOfAggregators,
+ ])}
+
+
+
+ );
+}
+
+QuotesLoadingAnimation.propTypes = {
+ quoteCount: PropTypes.number.isRequired,
+ numberOfAggregators: PropTypes.number.isRequired,
+};
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
new file mode 100644
index 000000000..13b9e9f57
--- /dev/null
+++ b/ui/pages/swaps/prepare-swap-page/review-quote.js
@@ -0,0 +1,1281 @@
+import React, {
+ useState,
+ useContext,
+ useMemo,
+ useEffect,
+ useRef,
+ useCallback,
+} from 'react';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import BigNumber from 'bignumber.js';
+import { isEqual } from 'lodash';
+import classnames from 'classnames';
+import { captureException } from '@sentry/browser';
+import PropTypes from 'prop-types';
+
+import { I18nContext } from '../../../contexts/i18n';
+import SelectQuotePopover from '../select-quote-popover';
+import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
+import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
+import { usePrevious } from '../../../hooks/usePrevious';
+import { useGasFeeInputs } from '../../../hooks/gasFeeInput/useGasFeeInputs';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+ FALLBACK_GAS_MULTIPLIER,
+ getQuotes,
+ getSelectedQuote,
+ getApproveTxParams,
+ getFetchParams,
+ setBalanceError,
+ getQuotesLastFetched,
+ getBalanceError,
+ getCustomSwapsGas, // Gas limit.
+ getCustomMaxFeePerGas,
+ getCustomMaxPriorityFeePerGas,
+ getSwapsUserFeeLevel,
+ getDestinationTokenInfo,
+ getUsedSwapsGasPrice,
+ getTopQuote,
+ signAndSendTransactions,
+ getBackgroundSwapRouteState,
+ swapsQuoteSelected,
+ getSwapsQuoteRefreshTime,
+ getReviewSwapClickedTimestamp,
+ getSmartTransactionsOptInStatus,
+ signAndSendSwapsSmartTransaction,
+ getSwapsNetworkConfig,
+ getSmartTransactionsEnabled,
+ getSmartTransactionsError,
+ getCurrentSmartTransactionsError,
+ getSwapsSTXLoading,
+ fetchSwapsSmartTransactionFees,
+ getSmartTransactionFees,
+ getCurrentSmartTransactionsEnabled,
+} from '../../../ducks/swaps/swaps';
+import {
+ conversionRateSelector,
+ getSelectedAccount,
+ getCurrentCurrency,
+ getTokenExchangeRates,
+ getSwapsDefaultToken,
+ getCurrentChainId,
+ isHardwareWallet,
+ getHardwareWalletType,
+ checkNetworkAndAccountSupports1559,
+ getUSDConversionRate,
+ getIsMultiLayerFeeNetwork,
+} from '../../../selectors';
+import { getNativeCurrency, getTokens } from '../../../ducks/metamask/metamask';
+import {
+ safeRefetchQuotes,
+ setCustomApproveTxData,
+ setSwapsErrorKey,
+ showModal,
+ setSwapsQuotesPollingLimitEnabled,
+} from '../../../store/actions';
+import { SET_SMART_TRANSACTIONS_ERROR } from '../../../store/actionConstants';
+import {
+ ASSET_ROUTE,
+ DEFAULT_ROUTE,
+ AWAITING_SWAP_ROUTE,
+ SWAPS_NOTIFICATION_ROUTE,
+ PREPARE_SWAP_ROUTE,
+} from '../../../helpers/constants/routes';
+import { CHAIN_IDS } from '../../../../shared/constants/network';
+import {
+ addHexes,
+ decGWEIToHexWEI,
+ decimalToHex,
+ decWEIToDecETH,
+ sumHexes,
+} from '../../../../shared/modules/conversion.utils';
+import { getCustomTxParamsData } from '../../confirm-approve/confirm-approve.util';
+import {
+ quotesToRenderableData,
+ getRenderableNetworkFeesForQuote,
+ getFeeForSmartTransaction,
+ formatSwapsValueForDisplay,
+} from '../swaps.util';
+import { useTokenTracker } from '../../../hooks/useTokenTracker';
+import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps';
+import { GasRecommendations } from '../../../../shared/constants/gas';
+import CountdownTimer from '../countdown-timer';
+import SwapsFooter from '../swaps-footer';
+import Box from '../../../components/ui/box';
+import {
+ TextColor,
+ JustifyContent,
+ DISPLAY,
+ AlignItems,
+ FLEX_DIRECTION,
+ SEVERITIES,
+ TextVariant,
+ FRACTIONS,
+ TEXT_ALIGN,
+ Size,
+} from '../../../helpers/constants/design-system';
+import {
+ BannerAlert,
+ Text,
+ ButtonLink,
+} from '../../../components/component-library';
+import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
+import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
+import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils';
+import { getTokenValueParam } from '../../../../shared/lib/metamask-controller-utils';
+import {
+ calcGasTotal,
+ calcTokenAmount,
+ toPrecisionWithoutTrailingZeros,
+} from '../../../../shared/lib/transactions-controller-utils';
+import { addHexPrefix } from '../../../../app/scripts/lib/util';
+import { calcTokenValue } from '../../../../shared/lib/swaps-utils';
+import fetchEstimatedL1Fee from '../../../helpers/utils/optimism/fetchEstimatedL1Fee';
+import ExchangeRateDisplay from '../exchange-rate-display';
+import InfoTooltip from '../../../components/ui/info-tooltip';
+import ViewQuotePriceDifference from './view-quote-price-difference';
+
+let intervalId;
+
+const GAS_FEES_LEARN_MORE_URL =
+ 'https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172';
+
+export default function ReviewQuote({ setReceiveToAmount }) {
+ const history = useHistory();
+ const dispatch = useDispatch();
+ const t = useContext(I18nContext);
+ const trackEvent = useContext(MetaMetricsContext);
+
+ const [dispatchedSafeRefetch, setDispatchedSafeRefetch] = useState(false);
+ const [submitClicked, setSubmitClicked] = useState(false);
+ const [selectQuotePopoverShown, setSelectQuotePopoverShown] = useState(false);
+ const [warningHidden] = useState(false); // TODO: Check when to use setWarningHidden
+ const [originalApproveAmount, setOriginalApproveAmount] = useState(null);
+ const [multiLayerL1FeeTotal, setMultiLayerL1FeeTotal] = useState(null);
+ const [multiLayerL1ApprovalFeeTotal, setMultiLayerL1ApprovalFeeTotal] =
+ useState(null);
+ // We need to have currentTimestamp in state, otherwise it would change with each rerender.
+ const [currentTimestamp] = useState(Date.now());
+
+ const [acknowledgedPriceDifference, setAcknowledgedPriceDifference] =
+ useState(false);
+ const priceDifferenceRiskyBuckets = [
+ GasRecommendations.high,
+ GasRecommendations.medium,
+ ];
+
+ const routeState = useSelector(getBackgroundSwapRouteState);
+ const quotes = useSelector(getQuotes, isEqual);
+ useEffect(() => {
+ if (!Object.values(quotes).length) {
+ history.push(PREPARE_SWAP_ROUTE);
+ } else if (routeState === 'awaiting') {
+ history.push(AWAITING_SWAP_ROUTE);
+ }
+ }, [history, quotes, routeState]);
+
+ const quotesLastFetched = useSelector(getQuotesLastFetched);
+
+ // Select necessary data
+ const gasPrice = useSelector(getUsedSwapsGasPrice);
+ const customMaxGas = useSelector(getCustomSwapsGas);
+ const customMaxFeePerGas = useSelector(getCustomMaxFeePerGas);
+ const customMaxPriorityFeePerGas = useSelector(getCustomMaxPriorityFeePerGas);
+ const swapsUserFeeLevel = useSelector(getSwapsUserFeeLevel);
+ const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
+ const memoizedTokenConversionRates = useEqualityCheck(tokenConversionRates);
+ const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual);
+ const conversionRate = useSelector(conversionRateSelector);
+ const USDConversionRate = useSelector(getUSDConversionRate);
+ const isMultiLayerFeeNetwork = useSelector(getIsMultiLayerFeeNetwork);
+ const currentCurrency = useSelector(getCurrentCurrency);
+ const swapsTokens = useSelector(getTokens, isEqual);
+ const networkAndAccountSupports1559 = useSelector(
+ checkNetworkAndAccountSupports1559,
+ );
+ const balanceError = useSelector(getBalanceError);
+ const fetchParams = useSelector(getFetchParams, isEqual);
+ const approveTxParams = useSelector(getApproveTxParams, shallowEqual);
+ const selectedQuote = useSelector(getSelectedQuote, isEqual);
+ const topQuote = useSelector(getTopQuote, isEqual);
+ const usedQuote = selectedQuote || topQuote;
+ const tradeValue = usedQuote?.trade?.value ?? '0x0';
+ const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
+ const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
+ const chainId = useSelector(getCurrentChainId);
+ const nativeCurrencySymbol = useSelector(getNativeCurrency);
+ const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp);
+ const smartTransactionsOptInStatus = useSelector(
+ getSmartTransactionsOptInStatus,
+ );
+ const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
+ const swapsSTXLoading = useSelector(getSwapsSTXLoading);
+ const currentSmartTransactionsError = useSelector(
+ getCurrentSmartTransactionsError,
+ );
+ const smartTransactionsError = useSelector(getSmartTransactionsError);
+ const currentSmartTransactionsEnabled = useSelector(
+ getCurrentSmartTransactionsEnabled,
+ );
+ const smartTransactionFees = useSelector(getSmartTransactionFees, isEqual);
+ const swapsNetworkConfig = useSelector(getSwapsNetworkConfig, shallowEqual);
+ const unsignedTransaction = usedQuote.trade;
+ const isSmartTransaction =
+ currentSmartTransactionsEnabled && smartTransactionsOptInStatus;
+
+ /* istanbul ignore next */
+ const getTranslatedNetworkName = () => {
+ switch (chainId) {
+ case CHAIN_IDS.MAINNET:
+ return t('networkNameEthereum');
+ case CHAIN_IDS.BSC:
+ return t('networkNameBSC');
+ case CHAIN_IDS.POLYGON:
+ return t('networkNamePolygon');
+ case CHAIN_IDS.LOCALHOST:
+ return t('networkNameTestnet');
+ case CHAIN_IDS.GOERLI:
+ return t('networkNameGoerli');
+ case CHAIN_IDS.AVALANCHE:
+ return t('networkNameAvalanche');
+ case CHAIN_IDS.OPTIMISM:
+ return t('networkNameOptimism');
+ case CHAIN_IDS.ARBITRUM:
+ return t('networkNameArbitrum');
+ default:
+ throw new Error('This network is not supported for token swaps');
+ }
+ };
+
+ let gasFeeInputs;
+ if (networkAndAccountSupports1559) {
+ // For Swaps we want to get 'high' estimations by default.
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ gasFeeInputs = useGasFeeInputs(GasRecommendations.high, {
+ userFeeLevel: swapsUserFeeLevel || GasRecommendations.high,
+ });
+ }
+
+ const fetchParamsSourceToken = fetchParams?.sourceToken;
+
+ const additionalTrackingParams = {
+ reg_tx_fee_in_usd: undefined,
+ reg_tx_fee_in_eth: undefined,
+ reg_tx_max_fee_in_usd: undefined,
+ reg_tx_max_fee_in_eth: undefined,
+ stx_fee_in_usd: undefined,
+ stx_fee_in_eth: undefined,
+ stx_max_fee_in_usd: undefined,
+ stx_max_fee_in_eth: undefined,
+ };
+
+ const usedGasLimit =
+ usedQuote?.gasEstimateWithRefund ||
+ `0x${decimalToHex(usedQuote?.averageGas || 0)}`;
+
+ const gasLimitForMax = usedQuote?.gasEstimate || `0x0`;
+
+ const usedGasLimitWithMultiplier = new BigNumber(gasLimitForMax, 16)
+ .times(usedQuote?.gasMultiplier || FALLBACK_GAS_MULTIPLIER, 10)
+ .round(0)
+ .toString(16);
+
+ const nonCustomMaxGasLimit = usedQuote?.gasEstimate
+ ? usedGasLimitWithMultiplier
+ : `0x${decimalToHex(usedQuote?.maxGas || 0)}`;
+ const maxGasLimit = customMaxGas || nonCustomMaxGasLimit;
+
+ let maxFeePerGas;
+ let maxPriorityFeePerGas;
+ let baseAndPriorityFeePerGas;
+
+ // EIP-1559 gas fees.
+ if (networkAndAccountSupports1559) {
+ const {
+ maxFeePerGas: suggestedMaxFeePerGas,
+ maxPriorityFeePerGas: suggestedMaxPriorityFeePerGas,
+ gasFeeEstimates: { estimatedBaseFee = '0' },
+ } = gasFeeInputs;
+ maxFeePerGas = customMaxFeePerGas || decGWEIToHexWEI(suggestedMaxFeePerGas);
+ maxPriorityFeePerGas =
+ customMaxPriorityFeePerGas ||
+ decGWEIToHexWEI(suggestedMaxPriorityFeePerGas);
+ baseAndPriorityFeePerGas = addHexes(
+ decGWEIToHexWEI(estimatedBaseFee),
+ maxPriorityFeePerGas,
+ );
+ }
+ let gasTotalInWeiHex = calcGasTotal(maxGasLimit, maxFeePerGas || gasPrice);
+ if (multiLayerL1FeeTotal !== null) {
+ gasTotalInWeiHex = sumHexes(
+ gasTotalInWeiHex || '0x0',
+ multiLayerL1FeeTotal || '0x0',
+ );
+ }
+
+ const { tokensWithBalances } = useTokenTracker(swapsTokens, true);
+ const balanceToken =
+ fetchParamsSourceToken === defaultSwapsToken.address
+ ? defaultSwapsToken
+ : tokensWithBalances.find(({ address }) =>
+ isEqualCaseInsensitive(address, fetchParamsSourceToken),
+ );
+
+ const selectedFromToken = balanceToken || usedQuote.sourceTokenInfo;
+ const tokenBalance =
+ tokensWithBalances?.length &&
+ calcTokenAmount(
+ selectedFromToken.balance || '0x0',
+ selectedFromToken.decimals,
+ ).toFixed(9);
+ const tokenBalanceUnavailable =
+ tokensWithBalances && balanceToken === undefined;
+
+ const approveData = parseStandardTokenTransactionData(approveTxParams?.data);
+ const approveValue = approveData && getTokenValueParam(approveData);
+ const approveAmount =
+ approveValue &&
+ selectedFromToken?.decimals !== undefined &&
+ calcTokenAmount(approveValue, selectedFromToken.decimals).toFixed(9);
+ const approveGas = approveTxParams?.gas;
+
+ const renderablePopoverData = useMemo(() => {
+ return quotesToRenderableData({
+ quotes,
+ gasPrice: networkAndAccountSupports1559
+ ? baseAndPriorityFeePerGas
+ : gasPrice,
+ conversionRate,
+ currentCurrency,
+ approveGas,
+ tokenConversionRates: memoizedTokenConversionRates,
+ chainId,
+ smartTransactionEstimatedGas:
+ smartTransactionsEnabled &&
+ smartTransactionsOptInStatus &&
+ smartTransactionFees?.tradeTxFees,
+ nativeCurrencySymbol,
+ multiLayerL1ApprovalFeeTotal,
+ });
+ }, [
+ quotes,
+ gasPrice,
+ baseAndPriorityFeePerGas,
+ networkAndAccountSupports1559,
+ conversionRate,
+ currentCurrency,
+ approveGas,
+ memoizedTokenConversionRates,
+ chainId,
+ smartTransactionFees?.tradeTxFees,
+ nativeCurrencySymbol,
+ smartTransactionsEnabled,
+ smartTransactionsOptInStatus,
+ multiLayerL1ApprovalFeeTotal,
+ ]);
+
+ const renderableDataForUsedQuote = renderablePopoverData.find(
+ (renderablePopoverDatum) =>
+ renderablePopoverDatum.aggId === usedQuote.aggregator,
+ );
+
+ const {
+ destinationTokenDecimals,
+ destinationTokenSymbol,
+ destinationTokenValue,
+ sourceTokenDecimals,
+ sourceTokenSymbol,
+ sourceTokenValue,
+ } = renderableDataForUsedQuote;
+
+ let { feeInFiat, feeInEth, rawEthFee, feeInUsd } =
+ getRenderableNetworkFeesForQuote({
+ tradeGas: usedGasLimit,
+ approveGas,
+ gasPrice: networkAndAccountSupports1559
+ ? baseAndPriorityFeePerGas
+ : gasPrice,
+ currentCurrency,
+ conversionRate,
+ USDConversionRate,
+ tradeValue,
+ sourceSymbol: sourceTokenSymbol,
+ sourceAmount: usedQuote.sourceAmount,
+ chainId,
+ nativeCurrencySymbol,
+ multiLayerL1FeeTotal,
+ });
+ additionalTrackingParams.reg_tx_fee_in_usd = Number(feeInUsd);
+ additionalTrackingParams.reg_tx_fee_in_eth = Number(rawEthFee);
+
+ const renderableMaxFees = getRenderableNetworkFeesForQuote({
+ tradeGas: maxGasLimit,
+ approveGas,
+ gasPrice: maxFeePerGas || gasPrice,
+ currentCurrency,
+ conversionRate,
+ USDConversionRate,
+ tradeValue,
+ sourceSymbol: sourceTokenSymbol,
+ sourceAmount: usedQuote.sourceAmount,
+ chainId,
+ nativeCurrencySymbol,
+ multiLayerL1FeeTotal,
+ });
+ let {
+ feeInFiat: maxFeeInFiat,
+ feeInEth: maxFeeInEth,
+ rawEthFee: maxRawEthFee,
+ feeInUsd: maxFeeInUsd,
+ } = renderableMaxFees;
+ additionalTrackingParams.reg_tx_max_fee_in_usd = Number(maxFeeInUsd);
+ additionalTrackingParams.reg_tx_max_fee_in_eth = Number(maxRawEthFee);
+
+ if (isSmartTransaction && smartTransactionFees?.tradeTxFees) {
+ const stxEstimatedFeeInWeiDec =
+ smartTransactionFees?.tradeTxFees.feeEstimate +
+ (smartTransactionFees?.approvalTxFees?.feeEstimate || 0);
+ const stxMaxFeeInWeiDec =
+ stxEstimatedFeeInWeiDec * swapsNetworkConfig.stxMaxFeeMultiplier;
+ ({ feeInFiat, feeInEth, rawEthFee, feeInUsd } = getFeeForSmartTransaction({
+ chainId,
+ currentCurrency,
+ conversionRate,
+ USDConversionRate,
+ nativeCurrencySymbol,
+ feeInWeiDec: stxEstimatedFeeInWeiDec,
+ }));
+ additionalTrackingParams.stx_fee_in_usd = Number(feeInUsd);
+ additionalTrackingParams.stx_fee_in_eth = Number(rawEthFee);
+ additionalTrackingParams.estimated_gas =
+ smartTransactionFees?.tradeTxFees.gasLimit;
+ ({
+ feeInFiat: maxFeeInFiat,
+ feeInEth: maxFeeInEth,
+ rawEthFee: maxRawEthFee,
+ feeInUsd: maxFeeInUsd,
+ } = getFeeForSmartTransaction({
+ chainId,
+ currentCurrency,
+ conversionRate,
+ USDConversionRate,
+ nativeCurrencySymbol,
+ feeInWeiDec: stxMaxFeeInWeiDec,
+ }));
+ additionalTrackingParams.stx_max_fee_in_usd = Number(maxFeeInUsd);
+ additionalTrackingParams.stx_max_fee_in_eth = Number(maxRawEthFee);
+ }
+
+ const tokenCost = new BigNumber(usedQuote.sourceAmount);
+ const ethCost = new BigNumber(usedQuote.trade.value || 0, 10).plus(
+ new BigNumber(gasTotalInWeiHex, 16),
+ );
+
+ const insufficientTokens =
+ (tokensWithBalances?.length || balanceError) &&
+ tokenCost.gt(new BigNumber(selectedFromToken.balance || '0x0'));
+
+ const insufficientEth = ethCost.gt(new BigNumber(ethBalance || '0x0'));
+
+ const tokenBalanceNeeded = insufficientTokens
+ ? toPrecisionWithoutTrailingZeros(
+ calcTokenAmount(tokenCost, selectedFromToken.decimals)
+ .minus(tokenBalance)
+ .toString(10),
+ 6,
+ )
+ : null;
+
+ const ethBalanceNeeded = insufficientEth
+ ? toPrecisionWithoutTrailingZeros(
+ ethCost
+ .minus(ethBalance, 16)
+ .div('1000000000000000000', 10)
+ .toString(10),
+ 6,
+ )
+ : null;
+
+ let ethBalanceNeededStx;
+ if (isSmartTransaction && smartTransactionsError?.balanceNeededWei) {
+ ethBalanceNeededStx = decWEIToDecETH(
+ smartTransactionsError.balanceNeededWei -
+ smartTransactionsError.currentBalanceWei,
+ );
+ }
+
+ const destinationToken = useSelector(getDestinationTokenInfo, isEqual);
+ useEffect(() => {
+ if (isSmartTransaction) {
+ if (insufficientTokens) {
+ dispatch(setBalanceError(true));
+ } else if (balanceError && !insufficientTokens) {
+ dispatch(setBalanceError(false));
+ }
+ } else if (insufficientTokens || insufficientEth) {
+ dispatch(setBalanceError(true));
+ } else if (balanceError && !insufficientTokens && !insufficientEth) {
+ dispatch(setBalanceError(false));
+ }
+ // eslint-disable-next-line
+ }, [insufficientTokens, insufficientEth, dispatch, isSmartTransaction]);
+
+ useEffect(() => {
+ const currentTime = Date.now();
+ const timeSinceLastFetched = currentTime - quotesLastFetched;
+ if (
+ timeSinceLastFetched > swapsQuoteRefreshTime &&
+ !dispatchedSafeRefetch
+ ) {
+ setDispatchedSafeRefetch(true);
+ dispatch(safeRefetchQuotes());
+ } else if (timeSinceLastFetched > swapsQuoteRefreshTime) {
+ dispatch(setSwapsErrorKey(QUOTES_EXPIRED_ERROR));
+ history.push(SWAPS_NOTIFICATION_ROUTE);
+ }
+ }, [
+ quotesLastFetched,
+ dispatchedSafeRefetch,
+ dispatch,
+ history,
+ swapsQuoteRefreshTime,
+ ]);
+
+ useEffect(() => {
+ if (!originalApproveAmount && approveAmount) {
+ setOriginalApproveAmount(approveAmount);
+ }
+ }, [originalApproveAmount, approveAmount]);
+
+ // If it's not a Smart Transaction and ETH balance is needed, we want to show a warning.
+ const isNotStxAndEthBalanceIsNeeded = !isSmartTransaction && ethBalanceNeeded;
+
+ // If it's a Smart Transaction and ETH balance is needed, we want to show a warning.
+ const isStxAndEthBalanceIsNeeded = isSmartTransaction && ethBalanceNeededStx;
+
+ // Indicates if we should show to a user a warning about insufficient funds for swapping.
+ const showInsufficientWarning =
+ (balanceError ||
+ tokenBalanceNeeded ||
+ isNotStxAndEthBalanceIsNeeded ||
+ isStxAndEthBalanceIsNeeded) &&
+ !warningHidden;
+
+ const hardwareWalletUsed = useSelector(isHardwareWallet);
+ const hardwareWalletType = useSelector(getHardwareWalletType);
+
+ const numberOfQuotes = Object.values(quotes).length;
+ const bestQuoteReviewedEventSent = useRef();
+ const eventObjectBase = useMemo(() => {
+ return {
+ token_from: sourceTokenSymbol,
+ token_from_amount: sourceTokenValue,
+ token_to: destinationTokenSymbol,
+ token_to_amount: destinationTokenValue,
+ request_type: fetchParams?.balanceError,
+ slippage: fetchParams?.slippage,
+ custom_slippage: fetchParams?.slippage !== 2,
+ response_time: fetchParams?.responseTime,
+ best_quote_source: topQuote?.aggregator,
+ available_quotes: numberOfQuotes,
+ is_hardware_wallet: hardwareWalletUsed,
+ hardware_wallet_type: hardwareWalletType,
+ stx_enabled: smartTransactionsEnabled,
+ current_stx_enabled: currentSmartTransactionsEnabled,
+ stx_user_opt_in: smartTransactionsOptInStatus,
+ };
+ }, [
+ sourceTokenSymbol,
+ sourceTokenValue,
+ destinationTokenSymbol,
+ destinationTokenValue,
+ fetchParams?.balanceError,
+ fetchParams?.slippage,
+ fetchParams?.responseTime,
+ topQuote?.aggregator,
+ numberOfQuotes,
+ hardwareWalletUsed,
+ hardwareWalletType,
+ smartTransactionsEnabled,
+ currentSmartTransactionsEnabled,
+ smartTransactionsOptInStatus,
+ ]);
+
+ const trackAllAvailableQuotesOpened = () => {
+ trackEvent({
+ event: 'All Available Quotes Opened',
+ category: MetaMetricsEventCategory.Swaps,
+ sensitiveProperties: {
+ ...eventObjectBase,
+ other_quote_selected: usedQuote?.aggregator !== topQuote?.aggregator,
+ other_quote_selected_source:
+ usedQuote?.aggregator === topQuote?.aggregator
+ ? null
+ : usedQuote?.aggregator,
+ },
+ });
+ };
+ const trackQuoteDetailsOpened = () => {
+ trackEvent({
+ event: 'Quote Details Opened',
+ category: MetaMetricsEventCategory.Swaps,
+ sensitiveProperties: {
+ ...eventObjectBase,
+ other_quote_selected: usedQuote?.aggregator !== topQuote?.aggregator,
+ other_quote_selected_source:
+ usedQuote?.aggregator === topQuote?.aggregator
+ ? null
+ : usedQuote?.aggregator,
+ },
+ });
+ };
+ const trackEditSpendLimitOpened = () => {
+ trackEvent({
+ event: 'Edit Spend Limit Opened',
+ category: MetaMetricsEventCategory.Swaps,
+ sensitiveProperties: {
+ ...eventObjectBase,
+ custom_spend_limit_set: originalApproveAmount === approveAmount,
+ custom_spend_limit_amount:
+ originalApproveAmount === approveAmount ? null : approveAmount,
+ },
+ });
+ };
+ const trackBestQuoteReviewedEvent = useCallback(() => {
+ trackEvent({
+ event: 'Best Quote Reviewed',
+ category: MetaMetricsEventCategory.Swaps,
+ sensitiveProperties: {
+ ...eventObjectBase,
+ network_fees: feeInFiat,
+ },
+ });
+ }, [trackEvent, eventObjectBase, feeInFiat]);
+ const trackViewQuotePageLoadedEvent = useCallback(() => {
+ trackEvent({
+ event: 'Review Quote Component Loaded',
+ category: MetaMetricsEventCategory.Swaps,
+ sensitiveProperties: {
+ ...eventObjectBase,
+ response_time: currentTimestamp - reviewSwapClickedTimestamp,
+ },
+ });
+ }, [
+ trackEvent,
+ eventObjectBase,
+ currentTimestamp,
+ reviewSwapClickedTimestamp,
+ ]);
+
+ useEffect(() => {
+ if (
+ !bestQuoteReviewedEventSent.current &&
+ [
+ sourceTokenSymbol,
+ sourceTokenValue,
+ destinationTokenSymbol,
+ destinationTokenValue,
+ fetchParams,
+ topQuote,
+ numberOfQuotes,
+ feeInFiat,
+ ].every((dep) => dep !== null && dep !== undefined)
+ ) {
+ bestQuoteReviewedEventSent.current = true;
+ trackBestQuoteReviewedEvent();
+ }
+ }, [
+ fetchParams,
+ topQuote,
+ numberOfQuotes,
+ feeInFiat,
+ destinationTokenSymbol,
+ destinationTokenValue,
+ sourceTokenSymbol,
+ sourceTokenValue,
+ trackBestQuoteReviewedEvent,
+ ]);
+
+ const metaMaskFee = usedQuote.fee;
+
+ /* istanbul ignore next */
+ const onFeeCardTokenApprovalClick = () => {
+ trackEditSpendLimitOpened();
+ dispatch(
+ showModal({
+ name: 'EDIT_APPROVAL_PERMISSION',
+ decimals: selectedFromToken.decimals,
+ origin: 'MetaMask',
+ setCustomAmount: (newCustomPermissionAmount) => {
+ const customPermissionAmount =
+ newCustomPermissionAmount === ''
+ ? originalApproveAmount
+ : newCustomPermissionAmount;
+ const newData = getCustomTxParamsData(approveTxParams.data, {
+ customPermissionAmount,
+ decimals: selectedFromToken.decimals,
+ });
+
+ if (
+ customPermissionAmount?.length &&
+ approveTxParams.data !== newData
+ ) {
+ dispatch(setCustomApproveTxData(newData));
+ }
+ },
+ tokenAmount: originalApproveAmount,
+ customTokenAmount:
+ originalApproveAmount === approveAmount ? null : approveAmount,
+ tokenBalance,
+ tokenSymbol: selectedFromToken.symbol,
+ requiredMinimum: calcTokenAmount(
+ usedQuote.sourceAmount,
+ selectedFromToken.decimals,
+ ),
+ }),
+ );
+ };
+ const actionableBalanceErrorMessage = tokenBalanceUnavailable
+ ? t('swapTokenBalanceUnavailable', [sourceTokenSymbol])
+ : t('swapApproveNeedMoreTokens', [
+
+ {tokenBalanceNeeded || ethBalanceNeededStx || ethBalanceNeeded}
+ ,
+ tokenBalanceNeeded && !(sourceTokenSymbol === defaultSwapsToken.symbol)
+ ? sourceTokenSymbol
+ : defaultSwapsToken.symbol,
+ ]);
+
+ // Price difference warning
+ const priceSlippageBucket = usedQuote?.priceSlippage?.bucket;
+ const lastPriceDifferenceBucket = usePrevious(priceSlippageBucket);
+
+ // If the user agreed to a different bucket of risk, make them agree again
+ useEffect(() => {
+ if (
+ acknowledgedPriceDifference &&
+ lastPriceDifferenceBucket === GasRecommendations.medium &&
+ priceSlippageBucket === GasRecommendations.high
+ ) {
+ setAcknowledgedPriceDifference(false);
+ }
+ }, [
+ priceSlippageBucket,
+ acknowledgedPriceDifference,
+ lastPriceDifferenceBucket,
+ ]);
+
+ let viewQuotePriceDifferenceWarning = null;
+ const priceSlippageFromSource = useEthFiatAmount(
+ usedQuote?.priceSlippage?.sourceAmountInETH || 0,
+ { showFiat: true },
+ );
+ const priceSlippageFromDestination = useEthFiatAmount(
+ usedQuote?.priceSlippage?.destinationAmountInETH || 0,
+ { showFiat: true },
+ );
+
+ // We cannot present fiat value if there is a calculation error or no slippage
+ // from source or destination
+ const priceSlippageUnknownFiatValue =
+ !priceSlippageFromSource ||
+ !priceSlippageFromDestination ||
+ Boolean(usedQuote?.priceSlippage?.calculationError);
+
+ let priceDifferencePercentage = 0;
+ if (usedQuote?.priceSlippage?.ratio) {
+ priceDifferencePercentage = parseFloat(
+ new BigNumber(usedQuote.priceSlippage.ratio, 10)
+ .minus(1, 10)
+ .times(100, 10)
+ .toFixed(2),
+ 10,
+ );
+ }
+
+ const shouldShowPriceDifferenceWarning =
+ !tokenBalanceUnavailable &&
+ !showInsufficientWarning &&
+ usedQuote &&
+ (priceDifferenceRiskyBuckets.includes(priceSlippageBucket) ||
+ priceSlippageUnknownFiatValue);
+
+ if (shouldShowPriceDifferenceWarning) {
+ viewQuotePriceDifferenceWarning = (
+ {
+ setAcknowledgedPriceDifference(true);
+ }}
+ acknowledged={acknowledgedPriceDifference}
+ />
+ );
+ }
+
+ const disableSubmissionDueToPriceWarning =
+ shouldShowPriceDifferenceWarning && !acknowledgedPriceDifference;
+
+ const isShowingWarning =
+ showInsufficientWarning || shouldShowPriceDifferenceWarning;
+
+ const isSwapButtonDisabled = Boolean(
+ submitClicked ||
+ balanceError ||
+ tokenBalanceUnavailable ||
+ disableSubmissionDueToPriceWarning ||
+ (networkAndAccountSupports1559 &&
+ baseAndPriorityFeePerGas === undefined) ||
+ (!networkAndAccountSupports1559 &&
+ (gasPrice === null || gasPrice === undefined)) ||
+ (currentSmartTransactionsEnabled &&
+ (currentSmartTransactionsError || smartTransactionsError)) ||
+ (currentSmartTransactionsEnabled &&
+ smartTransactionsOptInStatus &&
+ !smartTransactionFees?.tradeTxFees),
+ );
+
+ useEffect(() => {
+ if (isSmartTransaction && !insufficientTokens) {
+ const unsignedTx = {
+ from: unsignedTransaction.from,
+ to: unsignedTransaction.to,
+ value: unsignedTransaction.value,
+ data: unsignedTransaction.data,
+ gas: unsignedTransaction.gas,
+ chainId,
+ };
+ intervalId = setInterval(() => {
+ if (!swapsSTXLoading) {
+ dispatch(
+ fetchSwapsSmartTransactionFees({
+ unsignedTransaction: unsignedTx,
+ approveTxParams,
+ fallbackOnNotEnoughFunds: false,
+ }),
+ );
+ }
+ }, swapsNetworkConfig.stxGetTransactionsRefreshTime);
+ dispatch(
+ fetchSwapsSmartTransactionFees({
+ unsignedTransaction: unsignedTx,
+ approveTxParams,
+ fallbackOnNotEnoughFunds: false,
+ }),
+ );
+ } else if (intervalId) {
+ clearInterval(intervalId);
+ }
+ return () => clearInterval(intervalId);
+ // eslint-disable-next-line
+ }, [
+ dispatch,
+ isSmartTransaction,
+ unsignedTransaction.data,
+ unsignedTransaction.from,
+ unsignedTransaction.value,
+ unsignedTransaction.gas,
+ unsignedTransaction.to,
+ chainId,
+ swapsNetworkConfig.stxGetTransactionsRefreshTime,
+ insufficientTokens,
+ ]);
+
+ useEffect(() => {
+ // Thanks to the next line we will only do quotes polling 3 times before showing a Quote Timeout modal.
+ dispatch(setSwapsQuotesPollingLimitEnabled(true));
+ if (reviewSwapClickedTimestamp) {
+ trackViewQuotePageLoadedEvent();
+ }
+ }, [dispatch, trackViewQuotePageLoadedEvent, reviewSwapClickedTimestamp]);
+
+ useEffect(() => {
+ // if smart transaction error is turned off, reset submit clicked boolean
+ if (
+ !currentSmartTransactionsEnabled &&
+ currentSmartTransactionsError &&
+ submitClicked
+ ) {
+ setSubmitClicked(false);
+ }
+ }, [
+ currentSmartTransactionsEnabled,
+ currentSmartTransactionsError,
+ submitClicked,
+ ]);
+
+ useEffect(() => {
+ if (!isMultiLayerFeeNetwork || !usedQuote?.multiLayerL1TradeFeeTotal) {
+ return;
+ }
+ const getEstimatedL1Fees = async () => {
+ try {
+ let l1ApprovalFeeTotal = '0x0';
+ if (approveTxParams) {
+ l1ApprovalFeeTotal = await fetchEstimatedL1Fee({
+ txParams: {
+ ...approveTxParams,
+ gasPrice: addHexPrefix(approveTxParams.gasPrice),
+ value: '0x0', // For approval txs we need to use "0x0" here.
+ },
+ chainId,
+ });
+ setMultiLayerL1ApprovalFeeTotal(l1ApprovalFeeTotal);
+ }
+ const l1FeeTotal = sumHexes(
+ usedQuote.multiLayerL1TradeFeeTotal,
+ l1ApprovalFeeTotal,
+ );
+ setMultiLayerL1FeeTotal(l1FeeTotal);
+ } catch (e) {
+ captureException(e);
+ setMultiLayerL1FeeTotal(null);
+ setMultiLayerL1ApprovalFeeTotal(null);
+ }
+ };
+ getEstimatedL1Fees();
+ }, [
+ unsignedTransaction,
+ approveTxParams,
+ isMultiLayerFeeNetwork,
+ chainId,
+ usedQuote,
+ ]);
+
+ useEffect(() => {
+ if (isSmartTransaction) {
+ // Removes a smart transactions error when the component loads.
+ dispatch({
+ type: SET_SMART_TRANSACTIONS_ERROR,
+ payload: null,
+ });
+ }
+ }, [isSmartTransaction, dispatch]);
+
+ const destinationValue = calcTokenValue(
+ destinationTokenValue,
+ destinationTokenDecimals,
+ );
+ const destinationAmount = calcTokenAmount(
+ destinationValue,
+ destinationTokenDecimals,
+ );
+ const amountToDisplay = formatSwapsValueForDisplay(destinationAmount);
+ const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length;
+ let ellipsedAmountToDisplay = amountToDisplay;
+
+ if (amountDigitLength > 20) {
+ ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...`;
+ }
+ useEffect(() => {
+ setReceiveToAmount(ellipsedAmountToDisplay);
+ }, [ellipsedAmountToDisplay, setReceiveToAmount]);
+
+ const hideTokenApprovalRow =
+ !approveTxParams || (balanceError && !warningHidden);
+
+ // TODO: use the component for this.
+ const tokenApprovalTextComponent = (
+
+ {t('enableToken', [sourceTokenSymbol])}
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+ }
+ footerClassName="smart-transactions-popover__footer"
+ className="smart-transactions-popover"
+ CustomBackground={() => {
+ return (
+
+
+
+
+
+ {t('smartSwapsDescription')}
+
+
+ {t('stxBenefit1')}
+ {t('stxBenefit2')}
+ {t('stxBenefit3')}
+
+ {t('stxBenefit4')}
+
+ {' *'}
+
+
+
+
+ {t('smartSwapsSubDescription')}
+
+ {t('stxYouCanOptOut')}
+
+
+
+
+ );
+}
+
+SmartTransactionsPopover.propTypes = {
+ onEnableSmartTransactionsClick: PropTypes.func.isRequired,
+ onCloseSmartTransactionsOptInPopover: PropTypes.func.isRequired,
+};
diff --git a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
new file mode 100644
index 000000000..1219fbd73
--- /dev/null
+++ b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
@@ -0,0 +1,102 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { I18nContext } from '../../../contexts/i18n';
+import Box from '../../../components/ui/box';
+import {
+ DISPLAY,
+ AlignItems,
+ SEVERITIES,
+ Size,
+ TextVariant,
+ BLOCK_SIZES,
+} from '../../../helpers/constants/design-system';
+import { GasRecommendations } from '../../../../shared/constants/gas';
+import {
+ BannerAlert,
+ Text,
+ ButtonLink,
+} from '../../../components/component-library';
+
+export default function ViewQuotePriceDifference(props) {
+ const {
+ usedQuote,
+ sourceTokenValue,
+ destinationTokenValue,
+ onAcknowledgementClick,
+ acknowledged,
+ priceSlippageFromSource,
+ priceSlippageFromDestination,
+ priceDifferencePercentage,
+ priceSlippageUnknownFiatValue,
+ } = props;
+
+ const t = useContext(I18nContext);
+
+ let priceDifferenceTitle = t('swapPriceUnavailableTitle');
+ let priceDifferenceMessage = t('swapPriceUnavailableDescription');
+ let priceDifferenceClass = GasRecommendations.high;
+ if (!priceSlippageUnknownFiatValue) {
+ priceDifferenceTitle = t('swapPriceDifferenceTitle', [
+ priceDifferencePercentage,
+ ]);
+ priceDifferenceMessage = t('swapPriceDifference', [
+ sourceTokenValue, // Number of source token to swap
+ usedQuote.sourceTokenInfo.symbol, // Source token symbol
+ priceSlippageFromSource, // Source tokens total value
+ destinationTokenValue, // Number of destination tokens in return
+ usedQuote.destinationTokenInfo.symbol, // Destination token symbol,
+ priceSlippageFromDestination, // Destination tokens total value
+ ]);
+ priceDifferenceClass = usedQuote.priceSlippage.bucket;
+ }
+ const severity =
+ priceDifferenceClass === GasRecommendations.high
+ ? SEVERITIES.DANGER
+ : SEVERITIES.WARNING;
+
+ return (
+
+
+
+
+ {priceDifferenceMessage}
+
+ {!acknowledged && (
+
+ {t('swapAnyway')}
+
+ )}
+
+
+
+ );
+}
+
+ViewQuotePriceDifference.propTypes = {
+ usedQuote: PropTypes.object,
+ sourceTokenValue: PropTypes.string,
+ destinationTokenValue: PropTypes.string,
+ onAcknowledgementClick: PropTypes.func,
+ acknowledged: PropTypes.bool,
+ priceSlippageFromSource: PropTypes.string,
+ priceSlippageFromDestination: PropTypes.string,
+ priceDifferencePercentage: PropTypes.number,
+ priceSlippageUnknownFiatValue: PropTypes.bool,
+};
diff --git a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.test.js b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.test.js
new file mode 100644
index 000000000..71c5e72e9
--- /dev/null
+++ b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.test.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { NETWORK_TYPES } from '../../../../shared/constants/network';
+import { GasRecommendations } from '../../../../shared/constants/gas';
+import ViewQuotePriceDifference from './view-quote-price-difference';
+
+describe('View Price Quote Difference', () => {
+ const mockState = {
+ metamask: {
+ tokens: [],
+ providerConfig: { type: NETWORK_TYPES.RPC, nickname: '', rpcUrl: '' },
+ preferences: { showFiatInTestnets: true },
+ currentCurrency: 'usd',
+ conversionRate: 600.0,
+ },
+ };
+
+ const mockStore = configureMockStore()(mockState);
+
+ // Sample transaction is 1 ETH to ~42.880915 LINK.
+ const DEFAULT_PROPS = {
+ usedQuote: {
+ trade: {
+ data: '0x5f575529000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000de0b6b3a764000000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000007756e69737761700000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca0000000000000000000000000000000000000000000000000dc1a09f859b20000000000000000000000000000000000000000000000000024855454cb32d335f0000000000000000000000000000000000000000000000000000000000000120000000000000000000000000000000000000000000000000000000005fc7b7100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001f161421c8e0000000000000000000000000000000000000000000000000000000000000000002000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca',
+ from: '0xd7440fdcb70a9fba55dfe06942ddbc17679c90ac',
+ value: '0xde0b6b3a7640000',
+ gas: '0xbbfd0',
+ to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+ },
+ sourceAmount: '1000000000000000000',
+ destinationAmount: '42947749216634160067',
+ error: null,
+ sourceToken: '0x0000000000000000000000000000000000000000',
+ destinationToken: '0x514910771af9ca656af840dff83e8264ecf986ca',
+ approvalNeeded: null,
+ maxGas: 770000,
+ averageGas: 210546,
+ estimatedRefund: 80000,
+ fetchTime: 647,
+ aggregator: 'uniswap',
+ aggType: 'DEX',
+ fee: 0.875,
+ gasMultiplier: 1.5,
+ priceSlippage: {
+ ratio: 1.007876641534847,
+ calculationError: '',
+ bucket: GasRecommendations.low,
+ sourceAmountInETH: 1,
+ destinationAmountInETH: 0.9921849150875727,
+ },
+ slippage: 2,
+ sourceTokenInfo: {
+ symbol: 'ETH',
+ name: 'Ether',
+ address: '0x0000000000000000000000000000000000000000',
+ decimals: 18,
+ iconUrl: 'images/black-eth-logo.svg',
+ },
+ destinationTokenInfo: {
+ address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+ symbol: 'LINK',
+ decimals: 18,
+ occurances: 12,
+ iconUrl:
+ 'https://cloudflare-ipfs.com/ipfs/QmQhZAdcZvW9T2tPm516yHqbGkfhyZwTZmLixW9MXJudTA',
+ },
+ ethFee: '0.011791',
+ ethValueOfTokens: '0.99220724791716534441',
+ overallValueOfQuote: '0.98041624791716534441',
+ metaMaskFeeInEth: '0.00875844985551091729',
+ isBestQuote: true,
+ savings: {
+ performance: '0.00207907025112527799',
+ fee: '0.005581',
+ metaMaskFee: '0.00875844985551091729',
+ total: '-0.0010983796043856393',
+ medianMetaMaskFee: '0.00874009740688812165',
+ },
+ },
+ sourceTokenValue: '1',
+ destinationTokenValue: '42.947749',
+ };
+
+ it('displays an error when in low bucket', () => {
+ const { getByText, getByTestId } = renderWithProvider(
+
+
+ );
+}
diff --git a/ui/pages/swaps/mascot-background-animation/mascot-background-animation.test.js b/ui/pages/swaps/mascot-background-animation/mascot-background-animation.test.js
new file mode 100644
index 000000000..fcbbc5f94
--- /dev/null
+++ b/ui/pages/swaps/mascot-background-animation/mascot-background-animation.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { renderWithProvider } from '../../../../test/jest';
+import MascotBackgroundAnimation from './mascot-background-animation';
+
+describe('MascotBackgroundAnimation', () => {
+ it('renders the component', () => {
+ const { getByTestId } = renderWithProvider(
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+ {
+ await dispatch(setSwapsErrorKey(''));
+ history.push(PREPARE_SWAP_ROUTE);
+ }}
+ submitText={buttonText}
+ hideCancel
+ showTermsOfService
+ />
+
+ );
+}
+
+NotificationPage.propTypes = {
+ notificationKey: PropTypes.oneOf([QUOTES_EXPIRED_ERROR]),
+};
diff --git a/ui/pages/swaps/notification-page/notification-page.test.js b/ui/pages/swaps/notification-page/notification-page.test.js
new file mode 100644
index 000000000..986d03cae
--- /dev/null
+++ b/ui/pages/swaps/notification-page/notification-page.test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import {
+ renderWithProvider,
+ createSwapsMockStore,
+} from '../../../../test/jest';
+import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps';
+import NotificationPage from './notification-page';
+
+const middleware = [thunk];
+
+describe('NotificationPage', () => {
+ it('renders the component with the QUOTES_EXPIRED_ERROR', () => {
+ const mockStore = createSwapsMockStore();
+ const store = configureMockStore(middleware)(mockStore);
+ const { getByText } = renderWithProvider(
+
+
+ );
+}
+
+PrepareSwapPage.propTypes = {
+ ethBalance: PropTypes.string,
+ selectedAccountAddress: PropTypes.string,
+ shuffledTokensList: PropTypes.array,
+};
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.test.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.test.js
new file mode 100644
index 000000000..61255621f
--- /dev/null
+++ b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.test.js
@@ -0,0 +1,188 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import {
+ renderWithProvider,
+ createSwapsMockStore,
+ setBackgroundConnection,
+ fireEvent,
+} from '../../../../test/jest';
+import {
+ setSwapsFromToken,
+ setSwapToToken,
+ setFromTokenInputValue,
+} from '../../../ducks/swaps/swaps';
+import PrepareSwapPage from './prepare-swap-page';
+
+const middleware = [thunk];
+const createProps = (customProps = {}) => {
+ return {
+ ethBalance: '0x8',
+ selectedAccountAddress: 'selectedAccountAddress',
+ shuffledTokensList: [],
+ ...customProps,
+ };
+};
+
+setBackgroundConnection({
+ resetPostFetchState: jest.fn(),
+ setBackgroundSwapRouteState: jest.fn(),
+ clearSwapsQuotes: jest.fn(),
+ stopPollingForQuotes: jest.fn(),
+ clearSmartTransactionFees: jest.fn(),
+ setSwapsFromToken: jest.fn(),
+ setSwapToToken: jest.fn(),
+ setFromTokenInputValue: jest.fn(),
+});
+
+jest.mock('../../../../shared/lib/token-util.ts', () => {
+ const actual = jest.requireActual('../../../../shared/lib/token-util.ts');
+ return {
+ ...actual,
+ fetchTokenBalance: jest.fn(() => Promise.resolve()),
+ };
+});
+
+jest.mock('../../../ducks/swaps/swaps', () => {
+ const actual = jest.requireActual('../../../ducks/swaps/swaps');
+ return {
+ ...actual,
+ setSwapsFromToken: jest.fn(),
+ setSwapToToken: jest.fn(),
+ setFromTokenInputValue: jest.fn(() => {
+ return {
+ type: 'MOCK_ACTION',
+ };
+ }),
+ };
+});
+
+jest.mock('../swaps.util', () => {
+ const actual = jest.requireActual('../swaps.util');
+ return {
+ ...actual,
+ fetchTokenPrice: jest.fn(() => Promise.resolve()),
+ };
+});
+
+describe('PrepareSwapPage', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders the component with initial props', () => {
+ const store = configureMockStore(middleware)(createSwapsMockStore());
+ const props = createProps();
+ const { getByText } = renderWithProvider(
+
+ {tokenForImport && isImportTokenModalOpen && (
+
+
+ {t('swapSwapTo')}
+
+ {
+ onToSelect?.(item);
+ onSwapToClose();
+ }}
+ maxListItems={30}
+ searchQuery={swapToSearchQuery}
+ setSearchQuery={setSwapToSearchQuery}
+ hideItemIf={hideSwapToTokenIf}
+ shouldSearchForImports
+ onOpenImportTokenModalClick={onOpenImportTokenModalClick}
+ />
+
+
+
+
+
+
+ {t('swapSwapFrom')}
+
+
+ {
+ onFromSelect?.(item);
+ onSwapFromClose();
+ }}
+ maxListItems={30}
+ searchQuery={swapFromSearchQuery}
+ setSearchQuery={setSwapFromSearchQuery}
+ hideItemIf={hideSwapFromTokenIf}
+ />
+
+
+
+ {showSmartTransactionsOptInPopover && (
+
+
+
+
+ {tokenVerifiedOn1Source
+ ? t('swapTokenVerifiedOn1SourceDescription', [
+ selectedToToken?.symbol,
+
+ {!verificationClicked && (
+ {
+ e.preventDefault();
+ setVerificationClicked(true);
+ }}
+ >
+ {t('swapContinueSwapping')}
+
+ )}
+
+
+
+ )}
+ {swapsErrorKey && (
+
+
+ )}
+ {transactionSettingsOpened &&
+ (smartTransactionsEnabled ||
+ (!smartTransactionsEnabled && !isDirectWrappingEnabled)) && (
+ {
+ dispatch(setMaxSlippage(newSlippage));
+ }}
+ maxAllowedSlippage={MAX_ALLOWED_SLIPPAGE}
+ currentSlippage={maxSlippage}
+ smartTransactionsEnabled={smartTransactionsEnabled}
+ smartTransactionsOptInStatus={smartTransactionsOptInStatus}
+ setSmartTransactionsOptInStatus={setSmartTransactionsOptInStatus}
+ currentSmartTransactionsError={currentSmartTransactionsError}
+ isDirectWrappingEnabled={isDirectWrappingEnabled}
+ onModalClose={() => {
+ dispatch(setTransactionSettingsOpened(false));
+ }}
+ />
+ )}
+ {showQuotesLoadingAnimation && (
+
+ {!areQuotesPresent && (
+
+
+
+
+
+
+
+
+ {swapFromFiatValue}
+
+
+ )}
+
+ {showNotEnoughTokenMessage && (
+
+
+ {t('swapsNotEnoughToken', [fromTokenSymbol])}
+
+
+ )}
+ {fromTokenError && (
+
+
+ {t('swapTooManyDecimalsError', [
+ fromTokenSymbol,
+ fromTokenDecimals,
+ ])}
+
+
+ )}
+
+
+
+
+ {fromTokenSymbol && swapYourTokenBalance}
+ {showMaxBalanceLink && (
+
+ {fromTokenInputValue && swapFromFiatValue && (
+
+ onInputChange(fromTokenBalance || '0', fromTokenBalance)
+ }
+ >
+ {t('max')}
+
+ )}
+ {
+ // If quotes are being loaded, disable the switch button.
+ if (!showQuotesLoadingAnimation) {
+ onToSelect(selectedFromToken);
+ onFromSelect(selectedToToken);
+ setRotateSwitchTokens(!rotateSwitchTokens);
+ }
+ }}
+ title={t('swapSwapSwitch')}
+ >
+
+
+
+
+
+ {receiveToAmountFormatted}
+
+
+
+
+ {!showReviewQuote && toTokenIsNotDefault && occurrences < 2 && (
+
+ {
+ setSubmitClicked(true);
+ if (!balanceError) {
+ if (isSmartTransaction && smartTransactionFees?.tradeTxFees) {
+ dispatch(
+ signAndSendSwapsSmartTransaction({
+ unsignedTransaction,
+ trackEvent,
+ history,
+ additionalTrackingParams,
+ }),
+ );
+ } else {
+ dispatch(
+ signAndSendTransactions(
+ history,
+ trackEvent,
+ additionalTrackingParams,
+ ),
+ );
+ }
+ } else if (destinationToken.symbol === defaultSwapsToken.symbol) {
+ history.push(DEFAULT_ROUTE);
+ } else {
+ history.push(`${ASSET_ROUTE}/${destinationToken.address}`);
+ }
+ }
+ }
+ submitText={
+ isSmartTransaction && swapsSTXLoading ? t('preparingSwap') : t('swap')
+ }
+ hideCancel
+ disabled={isSwapButtonDisabled}
+ className={classnames('review-quote__footer', {
+ 'review-quote__thin-swaps-footer': isShowingWarning,
+ })}
+ showTopBorder
+ showTermsOfService
+ />
+
+ );
+}
+
+ReviewQuote.propTypes = {
+ setReceiveToAmount: PropTypes.func.isRequired,
+};
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.test.js b/ui/pages/swaps/prepare-swap-page/review-quote.test.js
new file mode 100644
index 000000000..98183ffae
--- /dev/null
+++ b/ui/pages/swaps/prepare-swap-page/review-quote.test.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import {
+ renderWithProvider,
+ createSwapsMockStore,
+ setBackgroundConnection,
+ MOCKS,
+} from '../../../../test/jest';
+import ReviewQuote from './review-quote';
+
+jest.mock(
+ '../../../components/ui/info-tooltip/info-tooltip-icon',
+ () => () => '
+ {
+ /* istanbul ignore next */
+ selectQuotePopoverShown && (
+ setSelectQuotePopoverShown(false)}
+ onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))}
+ swapToSymbol={destinationTokenSymbol}
+ initialAggId={usedQuote.aggregator}
+ onQuoteDetailsIsOpened={trackQuoteDetailsOpened}
+ hideEstimatedGasFee={
+ smartTransactionsEnabled && smartTransactionsOptInStatus
+ }
+ />
+ )
+ }
+ {isShowingWarning && (
+ <>
+ {viewQuotePriceDifferenceWarning}
+ {(showInsufficientWarning || tokenBalanceUnavailable) && (
+
+
+
+ {actionableBalanceErrorMessage}
+
+
+
+ )}
+
+ )}
+
+
+
+
+ {t('quoteRate')}
+
+ {
+ trackAllAvailableQuotesOpened();
+ setSelectQuotePopoverShown(true);
+ }
+ }
+ showIconForSwappingTokens={false}
+ />
+
+
+
+ {t('swapMetaMaskFee')}
+
+
+ {t('percentage', [metaMaskFee])}
+
+
+
+
+
+ {t('transactionDetailGasHeading')}
+
+
+
+
+
+ {feeInEth}
+
+
+ {` ${feeInFiat}`}
+
+
+
+ {(maxFeeInFiat || maxFeeInEth) && (
+
+
+
+ {`${t('maxFee')}: `}
+
+
+ {maxFeeInFiat || maxFeeInEth}
+
+
+
+ )}
+ {!hideTokenApprovalRow && (
+
+
+ {t('swapEnableTokenForSwapping', [tokenApprovalTextComponent])}
+
+
+ onFeeCardTokenApprovalClick()}
+ size={Size.inherit}
+ className="review-quote__edit-limit"
+ >
+ {t('swapEditLimit')}
+
+
+
+ )}
+
+
+
+
+
+ + {t('swapGasFeesSummary', [getTranslatedNetworkName()])} +
++ {t('swapGasFeesDetails')} +
+ + + } + /> +
+
{primaryLabel ? (
-
+
{primaryLabel}
) : null}
@@ -134,7 +138,11 @@ export default function ItemList({
) : null}
{result.notImported && (
-