diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx index 64141904798..249f0ee4e27 100644 --- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx +++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx @@ -28,6 +28,7 @@ import { AssetToAsset } from 'components/MultiHopTrade/components/TradeConfirm/A import { ReceiveSummary } from 'components/MultiHopTrade/components/TradeConfirm/ReceiveSummary' import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButton' import { getMixpanelEventData } from 'components/MultiHopTrade/helpers' +import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact' import { useTradeExecution } from 'components/MultiHopTrade/hooks/useTradeExecution/useTradeExecution' import { chainSupportsTxHistory } from 'components/MultiHopTrade/utils' import { Row } from 'components/Row/Row' @@ -50,7 +51,6 @@ import { selectActiveStepOrDefault, selectActiveSwapperName, selectBuyAmountBeforeFeesCryptoPrecision, - selectBuyAmountBeforeFeesUserCurrency, selectFirstHop, selectFirstHopNetworkFeeCryptoPrecision, selectFirstHopSellAsset, @@ -76,6 +76,7 @@ export const TradeConfirm = () => { const mixpanel = getMixPanel() const borderColor = useColorModeValue('gray.100', 'gray.750') const alertColor = useColorModeValue('yellow.500', 'yellow.200') + const { isModeratePriceImpact, priceImpactPercentage, isHighPriceImpact } = usePriceImpact() const [hasMixpanelFired, setHasMixpanelFired] = useState(false) const { handleSubmit, @@ -129,7 +130,6 @@ export const TradeConfirm = () => { const buyAmountAfterFeesCryptoPrecision = useAppSelector(selectNetReceiveAmountCryptoPrecision) const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal) const netBuyAmountUserCurrency = useAppSelector(selectReceiveBuyAmountUserCurrency) - const buyAmountBeforeFeesUserCurrency = useAppSelector(selectBuyAmountBeforeFeesUserCurrency) const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency) const networkFeeCryptoHuman = useAppSelector(selectFirstHopNetworkFeeCryptoPrecision) const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision) @@ -154,28 +154,6 @@ export const TradeConfirm = () => { const txHash = buyTxHash ?? sellTxHash - const priceImpactPercentage = useMemo(() => { - if (!sellAmountBeforeFeesUserCurrency || !buyAmountBeforeFeesUserCurrency) return bn(0) - - const tradeDifference = bn(sellAmountBeforeFeesUserCurrency) - .minus(buyAmountBeforeFeesUserCurrency) - .abs() - - return tradeDifference.div(sellAmountBeforeFeesUserCurrency).times(100) - }, [sellAmountBeforeFeesUserCurrency, buyAmountBeforeFeesUserCurrency]) - - const isHighPriceImpact = useMemo(() => { - if (!priceImpactPercentage) return false - - return priceImpactPercentage.gt(10) - }, [priceImpactPercentage]) - - const isModeratePriceImpact = useMemo(() => { - if (!priceImpactPercentage) return false - - return bn(priceImpactPercentage).gt(5) - }, [priceImpactPercentage]) - const getSellTxLink = useCallback( (sellTxHash: string) => getTxLink({ diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx index 70200ee42c7..327c00862b9 100644 --- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx @@ -26,6 +26,7 @@ import { ManualAddressEntry } from 'components/MultiHopTrade/components/TradeInp import { getSwapperSupportsSlippage } from 'components/MultiHopTrade/components/TradeInput/getSwapperSupportsSlippage' import { getMixpanelEventData } from 'components/MultiHopTrade/helpers' import { useActiveQuoteStatus } from 'components/MultiHopTrade/hooks/quoteValidation/useActiveQuoteStatus' +import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact' import { checkApprovalNeeded } from 'components/MultiHopTrade/hooks/useAllowanceApproval/helpers' import { useGetTradeQuotes } from 'components/MultiHopTrade/hooks/useGetTradeQuotes/useGetTradeQuotes' import { TradeRoutePaths } from 'components/MultiHopTrade/types' @@ -36,7 +37,7 @@ import { useModal } from 'hooks/useModal/useModal' import { useToggle } from 'hooks/useToggle/useToggle' import { useWallet } from 'hooks/useWallet/useWallet' import type { Asset } from 'lib/asset-service' -import { bn, bnOrZero, positiveOrZero } from 'lib/bignumber/bignumber' +import { bnOrZero, positiveOrZero } from 'lib/bignumber/bignumber' import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton' import { MixPanelEvents } from 'lib/mixpanel/types' import { @@ -55,11 +56,9 @@ import { selectActiveQuoteError, selectActiveSwapperName, selectBuyAmountBeforeFeesCryptoPrecision, - selectBuyAmountBeforeFeesUserCurrency, selectFirstHop, selectNetReceiveAmountCryptoPrecision, selectReceiveBuyAmountUserCurrency, - selectSellAmountUserCurrency, selectSwapperSupportsCrossAccountTrade, selectTotalNetworkFeeUserCurrencyPrecision, selectTotalProtocolFeeByAsset, @@ -95,34 +94,18 @@ export const TradeInput = memo(() => { const sellAssetSearch = useModal('sellAssetSearch') const buyAsset = useAppSelector(selectBuyAsset) const sellAsset = useAppSelector(selectSellAsset) + const { isModeratePriceImpact, priceImpactPercentage } = usePriceImpact() + const tradeQuoteStep = useAppSelector(selectFirstHop) const swapperSupportsCrossAccountTrade = useAppSelector(selectSwapperSupportsCrossAccountTrade) const totalProtocolFees = useAppSelector(selectTotalProtocolFeeByAsset) const buyAmountAfterFeesCryptoPrecision = useAppSelector(selectNetReceiveAmountCryptoPrecision) - const buyAmountBeforeFeesUserCurrency = useAppSelector(selectBuyAmountBeforeFeesUserCurrency) const buyAmountAfterFeesUserCurrency = useAppSelector(selectReceiveBuyAmountUserCurrency) const totalNetworkFeeFiatPrecision = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision) const manualReceiveAddressIsValidating = useAppSelector(selectManualReceiveAddressIsValidating) const sellAmountCryptoPrecision = useAppSelector(selectSellAmountCryptoPrecision) - const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency) const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal) - const priceImpactPercentage = useMemo(() => { - if (!sellAmountBeforeFeesUserCurrency || !buyAmountBeforeFeesUserCurrency) return bn('0') - - const tradeDifference = bn(sellAmountBeforeFeesUserCurrency) - .minus(buyAmountBeforeFeesUserCurrency) - .abs() - - return tradeDifference.div(sellAmountBeforeFeesUserCurrency).times(100) - }, [sellAmountBeforeFeesUserCurrency, buyAmountBeforeFeesUserCurrency]) - - const isModeratePriceImpact = useMemo(() => { - if (!priceImpactPercentage) return false - - return bn(priceImpactPercentage).gt(5) - }, [priceImpactPercentage]) - const hasUserEnteredAmount = useMemo( () => bnOrZero(sellAmountCryptoPrecision).gt(0), [sellAmountCryptoPrecision], diff --git a/src/components/MultiHopTrade/hooks/quoteValidation/usePriceImpact.tsx b/src/components/MultiHopTrade/hooks/quoteValidation/usePriceImpact.tsx new file mode 100644 index 00000000000..bd8e23c6274 --- /dev/null +++ b/src/components/MultiHopTrade/hooks/quoteValidation/usePriceImpact.tsx @@ -0,0 +1,36 @@ +import { useMemo } from 'react' +import { bn } from 'lib/bignumber/bignumber' +import { + selectBuyAmountBeforeFeesUserCurrency, + selectSellAmountUserCurrency, +} from 'state/slices/tradeQuoteSlice/selectors' +import { useAppSelector } from 'state/store' + +export const usePriceImpact = () => { + const buyAmountBeforeFeesUserCurrency = useAppSelector(selectBuyAmountBeforeFeesUserCurrency) + const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency) + + const priceImpactPercentage = useMemo(() => { + if (!sellAmountBeforeFeesUserCurrency || !buyAmountBeforeFeesUserCurrency) return bn('0') + + const tradeDifference = bn(sellAmountBeforeFeesUserCurrency).minus( + buyAmountBeforeFeesUserCurrency, + ) + + return tradeDifference.div(sellAmountBeforeFeesUserCurrency).times(100) + }, [sellAmountBeforeFeesUserCurrency, buyAmountBeforeFeesUserCurrency]) + + const isModeratePriceImpact = useMemo(() => { + if (!priceImpactPercentage) return false + + return bn(priceImpactPercentage).gt(5) + }, [priceImpactPercentage]) + + const isHighPriceImpact = useMemo(() => { + if (!priceImpactPercentage) return false + + return priceImpactPercentage.gt(10) + }, [priceImpactPercentage]) + + return { isModeratePriceImpact, priceImpactPercentage, isHighPriceImpact } +}