2021-02-04 19:15:23 +01:00
|
|
|
import React, { useContext, useEffect, useState, useCallback } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import classnames from 'classnames';
|
2021-03-15 17:51:43 +01:00
|
|
|
import { uniqBy, isEqual } from 'lodash';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { useHistory } from 'react-router-dom';
|
2021-05-19 16:51:47 +02:00
|
|
|
import { getTokenTrackerLink } from '@metamask/etherscan-link';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics.new';
|
2021-05-19 16:51:47 +02:00
|
|
|
import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
|
2021-03-15 17:51:43 +01:00
|
|
|
import {
|
|
|
|
useTokensToSearch,
|
|
|
|
getRenderableTokenData,
|
|
|
|
} from '../../../hooks/useTokensToSearch';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
|
|
|
|
import { I18nContext } from '../../../contexts/i18n';
|
|
|
|
import DropdownInputPair from '../dropdown-input-pair';
|
|
|
|
import DropdownSearchList from '../dropdown-search-list';
|
|
|
|
import SlippageButtons from '../slippage-buttons';
|
2021-06-08 18:03:59 +02:00
|
|
|
import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
|
2021-02-04 19:15:23 +01:00
|
|
|
import InfoTooltip from '../../../components/ui/info-tooltip';
|
2021-07-02 21:07:56 +02:00
|
|
|
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
|
2021-09-15 15:13:18 +02:00
|
|
|
import {
|
|
|
|
VIEW_QUOTE_ROUTE,
|
|
|
|
LOADING_QUOTES_ROUTE,
|
|
|
|
} from '../../../helpers/constants/routes';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
fetchQuotesAndSetQuoteState,
|
|
|
|
setSwapsFromToken,
|
|
|
|
setSwapToToken,
|
|
|
|
getFromToken,
|
|
|
|
getToToken,
|
|
|
|
getBalanceError,
|
|
|
|
getTopAssets,
|
|
|
|
getFetchParams,
|
2021-09-15 15:13:18 +02:00
|
|
|
getQuotes,
|
|
|
|
setReviewSwapClickedTimestamp,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../../ducks/swaps/swaps';
|
2021-03-15 17:51:43 +01:00
|
|
|
import {
|
2021-03-18 11:20:06 +01:00
|
|
|
getSwapsDefaultToken,
|
2021-03-15 17:51:43 +01:00
|
|
|
getTokenExchangeRates,
|
|
|
|
getCurrentCurrency,
|
2021-03-18 11:20:06 +01:00
|
|
|
getCurrentChainId,
|
2021-03-29 14:54:27 +02:00
|
|
|
getRpcPrefsForCurrentProvider,
|
2021-09-09 22:56:27 +02:00
|
|
|
getUseTokenDetection,
|
|
|
|
getTokenList,
|
2021-03-15 17:51:43 +01:00
|
|
|
} from '../../../selectors';
|
2021-06-08 18:03:59 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
getValueFromWeiHex,
|
|
|
|
hexToDecimal,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../../helpers/utils/conversions.util';
|
|
|
|
import { calcTokenAmount } from '../../../helpers/utils/token-util';
|
2021-10-08 23:27:45 +02:00
|
|
|
import {
|
|
|
|
getURLHostName,
|
|
|
|
isEqualCaseInsensitive,
|
|
|
|
} from '../../../helpers/utils/util';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { usePrevious } from '../../../hooks/usePrevious';
|
|
|
|
import { useTokenTracker } from '../../../hooks/useTokenTracker';
|
|
|
|
import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
|
|
|
|
import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-03-18 11:20:06 +01:00
|
|
|
import {
|
|
|
|
isSwapsDefaultTokenAddress,
|
|
|
|
isSwapsDefaultTokenSymbol,
|
2021-04-28 21:53:59 +02:00
|
|
|
} from '../../../../shared/modules/swaps.utils';
|
2021-08-13 17:26:42 +02:00
|
|
|
import {
|
|
|
|
SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP,
|
|
|
|
SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
|
|
|
|
} from '../../../../shared/constants/swaps';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-09-15 15:13:18 +02:00
|
|
|
import {
|
|
|
|
resetSwapsPostFetchState,
|
|
|
|
removeToken,
|
|
|
|
setBackgroundSwapRouteState,
|
|
|
|
clearSwapsQuotes,
|
|
|
|
stopPollingForQuotes,
|
|
|
|
} from '../../../store/actions';
|
2021-09-08 20:08:55 +02:00
|
|
|
import {
|
|
|
|
fetchTokenPrice,
|
|
|
|
fetchTokenBalance,
|
|
|
|
shouldEnableDirectWrapping,
|
|
|
|
} from '../swaps.util';
|
2021-02-04 19:15:23 +01:00
|
|
|
import SwapsFooter from '../swaps-footer';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const fuseSearchKeys = [
|
|
|
|
{ name: 'name', weight: 0.499 },
|
|
|
|
{ name: 'symbol', weight: 0.499 },
|
|
|
|
{ name: 'address', weight: 0.002 },
|
2021-02-04 19:15:23 +01:00
|
|
|
];
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const MAX_ALLOWED_SLIPPAGE = 15;
|
2020-12-07 16:12:55 +01:00
|
|
|
|
2021-09-15 15:13:18 +02:00
|
|
|
let timeoutIdForQuotesPrefetching;
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
export default function BuildQuote({
|
2020-10-06 20:28:38 +02:00
|
|
|
inputValue,
|
|
|
|
onInputChange,
|
|
|
|
ethBalance,
|
|
|
|
setMaxSlippage,
|
|
|
|
maxSlippage,
|
|
|
|
selectedAccountAddress,
|
2021-04-14 09:16:27 +02:00
|
|
|
isFeatureFlagLoaded,
|
2021-07-22 19:29:31 +02:00
|
|
|
tokenFromError,
|
2021-09-09 22:56:27 +02:00
|
|
|
shuffledTokensList,
|
2020-10-06 20:28:38 +02:00
|
|
|
}) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const history = useHistory();
|
|
|
|
const metaMetricsEvent = useContext(MetaMetricsContext);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const [fetchedTokenExchangeRate, setFetchedTokenExchangeRate] = useState(
|
|
|
|
undefined,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2021-02-05 18:11:10 +01:00
|
|
|
const [verificationClicked, setVerificationClicked] = useState(false);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const balanceError = useSelector(getBalanceError);
|
|
|
|
const fetchParams = useSelector(getFetchParams);
|
2020-11-03 00:41:28 +01:00
|
|
|
const { sourceTokenInfo = {}, destinationTokenInfo = {} } =
|
2021-02-04 19:15:23 +01:00
|
|
|
fetchParams?.metaData || {};
|
|
|
|
const tokens = useSelector(getTokens);
|
|
|
|
const topAssets = useSelector(getTopAssets);
|
|
|
|
const fromToken = useSelector(getFromToken);
|
|
|
|
const toToken = useSelector(getToToken) || destinationTokenInfo;
|
2021-03-18 11:20:06 +01:00
|
|
|
const defaultSwapsToken = useSelector(getSwapsDefaultToken);
|
|
|
|
const chainId = useSelector(getCurrentChainId);
|
2021-03-29 14:54:27 +02:00
|
|
|
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
|
2021-09-09 22:56:27 +02:00
|
|
|
const tokenList = useSelector(getTokenList);
|
|
|
|
const useTokenDetection = useSelector(getUseTokenDetection);
|
2021-09-15 15:13:18 +02:00
|
|
|
const quotes = useSelector(getQuotes, isEqual);
|
|
|
|
const areQuotesPresent = Object.keys(quotes).length > 0;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-03-15 17:51:43 +01:00
|
|
|
const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
|
|
|
|
const conversionRate = useSelector(getConversionRate);
|
|
|
|
const currentCurrency = useSelector(getCurrentCurrency);
|
|
|
|
|
2021-03-18 11:20:06 +01:00
|
|
|
const fetchParamsFromToken = isSwapsDefaultTokenSymbol(
|
|
|
|
sourceTokenInfo?.symbol,
|
|
|
|
chainId,
|
|
|
|
)
|
|
|
|
? defaultSwapsToken
|
|
|
|
: sourceTokenInfo;
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const { loading, tokensWithBalances } = useTokenTracker(tokens);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
// If the fromToken was set in a call to `onFromSelect` (see below), and that from token has a balance
|
|
|
|
// but is not in tokensWithBalances or tokens, then we want to add it to the usersTokens array so that
|
|
|
|
// the balance of the token can appear in the from token selection dropdown
|
2020-11-03 00:41:28 +01:00
|
|
|
const fromTokenArray =
|
2021-03-18 11:20:06 +01:00
|
|
|
!isSwapsDefaultTokenSymbol(fromToken?.symbol, chainId) && fromToken?.balance
|
|
|
|
? [fromToken]
|
|
|
|
: [];
|
2020-11-03 00:41:28 +01:00
|
|
|
const usersTokens = uniqBy(
|
|
|
|
[...tokensWithBalances, ...tokens, ...fromTokenArray],
|
|
|
|
'address',
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
const memoizedUsersTokens = useEqualityCheck(usersTokens);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-03-15 17:51:43 +01:00
|
|
|
const selectedFromToken = getRenderableTokenData(
|
|
|
|
fromToken || fetchParamsFromToken,
|
|
|
|
tokenConversionRates,
|
|
|
|
conversionRate,
|
|
|
|
currentCurrency,
|
2021-03-18 11:20:06 +01:00
|
|
|
chainId,
|
2021-09-09 22:56:27 +02:00
|
|
|
tokenList,
|
|
|
|
useTokenDetection,
|
2021-03-15 17:51:43 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
const tokensToSearch = useTokensToSearch({
|
|
|
|
usersTokens: memoizedUsersTokens,
|
|
|
|
topTokens: topAssets,
|
2021-09-09 22:56:27 +02:00
|
|
|
shuffledTokensList,
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2020-11-03 00:41:28 +01:00
|
|
|
const selectedToToken =
|
2021-10-08 23:27:45 +02:00
|
|
|
tokensToSearch.find(({ address }) =>
|
|
|
|
isEqualCaseInsensitive(address, toToken?.address),
|
|
|
|
) || toToken;
|
2021-03-18 11:20:06 +01:00
|
|
|
const toTokenIsNotDefault =
|
2021-02-05 18:11:10 +01:00
|
|
|
selectedToToken?.address &&
|
2021-03-18 11:20:06 +01:00
|
|
|
!isSwapsDefaultTokenAddress(selectedToToken?.address, chainId);
|
2021-07-09 17:24:00 +02:00
|
|
|
const occurrences = Number(
|
|
|
|
selectedToToken?.occurances || selectedToToken?.occurrences || 0,
|
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
const {
|
|
|
|
address: fromTokenAddress,
|
|
|
|
symbol: fromTokenSymbol,
|
|
|
|
string: fromTokenString,
|
|
|
|
decimals: fromTokenDecimals,
|
2020-10-08 03:38:34 +02:00
|
|
|
balance: rawFromTokenBalance,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = selectedFromToken || {};
|
2021-09-15 15:13:18 +02:00
|
|
|
const { address: toTokenAddress } = selectedToToken || {};
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const fromTokenBalance =
|
|
|
|
rawFromTokenBalance &&
|
2021-02-04 19:15:23 +01:00
|
|
|
calcTokenAmount(rawFromTokenBalance, fromTokenDecimals).toString(10);
|
2020-10-08 03:38:34 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const prevFromTokenBalance = usePrevious(fromTokenBalance);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
const swapFromTokenFiatValue = useTokenFiatAmount(
|
|
|
|
fromTokenAddress,
|
|
|
|
inputValue || 0,
|
|
|
|
fromTokenSymbol,
|
|
|
|
{
|
|
|
|
showFiat: true,
|
|
|
|
},
|
|
|
|
true,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-11-03 00:41:28 +01:00
|
|
|
const swapFromEthFiatValue = useEthFiatAmount(
|
|
|
|
inputValue || 0,
|
|
|
|
{ showFiat: true },
|
|
|
|
true,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2021-03-18 11:20:06 +01:00
|
|
|
const swapFromFiatValue = isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId)
|
|
|
|
? swapFromEthFiatValue
|
|
|
|
: swapFromTokenFiatValue;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
const onFromSelect = (token) => {
|
2020-11-03 00:41:28 +01:00
|
|
|
if (
|
|
|
|
token?.address &&
|
|
|
|
!swapFromFiatValue &&
|
|
|
|
fetchedTokenExchangeRate !== null
|
|
|
|
) {
|
|
|
|
fetchTokenPrice(token.address).then((rate) => {
|
|
|
|
if (rate !== null && rate !== undefined) {
|
2021-02-04 19:15:23 +01:00
|
|
|
setFetchedTokenExchangeRate(rate);
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2020-10-06 20:28:38 +02:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
setFetchedTokenExchangeRate(null);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2020-11-03 00:41:28 +01:00
|
|
|
if (
|
|
|
|
token?.address &&
|
2021-10-08 23:27:45 +02:00
|
|
|
!memoizedUsersTokens.find((usersToken) =>
|
|
|
|
isEqualCaseInsensitive(usersToken.address, token.address),
|
2020-11-03 00:41:28 +01:00
|
|
|
)
|
|
|
|
) {
|
|
|
|
fetchTokenBalance(token.address, selectedAccountAddress).then(
|
|
|
|
(fetchedBalance) => {
|
2020-10-06 20:28:38 +02:00
|
|
|
if (fetchedBalance?.balance) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const balanceAsDecString = fetchedBalance.balance.toString(10);
|
2020-11-03 00:41:28 +01:00
|
|
|
const userTokenBalance = calcTokenAmount(
|
|
|
|
balanceAsDecString,
|
|
|
|
token.decimals,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-11-03 00:41:28 +01:00
|
|
|
dispatch(
|
|
|
|
setSwapsFromToken({
|
|
|
|
...token,
|
|
|
|
string: userTokenBalance.toString(10),
|
|
|
|
balance: balanceAsDecString,
|
|
|
|
}),
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(setSwapsFromToken(token));
|
2020-11-03 00:41:28 +01:00
|
|
|
onInputChange(
|
|
|
|
token?.address ? inputValue : '',
|
|
|
|
token.string,
|
|
|
|
token.decimals,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
};
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-05-19 16:51:47 +02:00
|
|
|
const blockExplorerTokenLink = getTokenTrackerLink(
|
|
|
|
selectedToToken.address,
|
|
|
|
chainId,
|
|
|
|
null, // no networkId
|
|
|
|
null, // no holderAddress
|
|
|
|
{
|
|
|
|
blockExplorerUrl:
|
|
|
|
rpcPrefs.blockExplorerUrl ??
|
|
|
|
SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP[chainId] ??
|
|
|
|
null,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
const blockExplorerLabel = rpcPrefs.blockExplorerUrl
|
2021-08-25 00:28:16 +02:00
|
|
|
? getURLHostName(blockExplorerTokenLink)
|
2021-05-19 16:51:47 +02:00
|
|
|
: t('etherscan');
|
|
|
|
|
|
|
|
const blockExplorerLinkClickedEvent = useNewMetricEvent({
|
|
|
|
category: 'Swaps',
|
|
|
|
event: 'Clicked Block Explorer Link',
|
|
|
|
properties: {
|
|
|
|
link_type: 'Token Tracker',
|
|
|
|
action: 'Swaps Confirmation',
|
2021-08-25 00:28:16 +02:00
|
|
|
block_explorer_domain: getURLHostName(blockExplorerTokenLink),
|
2021-05-19 16:51:47 +02:00
|
|
|
},
|
|
|
|
});
|
2021-03-29 14:54:27 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const { destinationTokenAddedForSwap } = fetchParams || {};
|
|
|
|
const { address: toAddress } = toToken || {};
|
2020-11-03 00:41:28 +01:00
|
|
|
const onToSelect = useCallback(
|
|
|
|
(token) => {
|
|
|
|
if (destinationTokenAddedForSwap && token.address !== toAddress) {
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(removeToken(toAddress));
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(setSwapToToken(token));
|
2021-02-05 18:11:10 +01:00
|
|
|
setVerificationClicked(false);
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
|
|
|
[dispatch, destinationTokenAddedForSwap, toAddress],
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const hideDropdownItemIf = useCallback(
|
2021-10-08 23:27:45 +02:00
|
|
|
(item) => isEqualCaseInsensitive(item.address, fromTokenAddress),
|
2020-11-03 00:41:28 +01:00
|
|
|
[fromTokenAddress],
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-10-08 23:27:45 +02:00
|
|
|
const tokensWithBalancesFromToken = tokensWithBalances.find((token) =>
|
|
|
|
isEqualCaseInsensitive(token.address, fromToken?.address),
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-11-03 00:41:28 +01:00
|
|
|
const previousTokensWithBalancesFromToken = usePrevious(
|
|
|
|
tokensWithBalancesFromToken,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-12 18:51:01 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-03-18 11:20:06 +01:00
|
|
|
const notDefault = !isSwapsDefaultTokenAddress(
|
|
|
|
tokensWithBalancesFromToken?.address,
|
|
|
|
chainId,
|
|
|
|
);
|
2021-10-08 23:27:45 +02:00
|
|
|
const addressesAreTheSame = isEqualCaseInsensitive(
|
|
|
|
tokensWithBalancesFromToken?.address,
|
|
|
|
previousTokensWithBalancesFromToken?.address,
|
|
|
|
);
|
2020-11-03 00:41:28 +01:00
|
|
|
const balanceHasChanged =
|
|
|
|
tokensWithBalancesFromToken?.balance !==
|
2021-02-04 19:15:23 +01:00
|
|
|
previousTokensWithBalancesFromToken?.balance;
|
2021-03-18 11:20:06 +01:00
|
|
|
if (notDefault && addressesAreTheSame && balanceHasChanged) {
|
2020-11-03 00:41:28 +01:00
|
|
|
dispatch(
|
|
|
|
setSwapsFromToken({
|
|
|
|
...fromToken,
|
|
|
|
balance: tokensWithBalancesFromToken?.balance,
|
|
|
|
string: tokensWithBalancesFromToken?.string,
|
|
|
|
}),
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-12 18:51:01 +02:00
|
|
|
}
|
2020-11-03 00:41:28 +01:00
|
|
|
}, [
|
|
|
|
dispatch,
|
|
|
|
tokensWithBalancesFromToken,
|
|
|
|
previousTokensWithBalancesFromToken,
|
|
|
|
fromToken,
|
2021-03-18 11:20:06 +01:00
|
|
|
chainId,
|
2021-02-04 19:15:23 +01:00
|
|
|
]);
|
2020-10-12 18:51:01 +02:00
|
|
|
|
2020-10-09 16:56:23 +02:00
|
|
|
// If the eth balance changes while on build quote, we update the selected from token
|
2020-10-06 20:28:38 +02:00
|
|
|
useEffect(() => {
|
2020-11-03 00:41:28 +01:00
|
|
|
if (
|
2021-03-18 11:20:06 +01:00
|
|
|
isSwapsDefaultTokenAddress(fromToken?.address, chainId) &&
|
2020-11-03 00:41:28 +01:00
|
|
|
fromToken?.balance !== hexToDecimal(ethBalance)
|
|
|
|
) {
|
|
|
|
dispatch(
|
|
|
|
setSwapsFromToken({
|
|
|
|
...fromToken,
|
|
|
|
balance: hexToDecimal(ethBalance),
|
|
|
|
string: getValueFromWeiHex({
|
|
|
|
value: ethBalance,
|
|
|
|
numberOfDecimals: 4,
|
|
|
|
toDenomination: 'ETH',
|
|
|
|
}),
|
|
|
|
}),
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-03-18 11:20:06 +01:00
|
|
|
}, [dispatch, fromToken, ethBalance, chainId]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2020-10-08 03:38:34 +02:00
|
|
|
if (prevFromTokenBalance !== fromTokenBalance) {
|
2021-02-04 19:15:23 +01:00
|
|
|
onInputChange(inputValue, fromTokenBalance);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
}, [onInputChange, prevFromTokenBalance, inputValue, fromTokenBalance]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(resetSwapsPostFetchState());
|
2021-09-15 15:13:18 +02:00
|
|
|
dispatch(setReviewSwapClickedTimestamp());
|
2021-02-04 19:15:23 +01:00
|
|
|
}, [dispatch]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-06-03 18:08:37 +02:00
|
|
|
const BlockExplorerLink = () => {
|
|
|
|
return (
|
|
|
|
<a
|
|
|
|
className="build-quote__token-etherscan-link build-quote__underline"
|
|
|
|
key="build-quote-etherscan-link"
|
|
|
|
onClick={() => {
|
|
|
|
blockExplorerLinkClickedEvent();
|
|
|
|
global.platform.openTab({
|
|
|
|
url: blockExplorerTokenLink,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{blockExplorerLabel}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
let tokenVerificationDescription = '';
|
|
|
|
if (blockExplorerTokenLink) {
|
2021-07-09 17:24:00 +02:00
|
|
|
if (occurrences === 1) {
|
2021-06-03 18:08:37 +02:00
|
|
|
tokenVerificationDescription = t('verifyThisTokenOn', [
|
|
|
|
<BlockExplorerLink key="block-explorer-link" />,
|
|
|
|
]);
|
2021-07-09 17:24:00 +02:00
|
|
|
} else if (occurrences === 0) {
|
2021-06-03 18:08:37 +02:00
|
|
|
tokenVerificationDescription = t('verifyThisUnconfirmedTokenOn', [
|
|
|
|
<BlockExplorerLink key="block-explorer-link" />,
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-22 19:29:31 +02:00
|
|
|
const swapYourTokenBalance = t('swapYourTokenBalance', [
|
|
|
|
fromTokenString || '0',
|
2021-08-13 17:26:42 +02:00
|
|
|
fromTokenSymbol || SWAPS_CHAINID_DEFAULT_TOKEN_MAP[chainId]?.symbol || '',
|
2021-07-22 19:29:31 +02:00
|
|
|
]);
|
|
|
|
|
2021-09-08 20:08:55 +02:00
|
|
|
const isDirectWrappingEnabled = shouldEnableDirectWrapping(
|
|
|
|
chainId,
|
|
|
|
fromTokenAddress,
|
|
|
|
selectedToToken.address,
|
|
|
|
);
|
2021-09-15 15:13:18 +02:00
|
|
|
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,
|
|
|
|
]);
|
2021-09-08 20:08:55 +02:00
|
|
|
|
2020-10-06 20:28:38 +02:00
|
|
|
return (
|
|
|
|
<div className="build-quote">
|
|
|
|
<div className="build-quote__content">
|
|
|
|
<div className="build-quote__dropdown-input-pair-header">
|
|
|
|
<div className="build-quote__input-label">{t('swapSwapFrom')}</div>
|
2021-03-18 11:20:06 +01:00
|
|
|
{!isSwapsDefaultTokenSymbol(fromTokenSymbol, chainId) && (
|
2020-10-09 16:56:23 +02:00
|
|
|
<div
|
|
|
|
className="build-quote__max-button"
|
2021-09-15 15:13:18 +02:00
|
|
|
data-testid="build-quote__max-button"
|
2020-11-03 00:41:28 +01:00
|
|
|
onClick={() =>
|
|
|
|
onInputChange(fromTokenBalance || '0', fromTokenBalance)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{t('max')}
|
2020-10-09 16:56:23 +02:00
|
|
|
</div>
|
|
|
|
)}
|
2020-10-06 20:28:38 +02:00
|
|
|
</div>
|
|
|
|
<DropdownInputPair
|
|
|
|
onSelect={onFromSelect}
|
|
|
|
itemsToSearch={tokensToSearch}
|
|
|
|
onInputChange={(value) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
onInputChange(value, fromTokenBalance);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
inputValue={inputValue}
|
|
|
|
leftValue={inputValue && swapFromFiatValue}
|
|
|
|
selectedItem={selectedFromToken}
|
|
|
|
maxListItems={30}
|
2020-11-03 00:41:28 +01:00
|
|
|
loading={
|
|
|
|
loading &&
|
|
|
|
(!tokensToSearch?.length ||
|
|
|
|
!topAssets ||
|
|
|
|
!Object.keys(topAssets).length)
|
|
|
|
}
|
2020-10-14 18:45:44 +02:00
|
|
|
selectPlaceHolderText={t('swapSelect')}
|
2021-10-08 23:27:45 +02:00
|
|
|
hideItemIf={(item) =>
|
|
|
|
isEqualCaseInsensitive(item.address, selectedToToken?.address)
|
|
|
|
}
|
2020-10-06 20:28:38 +02:00
|
|
|
listContainerClassName="build-quote__open-dropdown"
|
2020-10-14 18:43:55 +02:00
|
|
|
autoFocus
|
2020-10-06 20:28:38 +02:00
|
|
|
/>
|
|
|
|
<div
|
|
|
|
className={classnames('build-quote__balance-message', {
|
2021-07-22 19:29:31 +02:00
|
|
|
'build-quote__balance-message--error':
|
|
|
|
balanceError || tokenFromError,
|
2020-10-06 20:28:38 +02:00
|
|
|
})}
|
|
|
|
>
|
2021-07-22 19:29:31 +02:00
|
|
|
{!tokenFromError &&
|
|
|
|
!balanceError &&
|
2020-11-03 00:41:28 +01:00
|
|
|
fromTokenSymbol &&
|
2021-07-22 19:29:31 +02:00
|
|
|
swapYourTokenBalance}
|
|
|
|
{!tokenFromError && balanceError && fromTokenSymbol && (
|
2020-10-06 20:28:38 +02:00
|
|
|
<div className="build-quite__insufficient-funds">
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="build-quite__insufficient-funds-first">
|
|
|
|
{t('swapsNotEnoughForTx', [fromTokenSymbol])}
|
|
|
|
</div>
|
|
|
|
<div className="build-quite__insufficient-funds-second">
|
2021-07-22 19:29:31 +02:00
|
|
|
{swapYourTokenBalance}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{tokenFromError && (
|
|
|
|
<>
|
|
|
|
<div className="build-quote__form-error">
|
|
|
|
{t('swapTooManyDecimalsError', [
|
2020-11-03 00:41:28 +01:00
|
|
|
fromTokenSymbol,
|
2021-07-22 19:29:31 +02:00
|
|
|
fromTokenDecimals,
|
2020-11-03 00:41:28 +01:00
|
|
|
])}
|
|
|
|
</div>
|
2021-07-22 19:29:31 +02:00
|
|
|
<div>{swapYourTokenBalance}</div>
|
|
|
|
</>
|
2020-10-06 20:28:38 +02:00
|
|
|
)}
|
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="build-quote__swap-arrows-row">
|
2020-10-30 15:35:47 +01:00
|
|
|
<button
|
2020-10-06 20:28:38 +02:00
|
|
|
className="build-quote__swap-arrows"
|
|
|
|
onClick={() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
onToSelect(selectedFromToken);
|
|
|
|
onFromSelect(selectedToToken);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
2020-11-03 00:41:28 +01:00
|
|
|
>
|
|
|
|
<img
|
2021-05-25 02:20:09 +02:00
|
|
|
src="./images/icons/swap2.svg"
|
2020-11-03 00:41:28 +01:00
|
|
|
alt={t('swapSwapSwitch')}
|
|
|
|
width="12"
|
|
|
|
height="16"
|
|
|
|
/>
|
2020-10-30 15:35:47 +01:00
|
|
|
</button>
|
2020-10-06 20:28:38 +02:00
|
|
|
</div>
|
|
|
|
<div className="build-quote__dropdown-swap-to-header">
|
|
|
|
<div className="build-quote__input-label">{t('swapSwapTo')}</div>
|
|
|
|
</div>
|
2020-10-19 22:38:01 +02:00
|
|
|
<div className="dropdown-input-pair dropdown-input-pair__to">
|
|
|
|
<DropdownSearchList
|
|
|
|
startingItem={selectedToToken}
|
|
|
|
itemsToSearch={tokensToSearch}
|
|
|
|
searchPlaceholderText={t('swapSearchForAToken')}
|
|
|
|
fuseSearchKeys={fuseSearchKeys}
|
|
|
|
selectPlaceHolderText={t('swapSelectAToken')}
|
|
|
|
maxListItems={30}
|
|
|
|
onSelect={onToSelect}
|
2020-11-03 00:41:28 +01:00
|
|
|
loading={
|
|
|
|
loading &&
|
|
|
|
(!tokensToSearch?.length ||
|
|
|
|
!topAssets ||
|
|
|
|
!Object.keys(topAssets).length)
|
|
|
|
}
|
2020-10-19 22:38:01 +02:00
|
|
|
externallySelectedItem={selectedToToken}
|
|
|
|
hideItemIf={hideDropdownItemIf}
|
|
|
|
listContainerClassName="build-quote__open-to-dropdown"
|
|
|
|
hideRightLabels
|
|
|
|
defaultToAll
|
2021-06-03 18:08:37 +02:00
|
|
|
shouldSearchForImports
|
2020-10-19 22:38:01 +02:00
|
|
|
/>
|
|
|
|
</div>
|
2021-03-18 11:20:06 +01:00
|
|
|
{toTokenIsNotDefault &&
|
2021-07-09 17:24:00 +02:00
|
|
|
(occurrences < 2 ? (
|
2021-02-05 18:11:10 +01:00
|
|
|
<ActionableMessage
|
2021-07-09 17:24:00 +02:00
|
|
|
type={occurrences === 1 ? 'warning' : 'danger'}
|
2021-02-05 18:11:10 +01:00
|
|
|
message={
|
|
|
|
<div className="build-quote__token-verification-warning-message">
|
|
|
|
<div className="build-quote__bold">
|
2021-07-09 17:24:00 +02:00
|
|
|
{occurrences === 1
|
2021-03-01 16:20:38 +01:00
|
|
|
? t('swapTokenVerificationOnlyOneSource')
|
2021-06-03 18:08:37 +02:00
|
|
|
: t('swapTokenVerificationAddedManually')}
|
2021-02-05 18:11:10 +01:00
|
|
|
</div>
|
2021-06-03 18:08:37 +02:00
|
|
|
<div>{tokenVerificationDescription}</div>
|
2021-02-05 18:11:10 +01:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
primaryAction={
|
|
|
|
verificationClicked
|
|
|
|
? null
|
|
|
|
: {
|
|
|
|
label: t('continue'),
|
|
|
|
onClick: () => setVerificationClicked(true),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
withRightButton
|
2021-03-29 14:54:27 +02:00
|
|
|
infoTooltipText={
|
|
|
|
blockExplorerTokenLink &&
|
|
|
|
t('swapVerifyTokenExplanation', [blockExplorerLabel])
|
|
|
|
}
|
2021-02-05 18:11:10 +01:00
|
|
|
/>
|
|
|
|
) : (
|
2020-11-17 21:56:02 +01:00
|
|
|
<div className="build-quote__token-message">
|
2021-02-05 18:11:10 +01:00
|
|
|
<span
|
|
|
|
className="build-quote__bold"
|
|
|
|
key="token-verification-bold-text"
|
|
|
|
>
|
2021-07-09 17:24:00 +02:00
|
|
|
{t('swapTokenVerificationSources', [occurrences])}
|
2021-02-05 18:11:10 +01:00
|
|
|
</span>
|
2021-03-29 14:54:27 +02:00
|
|
|
{blockExplorerTokenLink && (
|
|
|
|
<>
|
|
|
|
{t('swapTokenVerificationMessage', [
|
|
|
|
<a
|
|
|
|
className="build-quote__token-etherscan-link"
|
|
|
|
key="build-quote-etherscan-link"
|
2021-05-19 16:51:47 +02:00
|
|
|
onClick={() => {
|
|
|
|
blockExplorerLinkClickedEvent();
|
|
|
|
global.platform.openTab({
|
|
|
|
url: blockExplorerTokenLink,
|
|
|
|
});
|
|
|
|
}}
|
2021-03-29 14:54:27 +02:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{blockExplorerLabel}
|
|
|
|
</a>,
|
|
|
|
])}
|
|
|
|
<InfoTooltip
|
|
|
|
position="top"
|
|
|
|
contentText={t('swapVerifyTokenExplanation', [
|
|
|
|
blockExplorerLabel,
|
|
|
|
])}
|
|
|
|
containerClassName="build-quote__token-tooltip-container"
|
|
|
|
key="token-verification-info-tooltip"
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
2020-11-17 21:56:02 +01:00
|
|
|
</div>
|
2021-02-05 18:11:10 +01:00
|
|
|
))}
|
2021-09-08 20:08:55 +02:00
|
|
|
{!isDirectWrappingEnabled && (
|
|
|
|
<div className="build-quote__slippage-buttons-container">
|
|
|
|
<SlippageButtons
|
|
|
|
onSelect={(newSlippage) => {
|
|
|
|
setMaxSlippage(newSlippage);
|
|
|
|
}}
|
|
|
|
maxAllowedSlippage={MAX_ALLOWED_SLIPPAGE}
|
|
|
|
currentSlippage={maxSlippage}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2020-10-06 20:28:38 +02:00
|
|
|
</div>
|
|
|
|
<SwapsFooter
|
2021-09-15 15:13:18 +02:00
|
|
|
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);
|
|
|
|
}
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
2021-02-04 19:12:43 +01:00
|
|
|
submitText={t('swapReviewSwap')}
|
2021-09-15 15:13:18 +02:00
|
|
|
disabled={isReviewSwapButtonDisabled}
|
2020-10-06 20:28:38 +02:00
|
|
|
hideCancel
|
2020-12-08 17:47:53 +01:00
|
|
|
showTermsOfService
|
2020-10-06 20:28:38 +02:00
|
|
|
/>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
BuildQuote.propTypes = {
|
|
|
|
maxSlippage: PropTypes.number,
|
|
|
|
inputValue: PropTypes.string,
|
|
|
|
onInputChange: PropTypes.func,
|
|
|
|
ethBalance: PropTypes.string,
|
|
|
|
setMaxSlippage: PropTypes.func,
|
|
|
|
selectedAccountAddress: PropTypes.string,
|
2021-04-14 09:16:27 +02:00
|
|
|
isFeatureFlagLoaded: PropTypes.bool.isRequired,
|
2021-07-22 19:29:31 +02:00
|
|
|
tokenFromError: PropTypes.string,
|
2021-09-09 22:56:27 +02:00
|
|
|
shuffledTokensList: PropTypes.array,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|