diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx index 463218eac98..2d91ac14124 100644 --- a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx +++ b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderInput.tsx @@ -54,6 +54,7 @@ import { limitOrderSlice } from 'state/slices/limitOrderSlice/limitOrderSlice' import { selectActiveQuoteNetworkFeeUserCurrency } from 'state/slices/limitOrderSlice/selectors' import { selectIsAnyAccountMetadataLoadedForChainId, + selectUsdRateByAssetId, selectUserCurrencyToUsdRate, } from 'state/slices/selectors' import { @@ -117,6 +118,8 @@ export const LimitOrderInput = ({ const expiry = useAppSelector(selectExpiry) const sellAssetBalanceCryptoBaseUnit = useAppSelector(selectSellAssetBalanceCryptoBaseUnit) const limitPriceMode = useAppSelector(selectLimitPriceMode) + const sellAssetUsdRate = useAppSelector(state => selectUsdRateByAssetId(state, sellAsset.assetId)) + const buyAssetUsdRate = useAppSelector(state => selectUsdRateByAssetId(state, buyAsset.assetId)) const { switchAssets, @@ -343,6 +346,10 @@ export const LimitOrderInput = ({ history.push(LimitOrderRoutePaths.Orders) }, [history]) + const handleSwitchAssets = useCallback(() => { + switchAssets({ sellAssetUsdRate, buyAssetUsdRate }) + }, [buyAssetUsdRate, sellAssetUsdRate, switchAssets]) + const isLoading = useMemo(() => { return ( isCheckingAllowance || @@ -399,7 +406,7 @@ export const LimitOrderInput = ({ sellAmountUserCurrency={inputSellAmountUserCurrency} sellAsset={sellAsset} sellAccountId={sellAccountId} - onSwitchAssets={switchAssets} + onSwitchAssets={handleSwitchAssets} isSwitchAssetsDisabled={isNativeEvmAsset(buyAsset.assetId)} onChangeIsInputtingFiatSellAmount={setIsInputtingFiatSellAmount} onChangeSellAmountCryptoPrecision={setSellAmountCryptoPrecision} @@ -430,25 +437,25 @@ export const LimitOrderInput = ({ ) }, [ - buyAccountId, buyAsset, - inputSellAmountUserCurrency, isInputtingFiatSellAmount, isLoading, - marketPriceBuyAsset, - sellAccountId, sellAmountCryptoPrecision, + inputSellAmountUserCurrency, sellAsset, - buyAssetFilterPredicate, - chainIdFilterPredicate, - sellAssetFilterPredicate, - setBuyAccountId, - setBuyAsset, + sellAccountId, + handleSwitchAssets, setIsInputtingFiatSellAmount, - setSellAccountId, setSellAmountCryptoPrecision, setSellAsset, - switchAssets, + setSellAccountId, + sellAssetFilterPredicate, + chainIdFilterPredicate, + buyAccountId, + setBuyAccountId, + setBuyAsset, + buyAssetFilterPredicate, + marketPriceBuyAsset, ]) const affiliateFeeAfterDiscountUserCurrency = useMemo(() => { diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx index 3d18ffa6088..aa9e6648b05 100644 --- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx +++ b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx @@ -30,7 +30,11 @@ import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton' import { MixPanelEvent } from 'lib/mixpanel/types' import { selectIsVotingPowerLoading } from 'state/apis/snapshot/selectors' import type { ApiQuote } from 'state/apis/swapper/types' -import { selectIsAnyAccountMetadataLoadedForChainId, selectWalletId } from 'state/slices/selectors' +import { + selectIsAnyAccountMetadataLoadedForChainId, + selectUsdRateByAssetId, + selectWalletId, +} from 'state/slices/selectors' import { selectHasUserEnteredAmount, selectInputBuyAsset, @@ -124,6 +128,9 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput ) const walletId = useAppSelector(selectWalletId) + const sellAssetUsdRate = useAppSelector(state => selectUsdRateByAssetId(state, sellAsset.assetId)) + const buyAssetUsdRate = useAppSelector(state => selectUsdRateByAssetId(state, buyAsset.assetId)) + const inputOutputDifferenceDecimalPercentage = useInputOutputDifferenceDecimalPercentage(activeQuote) @@ -217,8 +224,8 @@ export const TradeInput = ({ isCompact, tradeInputRef, onChangeTab }: TradeInput [dispatch], ) const handleSwitchAssets = useCallback( - () => dispatch(tradeInput.actions.switchAssets()), - [dispatch], + () => dispatch(tradeInput.actions.switchAssets({ sellAssetUsdRate, buyAssetUsdRate })), + [buyAssetUsdRate, dispatch, sellAssetUsdRate], ) const handleConnect = useCallback(() => { diff --git a/src/state/slices/common/tradeInputBase/createTradeInputBaseSlice.ts b/src/state/slices/common/tradeInputBase/createTradeInputBaseSlice.ts index 9f7e25da00e..c747100e840 100644 --- a/src/state/slices/common/tradeInputBase/createTradeInputBaseSlice.ts +++ b/src/state/slices/common/tradeInputBase/createTradeInputBaseSlice.ts @@ -62,11 +62,21 @@ const getBaseReducers = (initialState: T) => ({ setSellAmountCryptoPrecision: (state: Draft, action: PayloadAction) => { state.sellAmountCryptoPrecision = bnOrZero(action.payload).toString() }, - switchAssets: (state: Draft) => { + switchAssets: ( + state: Draft, + action: PayloadAction<{ + sellAssetUsdRate: string | undefined + buyAssetUsdRate: string | undefined + }>, + ) => { + const { sellAssetUsdRate, buyAssetUsdRate } = action.payload + const sellAmountUsd = bnOrZero(state.sellAmountCryptoPrecision).times(sellAssetUsdRate ?? '0') + + state.sellAmountCryptoPrecision = sellAmountUsd.div(buyAssetUsdRate ?? '0').toFixed() + const buyAsset = state.sellAsset state.sellAsset = state.buyAsset state.buyAsset = buyAsset - state.sellAmountCryptoPrecision = '0' const sellAssetAccountId = state.sellAccountId state.sellAccountId = state.buyAccountId diff --git a/src/state/slices/limitOrderInputSlice/limitOrderInputSlice.ts b/src/state/slices/limitOrderInputSlice/limitOrderInputSlice.ts index 8ce9421f5be..9fc65801e00 100644 --- a/src/state/slices/limitOrderInputSlice/limitOrderInputSlice.ts +++ b/src/state/slices/limitOrderInputSlice/limitOrderInputSlice.ts @@ -116,8 +116,14 @@ export const limitOrderInput = createTradeInputBaseSlice({ baseReducers.setSellAsset(state, action) resetLimitOrderConfig(state) }, - switchAssets: (state: LimitOrderInputState) => { - baseReducers.switchAssets(state) + switchAssets: ( + state: LimitOrderInputState, + action: PayloadAction<{ + sellAssetUsdRate: string | undefined + buyAssetUsdRate: string | undefined + }>, + ) => { + baseReducers.switchAssets(state, action) resetLimitOrderConfig(state) }, }),