diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 66bfbeb5a..1503da608 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -19,6 +19,10 @@ import SlippageButtons from '../slippage-buttons';
import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
import InfoTooltip from '../../../components/ui/info-tooltip';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
+import {
+ VIEW_QUOTE_ROUTE,
+ LOADING_QUOTES_ROUTE,
+} from '../../../helpers/constants/routes';
import {
fetchQuotesAndSetQuoteState,
@@ -29,6 +33,8 @@ import {
getBalanceError,
getTopAssets,
getFetchParams,
+ getQuotes,
+ setReviewSwapClickedTimestamp,
} from '../../../ducks/swaps/swaps';
import {
getSwapsDefaultToken,
@@ -60,7 +66,13 @@ import {
SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
} from '../../../../shared/constants/swaps';
-import { resetSwapsPostFetchState, removeToken } from '../../../store/actions';
+import {
+ resetSwapsPostFetchState,
+ removeToken,
+ setBackgroundSwapRouteState,
+ clearSwapsQuotes,
+ stopPollingForQuotes,
+} from '../../../store/actions';
import {
fetchTokenPrice,
fetchTokenBalance,
@@ -76,6 +88,8 @@ const fuseSearchKeys = [
const MAX_ALLOWED_SLIPPAGE = 15;
+let timeoutIdForQuotesPrefetching;
+
export default function BuildQuote({
inputValue,
onInputChange,
@@ -110,6 +124,8 @@ export default function BuildQuote({
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
const tokenList = useSelector(getTokenList);
const useTokenDetection = useSelector(getUseTokenDetection);
+ const quotes = useSelector(getQuotes, isEqual);
+ const areQuotesPresent = Object.keys(quotes).length > 0;
const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
const conversionRate = useSelector(getConversionRate);
@@ -168,6 +184,7 @@ export default function BuildQuote({
decimals: fromTokenDecimals,
balance: rawFromTokenBalance,
} = selectedFromToken || {};
+ const { address: toTokenAddress } = selectedToToken || {};
const fromTokenBalance =
rawFromTokenBalance &&
@@ -348,6 +365,7 @@ export default function BuildQuote({
useEffect(() => {
dispatch(resetSwapsPostFetchState());
+ dispatch(setReviewSwapClickedTimestamp());
}, [dispatch]);
const BlockExplorerLink = () => {
@@ -392,6 +410,51 @@ export default function BuildQuote({
fromTokenAddress,
selectedToToken.address,
);
+ const isReviewSwapButtonDisabled =
+ tokenFromError ||
+ !isFeatureFlagLoaded ||
+ !Number(inputValue) ||
+ !selectedToToken?.address ||
+ Number(maxSlippage) < 0 ||
+ Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE ||
+ (toTokenIsNotDefault && occurrences < 2 && !verificationClicked);
+
+ // It's triggered every time there is a change in form values (token from, token to, amount and slippage).
+ useEffect(() => {
+ dispatch(clearSwapsQuotes());
+ dispatch(stopPollingForQuotes());
+ const prefetchQuotesWithoutRedirecting = async () => {
+ const pageRedirectionDisabled = true;
+ await dispatch(
+ fetchQuotesAndSetQuoteState(
+ history,
+ inputValue,
+ maxSlippage,
+ metaMetricsEvent,
+ pageRedirectionDisabled,
+ ),
+ );
+ };
+ // Delay fetching quotes until a user is done typing an input value. If they type a new char in less than a second,
+ // we will cancel previous setTimeout call and start running a new one.
+ timeoutIdForQuotesPrefetching = setTimeout(() => {
+ timeoutIdForQuotesPrefetching = null;
+ if (!isReviewSwapButtonDisabled) {
+ // Only do quotes prefetching if the Review Swap button is enabled.
+ prefetchQuotesWithoutRedirecting();
+ }
+ }, 1000);
+ return () => clearTimeout(timeoutIdForQuotesPrefetching);
+ }, [
+ dispatch,
+ history,
+ maxSlippage,
+ metaMetricsEvent,
+ isReviewSwapButtonDisabled,
+ inputValue,
+ fromTokenAddress,
+ toTokenAddress,
+ ]);
return (
- {currentMascotContainer &&
- midPointTarget &&
- aggregatorNames.map((aggName) => (
-
@@ -401,6 +464,7 @@ export default function BuildQuote({
{!isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId) && (
{
- dispatch(
- fetchQuotesAndSetQuoteState(
- history,
- inputValue,
- maxSlippage,
- metaMetricsEvent,
- ),
- );
+ onSubmit={async () => {
+ // We need this to know how long it took to go from clicking on the Review Swap button to rendered View Quote page.
+ dispatch(setReviewSwapClickedTimestamp(Date.now()));
+ // In case that quotes prefetching is waiting to be executed, but hasn't started yet,
+ // we want to cancel it and fetch quotes from here.
+ if (timeoutIdForQuotesPrefetching) {
+ clearTimeout(timeoutIdForQuotesPrefetching);
+ dispatch(
+ fetchQuotesAndSetQuoteState(
+ history,
+ inputValue,
+ maxSlippage,
+ metaMetricsEvent,
+ ),
+ );
+ } else if (areQuotesPresent) {
+ // If there are prefetched quotes already, go directly to the View Quote page.
+ history.push(VIEW_QUOTE_ROUTE);
+ } else {
+ // If the "Review Swap" button was clicked while quotes are being fetched, go to the Loading Quotes page.
+ await dispatch(setBackgroundSwapRouteState('loading'));
+ history.push(LOADING_QUOTES_ROUTE);
+ }
}}
submitText={t('swapReviewSwap')}
- disabled={
- tokenFromError ||
- !isFeatureFlagLoaded ||
- !Number(inputValue) ||
- !selectedToToken?.address ||
- Number(maxSlippage) < 0 ||
- Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE ||
- (toTokenIsNotDefault && occurrences < 2 && !verificationClicked)
- }
+ disabled={isReviewSwapButtonDisabled}
hideCancel
showTermsOfService
/>
diff --git a/ui/pages/swaps/build-quote/build-quote.test.js b/ui/pages/swaps/build-quote/build-quote.test.js
index 1fc09368e..759ebb9b2 100644
--- a/ui/pages/swaps/build-quote/build-quote.test.js
+++ b/ui/pages/swaps/build-quote/build-quote.test.js
@@ -1,6 +1,7 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
+import { fireEvent } from '@testing-library/react';
import {
renderWithProvider,
@@ -14,7 +15,7 @@ const createProps = (customProps = {}) => {
return {
inputValue: '5',
onInputChange: jest.fn(),
- ethBalance: '6 ETH',
+ ethBalance: '0x8',
setMaxSlippage: jest.fn(),
maxSlippage: 15,
selectedAccountAddress: 'selectedAccountAddress',
@@ -26,6 +27,10 @@ const createProps = (customProps = {}) => {
setBackgroundConnection({
resetPostFetchState: jest.fn(),
+ removeToken: jest.fn(),
+ setBackgroundSwapRouteState: jest.fn(),
+ clearSwapsQuotes: jest.fn(),
+ stopPollingForQuotes: jest.fn(),
});
describe('BuildQuote', () => {
@@ -44,4 +49,28 @@ describe('BuildQuote', () => {
document.querySelector('.slippage-buttons__button-group'),
).toMatchSnapshot();
});
+
+ it('clicks on the max button', () => {
+ const store = configureMockStore(middleware)(createSwapsMockStore());
+ const props = createProps();
+ const { getByTestId } = renderWithProvider(
+
onInputChange(fromTokenBalance || '0', fromTokenBalance)
}
@@ -583,26 +647,32 @@ export default function BuildQuote({
)}
-
-`;
diff --git a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js b/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
deleted file mode 100644
index 395389ae5..000000000
--- a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// Inspired by https://stackoverflow.com/a/28056903/4727685
-function hexToRGB(hex, alpha) {
- const r = parseInt(hex.slice(1, 3), 16);
- const g = parseInt(hex.slice(3, 5), 16);
- const b = parseInt(hex.slice(5, 7), 16);
-
- return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-export default function AggregatorLogo({ name, icon, color }) {
- return (
-
-
-
- 
-
-
-
- {icon && color ? (
-
- );
-}
-
-AggregatorLogo.propTypes = {
- name: PropTypes.string,
- icon: PropTypes.string,
- color: PropTypes.string,
-};
diff --git a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.test.js b/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.test.js
deleted file mode 100644
index 3367316b6..000000000
--- a/ui/pages/swaps/loading-swaps-quotes/aggregator-logo.test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { renderWithProvider } from '../../../../test/jest';
-import AggregatorLogo from './aggregator-logo';
-
-const createProps = (customProps = {}) => {
- return {
- color: '#000',
- icon:
- 'data:image/png;base64,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',
- ...customProps,
- };
-};
-
-describe('AggregatorLogo', () => {
- it('renders the component with initial props', () => {
- const { container } = renderWithProvider(
-
- 
-
- ) : (
- name && (
-
- {name}
-
- )
- )}
-
-
- {quoteCount === numberOfQuotes
- ? t('swapFinalizing')
- : t('swapCheckingQuote', [
- aggregatorMetadata[aggregatorNames[quoteCount]].title,
- ])}
-
+ {t('swapFetchingQuotes')}
-
- ))}