feat: switch assets prorate sell amount over previous sell amount USD…

… value (#8394)

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 = ({
       </SharedTradeInputBody>
     )
   }, [
-    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(() => {

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(() => {

src/state/slices/common/tradeInputBase/createTradeInputBaseSlice.ts

@@ -62,11 +62,21 @@ const getBaseReducers = <T extends TradeInputBaseState>(initialState: T) => ({
   setSellAmountCryptoPrecision: (state: Draft<T>, action: PayloadAction<string>) => {
     state.sellAmountCryptoPrecision = bnOrZero(action.payload).toString()
   },
-  switchAssets: (state: Draft<T>) => {
+  switchAssets: (
+    state: Draft<T>,
+    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

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)
     },
   }),