1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/pages/swaps/index.js

431 lines
14 KiB
JavaScript
Raw Normal View History

import React, { useState, useEffect, useRef, useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
2020-11-03 00:41:28 +01:00
import {
Switch,
Route,
useLocation,
useHistory,
Redirect,
} from 'react-router-dom';
import BigNumber from 'bignumber.js';
import { I18nContext } from '../../contexts/i18n';
2020-11-03 00:41:28 +01:00
import {
getSelectedAccount,
getCurrentChainId,
getIsSwapsChain,
isHardwareWallet,
getHardwareWalletType,
} from '../../selectors/selectors';
2020-10-06 20:28:38 +02:00
import {
getQuotes,
clearSwapsState,
getTradeTxId,
getApproveTxId,
getFetchingQuotes,
setBalanceError,
setTopAssets,
getFetchParams,
setAggregatorMetadata,
getAggregatorMetadata,
getBackgroundSwapRouteState,
getSwapsErrorKey,
getSwapsFeatureIsLive,
2020-10-06 20:28:38 +02:00
prepareToLeaveSwaps,
fetchAndSetSwapsGasPriceInfo,
fetchSwapsLiveness,
getUseNewSwapsApi,
getFromToken,
} from '../../ducks/swaps/swaps';
2020-10-06 20:28:38 +02:00
import {
AWAITING_SIGNATURES_ROUTE,
2020-10-06 20:28:38 +02:00
AWAITING_SWAP_ROUTE,
BUILD_QUOTE_ROUTE,
VIEW_QUOTE_ROUTE,
LOADING_QUOTES_ROUTE,
SWAPS_ERROR_ROUTE,
DEFAULT_ROUTE,
SWAPS_MAINTENANCE_ROUTE,
} from '../../helpers/constants/routes';
2020-10-06 20:28:38 +02:00
import {
ERROR_FETCHING_QUOTES,
QUOTES_NOT_AVAILABLE_ERROR,
SWAP_FAILED_ERROR,
CONTRACT_DATA_DISABLED_ERROR,
2020-10-06 20:28:38 +02:00
OFFLINE_FOR_MAINTENANCE,
} from '../../../shared/constants/swaps';
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
import {
resetBackgroundSwapsState,
setSwapsTokens,
removeToken,
setBackgroundSwapRouteState,
setSwapsErrorKey,
} from '../../store/actions';
import { currentNetworkTxListSelector } from '../../selectors';
import { useNewMetricEvent } from '../../hooks/useMetricEvent';
2020-10-06 20:28:38 +02:00
import FeatureToggledRoute from '../../helpers/higher-order-components/feature-toggled-route';
import { TRANSACTION_STATUSES } from '../../../shared/constants/transaction';
2020-11-03 00:41:28 +01:00
import {
fetchTokens,
fetchTopAssets,
getSwapsTokensReceivedFromTxMeta,
fetchAggregatorMetadata,
countDecimals,
} from './swaps.util';
import AwaitingSignatures from './awaiting-signatures';
import AwaitingSwap from './awaiting-swap';
import LoadingQuote from './loading-swaps-quotes';
import BuildQuote from './build-quote';
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() {
const t = useContext(I18nContext);
const history = useHistory();
const dispatch = useDispatch();
2020-10-06 20:28:38 +02:00
const { pathname } = useLocation();
const isAwaitingSwapRoute = pathname === AWAITING_SWAP_ROUTE;
const isAwaitingSignaturesRoute = pathname === AWAITING_SIGNATURES_ROUTE;
const isSwapsErrorRoute = pathname === SWAPS_ERROR_ROUTE;
const isLoadingQuotesRoute = pathname === LOADING_QUOTES_ROUTE;
2020-10-06 20:28:38 +02:00
const fetchParams = useSelector(getFetchParams);
const { destinationTokenInfo = {} } = fetchParams?.metaData || {};
2020-10-06 20:28:38 +02:00
const [inputValue, setInputValue] = useState(fetchParams?.value || '');
const [maxSlippage, setMaxSlippage] = useState(fetchParams?.slippage || 3);
const [isFeatureFlagLoaded, setIsFeatureFlagLoaded] = useState(false);
const [tokenFromError, setTokenFromError] = useState(null);
2020-10-06 20:28:38 +02:00
const routeState = useSelector(getBackgroundSwapRouteState);
const selectedAccount = useSelector(getSelectedAccount);
const quotes = useSelector(getQuotes);
const txList = useSelector(currentNetworkTxListSelector);
const tradeTxId = useSelector(getTradeTxId);
const approveTxId = useSelector(getApproveTxId);
const aggregatorMetadata = useSelector(getAggregatorMetadata);
const fetchingQuotes = useSelector(getFetchingQuotes);
let swapsErrorKey = useSelector(getSwapsErrorKey);
const swapsEnabled = useSelector(getSwapsFeatureIsLive);
const chainId = useSelector(getCurrentChainId);
const isSwapsChain = useSelector(getIsSwapsChain);
const useNewSwapsApi = useSelector(getUseNewSwapsApi);
const fromToken = useSelector(getFromToken);
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const {
balance: ethBalance,
address: selectedAccountAddress,
} = selectedAccount;
const { destinationTokenAddedForSwap } = fetchParams || {};
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
const approveTxData =
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,
chainId,
);
const tradeConfirmed = tradeTxData?.status === TRANSACTION_STATUSES.CONFIRMED;
2020-11-03 00:41:28 +01:00
const approveError =
approveTxData?.status === TRANSACTION_STATUSES.FAILED ||
approveTxData?.txReceipt?.status === '0x0';
2020-11-03 00:41:28 +01:00
const tradeError =
tradeTxData?.status === TRANSACTION_STATUSES.FAILED ||
tradeTxData?.txReceipt?.status === '0x0';
const conversionError = approveError || tradeError;
2020-10-06 20:28:38 +02:00
if (conversionError && swapsErrorKey !== CONTRACT_DATA_DISABLED_ERROR) {
swapsErrorKey = SWAP_FAILED_ERROR;
2020-10-06 20:28:38 +02:00
}
const clearTemporaryTokenRef = useRef();
2020-11-03 00:41:28 +01:00
useEffect(() => {
clearTemporaryTokenRef.current = () => {
if (
destinationTokenAddedForSwap &&
(!isAwaitingSwapRoute || conversionError)
) {
dispatch(removeToken(destinationTokenInfo?.address));
2020-10-06 20:28:38 +02:00
}
};
2020-11-03 00:41:28 +01:00
}, [
conversionError,
dispatch,
destinationTokenAddedForSwap,
destinationTokenInfo,
fetchParams,
isAwaitingSwapRoute,
]);
2020-10-06 20:28:38 +02:00
useEffect(() => {
return () => {
clearTemporaryTokenRef.current();
};
}, []);
2020-10-06 20:28:38 +02:00
// eslint-disable-next-line
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (isFeatureFlagLoaded) {
fetchTokens(chainId, useNewSwapsApi)
.then((tokens) => {
dispatch(setSwapsTokens(tokens));
})
.catch((error) => console.error(error));
fetchTopAssets(chainId, useNewSwapsApi).then((topAssets) => {
dispatch(setTopAssets(topAssets));
});
fetchAggregatorMetadata(chainId, useNewSwapsApi).then(
(newAggregatorMetadata) => {
dispatch(setAggregatorMetadata(newAggregatorMetadata));
},
);
dispatch(fetchAndSetSwapsGasPriceInfo(chainId));
return () => {
dispatch(prepareToLeaveSwaps());
};
}
}, [dispatch, chainId, isFeatureFlagLoaded, useNewSwapsApi]);
2020-10-06 20:28:38 +02:00
const hardwareWalletUsed = useSelector(isHardwareWallet);
const hardwareWalletType = useSelector(getHardwareWalletType);
2020-10-06 20:28:38 +02:00
const exitedSwapsEvent = useNewMetricEvent({
event: 'Exited Swaps',
category: 'swaps',
sensitiveProperties: {
2020-10-06 20:28:38 +02:00
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,
2020-10-06 20:28:38 +02:00
},
});
const exitEventRef = useRef();
2020-10-06 20:28:38 +02:00
useEffect(() => {
exitEventRef.current = () => {
exitedSwapsEvent();
};
});
2020-10-06 20:28:38 +02:00
useEffect(() => {
const fetchSwapsLivenessWrapper = async () => {
await dispatch(fetchSwapsLiveness());
setIsFeatureFlagLoaded(true);
};
fetchSwapsLivenessWrapper();
2020-10-06 20:28:38 +02:00
return () => {
exitEventRef.current();
};
}, [dispatch]);
2020-10-06 20:28:38 +02:00
useEffect(() => {
if (swapsErrorKey && !isSwapsErrorRoute) {
history.push(SWAPS_ERROR_ROUTE);
2020-10-06 20:28:38 +02:00
}
}, [history, swapsErrorKey, isSwapsErrorRoute]);
2020-10-06 20:28:38 +02:00
const beforeUnloadEventAddedRef = useRef();
2020-10-06 20:28:38 +02:00
useEffect(() => {
const fn = () => {
clearTemporaryTokenRef.current();
2020-10-06 20:28:38 +02:00
if (isLoadingQuotesRoute) {
dispatch(prepareToLeaveSwaps());
2020-10-06 20:28:38 +02:00
}
return null;
};
2020-10-06 20:28:38 +02:00
if (isLoadingQuotesRoute && !beforeUnloadEventAddedRef.current) {
beforeUnloadEventAddedRef.current = true;
window.addEventListener('beforeunload', fn);
2020-10-06 20:28:38 +02:00
}
return () => window.removeEventListener('beforeunload', fn);
}, [dispatch, isLoadingQuotesRoute]);
2020-10-06 20:28:38 +02:00
if (!isSwapsChain) {
return <Redirect to={{ pathname: DEFAULT_ROUTE }} />;
}
2020-10-06 20:28:38 +02:00
return (
<div className="swaps">
<div className="swaps__container">
<div className="swaps__header">
2020-11-03 00:41:28 +01:00
<div className="swaps__title">{t('swap')}</div>
{!isAwaitingSwapRoute && !isAwaitingSignaturesRoute && (
2020-10-06 20:28:38 +02:00
<div
className="swaps__header-cancel"
onClick={async () => {
clearTemporaryTokenRef.current();
dispatch(clearSwapsState());
await dispatch(resetBackgroundSwapsState());
history.push(DEFAULT_ROUTE);
2020-10-06 20:28:38 +02:00
}}
>
2020-11-03 00:41:28 +01:00
{t('cancel')}
2020-10-06 20:28:38 +02:00
</div>
)}
</div>
<div className="swaps__content">
<Switch>
<FeatureToggledRoute
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
flag={swapsEnabled}
path={BUILD_QUOTE_ROUTE}
exact
render={() => {
if (tradeTxData && !conversionError) {
return <Redirect to={{ pathname: AWAITING_SWAP_ROUTE }} />;
} else if (tradeTxData && routeState) {
return <Redirect to={{ pathname: SWAPS_ERROR_ROUTE }} />;
2020-10-06 20:28:38 +02:00
} else if (routeState === 'loading' && aggregatorMetadata) {
return <Redirect to={{ pathname: LOADING_QUOTES_ROUTE }} />;
2020-10-06 20:28:38 +02:00
}
const onInputChange = (newInputValue, balance) => {
setInputValue(newInputValue);
const balanceError = new BigNumber(newInputValue || 0).gt(
balance || 0,
);
// "setBalanceError" is just a warning, a user can still click on the "Review Swap" button.
dispatch(setBalanceError(balanceError));
setTokenFromError(
countDecimals(newInputValue) > fromToken.decimals
? 'tooManyDecimals'
: null,
);
};
2020-10-06 20:28:38 +02:00
return (
<BuildQuote
inputValue={inputValue}
onInputChange={onInputChange}
ethBalance={ethBalance}
setMaxSlippage={setMaxSlippage}
selectedAccountAddress={selectedAccountAddress}
maxSlippage={maxSlippage}
isFeatureFlagLoaded={isFeatureFlagLoaded}
tokenFromError={tokenFromError}
2020-10-06 20:28:38 +02:00
/>
);
2020-10-06 20:28:38 +02:00
}}
/>
<FeatureToggledRoute
redirectRoute={SWAPS_MAINTENANCE_ROUTE}
flag={swapsEnabled}
path={VIEW_QUOTE_ROUTE}
exact
render={() => {
if (Object.values(quotes).length) {
return (
2020-11-03 00:41:28 +01:00
<ViewQuote numberOfQuotes={Object.values(quotes).length} />
);
2020-10-06 20:28:38 +02:00
} else if (fetchParams) {
return <Redirect to={{ pathname: SWAPS_ERROR_ROUTE }} />;
2020-10-06 20:28:38 +02: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}
inputValue={inputValue}
maxSlippage={maxSlippage}
submittedTime={tradeTxData?.submittedTime}
/>
);
2020-10-06 20:28:38 +02:00
}
return <Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />;
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 () => {
await dispatch(setBackgroundSwapRouteState(''));
2020-10-06 20:28:38 +02:00
2020-11-03 00:41:28 +01:00
if (
swapsErrorKey === ERROR_FETCHING_QUOTES ||
swapsErrorKey === QUOTES_NOT_AVAILABLE_ERROR
) {
dispatch(setSwapsErrorKey(QUOTES_NOT_AVAILABLE_ERROR));
history.push(SWAPS_ERROR_ROUTE);
2020-11-03 00:41:28 +01:00
} else {
history.push(VIEW_QUOTE_ROUTE);
2020-11-03 00:41:28 +01:00
}
}}
aggregatorMetadata={aggregatorMetadata}
/>
) : (
<Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />
);
2020-10-06 20:28:38 +02:00
}}
/>
<Route
path={SWAPS_MAINTENANCE_ROUTE}
exact
render={() => {
return swapsEnabled === false ? (
<AwaitingSwap errorKey={OFFLINE_FOR_MAINTENANCE} />
2020-11-03 00:41:28 +01:00
) : (
<Redirect to={{ pathname: BUILD_QUOTE_ROUTE }} />
);
2020-10-06 20:28:38 +02:00
}}
/>
<Route
path={AWAITING_SIGNATURES_ROUTE}
exact
render={() => {
return <AwaitingSignatures />;
}}
/>
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}
submittingSwap={
routeState === 'awaiting' && !(approveTxId || tradeTxId)
}
inputValue={inputValue}
maxSlippage={maxSlippage}
/>
) : (
<Redirect to={{ pathname: DEFAULT_ROUTE }} />
);
2020-10-06 20:28:38 +02:00
}}
/>
</Switch>
</div>
</div>
</div>
);
2020-10-06 20:28:38 +02:00
}