1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 04:07:13 +01:00
metamask-extension/ui/pages/swaps/view-quote/view-quote.js

823 lines
27 KiB
JavaScript
Raw Normal View History

import React, { useState, useContext, useMemo, useEffect, useRef } from 'react';
import { 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 { I18nContext } from '../../../contexts/i18n';
import SelectQuotePopover from '../select-quote-popover';
import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
import { usePrevious } from '../../../hooks/usePrevious';
import { useGasFeeInputs } from '../../../hooks/gasFeeInput/useGasFeeInputs';
import { MetaMetricsContext } from '../../../contexts/metametrics.new';
import FeeCard from '../fee-card';
import EditGasPopover from '../../../components/app/edit-gas-popover/edit-gas-popover.component';
2020-10-06 20:28:38 +02:00
import {
FALLBACK_GAS_MULTIPLIER,
2020-10-06 20:28:38 +02:00
getQuotes,
getSelectedQuote,
getApproveTxParams,
getFetchParams,
setBalanceError,
getQuotesLastFetched,
getBalanceError,
getCustomSwapsGas, // Gas limit.
getCustomMaxFeePerGas,
getCustomMaxPriorityFeePerGas,
getSwapsUserFeeLevel,
2020-10-06 20:28:38 +02:00
getDestinationTokenInfo,
Switch gas price estimation in swaps to metaswap-api /gasPrices (#9599) Adds swaps-gas-customization-modal and utilize in swaps Remove swaps specific code from gas-modal-page-container/ Remove slow estimate data from swaps-gas-customization-modal.container Use average as lower safe price limit in swaps-gas-customization-modal Lint fix Fix up unit tests Update ui/app/ducks/swaps/swaps.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> Remove stale properties from gas-modal-page-container.component.js Replace use of isCustomPrice safe with isCustomSwapsGasPriceSafe, in swaps-gas-customization-modal Remove use of averageIsSafe in isCustomPriceSafe function Stop calling resetCustomGasState in swaps Refactor 'setter' type actions and creators to 'event based', for swaps slice custom gas logic Replace use of advanced-tab-content.component with advanceGasInputs in swaps gas customization component Add validation for the gasPrices endpoint swaps custom gas price should be considered safe if >= to average Update renderDataSummary unit test Lint fix Remove customOnHideOpts for swapsGasCustomizationModal in modal.js Better handling for swaps gas price loading and failure states Improve semantics: isCustomSwapsGasPriceSafe renamed to isCustomSwapsGasPriceUnSafe Mutate state directly in swaps gas slice reducer Remove unused params More reliable tracking of speed setting for Gas Fees Changed metrics event Lint fix Throw error when fetchSwapsGasPrices response is invalid add disableSave and customTotalSupplement to swaps-gas-customization container return Update ui/app/ducks/swaps/swaps.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> Improve error handling in fetchMetaSwapsGasPriceEstimates Remove metricsEvent from swaps-gas-customization-modal context Base check of gas speed type in swaps-gas-customization-modal on gasEstimateType Improve naming of variable and functions use to set customPriceIsSafe prop of AdvancedGasInputs in swaps-gas-customization-modal Simplify sinon spy/stub code in gas-price-button-group-component.test.js Remove unnecessary getSwapsFallbackGasPrice call in swaps-gas-customization-modal Remove use of getSwapsTradeTxParams and clean up related gas price logic in swaps Improve validator of SWAP_GAS_PRICE_VALIDATOR Ensure default tradeValue
2020-11-04 17:14:08 +01:00
getUsedSwapsGasPrice,
2020-10-06 20:28:38 +02:00
getTopQuote,
navigateBackToBuildQuote,
signAndSendTransactions,
getBackgroundSwapRouteState,
swapsQuoteSelected,
getSwapsQuoteRefreshTime,
2021-09-15 15:13:18 +02:00
getReviewSwapClickedTimestamp,
} from '../../../ducks/swaps/swaps';
2020-10-06 20:28:38 +02:00
import {
conversionRateSelector,
getSelectedAccount,
getCurrentCurrency,
getTokenExchangeRates,
getSwapsDefaultToken,
getCurrentChainId,
isHardwareWallet,
getHardwareWalletType,
checkNetworkAndAccountSupports1559,
} from '../../../selectors';
import { getNativeCurrency, getTokens } from '../../../ducks/metamask/metamask';
import {
toPrecisionWithoutTrailingZeros,
isEqualCaseInsensitive,
} from '../../../helpers/utils/util';
2020-10-06 20:28:38 +02:00
import {
safeRefetchQuotes,
setCustomApproveTxData,
setSwapsErrorKey,
showModal,
2021-09-15 15:13:18 +02:00
setSwapsQuotesPollingLimitEnabled,
} from '../../../store/actions';
2020-10-06 20:28:38 +02:00
import {
ASSET_ROUTE,
BUILD_QUOTE_ROUTE,
DEFAULT_ROUTE,
SWAPS_ERROR_ROUTE,
AWAITING_SWAP_ROUTE,
} from '../../../helpers/constants/routes';
import { getTokenData } from '../../../helpers/utils/transactions.util';
2020-10-06 20:28:38 +02:00
import {
calcTokenAmount,
calcTokenValue,
getTokenValueParam,
} from '../../../helpers/utils/token-util';
2020-10-06 20:28:38 +02:00
import {
decimalToHex,
hexToDecimal,
getValueFromWeiHex,
decGWEIToHexWEI,
hexWEIToDecGWEI,
addHexes,
} from '../../../helpers/utils/conversions.util';
import MainQuoteSummary from '../main-quote-summary';
import { calcGasTotal } from '../../send/send.utils';
import { getCustomTxParamsData } from '../../confirm-approve/confirm-approve.util';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
2020-11-03 00:41:28 +01:00
import {
quotesToRenderableData,
getRenderableNetworkFeesForQuote,
} from '../swaps.util';
import { useTokenTracker } from '../../../hooks/useTokenTracker';
import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps';
import {
EDIT_GAS_MODES,
GAS_RECOMMENDATIONS,
} from '../../../../shared/constants/gas';
import CountdownTimer from '../countdown-timer';
import SwapsFooter from '../swaps-footer';
import ViewQuotePriceDifference from './view-quote-price-difference';
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
export default function ViewQuote() {
const history = useHistory();
const dispatch = useDispatch();
const t = useContext(I18nContext);
const metaMetricsEvent = useContext(MetaMetricsContext);
2020-10-06 20:28:38 +02:00
const [dispatchedSafeRefetch, setDispatchedSafeRefetch] = useState(false);
const [submitClicked, setSubmitClicked] = useState(false);
const [selectQuotePopoverShown, setSelectQuotePopoverShown] = useState(false);
const [warningHidden, setWarningHidden] = useState(false);
const [originalApproveAmount, setOriginalApproveAmount] = useState(null);
const [showEditGasPopover, setShowEditGasPopover] = useState(false);
2021-09-15 15:13:18 +02:00
// We need to have currentTimestamp in state, otherwise it would change with each rerender.
const [currentTimestamp] = useState(Date.now());
2020-10-06 20:28:38 +02:00
const [
acknowledgedPriceDifference,
setAcknowledgedPriceDifference,
] = useState(false);
const priceDifferenceRiskyBuckets = [
GAS_RECOMMENDATIONS.HIGH,
GAS_RECOMMENDATIONS.MEDIUM,
];
const routeState = useSelector(getBackgroundSwapRouteState);
const quotes = useSelector(getQuotes, isEqual);
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (!Object.values(quotes).length) {
history.push(BUILD_QUOTE_ROUTE);
2020-10-06 20:28:38 +02:00
} else if (routeState === 'awaiting') {
history.push(AWAITING_SWAP_ROUTE);
2020-10-06 20:28:38 +02:00
}
}, [history, quotes, routeState]);
2020-10-06 20:28:38 +02:00
const quotesLastFetched = useSelector(getQuotesLastFetched);
2020-10-06 20:28:38 +02:00
// 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);
const memoizedTokenConversionRates = useEqualityCheck(tokenConversionRates);
const { balance: ethBalance } = useSelector(getSelectedAccount);
const conversionRate = useSelector(conversionRateSelector);
const currentCurrency = useSelector(getCurrentCurrency);
const swapsTokens = useSelector(getTokens);
const networkAndAccountSupports1559 = useSelector(
checkNetworkAndAccountSupports1559,
);
const balanceError = useSelector(getBalanceError);
const fetchParams = useSelector(getFetchParams);
const approveTxParams = useSelector(getApproveTxParams);
const selectedQuote = useSelector(getSelectedQuote);
const topQuote = useSelector(getTopQuote);
const usedQuote = selectedQuote || topQuote;
const tradeValue = usedQuote?.trade?.value ?? '0x0';
const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
const defaultSwapsToken = useSelector(getSwapsDefaultToken);
const chainId = useSelector(getCurrentChainId);
const nativeCurrencySymbol = useSelector(getNativeCurrency);
2021-09-15 15:13:18 +02:00
const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp);
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(GAS_RECOMMENDATIONS.HIGH, {
userFeeLevel: swapsUserFeeLevel || GAS_RECOMMENDATIONS.HIGH,
});
}
const { isBestQuote } = usedQuote;
const fetchParamsSourceToken = fetchParams?.sourceToken;
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const usedGasLimit =
2020-10-06 20:28:38 +02:00
usedQuote?.gasEstimateWithRefund ||
`0x${decimalToHex(usedQuote?.averageGas || 0)}`;
2020-10-06 20:28:38 +02:00
const gasLimitForMax = usedQuote?.gasEstimate || `0x0`;
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const usedGasLimitWithMultiplier = new BigNumber(gasLimitForMax, 16)
.times(usedQuote?.gasMultiplier || FALLBACK_GAS_MULTIPLIER, 10)
2020-10-06 20:28:38 +02:00
.round(0)
.toString(16);
2020-10-06 20:28:38 +02:00
const nonCustomMaxGasLimit = usedQuote?.gasEstimate
? usedGasLimitWithMultiplier
: `0x${decimalToHex(usedQuote?.maxGas || 0)}`;
const maxGasLimit = customMaxGas || nonCustomMaxGasLimit;
2020-10-06 20:28:38 +02:00
let maxFeePerGas;
let maxPriorityFeePerGas;
let baseAndPriorityFeePerGas;
if (networkAndAccountSupports1559) {
const {
maxFeePerGas: suggestedMaxFeePerGas,
maxPriorityFeePerGas: suggestedMaxPriorityFeePerGas,
gasFeeEstimates: { estimatedBaseFee = '0' },
} = gasFeeInputs;
maxFeePerGas = customMaxFeePerGas || decGWEIToHexWEI(suggestedMaxFeePerGas);
maxPriorityFeePerGas =
customMaxPriorityFeePerGas ||
decGWEIToHexWEI(suggestedMaxPriorityFeePerGas);
baseAndPriorityFeePerGas = addHexes(
decGWEIToHexWEI(estimatedBaseFee),
maxPriorityFeePerGas,
);
}
const gasTotalInWeiHex = calcGasTotal(
maxGasLimit,
networkAndAccountSupports1559 ? maxFeePerGas : gasPrice,
);
2020-10-06 20:28:38 +02:00
const { tokensWithBalances } = useTokenTracker(swapsTokens, true);
2020-11-03 00:41:28 +01:00
const balanceToken =
fetchParamsSourceToken === defaultSwapsToken.address
? defaultSwapsToken
: tokensWithBalances.find(({ address }) =>
isEqualCaseInsensitive(address, fetchParamsSourceToken),
);
2020-10-06 20:28:38 +02:00
const selectedFromToken = balanceToken || usedQuote.sourceTokenInfo;
2020-11-03 00:41:28 +01:00
const tokenBalance =
2020-10-06 20:28:38 +02:00
tokensWithBalances?.length &&
calcTokenAmount(
selectedFromToken.balance || '0x0',
selectedFromToken.decimals,
).toFixed(9);
const tokenBalanceUnavailable =
tokensWithBalances && balanceToken === undefined;
2020-10-06 20:28:38 +02:00
const approveData = getTokenData(approveTxParams?.data);
const approveValue = approveData && getTokenValueParam(approveData);
2020-11-03 00:41:28 +01:00
const approveAmount =
approveValue &&
selectedFromToken?.decimals !== undefined &&
calcTokenAmount(approveValue, selectedFromToken.decimals).toFixed(9);
const approveGas = approveTxParams?.gas;
2020-10-06 20:28:38 +02:00
const renderablePopoverData = useMemo(() => {
return quotesToRenderableData(
quotes,
networkAndAccountSupports1559 ? baseAndPriorityFeePerGas : gasPrice,
2020-10-06 20:28:38 +02:00
conversionRate,
currentCurrency,
approveGas,
memoizedTokenConversionRates,
chainId,
);
2020-10-06 20:28:38 +02:00
}, [
quotes,
gasPrice,
baseAndPriorityFeePerGas,
networkAndAccountSupports1559,
2020-10-06 20:28:38 +02:00
conversionRate,
currentCurrency,
approveGas,
memoizedTokenConversionRates,
chainId,
]);
2020-10-06 20:28:38 +02:00
const renderableDataForUsedQuote = renderablePopoverData.find(
2020-11-03 00:41:28 +01:00
(renderablePopoverDatum) =>
renderablePopoverDatum.aggId === usedQuote.aggregator,
);
2020-10-06 20:28:38 +02:00
const {
destinationTokenDecimals,
destinationTokenSymbol,
destinationTokenValue,
destinationIconUrl,
2020-10-06 20:28:38 +02:00
sourceTokenDecimals,
sourceTokenSymbol,
sourceTokenValue,
sourceTokenIconUrl,
} = renderableDataForUsedQuote;
2020-10-06 20:28:38 +02:00
const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote({
tradeGas: usedGasLimit,
2020-10-06 20:28:38 +02:00
approveGas,
gasPrice: networkAndAccountSupports1559
? baseAndPriorityFeePerGas
: gasPrice,
2020-10-06 20:28:38 +02:00
currentCurrency,
conversionRate,
tradeValue,
sourceSymbol: sourceTokenSymbol,
sourceAmount: usedQuote.sourceAmount,
chainId,
nativeCurrencySymbol,
});
2020-10-06 20:28:38 +02:00
const {
feeInFiat: maxFeeInFiat,
feeInEth: maxFeeInEth,
nonGasFee,
} = getRenderableNetworkFeesForQuote({
tradeGas: maxGasLimit,
2020-10-06 20:28:38 +02:00
approveGas,
gasPrice: networkAndAccountSupports1559 ? maxFeePerGas : gasPrice,
2020-10-06 20:28:38 +02:00
currentCurrency,
conversionRate,
tradeValue,
sourceSymbol: sourceTokenSymbol,
sourceAmount: usedQuote.sourceAmount,
chainId,
nativeCurrencySymbol,
});
2020-10-06 20:28:38 +02:00
const tokenCost = new BigNumber(usedQuote.sourceAmount);
2020-11-03 00:41:28 +01:00
const ethCost = new BigNumber(usedQuote.trade.value || 0, 10).plus(
new BigNumber(gasTotalInWeiHex, 16),
);
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const insufficientTokens =
2020-10-06 20:28:38 +02:00
(tokensWithBalances?.length || balanceError) &&
tokenCost.gt(new BigNumber(selectedFromToken.balance || '0x0'));
2020-10-06 20:28:38 +02:00
const insufficientEth = ethCost.gt(new BigNumber(ethBalance || '0x0'));
2020-10-06 20:28:38 +02:00
const tokenBalanceNeeded = insufficientTokens
? toPrecisionWithoutTrailingZeros(
2020-11-03 00:41:28 +01:00
calcTokenAmount(tokenCost, selectedFromToken.decimals)
.minus(tokenBalance)
.toString(10),
6,
)
: null;
2020-10-06 20:28:38 +02:00
const ethBalanceNeeded = insufficientEth
? toPrecisionWithoutTrailingZeros(
2020-11-03 00:41:28 +01:00
ethCost
.minus(ethBalance, 16)
.div('1000000000000000000', 10)
.toString(10),
6,
)
: null;
2020-10-06 20:28:38 +02:00
const destinationToken = useSelector(getDestinationTokenInfo);
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (insufficientTokens || insufficientEth) {
dispatch(setBalanceError(true));
2020-10-06 20:28:38 +02:00
} else if (balanceError && !insufficientTokens && !insufficientEth) {
dispatch(setBalanceError(false));
2020-10-06 20:28:38 +02:00
}
}, [insufficientTokens, insufficientEth, balanceError, dispatch]);
2020-10-06 20:28:38 +02:00
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_ERROR_ROUTE);
2020-10-06 20:28:38 +02:00
}
}, [
quotesLastFetched,
dispatchedSafeRefetch,
dispatch,
history,
swapsQuoteRefreshTime,
]);
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (!originalApproveAmount && approveAmount) {
setOriginalApproveAmount(approveAmount);
2020-10-06 20:28:38 +02:00
}
}, [originalApproveAmount, approveAmount]);
2020-10-06 20:28:38 +02:00
const showInsufficientWarning =
(balanceError || tokenBalanceNeeded || ethBalanceNeeded) && !warningHidden;
2020-10-06 20:28:38 +02:00
2021-09-15 15:13:18 +02:00
const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType);
const numberOfQuotes = Object.values(quotes).length;
const bestQuoteReviewedEventSent = useRef();
2020-10-06 20:28:38 +02:00
const eventObjectBase = {
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,
2021-09-15 15:13:18 +02:00
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
};
2020-10-06 20:28:38 +02:00
const allAvailableQuotesOpened = useNewMetricEvent({
2020-10-06 20:28:38 +02:00
event: 'All Available Quotes Opened',
category: 'swaps',
sensitiveProperties: {
2020-10-06 20:28:38 +02:00
...eventObjectBase,
other_quote_selected: usedQuote?.aggregator !== topQuote?.aggregator,
2020-11-03 00:41:28 +01:00
other_quote_selected_source:
usedQuote?.aggregator === topQuote?.aggregator
? null
: usedQuote?.aggregator,
2020-10-06 20:28:38 +02:00
},
});
const quoteDetailsOpened = useNewMetricEvent({
2020-10-06 20:28:38 +02:00
event: 'Quote Details Opened',
category: 'swaps',
sensitiveProperties: {
2020-10-06 20:28:38 +02:00
...eventObjectBase,
other_quote_selected: usedQuote?.aggregator !== topQuote?.aggregator,
2020-11-03 00:41:28 +01:00
other_quote_selected_source:
usedQuote?.aggregator === topQuote?.aggregator
? null
: usedQuote?.aggregator,
2020-10-06 20:28:38 +02:00
},
});
const editSpendLimitOpened = useNewMetricEvent({
2020-10-06 20:28:38 +02:00
event: 'Edit Spend Limit Opened',
category: 'swaps',
sensitiveProperties: {
2020-10-06 20:28:38 +02:00
...eventObjectBase,
custom_spend_limit_set: originalApproveAmount === approveAmount,
2020-11-03 00:41:28 +01:00
custom_spend_limit_amount:
originalApproveAmount === approveAmount ? null : approveAmount,
2020-10-06 20:28:38 +02:00
},
});
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const bestQuoteReviewedEvent = useNewMetricEvent({
event: 'Best Quote Reviewed',
category: 'swaps',
sensitiveProperties: {
...eventObjectBase,
network_fees: feeInFiat,
},
});
2021-09-15 15:13:18 +02:00
const viewQuotePageLoadedEvent = useNewMetricEvent({
event: 'View Quote Page Loaded',
category: 'swaps',
sensitiveProperties: {
...eventObjectBase,
response_time: currentTimestamp - reviewSwapClickedTimestamp,
},
});
2020-10-06 20:28:38 +02:00
useEffect(() => {
2020-11-03 00:41:28 +01:00
if (
!bestQuoteReviewedEventSent.current &&
[
sourceTokenSymbol,
sourceTokenValue,
destinationTokenSymbol,
destinationTokenValue,
fetchParams,
topQuote,
numberOfQuotes,
feeInFiat,
].every((dep) => dep !== null && dep !== undefined)
) {
bestQuoteReviewedEventSent.current = true;
bestQuoteReviewedEvent();
2020-10-06 20:28:38 +02:00
}
2020-11-03 00:41:28 +01:00
}, [
sourceTokenSymbol,
sourceTokenValue,
destinationTokenSymbol,
destinationTokenValue,
fetchParams,
topQuote,
numberOfQuotes,
feeInFiat,
bestQuoteReviewedEvent,
]);
2020-10-06 20:28:38 +02:00
const metaMaskFee = usedQuote.fee;
const onFeeCardTokenApprovalClick = () => {
editSpendLimitOpened();
2020-11-03 00:41:28 +01:00
dispatch(
showModal({
name: 'EDIT_APPROVAL_PERMISSION',
decimals: selectedFromToken.decimals,
origin: 'MetaMask',
setCustomAmount: (newCustomPermissionAmount) => {
const customPermissionAmount =
newCustomPermissionAmount === ''
? originalApproveAmount
: newCustomPermissionAmount;
2020-11-03 00:41:28 +01:00
const newData = getCustomTxParamsData(approveTxParams.data, {
customPermissionAmount,
decimals: selectedFromToken.decimals,
});
2020-11-03 00:41:28 +01:00
if (
customPermissionAmount?.length &&
approveTxParams.data !== newData
) {
dispatch(setCustomApproveTxData(newData));
2020-11-03 00:41:28 +01:00
}
},
tokenAmount: originalApproveAmount,
customTokenAmount:
originalApproveAmount === approveAmount ? null : approveAmount,
tokenBalance,
tokenSymbol: selectedFromToken.symbol,
requiredMinimum: calcTokenAmount(
usedQuote.sourceAmount,
selectedFromToken.decimals,
),
}),
);
};
2020-10-06 20:28:38 +02:00
const nonGasFeeIsPositive = new BigNumber(nonGasFee, 16).gt(0);
const approveGasTotal = calcGasTotal(
approveGas || '0x0',
networkAndAccountSupports1559 ? baseAndPriorityFeePerGas : gasPrice,
);
2020-11-03 00:41:28 +01:00
const extraNetworkFeeTotalInHexWEI = new BigNumber(nonGasFee, 16)
.plus(approveGasTotal, 16)
.toString(16);
const extraNetworkFeeTotalInEth = getValueFromWeiHex({
value: extraNetworkFeeTotalInHexWEI,
toDenomination: 'ETH',
numberOfDecimals: 4,
});
let extraInfoRowLabel = '';
if (approveGas && nonGasFeeIsPositive) {
extraInfoRowLabel = t('approvalAndAggregatorTxFeeCost');
} else if (approveGas) {
extraInfoRowLabel = t('approvalTxGasCost');
} else if (nonGasFeeIsPositive) {
extraInfoRowLabel = t('aggregatorFeeCost');
}
const onFeeCardMaxRowClick = () => {
networkAndAccountSupports1559
? setShowEditGasPopover(true)
: dispatch(
showModal({
name: 'CUSTOMIZE_METASWAP_GAS',
value: tradeValue,
customGasLimitMessage: approveGas
? t('extraApprovalGas', [hexToDecimal(approveGas)])
: '',
customTotalSupplement: approveGasTotal,
extraInfoRow: extraInfoRowLabel
? {
label: extraInfoRowLabel,
value: `${extraNetworkFeeTotalInEth} ${nativeCurrencySymbol}`,
}
: null,
initialGasPrice: gasPrice,
initialGasLimit: maxGasLimit,
minimumGasLimit: new BigNumber(nonCustomMaxGasLimit, 16).toNumber(),
}),
);
};
2020-10-06 20:28:38 +02:00
const tokenApprovalTextComponent = (
2020-11-03 00:41:28 +01:00
<span key="swaps-view-quote-approve-symbol-1" className="view-quote__bold">
2020-10-06 20:28:38 +02:00
{sourceTokenSymbol}
</span>
);
2020-10-06 20:28:38 +02:00
const actionableBalanceErrorMessage = tokenBalanceUnavailable
? t('swapTokenBalanceUnavailable', [sourceTokenSymbol])
: t('swapApproveNeedMoreTokens', [
<span key="swapApproveNeedMoreTokens-1" className="view-quote__bold">
{tokenBalanceNeeded || ethBalanceNeeded}
</span>,
tokenBalanceNeeded && !(sourceTokenSymbol === defaultSwapsToken.symbol)
? sourceTokenSymbol
: defaultSwapsToken.symbol,
]);
2020-10-06 20:28:38 +02:00
// 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 === GAS_RECOMMENDATIONS.MEDIUM &&
priceSlippageBucket === GAS_RECOMMENDATIONS.HIGH
) {
setAcknowledgedPriceDifference(false);
}
}, [
priceSlippageBucket,
acknowledgedPriceDifference,
lastPriceDifferenceBucket,
]);
let viewQuotePriceDifferenceComponent = 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 ||
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) {
viewQuotePriceDifferenceComponent = (
<ViewQuotePriceDifference
usedQuote={usedQuote}
sourceTokenValue={sourceTokenValue}
destinationTokenValue={destinationTokenValue}
priceSlippageFromSource={priceSlippageFromSource}
priceSlippageFromDestination={priceSlippageFromDestination}
priceDifferencePercentage={priceDifferencePercentage}
priceSlippageUnknownFiatValue={priceSlippageUnknownFiatValue}
onAcknowledgementClick={() => {
setAcknowledgedPriceDifference(true);
}}
acknowledged={acknowledgedPriceDifference}
/>
);
}
const disableSubmissionDueToPriceWarning =
shouldShowPriceDifferenceWarning && !acknowledgedPriceDifference;
const isShowingWarning =
showInsufficientWarning || shouldShowPriceDifferenceWarning;
const onCloseEditGasPopover = () => {
setShowEditGasPopover(false);
};
2021-09-15 15:13:18 +02:00
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) {
viewQuotePageLoadedEvent();
}
}, [dispatch, viewQuotePageLoadedEvent, reviewSwapClickedTimestamp]);
2020-10-06 20:28:38 +02:00
return (
<div className="view-quote">
<div
className={classnames('view-quote__content', {
'view-quote__content_modal': disableSubmissionDueToPriceWarning,
})}
>
2020-10-06 20:28:38 +02:00
{selectQuotePopoverShown && (
<SelectQuotePopover
quoteDataRows={renderablePopoverData}
onClose={() => setSelectQuotePopoverShown(false)}
onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))}
2020-10-06 20:28:38 +02:00
swapToSymbol={destinationTokenSymbol}
initialAggId={usedQuote.aggregator}
onQuoteDetailsIsOpened={quoteDetailsOpened}
2020-10-06 20:28:38 +02:00
/>
)}
{showEditGasPopover && networkAndAccountSupports1559 && (
<EditGasPopover
transaction={{
userFeeLevel: swapsUserFeeLevel || GAS_RECOMMENDATIONS.HIGH,
txParams: {
maxFeePerGas,
maxPriorityFeePerGas,
gas: maxGasLimit,
},
}}
minimumGasLimit={usedGasLimit}
defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH}
mode={EDIT_GAS_MODES.SWAPS}
confirmButtonText={t('submit')}
onClose={onCloseEditGasPopover}
/>
)}
<div
className={classnames('view-quote__warning-wrapper', {
'view-quote__warning-wrapper--thin': !isShowingWarning,
})}
>
{viewQuotePriceDifferenceComponent}
{(showInsufficientWarning || tokenBalanceUnavailable) && (
2020-10-06 20:28:38 +02:00
<ActionableMessage
message={actionableBalanceErrorMessage}
2020-10-06 20:28:38 +02:00
onClose={() => setWarningHidden(true)}
/>
)}
</div>
<div className="view-quote__countdown-timer-container">
2020-10-06 20:28:38 +02:00
<CountdownTimer
timeStarted={quotesLastFetched}
warningTime="0:30"
infoTooltipLabelKey="swapQuotesAreRefreshed"
labelKey="swapNewQuoteIn"
/>
</div>
<MainQuoteSummary
sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)}
sourceDecimals={sourceTokenDecimals}
sourceSymbol={sourceTokenSymbol}
destinationValue={calcTokenValue(
destinationTokenValue,
destinationTokenDecimals,
)}
destinationDecimals={destinationTokenDecimals}
destinationSymbol={destinationTokenSymbol}
sourceIconUrl={sourceTokenIconUrl}
destinationIconUrl={destinationIconUrl}
/>
2020-10-06 20:28:38 +02:00
<div
className={classnames('view-quote__fee-card-container', {
2020-11-03 00:41:28 +01:00
'view-quote__fee-card-container--three-rows':
approveTxParams && (!balanceError || warningHidden),
2020-10-06 20:28:38 +02:00
})}
>
<FeeCard
2020-11-03 00:41:28 +01:00
primaryFee={{
2020-10-06 20:28:38 +02:00
fee: feeInEth,
maxFee: maxFeeInEth,
2020-11-03 00:41:28 +01:00
}}
secondaryFee={{
2020-10-06 20:28:38 +02:00
fee: feeInFiat,
maxFee: maxFeeInFiat,
2020-11-03 00:41:28 +01:00
}}
onFeeCardMaxRowClick={onFeeCardMaxRowClick}
hideTokenApprovalRow={
!approveTxParams || (balanceError && !warningHidden)
}
tokenApprovalTextComponent={tokenApprovalTextComponent}
2020-10-14 19:12:35 +02:00
tokenApprovalSourceTokenSymbol={sourceTokenSymbol}
onTokenApprovalClick={onFeeCardTokenApprovalClick}
metaMaskFee={String(metaMaskFee)}
isBestQuote={isBestQuote}
numberOfQuotes={Object.values(quotes).length}
onQuotesClick={() => {
allAvailableQuotesOpened();
setSelectQuotePopoverShown(true);
}}
tokenConversionRate={
destinationTokenSymbol === defaultSwapsToken.symbol
? 1
: memoizedTokenConversionRates[destinationToken.address]
}
chainId={chainId}
networkAndAccountSupports1559={networkAndAccountSupports1559}
maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI(maxPriorityFeePerGas)}
maxFeePerGasDecGWEI={hexWEIToDecGWEI(maxFeePerGas)}
2020-10-06 20:28:38 +02:00
/>
</div>
</div>
<SwapsFooter
onSubmit={() => {
setSubmitClicked(true);
2020-10-06 20:28:38 +02:00
if (!balanceError) {
dispatch(signAndSendTransactions(history, metaMetricsEvent));
} else if (destinationToken.symbol === defaultSwapsToken.symbol) {
history.push(DEFAULT_ROUTE);
2020-10-06 20:28:38 +02:00
} else {
history.push(`${ASSET_ROUTE}/${destinationToken.address}`);
2020-10-06 20:28:38 +02:00
}
}}
submitText={t('swap')}
onCancel={async () => await dispatch(navigateBackToBuildQuote(history))}
disabled={
submitClicked ||
balanceError ||
tokenBalanceUnavailable ||
disableSubmissionDueToPriceWarning ||
(networkAndAccountSupports1559 &&
baseAndPriorityFeePerGas === undefined) ||
(!networkAndAccountSupports1559 &&
(gasPrice === null || gasPrice === undefined))
}
className={isShowingWarning && 'view-quote__thin-swaps-footer'}
2020-10-06 20:28:38 +02:00
showTopBorder
/>
</div>
);
2020-10-06 20:28:38 +02:00
}