2022-03-25 14:21:29 +01:00
|
|
|
import React, {
|
|
|
|
useEffect,
|
|
|
|
useRef,
|
|
|
|
useContext,
|
|
|
|
useState,
|
|
|
|
useCallback,
|
|
|
|
} from 'react';
|
2021-12-01 17:25:09 +01:00
|
|
|
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
Switch,
|
|
|
|
Route,
|
|
|
|
useLocation,
|
|
|
|
useHistory,
|
|
|
|
Redirect,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from 'react-router-dom';
|
2021-12-01 17:25:09 +01:00
|
|
|
import { shuffle, isEqual } from 'lodash';
|
2023-06-15 20:17:21 +02:00
|
|
|
import classnames from 'classnames';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { I18nContext } from '../../contexts/i18n';
|
2023-06-15 20:17:21 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
getSelectedAccount,
|
2021-01-07 17:59:32 +01:00
|
|
|
getCurrentChainId,
|
2021-03-18 11:20:06 +01:00
|
|
|
getIsSwapsChain,
|
2021-05-13 21:26:08 +02:00
|
|
|
isHardwareWallet,
|
|
|
|
getHardwareWalletType,
|
2021-09-09 22:56:27 +02:00
|
|
|
getTokenList,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../selectors/selectors';
|
2020-10-06 20:28:38 +02:00
|
|
|
import {
|
|
|
|
getQuotes,
|
|
|
|
clearSwapsState,
|
|
|
|
getTradeTxId,
|
|
|
|
getApproveTxId,
|
|
|
|
getFetchingQuotes,
|
|
|
|
setTopAssets,
|
|
|
|
getFetchParams,
|
|
|
|
setAggregatorMetadata,
|
|
|
|
getAggregatorMetadata,
|
|
|
|
getBackgroundSwapRouteState,
|
|
|
|
getSwapsErrorKey,
|
2021-07-09 17:24:00 +02:00
|
|
|
getSwapsFeatureIsLive,
|
2020-10-06 20:28:38 +02:00
|
|
|
prepareToLeaveSwaps,
|
|
|
|
fetchAndSetSwapsGasPriceInfo,
|
2022-02-18 17:48:38 +01:00
|
|
|
fetchSwapsLivenessAndFeatureFlags,
|
2021-09-15 15:13:18 +02:00
|
|
|
getReviewSwapClickedTimestamp,
|
2022-02-18 17:48:38 +01:00
|
|
|
getPendingSmartTransactions,
|
|
|
|
getSmartTransactionsOptInStatus,
|
|
|
|
getSmartTransactionsEnabled,
|
2022-03-23 20:28:26 +01:00
|
|
|
getCurrentSmartTransactionsEnabled,
|
2022-02-18 17:48:38 +01:00
|
|
|
getCurrentSmartTransactionsError,
|
2021-12-07 04:51:26 +01:00
|
|
|
navigateBackToBuildQuote,
|
2023-06-15 20:17:21 +02:00
|
|
|
getSwapRedesignEnabled,
|
|
|
|
setTransactionSettingsOpened,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../ducks/swaps/swaps';
|
2021-08-03 00:52:18 +02:00
|
|
|
import {
|
|
|
|
checkNetworkAndAccountSupports1559,
|
|
|
|
currentNetworkTxListSelector,
|
|
|
|
} from '../../selectors';
|
2020-10-06 20:28:38 +02:00
|
|
|
import {
|
2021-05-06 16:14:42 +02:00
|
|
|
AWAITING_SIGNATURES_ROUTE,
|
2020-10-06 20:28:38 +02:00
|
|
|
AWAITING_SWAP_ROUTE,
|
2022-02-18 17:48:38 +01:00
|
|
|
SMART_TRANSACTION_STATUS_ROUTE,
|
2020-10-06 20:28:38 +02:00
|
|
|
BUILD_QUOTE_ROUTE,
|
|
|
|
VIEW_QUOTE_ROUTE,
|
|
|
|
LOADING_QUOTES_ROUTE,
|
|
|
|
SWAPS_ERROR_ROUTE,
|
|
|
|
DEFAULT_ROUTE,
|
|
|
|
SWAPS_MAINTENANCE_ROUTE,
|
2023-06-15 20:17:21 +02:00
|
|
|
PREPARE_SWAP_ROUTE,
|
|
|
|
SWAPS_NOTIFICATION_ROUTE,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../helpers/constants/routes';
|
2020-10-06 20:28:38 +02:00
|
|
|
import {
|
|
|
|
ERROR_FETCHING_QUOTES,
|
|
|
|
QUOTES_NOT_AVAILABLE_ERROR,
|
|
|
|
SWAP_FAILED_ERROR,
|
2021-05-13 21:49:00 +02:00
|
|
|
CONTRACT_DATA_DISABLED_ERROR,
|
2020-10-06 20:28:38 +02:00
|
|
|
OFFLINE_FOR_MAINTENANCE,
|
2021-04-28 21:53:59 +02:00
|
|
|
} from '../../../shared/constants/swaps';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
resetBackgroundSwapsState,
|
|
|
|
setSwapsTokens,
|
|
|
|
setBackgroundSwapRouteState,
|
|
|
|
setSwapsErrorKey,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../store/actions';
|
2021-08-03 00:52:18 +02:00
|
|
|
|
2021-07-30 13:35:30 +02:00
|
|
|
import { useGasFeeEstimates } from '../../hooks/useGasFeeEstimates';
|
2021-02-04 19:15:23 +01:00
|
|
|
import FeatureToggledRoute from '../../helpers/higher-order-components/feature-toggled-route';
|
2023-04-03 17:31:04 +02:00
|
|
|
import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics';
|
2023-01-18 15:47:29 +01:00
|
|
|
import { TransactionStatus } from '../../../shared/constants/transaction';
|
2022-04-01 21:11:12 +02:00
|
|
|
import { MetaMetricsContext } from '../../contexts/metametrics';
|
2022-09-16 21:05:21 +02:00
|
|
|
import { getSwapsTokensReceivedFromTxMeta } from '../../../shared/lib/transactions-controller-utils';
|
2023-06-15 20:17:21 +02:00
|
|
|
import { Icon, IconName, IconSize } from '../../components/component-library';
|
|
|
|
import Box from '../../components/ui/box';
|
|
|
|
import {
|
|
|
|
DISPLAY,
|
|
|
|
JustifyContent,
|
|
|
|
IconColor,
|
|
|
|
FRACTIONS,
|
|
|
|
} from '../../helpers/constants/design-system';
|
2020-11-03 00:41:28 +01:00
|
|
|
import {
|
|
|
|
fetchTokens,
|
|
|
|
fetchTopAssets,
|
|
|
|
fetchAggregatorMetadata,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from './swaps.util';
|
2021-05-06 16:14:42 +02:00
|
|
|
import AwaitingSignatures from './awaiting-signatures';
|
2022-02-18 17:48:38 +01:00
|
|
|
import SmartTransactionStatus from './smart-transaction-status';
|
2021-02-04 19:15:23 +01:00
|
|
|
import AwaitingSwap from './awaiting-swap';
|
|
|
|
import LoadingQuote from './loading-swaps-quotes';
|
|
|
|
import BuildQuote from './build-quote';
|
2023-06-15 20:17:21 +02:00
|
|
|
import PrepareSwapPage from './prepare-swap-page/prepare-swap-page';
|
|
|
|
import NotificationPage from './notification-page/notification-page';
|
2021-02-04 19:15:23 +01:00
|
|
|
import ViewQuote from './view-quote';
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
export default function Swap() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const t = useContext(I18nContext);
|
|
|
|
const history = useHistory();
|
|
|
|
const dispatch = useDispatch();
|
2022-03-25 14:21:29 +01:00
|
|
|
const trackEvent = useContext(MetaMetricsContext);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const { pathname } = useLocation();
|
|
|
|
const isAwaitingSwapRoute = pathname === AWAITING_SWAP_ROUTE;
|
2021-05-06 16:14:42 +02:00
|
|
|
const isAwaitingSignaturesRoute = pathname === AWAITING_SIGNATURES_ROUTE;
|
2021-02-04 19:15:23 +01:00
|
|
|
const isSwapsErrorRoute = pathname === SWAPS_ERROR_ROUTE;
|
|
|
|
const isLoadingQuotesRoute = pathname === LOADING_QUOTES_ROUTE;
|
2022-02-18 17:48:38 +01:00
|
|
|
const isSmartTransactionStatusRoute =
|
|
|
|
pathname === SMART_TRANSACTION_STATUS_ROUTE;
|
2021-12-07 04:51:26 +01:00
|
|
|
const isViewQuoteRoute = pathname === VIEW_QUOTE_ROUTE;
|
2023-06-15 20:17:21 +02:00
|
|
|
const isPrepareSwapRoute = pathname === PREPARE_SWAP_ROUTE;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2022-03-23 20:28:26 +01:00
|
|
|
const [currentStxErrorTracked, setCurrentStxErrorTracked] = useState(false);
|
2021-12-01 17:25:09 +01:00
|
|
|
const fetchParams = useSelector(getFetchParams, isEqual);
|
2021-03-03 16:46:19 +01:00
|
|
|
const { destinationTokenInfo = {} } = fetchParams?.metaData || {};
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const routeState = useSelector(getBackgroundSwapRouteState);
|
2021-12-01 17:25:09 +01:00
|
|
|
const selectedAccount = useSelector(getSelectedAccount, shallowEqual);
|
|
|
|
const quotes = useSelector(getQuotes, isEqual);
|
|
|
|
const txList = useSelector(currentNetworkTxListSelector, shallowEqual);
|
2021-02-04 19:15:23 +01:00
|
|
|
const tradeTxId = useSelector(getTradeTxId);
|
|
|
|
const approveTxId = useSelector(getApproveTxId);
|
2021-12-01 17:25:09 +01:00
|
|
|
const aggregatorMetadata = useSelector(getAggregatorMetadata, shallowEqual);
|
2021-02-04 19:15:23 +01:00
|
|
|
const fetchingQuotes = useSelector(getFetchingQuotes);
|
|
|
|
let swapsErrorKey = useSelector(getSwapsErrorKey);
|
2021-07-09 17:24:00 +02:00
|
|
|
const swapsEnabled = useSelector(getSwapsFeatureIsLive);
|
2021-03-18 11:20:06 +01:00
|
|
|
const chainId = useSelector(getCurrentChainId);
|
|
|
|
const isSwapsChain = useSelector(getIsSwapsChain);
|
2021-08-03 00:52:18 +02:00
|
|
|
const networkAndAccountSupports1559 = useSelector(
|
|
|
|
checkNetworkAndAccountSupports1559,
|
|
|
|
);
|
2022-08-10 21:10:41 +02:00
|
|
|
const tokenList = useSelector(getTokenList, isEqual);
|
|
|
|
const shuffledTokensList = shuffle(Object.values(tokenList));
|
2021-09-15 15:13:18 +02:00
|
|
|
const reviewSwapClickedTimestamp = useSelector(getReviewSwapClickedTimestamp);
|
2022-02-18 17:48:38 +01:00
|
|
|
const pendingSmartTransactions = useSelector(getPendingSmartTransactions);
|
2021-09-15 15:13:18 +02:00
|
|
|
const reviewSwapClicked = Boolean(reviewSwapClickedTimestamp);
|
2022-02-18 17:48:38 +01:00
|
|
|
const smartTransactionsOptInStatus = useSelector(
|
|
|
|
getSmartTransactionsOptInStatus,
|
|
|
|
);
|
|
|
|
const smartTransactionsEnabled = useSelector(getSmartTransactionsEnabled);
|
2022-03-23 20:28:26 +01:00
|
|
|
const currentSmartTransactionsEnabled = useSelector(
|
|
|
|
getCurrentSmartTransactionsEnabled,
|
|
|
|
);
|
2023-06-15 20:17:21 +02:00
|
|
|
const swapRedesignEnabled = useSelector(getSwapRedesignEnabled);
|
2022-02-18 17:48:38 +01:00
|
|
|
const currentSmartTransactionsError = useSelector(
|
|
|
|
getCurrentSmartTransactionsError,
|
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2022-05-24 18:30:46 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const leaveSwaps = async () => {
|
|
|
|
await dispatch(prepareToLeaveSwaps());
|
|
|
|
// We need to wait until "prepareToLeaveSwaps" is done, because otherwise
|
|
|
|
// a user would be redirected from DEFAULT_ROUTE back to Swaps.
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!isSwapsChain) {
|
|
|
|
leaveSwaps();
|
|
|
|
}
|
|
|
|
}, [isSwapsChain, dispatch, history]);
|
|
|
|
|
|
|
|
// This will pre-load gas fees before going to the View Quote page.
|
|
|
|
useGasFeeEstimates();
|
2021-07-30 13:35:30 +02:00
|
|
|
|
2022-07-31 20:26:40 +02:00
|
|
|
const { balance: ethBalance, address: selectedAccountAddress } =
|
|
|
|
selectedAccount;
|
2021-03-03 16:46:19 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const approveTxData =
|
2021-02-04 19:15:23 +01:00
|
|
|
approveTxId && txList.find(({ id }) => approveTxId === id);
|
|
|
|
const tradeTxData = tradeTxId && txList.find(({ id }) => tradeTxId === id);
|
2020-11-03 00:41:28 +01:00
|
|
|
const tokensReceived =
|
|
|
|
tradeTxData?.txReceipt &&
|
|
|
|
getSwapsTokensReceivedFromTxMeta(
|
|
|
|
destinationTokenInfo?.symbol,
|
|
|
|
tradeTxData,
|
|
|
|
destinationTokenInfo?.address,
|
|
|
|
selectedAccountAddress,
|
|
|
|
destinationTokenInfo?.decimals,
|
|
|
|
approveTxData,
|
2021-03-18 11:20:06 +01:00
|
|
|
chainId,
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2023-01-18 15:47:29 +01:00
|
|
|
const tradeConfirmed = tradeTxData?.status === TransactionStatus.confirmed;
|
2020-11-03 00:41:28 +01:00
|
|
|
const approveError =
|
2023-01-18 15:47:29 +01:00
|
|
|
approveTxData?.status === TransactionStatus.failed ||
|
2021-02-04 19:15:23 +01:00
|
|
|
approveTxData?.txReceipt?.status === '0x0';
|
2020-11-03 00:41:28 +01:00
|
|
|
const tradeError =
|
2023-01-18 15:47:29 +01:00
|
|
|
tradeTxData?.status === TransactionStatus.failed ||
|
2021-02-04 19:15:23 +01:00
|
|
|
tradeTxData?.txReceipt?.status === '0x0';
|
|
|
|
const conversionError = approveError || tradeError;
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-05-13 21:49:00 +02:00
|
|
|
if (conversionError && swapsErrorKey !== CONTRACT_DATA_DISABLED_ERROR) {
|
2021-02-04 19:15:23 +01:00
|
|
|
swapsErrorKey = SWAP_FAILED_ERROR;
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
|
|
|
|
2021-07-09 17:24:00 +02:00
|
|
|
// eslint-disable-next-line
|
2020-10-06 20:28:38 +02:00
|
|
|
useEffect(() => {
|
2022-05-24 18:30:46 +02:00
|
|
|
if (!isSwapsChain) {
|
|
|
|
return undefined;
|
|
|
|
}
|
2021-11-30 19:56:28 +01:00
|
|
|
fetchTokens(chainId)
|
|
|
|
.then((tokens) => {
|
|
|
|
dispatch(setSwapsTokens(tokens));
|
|
|
|
})
|
|
|
|
.catch((error) => console.error(error));
|
|
|
|
fetchTopAssets(chainId).then((topAssets) => {
|
|
|
|
dispatch(setTopAssets(topAssets));
|
|
|
|
});
|
|
|
|
fetchAggregatorMetadata(chainId).then((newAggregatorMetadata) => {
|
|
|
|
dispatch(setAggregatorMetadata(newAggregatorMetadata));
|
|
|
|
});
|
|
|
|
if (!networkAndAccountSupports1559) {
|
|
|
|
dispatch(fetchAndSetSwapsGasPriceInfo(chainId));
|
2021-07-09 17:24:00 +02:00
|
|
|
}
|
2021-11-30 19:56:28 +01:00
|
|
|
return () => {
|
|
|
|
dispatch(prepareToLeaveSwaps());
|
|
|
|
};
|
2022-05-24 18:30:46 +02:00
|
|
|
}, [dispatch, chainId, networkAndAccountSupports1559, isSwapsChain]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-05-13 21:26:08 +02:00
|
|
|
const hardwareWalletUsed = useSelector(isHardwareWallet);
|
|
|
|
const hardwareWalletType = useSelector(getHardwareWalletType);
|
2022-03-25 14:21:29 +01:00
|
|
|
const trackExitedSwapsEvent = () => {
|
|
|
|
trackEvent({
|
|
|
|
event: 'Exited Swaps',
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Swaps,
|
2022-03-25 14:21:29 +01:00
|
|
|
sensitiveProperties: {
|
|
|
|
token_from: fetchParams?.sourceTokenInfo?.symbol,
|
|
|
|
token_from_amount: fetchParams?.value,
|
|
|
|
request_type: fetchParams?.balanceError,
|
|
|
|
token_to: fetchParams?.destinationTokenInfo?.symbol,
|
|
|
|
slippage: fetchParams?.slippage,
|
|
|
|
custom_slippage: fetchParams?.slippage !== 2,
|
|
|
|
current_screen: pathname.match(/\/swaps\/(.+)/u)[1],
|
|
|
|
is_hardware_wallet: hardwareWalletUsed,
|
|
|
|
hardware_wallet_type: hardwareWalletType,
|
|
|
|
stx_enabled: smartTransactionsEnabled,
|
|
|
|
current_stx_enabled: currentSmartTransactionsEnabled,
|
|
|
|
stx_user_opt_in: smartTransactionsOptInStatus,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
2021-02-04 19:15:23 +01:00
|
|
|
const exitEventRef = useRef();
|
2020-10-06 20:28:38 +02:00
|
|
|
useEffect(() => {
|
|
|
|
exitEventRef.current = () => {
|
2022-03-25 14:21:29 +01:00
|
|
|
trackExitedSwapsEvent();
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
|
|
|
});
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-02-18 17:48:38 +01:00
|
|
|
const fetchSwapsLivenessAndFeatureFlagsWrapper = async () => {
|
|
|
|
await dispatch(fetchSwapsLivenessAndFeatureFlags());
|
2021-04-14 09:16:27 +02:00
|
|
|
};
|
2022-02-18 17:48:38 +01:00
|
|
|
fetchSwapsLivenessAndFeatureFlagsWrapper();
|
2020-10-06 20:28:38 +02:00
|
|
|
return () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
exitEventRef.current();
|
|
|
|
};
|
2021-04-14 09:16:27 +02:00
|
|
|
}, [dispatch]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-09-15 15:13:18 +02:00
|
|
|
// If there is a swapsErrorKey and reviewSwapClicked is false, there was an error in silent quotes prefetching
|
|
|
|
// and we don't want to show the error page in that case, because another API call for quotes can be successful.
|
|
|
|
if (swapsErrorKey && !isSwapsErrorRoute && reviewSwapClicked) {
|
2021-02-04 19:15:23 +01:00
|
|
|
history.push(SWAPS_ERROR_ROUTE);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-09-15 15:13:18 +02:00
|
|
|
}, [history, swapsErrorKey, isSwapsErrorRoute, reviewSwapClicked]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const beforeUnloadEventAddedRef = useRef();
|
2020-10-06 20:28:38 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const fn = () => {
|
|
|
|
if (isLoadingQuotesRoute) {
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(prepareToLeaveSwaps());
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return null;
|
|
|
|
};
|
2020-10-06 20:28:38 +02:00
|
|
|
if (isLoadingQuotesRoute && !beforeUnloadEventAddedRef.current) {
|
2021-02-04 19:15:23 +01:00
|
|
|
beforeUnloadEventAddedRef.current = true;
|
|
|
|
window.addEventListener('beforeunload', fn);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return () => window.removeEventListener('beforeunload', fn);
|
|
|
|
}, [dispatch, isLoadingQuotesRoute]);
|
2020-10-06 20:28:38 +02:00
|
|
|
|
2022-03-25 14:21:29 +01:00
|
|
|
const trackErrorStxEvent = useCallback(() => {
|
|
|
|
trackEvent({
|
|
|
|
event: 'Error Smart Transactions',
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Swaps,
|
2022-03-25 14:21:29 +01:00
|
|
|
sensitiveProperties: {
|
|
|
|
token_from: fetchParams?.sourceTokenInfo?.symbol,
|
|
|
|
token_from_amount: fetchParams?.value,
|
|
|
|
request_type: fetchParams?.balanceError,
|
|
|
|
token_to: fetchParams?.destinationTokenInfo?.symbol,
|
|
|
|
slippage: fetchParams?.slippage,
|
|
|
|
custom_slippage: fetchParams?.slippage !== 2,
|
|
|
|
current_screen: pathname.match(/\/swaps\/(.+)/u)[1],
|
|
|
|
is_hardware_wallet: hardwareWalletUsed,
|
|
|
|
hardware_wallet_type: hardwareWalletType,
|
|
|
|
stx_enabled: smartTransactionsEnabled,
|
|
|
|
current_stx_enabled: currentSmartTransactionsEnabled,
|
|
|
|
stx_user_opt_in: smartTransactionsOptInStatus,
|
|
|
|
stx_error: currentSmartTransactionsError,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}, [
|
|
|
|
currentSmartTransactionsError,
|
|
|
|
currentSmartTransactionsEnabled,
|
|
|
|
trackEvent,
|
|
|
|
fetchParams?.balanceError,
|
|
|
|
fetchParams?.destinationTokenInfo?.symbol,
|
|
|
|
fetchParams?.slippage,
|
|
|
|
fetchParams?.sourceTokenInfo?.symbol,
|
|
|
|
fetchParams?.value,
|
|
|
|
hardwareWalletType,
|
|
|
|
hardwareWalletUsed,
|
|
|
|
pathname,
|
|
|
|
smartTransactionsEnabled,
|
|
|
|
smartTransactionsOptInStatus,
|
|
|
|
]);
|
|
|
|
|
2022-02-18 17:48:38 +01:00
|
|
|
useEffect(() => {
|
2022-03-23 20:28:26 +01:00
|
|
|
if (currentSmartTransactionsError && !currentStxErrorTracked) {
|
|
|
|
setCurrentStxErrorTracked(true);
|
2022-03-25 14:21:29 +01:00
|
|
|
trackErrorStxEvent();
|
2022-02-18 17:48:38 +01:00
|
|
|
}
|
2022-03-25 14:21:29 +01:00
|
|
|
}, [
|
|
|
|
currentSmartTransactionsError,
|
|
|
|
trackErrorStxEvent,
|
|
|
|
currentStxErrorTracked,
|
|
|
|
]);
|
2022-02-18 17:48:38 +01:00
|
|
|
|
2021-03-18 11:20:06 +01:00
|
|
|
if (!isSwapsChain) {
|
2022-05-24 18:30:46 +02:00
|
|
|
// A user is being redirected outside of Swaps via the async "leaveSwaps" function above. In the meantime
|
|
|
|
// we have to prevent the code below this condition, which wouldn't work on an unsupported chain.
|
|
|
|
return <></>;
|
2021-01-07 17:59:32 +01:00
|
|
|
}
|
|
|
|
|
2023-06-15 20:17:21 +02:00
|
|
|
const redirectToDefaultRoute = async () => {
|
|
|
|
dispatch(clearSwapsState());
|
|
|
|
await dispatch(resetBackgroundSwapsState());
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
};
|
|
|
|
|
2020-10-06 20:28:38 +02:00
|
|
|
return (
|
|
|
|
<div className="swaps">
|
|
|
|
<div className="swaps__container">
|
|
|
|
<div className="swaps__header">
|
2023-06-15 20:17:21 +02:00
|
|
|
{!swapRedesignEnabled && (
|
|
|
|
<div
|
|
|
|
className="swaps__header-edit"
|
|
|
|
onClick={async () => {
|
|
|
|
await dispatch(navigateBackToBuildQuote(history));
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{isViewQuoteRoute && t('edit')}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{swapRedesignEnabled && (
|
|
|
|
<Box
|
|
|
|
display={DISPLAY.FLEX}
|
|
|
|
justifyContent={JustifyContent.center}
|
|
|
|
marginLeft={4}
|
|
|
|
width={FRACTIONS.ONE_TWELFTH}
|
|
|
|
tabIndex="0"
|
|
|
|
onKeyUp={(e) => {
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
redirectToDefaultRoute();
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{!isAwaitingSwapRoute &&
|
|
|
|
!isAwaitingSignaturesRoute &&
|
|
|
|
!isSmartTransactionStatusRoute && (
|
|
|
|
<Icon
|
|
|
|
name={IconName.Arrow2Left}
|
|
|
|
size={IconSize.Lg}
|
|
|
|
color={IconColor.iconAlternative}
|
|
|
|
onClick={redirectToDefaultRoute}
|
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
|
title={t('cancel')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Box>
|
|
|
|
)}
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="swaps__title">{t('swap')}</div>
|
2023-06-15 20:17:21 +02:00
|
|
|
{!swapRedesignEnabled && (
|
|
|
|
<div
|
|
|
|
className="swaps__header-cancel"
|
|
|
|
onClick={async () => {
|
|
|
|
dispatch(clearSwapsState());
|
|
|
|
await dispatch(resetBackgroundSwapsState());
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{!isAwaitingSwapRoute &&
|
|
|
|
!isAwaitingSignaturesRoute &&
|
|
|
|
!isSmartTransactionStatusRoute &&
|
|
|
|
t('cancel')}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{swapRedesignEnabled && (
|
|
|
|
<Box
|
|
|
|
display={DISPLAY.FLEX}
|
|
|
|
justifyContent={JustifyContent.center}
|
|
|
|
marginRight={4}
|
|
|
|
width={FRACTIONS.ONE_TWELFTH}
|
|
|
|
tabIndex="0"
|
|
|
|
onKeyUp={(e) => {
|
|
|
|
if (e.key === 'Enter') {
|
|
|
|
dispatch(setTransactionSettingsOpened(true));
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{isPrepareSwapRoute && (
|
|
|
|
<Icon
|
|
|
|
name={IconName.Setting}
|
|
|
|
size={IconSize.Lg}
|
|
|
|
color={IconColor.iconAlternative}
|
|
|
|
onClick={() => {
|
|
|
|
dispatch(setTransactionSettingsOpened(true));
|
|
|
|
}}
|
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
|
title={t('transactionSettings')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Box>
|
|
|
|
)}
|
2020-10-06 20:28:38 +02:00
|
|
|
</div>
|
2023-06-15 20:17:21 +02:00
|
|
|
<div
|
|
|
|
className={classnames('swaps__content', {
|
|
|
|
'swaps__content--redesign-enabled': swapRedesignEnabled,
|
|
|
|
})}
|
|
|
|
>
|
2020-10-06 20:28:38 +02:00
|
|
|
<Switch>
|
|
|
|
<FeatureToggledRoute
|
|
|
|
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
|
|
|
|
flag={swapsEnabled}
|
|
|
|
path={BUILD_QUOTE_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
2023-06-15 20:17:21 +02:00
|
|
|
if (swapRedesignEnabled) {
|
|
|
|
return <Redirect to={{ pathname: PREPARE_SWAP_ROUTE }} />;
|
|
|
|
}
|
2020-10-06 20:28:38 +02:00
|
|
|
if (tradeTxData && !conversionError) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: AWAITING_SWAP_ROUTE }} />;
|
2021-05-10 19:18:37 +02:00
|
|
|
} else if (tradeTxData && routeState) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: SWAPS_ERROR_ROUTE }} />;
|
2020-10-06 20:28:38 +02:00
|
|
|
} else if (routeState === 'loading' && aggregatorMetadata) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: LOADING_QUOTES_ROUTE }} />;
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<BuildQuote
|
|
|
|
ethBalance={ethBalance}
|
|
|
|
selectedAccountAddress={selectedAccountAddress}
|
2022-08-10 03:26:25 +02:00
|
|
|
shuffledTokensList={shuffledTokensList}
|
2020-10-06 20:28:38 +02:00
|
|
|
/>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
2023-06-15 20:17:21 +02:00
|
|
|
<FeatureToggledRoute
|
|
|
|
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
|
|
|
|
flag={swapsEnabled}
|
|
|
|
path={PREPARE_SWAP_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
|
|
|
if (!swapRedesignEnabled) {
|
|
|
|
return <Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<PrepareSwapPage
|
|
|
|
ethBalance={ethBalance}
|
|
|
|
selectedAccountAddress={selectedAccountAddress}
|
|
|
|
shuffledTokensList={shuffledTokensList}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
/>
|
2020-10-06 20:28:38 +02:00
|
|
|
<FeatureToggledRoute
|
|
|
|
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
|
|
|
|
flag={swapsEnabled}
|
|
|
|
path={VIEW_QUOTE_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
2022-02-18 17:48:38 +01:00
|
|
|
if (
|
|
|
|
pendingSmartTransactions.length > 0 &&
|
|
|
|
routeState === 'smartTransactionStatus'
|
|
|
|
) {
|
|
|
|
return (
|
|
|
|
<Redirect
|
|
|
|
to={{ pathname: SMART_TRANSACTION_STATUS_ROUTE }}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2023-06-15 20:17:21 +02:00
|
|
|
if (swapRedesignEnabled) {
|
|
|
|
return <Redirect to={{ pathname: PREPARE_SWAP_ROUTE }} />;
|
|
|
|
}
|
2020-10-06 20:28:38 +02:00
|
|
|
if (Object.values(quotes).length) {
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<ViewQuote numberOfQuotes={Object.values(quotes).length} />
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
} else if (fetchParams) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: SWAPS_ERROR_ROUTE }} />;
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />;
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={SWAPS_ERROR_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
|
|
|
if (swapsErrorKey) {
|
|
|
|
return (
|
|
|
|
<AwaitingSwap
|
|
|
|
swapComplete={false}
|
|
|
|
errorKey={swapsErrorKey}
|
|
|
|
txHash={tradeTxData?.hash}
|
2022-11-04 17:14:43 +01:00
|
|
|
txId={tradeTxData?.id}
|
2020-10-06 20:28:38 +02:00
|
|
|
submittedTime={tradeTxData?.submittedTime}
|
|
|
|
/>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return <Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />;
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
2023-06-15 20:17:21 +02:00
|
|
|
<Route
|
|
|
|
path={SWAPS_NOTIFICATION_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
|
|
|
if (!swapsErrorKey) {
|
|
|
|
return <Redirect to={{ pathname: PREPARE_SWAP_ROUTE }} />;
|
|
|
|
}
|
|
|
|
return <NotificationPage notificationKey={swapsErrorKey} />;
|
|
|
|
}}
|
|
|
|
/>
|
2020-10-06 20:28:38 +02:00
|
|
|
<FeatureToggledRoute
|
|
|
|
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
|
|
|
|
flag={swapsEnabled}
|
|
|
|
path={LOADING_QUOTES_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
2020-11-03 00:41:28 +01:00
|
|
|
return aggregatorMetadata ? (
|
|
|
|
<LoadingQuote
|
|
|
|
loadingComplete={
|
|
|
|
!fetchingQuotes && Boolean(Object.values(quotes).length)
|
|
|
|
}
|
|
|
|
onDone={async () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
await dispatch(setBackgroundSwapRouteState(''));
|
2020-11-03 00:41:28 +01:00
|
|
|
if (
|
|
|
|
swapsErrorKey === ERROR_FETCHING_QUOTES ||
|
|
|
|
swapsErrorKey === QUOTES_NOT_AVAILABLE_ERROR
|
|
|
|
) {
|
2021-02-04 19:15:23 +01:00
|
|
|
dispatch(setSwapsErrorKey(QUOTES_NOT_AVAILABLE_ERROR));
|
|
|
|
history.push(SWAPS_ERROR_ROUTE);
|
2020-11-03 00:41:28 +01:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
history.push(VIEW_QUOTE_ROUTE);
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
|
|
|
}}
|
|
|
|
aggregatorMetadata={aggregatorMetadata}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
path={SWAPS_MAINTENANCE_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
|
|
|
return swapsEnabled === false ? (
|
2021-03-09 22:37:19 +01:00
|
|
|
<AwaitingSwap errorKey={OFFLINE_FOR_MAINTENANCE} />
|
2020-11-03 00:41:28 +01:00
|
|
|
) : (
|
|
|
|
<Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
2021-05-06 16:14:42 +02:00
|
|
|
<Route
|
|
|
|
path={AWAITING_SIGNATURES_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
|
|
|
return <AwaitingSignatures />;
|
|
|
|
}}
|
|
|
|
/>
|
2022-02-18 17:48:38 +01:00
|
|
|
<Route
|
|
|
|
path={SMART_TRANSACTION_STATUS_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
2022-11-04 17:14:43 +01:00
|
|
|
return <SmartTransactionStatus txId={tradeTxData?.id} />;
|
2022-02-18 17:48:38 +01:00
|
|
|
}}
|
|
|
|
/>
|
2020-10-06 20:28:38 +02:00
|
|
|
<Route
|
|
|
|
path={AWAITING_SWAP_ROUTE}
|
|
|
|
exact
|
|
|
|
render={() => {
|
2020-11-03 00:41:28 +01:00
|
|
|
return routeState === 'awaiting' || tradeTxData ? (
|
|
|
|
<AwaitingSwap
|
|
|
|
swapComplete={tradeConfirmed}
|
|
|
|
txHash={tradeTxData?.hash}
|
|
|
|
tokensReceived={tokensReceived}
|
2022-11-04 17:14:43 +01:00
|
|
|
txId={tradeTxData?.id}
|
2020-11-03 00:41:28 +01:00
|
|
|
submittingSwap={
|
|
|
|
routeState === 'awaiting' && !(approveTxId || tradeTxId)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Redirect to={{ pathname: DEFAULT_ROUTE }} />
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Switch>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-10-06 20:28:38 +02:00
|
|
|
}
|