chore: clean up of trade related slices and selectors

src/components/FeeExplainer/FeeExplainer.tsx

@@ -26,7 +26,7 @@ import { calculateFees } from 'lib/fees/model'
 import { FEE_CURVE_MAX_FEE_BPS, FEE_CURVE_NO_FEE_THRESHOLD_USD } from 'lib/fees/parameters'
 import { isSome } from 'lib/utils'
 import { selectVotingPower } from 'state/apis/snapshot/selectors'
-import { selectSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
+import { selectInputSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { CHART_TRADE_SIZE_MAX_USD } from './common'
@@ -336,7 +336,7 @@ type FeeExplainerProps = CardProps
 
 export const FeeExplainer: React.FC<FeeExplainerProps> = props => {
   const votingPower = useAppSelector(selectVotingPower)
-  const sellAmountUsd = useAppSelector(selectSellAmountUsd)
+  const sellAmountUsd = useAppSelector(selectInputSellAmountUsd)
 
   const [tradeSize, setTradeSize] = useState(
     sellAmountUsd ? Number.parseFloat(sellAmountUsd) : FEE_CURVE_NO_FEE_THRESHOLD_USD,

src/components/MultiHopTrade/MultiHopTrade.tsx

@@ -9,7 +9,7 @@ import { MemoryRouter, Route, Switch, useLocation, useParams } from 'react-route
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
 import { selectAssetById } from 'state/slices/assetsSlice/selectors'
-import { swappers } from 'state/slices/swappersSlice/swappersSlice'
+import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 import { TradeRoutePaths } from './types'
@@ -78,10 +78,10 @@ export const MultiHopTrade = memo(
     const defaultSellAsset = useAppSelector(state => selectAssetById(state, defaultSellAssetId))
 
     useEffect(() => {
-      dispatch(swappers.actions.clear())
-      if (defaultSellAsset) dispatch(swappers.actions.setSellAsset(defaultSellAsset))
-      if (routeBuyAsset) dispatch(swappers.actions.setBuyAsset(routeBuyAsset))
-      else if (defaultBuyAsset) dispatch(swappers.actions.setBuyAsset(defaultBuyAsset))
+      dispatch(tradeInput.actions.clear())
+      if (defaultSellAsset) dispatch(tradeInput.actions.setSellAsset(defaultSellAsset))
+      if (routeBuyAsset) dispatch(tradeInput.actions.setBuyAsset(routeBuyAsset))
+      else if (defaultBuyAsset) dispatch(tradeInput.actions.setBuyAsset(defaultBuyAsset))
     }, [defaultBuyAsset, defaultSellAsset, dispatch, routeBuyAsset])
 
     return (
@@ -108,7 +108,7 @@ const MultiHopRoutes = memo(() => {
       // Reset the swapper slice to initial state on mount
       // Don't move me to one of the trade route components, this needs to be at router-level
       // We only want to clear swapper state when trade components are fully unmounted, not when trade routes change
-      dispatch(swappers.actions.clear())
+      dispatch(tradeInput.actions.clear())
     }
   }, [dispatch])
 

src/components/MultiHopTrade/components/FeeModal/FeeBreakdown.tsx

@@ -7,7 +7,7 @@ import { RawText, Text } from 'components/Text'
 import { bn, bnOrZero } from 'lib/bignumber/bignumber'
 import { calculateFees } from 'lib/fees/model'
 import { selectVotingPower } from 'state/apis/snapshot/selectors'
-import { selectSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
+import { selectInputSellAmountUsd, selectUserCurrencyToUsdRate } from 'state/slices/selectors'
 import { selectQuoteAffiliateFeeUserCurrency } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
@@ -16,7 +16,7 @@ const divider = <Divider />
 export const FeeBreakdown = () => {
   const translate = useTranslate()
   const votingPower = useAppSelector(selectVotingPower)
-  const sellAmountUsd = useAppSelector(selectSellAmountUsd)
+  const sellAmountUsd = useAppSelector(selectInputSellAmountUsd)
   const { foxDiscountUsd, foxDiscountPercent, feeUsdBeforeDiscount, feeBpsBeforeDiscount } =
     calculateFees({
       tradeAmountUsd: bnOrZero(sellAmountUsd),

src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx

@@ -5,7 +5,7 @@ import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButt
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { SlideTransition } from 'components/SlideTransition'
 import { Text } from 'components/Text'
-import { swappers as swappersSlice } from 'state/slices/swappersSlice/swappersSlice'
+import { tradeInput as swappersSlice } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { selectTradeExecutionState } from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx

@@ -19,7 +19,7 @@ import { bnOrZero } from 'lib/bignumber/bignumber'
 import {
   selectActiveSwapperName,
   selectLastHopBuyAsset,
-  selectSellAmountUserCurrency,
+  selectQuoteSellAmountUserCurrency,
   selectTotalNetworkFeeUserCurrencyPrecision,
   selectTradeExecutionState,
 } from 'state/slices/tradeQuoteSlice/selectors'
@@ -34,7 +34,7 @@ export const Footer = () => {
   const lastHopBuyAsset = useAppSelector(selectLastHopBuyAsset)
   const tradeExecutionState = useAppSelector(selectTradeExecutionState)
   const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
-  const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency)
+  const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
   const { isModeratePriceImpact } = usePriceImpact()
 
   const handleConfirm = useCallback(() => {

src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useIsApprovalInitiallyNeeded.tsx

@@ -2,12 +2,11 @@ import type { AccountId } from '@shapeshiftoss/caip'
 import { isEvmChainId } from '@shapeshiftoss/chain-adapters'
 import type { TradeQuoteStep } from '@shapeshiftoss/swapper'
 import { useEffect, useMemo, useState } from 'react'
-import { selectFirstHopSellAccountId } from 'state/slices/selectors'
+import { selectFirstHopSellAccountId, selectSecondHopSellAccountId } from 'state/slices/selectors'
 import {
   selectFirstHop,
   selectIsActiveQuoteMultiHop,
   selectSecondHop,
-  selectSecondHopSellAccountId,
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'

src/components/MultiHopTrade/components/SlippagePopover.tsx

@@ -23,8 +23,8 @@ import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
 import { Row } from 'components/Row/Row'
 import { Text } from 'components/Text'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
-import { selectUserSlippagePercentage } from 'state/slices/swappersSlice/selectors'
-import { swappers } from 'state/slices/swappersSlice/swappersSlice'
+import { selectUserSlippagePercentage } from 'state/slices/tradeInputSlice/selectors'
+import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { selectDefaultSlippagePercentage } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
@@ -79,9 +79,9 @@ export const SlippagePopover: FC = () => {
 
   const handleClose = useCallback(() => {
     if (slippageType === SlippageType.Custom && !isInvalid)
-      dispatch(swappers.actions.setSlippagePreferencePercentage(slippageAmount))
+      dispatch(tradeInput.actions.setSlippagePreferencePercentage(slippageAmount))
     else if (slippageType === SlippageType.Auto)
-      dispatch(swappers.actions.setSlippagePreferencePercentage(undefined))
+      dispatch(tradeInput.actions.setSlippagePreferencePercentage(undefined))
   }, [dispatch, isInvalid, slippageAmount, slippageType])
 
   const handleSlippageTypeChange = useCallback(

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx

@@ -51,7 +51,7 @@ import { getMixPanel } from 'lib/mixpanel/mixPanelSingleton'
 import { MixPanelEvent } from 'lib/mixpanel/types'
 import { THORCHAIN_STREAM_SWAP_SOURCE } from 'lib/swapper/swappers/ThorchainSwapper/constants'
 import { assertUnreachable } from 'lib/utils'
-import { selectManualReceiveAddress } from 'state/slices/swappersSlice/selectors'
+import { selectManualReceiveAddress } from 'state/slices/tradeInputSlice/selectors'
 import {
   selectActiveQuote,
   selectActiveStepOrDefault,
@@ -65,8 +65,8 @@ import {
   selectFirstHopSellFeeAsset,
   selectLastHop,
   selectLastHopBuyAsset,
-  selectSellAmountBeforeFeesCryptoPrecision,
-  selectSellAmountUserCurrency,
+  selectQuoteSellAmountBeforeFeesCryptoPrecision,
+  selectQuoteSellAmountUserCurrency,
   selectTotalNetworkFeeUserCurrencyPrecision,
   selectTradeSlippagePercentageDecimal,
 } from 'state/slices/tradeQuoteSlice/selectors'
@@ -137,14 +137,14 @@ export const TradeConfirm = () => {
   const buyAmountAfterFeesCryptoPrecision = useAppSelector(selectBuyAmountAfterFeesCryptoPrecision)
   const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal)
   const netBuyAmountUserCurrency = useAppSelector(selectBuyAmountAfterFeesUserCurrency)
-  const sellAmountBeforeFeesUserCurrency = useAppSelector(selectSellAmountUserCurrency)
+  const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
   const networkFeeCryptoHuman = useAppSelector(selectFirstHopNetworkFeeCryptoPrecision)
   const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
   const buyAmountBeforeFeesCryptoPrecision = useAppSelector(
     selectBuyAmountBeforeFeesCryptoPrecision,
   )
   const sellAmountBeforeFeesCryptoPrecision = useAppSelector(
-    selectSellAmountBeforeFeesCryptoPrecision,
+    selectQuoteSellAmountBeforeFeesCryptoPrecision,
   )
 
   const sellAsset = useAppSelector(selectFirstHopSellAsset)

src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx

@@ -57,14 +57,14 @@ import {
   selectSwappersApiTradeQuotes,
   selectTradeQuoteRequestErrors,
   selectTradeQuoteRequestFailed,
-} from 'state/apis/swappers/selectors'
+} from 'state/apis/swapper/selectors'
 import {
-  selectBuyAsset,
+  selectInputBuyAsset,
+  selectInputSellAmountCryptoPrecision,
+  selectInputSellAsset,
   selectManualReceiveAddressIsValidating,
-  selectSellAmountCryptoPrecision,
-  selectSellAsset,
 } from 'state/slices/selectors'
-import { swappers } from 'state/slices/swappersSlice/swappersSlice'
+import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import {
   selectActiveQuote,
   selectActiveQuoteErrors,
@@ -118,8 +118,8 @@ export const TradeInput = memo(() => {
   const isKeplr = useMemo(() => !!wallet && isKeplrHDWallet(wallet), [wallet])
   const buyAssetSearch = useModal('buyAssetSearch')
   const sellAssetSearch = useModal('sellAssetSearch')
-  const buyAsset = useAppSelector(selectBuyAsset)
-  const sellAsset = useAppSelector(selectSellAsset)
+  const buyAsset = useAppSelector(selectInputBuyAsset)
+  const sellAsset = useAppSelector(selectInputSellAsset)
   const percentOptions = useMemo(() => {
     if (!sellAsset?.assetId) return []
     if (!isToken(fromAssetId(sellAsset.assetId).assetReference)) return []
@@ -136,7 +136,7 @@ export const TradeInput = memo(() => {
   const buyAmountAfterFeesUserCurrency = useAppSelector(selectBuyAmountAfterFeesUserCurrency)
   const totalNetworkFeeFiatPrecision = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
   const manualReceiveAddressIsValidating = useAppSelector(selectManualReceiveAddressIsValidating)
-  const sellAmountCryptoPrecision = useAppSelector(selectSellAmountCryptoPrecision)
+  const sellAmountCryptoPrecision = useAppSelector(selectInputSellAmountCryptoPrecision)
   const slippageDecimal = useAppSelector(selectTradeSlippagePercentageDecimal)
   const activeQuoteErrors = useAppSelector(selectActiveQuoteErrors)
   const quoteRequestErrors = useAppSelector(selectTradeQuoteRequestErrors)
@@ -162,15 +162,15 @@ export const TradeInput = memo(() => {
   }, [activeQuoteErrors, quoteRequestErrors])
 
   const setBuyAsset = useCallback(
-    (asset: Asset) => dispatch(swappers.actions.setBuyAsset(asset)),
+    (asset: Asset) => dispatch(tradeInput.actions.setBuyAsset(asset)),
     [dispatch],
   )
   const setSellAsset = useCallback(
-    (asset: Asset) => dispatch(swappers.actions.setSellAsset(asset)),
+    (asset: Asset) => dispatch(tradeInput.actions.setSellAsset(asset)),
     [dispatch],
   )
   const handleSwitchAssets = useCallback(
-    () => dispatch(swappers.actions.switchAssets()),
+    () => dispatch(tradeInput.actions.switchAssets()),
     [dispatch],
   )
 
@@ -180,7 +180,7 @@ export const TradeInput = memo(() => {
     dispatch(tradeQuoteSlice.actions.resetConfirmedQuote())
     // clear the active quote index on mount to prevent stale data affecting the selectors
     dispatch(tradeQuoteSlice.actions.resetActiveQuoteIndex())
-    dispatch(swappers.actions.setSlippagePreferencePercentage(undefined))
+    dispatch(tradeInput.actions.setSlippagePreferencePercentage(undefined))
   }, [dispatch])
 
   const {

src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx

@@ -13,8 +13,11 @@ import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
 import { parseAddressInputWithChainId } from 'lib/address/address'
-import { selectBuyAsset, selectManualReceiveAddress } from 'state/slices/swappersSlice/selectors'
-import { swappers } from 'state/slices/swappersSlice/swappersSlice'
+import {
+  selectInputBuyAsset,
+  selectManualReceiveAddress,
+} from 'state/slices/tradeInputSlice/selectors'
+import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
@@ -31,7 +34,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
   const { open: openSnapsModal } = useModal('snaps')
 
   const wallet = useWallet().state.wallet
-  const { chainId: buyAssetChainId, assetId: buyAssetAssetId } = useAppSelector(selectBuyAsset)
+  const { chainId: buyAssetChainId, assetId: buyAssetAssetId } = useAppSelector(selectInputBuyAsset)
   const isYatSupportedByReceiveChain = buyAssetChainId === ethChainId // yat only supports eth mainnet
   const isYatSupported = isYatFeatureEnabled && isYatSupportedByReceiveChain
 
@@ -54,7 +57,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
 
   // Reset the manual address input state when the user changes the buy asset
   useEffect(() => {
-    dispatch(swappers.actions.setManualReceiveAddress(undefined))
+    dispatch(tradeInput.actions.setManualReceiveAddress(undefined))
     setFormValue(SendFormFields.Input, '')
   }, [buyAssetAssetId, dispatch, setFormValue])
 
@@ -64,7 +67,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
   }, [dispatch, manualReceiveAddress, setFormValue])
 
   useEffect(() => {
-    dispatch(swappers.actions.setManualReceiveAddressIsValidating(isValidating))
+    dispatch(tradeInput.actions.setManualReceiveAddressIsValidating(isValidating))
   }, [dispatch, isValidating])
 
   const rules = useMemo(
@@ -82,15 +85,15 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
               disableUrlParsing: true,
             }
             const { address } = await parseAddressInputWithChainId(parseAddressInputWithChainIdArgs)
-            dispatch(swappers.actions.setManualReceiveAddress(address || undefined))
+            dispatch(tradeInput.actions.setManualReceiveAddress(address || undefined))
             const invalidMessage = isYatSupported
               ? 'common.invalidAddressOrYat'
               : 'common.invalidAddress'
             return address ? true : invalidMessage
           } catch (e) {
             // This function should never throw, but in case it ever does, we never want to have a stale manual receive address stored
             console.error(e)
-            dispatch(swappers.actions.setManualReceiveAddress(undefined))
+            dispatch(tradeInput.actions.setManualReceiveAddress(undefined))
           }
         },
       },

src/components/MultiHopTrade/components/TradeInput/components/SellAssetInput.tsx

@@ -6,7 +6,7 @@ import type { TradeAssetInputProps } from 'components/MultiHopTrade/components/T
 import { TradeAssetInput } from 'components/MultiHopTrade/components/TradeAssetInput'
 import { bnOrZero, positiveOrZero } from 'lib/bignumber/bignumber'
 import { selectMarketDataByFilter } from 'state/slices/selectors'
-import { swappers } from 'state/slices/swappersSlice/swappersSlice'
+import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 const formControlProps = { borderRadius: 0, background: 'transparent', borderWidth: 0 }
@@ -45,7 +45,7 @@ export const SellAssetInput = memo(
         setSellAmountCryptoPrecision(sellAmountCryptoPrecision)
 
         dispatch(
-          swappers.actions.setSellAmountCryptoPrecision(
+          tradeInput.actions.setSellAmountCryptoPrecision(
             positiveOrZero(sellAmountCryptoPrecision).toString(),
           ),
         )

src/components/MultiHopTrade/components/TradeInput/components/TradeQuotes/TradeQuote.tsx

@@ -28,15 +28,15 @@ import { useIsTradingActive } from 'components/MultiHopTrade/hooks/useIsTradingA
 import { RawText } from 'components/Text'
 import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
 import { bn, bnOrZero } from 'lib/bignumber/bignumber'
-import { type ApiQuote, TradeQuoteValidationError } from 'state/apis/swappers'
+import { type ApiQuote, TradeQuoteValidationError } from 'state/apis/swapper'
 import {
-  selectBuyAsset,
   selectFeeAssetByChainId,
   selectFeeAssetById,
+  selectInputBuyAsset,
+  selectInputSellAmountCryptoPrecision,
+  selectInputSellAsset,
   selectMarketDataByFilter,
   selectMarketDataById,
-  selectSellAmountCryptoPrecision,
-  selectSellAsset,
   selectUserSlippagePercentageDecimal,
 } from 'state/slices/selectors'
 import {
@@ -86,15 +86,15 @@ export const TradeQuoteLoaded: FC<TradeQuoteProps> = ({
 
   const { isTradingActive } = useIsTradingActive()
 
-  const buyAsset = useAppSelector(selectBuyAsset)
-  const sellAsset = useAppSelector(selectSellAsset)
+  const buyAsset = useAppSelector(selectInputBuyAsset)
+  const sellAsset = useAppSelector(selectInputSellAsset)
   const userSlippagePercentageDecimal = useAppSelector(selectUserSlippagePercentageDecimal)
 
   const buyAssetMarketData = useAppSelector(state =>
     selectMarketDataById(state, buyAsset.assetId ?? ''),
   )
 
-  const sellAmountCryptoPrecision = useAppSelector(selectSellAmountCryptoPrecision)
+  const sellAmountCryptoPrecision = useAppSelector(selectInputSellAmountCryptoPrecision)
 
   // NOTE: don't pull this from the slice - we're not displaying the active quote here
   const networkFeeUserCurrencyPrecision = useMemo(() => {

src/components/MultiHopTrade/components/TradeInput/components/TradeQuotes/TradeQuotes.tsx

@@ -9,8 +9,8 @@ import { SlideTransitionY } from 'components/SlideTransitionY'
 import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
-import type { ApiQuote } from 'state/apis/swappers'
-import { selectBuyAsset } from 'state/slices/selectors'
+import type { ApiQuote } from 'state/apis/swapper'
+import { selectInputBuyAsset } from 'state/slices/selectors'
 import { selectActiveQuoteIndex } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
@@ -26,7 +26,7 @@ const arrowDownIcon = <ArrowDownIcon />
 export const TradeQuotes: React.FC<TradeQuotesProps> = memo(
   ({ sortedQuotes: _sortedQuotes, isLoading }) => {
     const wallet = useWallet().state.wallet
-    const { chainId: buyAssetChainId } = useAppSelector(selectBuyAsset)
+    const { chainId: buyAssetChainId } = useAppSelector(selectInputBuyAsset)
     const isSnapInstalled = useIsSnapInstalled()
     const walletSupportsBuyAssetChain = useWalletSupportsChain({
       chainId: buyAssetChainId,

src/components/MultiHopTrade/components/TradeInput/getQuoteErrorTranslation.ts

@@ -1,8 +1,8 @@
 import { TradeQuoteError as SwapperTradeQuoteError } from '@shapeshiftoss/swapper'
 import type { InterpolationOptions } from 'node-polyglot'
 import { assertUnreachable } from 'lib/utils'
-import type { ErrorWithMeta } from 'state/apis/swappers'
-import { type TradeQuoteError, TradeQuoteValidationError } from 'state/apis/swappers'
+import type { ErrorWithMeta } from 'state/apis/swapper'
+import { type TradeQuoteError, TradeQuoteValidationError } from 'state/apis/swapper'
 
 export const getQuoteErrorTranslation = (
   tradeQuoteError: ErrorWithMeta<TradeQuoteError>,