Revert "fix: swapper transition states (#7917)"

This reverts commit 4dffea9.

src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInputBody.tsx

@@ -15,7 +15,6 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { TradeAssetSelect } from 'components/AssetSelection/AssetSelection'
 import { useInputOutputDifferenceDecimalPercentage } from 'components/MultiHopTrade/hooks/useInputOutputDifference'
-import { useAccountsFetchQuery } from 'context/AppProvider/hooks/useAccountsFetchQuery'
 import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
@@ -24,6 +23,7 @@ import {
   selectHasUserEnteredAmount,
   selectHighestMarketCapFeeAsset,
   selectIsAccountMetadataLoadingByAccountId,
+  selectIsAccountsMetadataLoading,
   selectWalletConnectedChainIds,
 } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
@@ -92,7 +92,7 @@ export const SharedTradeInputBody = ({
   const walletConnectedChainIds = useAppSelector(selectWalletConnectedChainIds)
   const defaultSellAsset = useAppSelector(selectHighestMarketCapFeeAsset)
   const hasUserEnteredAmount = useAppSelector(selectHasUserEnteredAmount)
-  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
+  const isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
   const isAccountMetadataLoadingByAccountId = useAppSelector(
     selectIsAccountMetadataLoadingByAccountId,
   )

src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInputFooter.tsx

@@ -16,10 +16,9 @@ import { ReceiveSummary } from 'components/MultiHopTrade/components/TradeInput/c
 import { RecipientAddress } from 'components/MultiHopTrade/components/TradeInput/components/RecipientAddress'
 import { WithLazyMount } from 'components/MultiHopTrade/components/TradeInput/components/WithLazyMount'
 import { Text } from 'components/Text'
-import { useAccountsFetchQuery } from 'context/AppProvider/hooks/useAccountsFetchQuery'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { useWalletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
-import { selectFeeAssetById } from 'state/slices/selectors'
+import { selectFeeAssetById, selectIsAccountsMetadataLoading } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 import { breakpoints } from 'theme/theme'
 
@@ -92,8 +91,7 @@ export const SharedTradeInputFooter = ({
   const buyAssetFeeAsset = useAppSelector(state =>
     selectFeeAssetById(state, buyAsset?.assetId ?? ''),
   )
-
-  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
+  const isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
   const walletSupportsBuyAssetChain = useWalletSupportsChain(buyAsset.chainId, wallet)
 
   const displayManualAddressEntry = useMemo(() => {
@@ -197,6 +195,7 @@ export const SharedTradeInputFooter = ({
           shouldForceManualAddressEntry={shouldForceManualAddressEntry}
           component={ManualAddressEntry}
           description={manualAddressEntryDescription}
+          chainId={buyAsset.chainId}
         />
 
         <ButtonWalletPredicate

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

@@ -10,7 +10,6 @@ import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/u
 import { useAccountIds } from 'components/MultiHopTrade/hooks/useAccountIds'
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
-import { useAccountsFetchQuery } from 'context/AppProvider/hooks/useAccountsFetchQuery'
 import { useIsSmartContractAddress } from 'hooks/useIsSmartContractAddress/useIsSmartContractAddress'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { isToken } from 'lib/utils'
@@ -21,6 +20,7 @@ import {
   selectInputBuyAsset,
   selectInputSellAmountUsd,
   selectInputSellAsset,
+  selectIsAccountsMetadataLoading,
   selectManualReceiveAddressIsEditing,
   selectManualReceiveAddressIsValid,
   selectManualReceiveAddressIsValidating,
@@ -90,8 +90,7 @@ export const ConfirmSummary = ({
   const buyAssetFeeAsset = useAppSelector(state =>
     selectFeeAssetById(state, buyAsset?.assetId ?? ''),
   )
-  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
-
+  const isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
   const inputAmountUsd = useAppSelector(selectInputSellAmountUsd)
   // use the fee data from the actual quote in case it varies from the theoretical calculation
   const affiliateBps = useAppSelector(selectActiveQuoteAffiliateBps)
@@ -103,7 +102,8 @@ export const ConfirmSummary = ({
 
   const { data: _isSmartContractReceiveAddress, isLoading: isReceiveAddressByteCodeLoading } =
     useIsSmartContractAddress(receiveAddress ?? '', buyAsset.chainId)
-  const { sellAssetAccountId, buyAssetAccountId } = useAccountIds()
+
+  const { sellAssetAccountId } = useAccountIds()
 
   const isTaprootReceiveAddress = useMemo(
     () => isUtxoChainId(buyAsset.chainId) && receiveAddress?.startsWith('bc1p'),
@@ -185,7 +185,7 @@ export const ConfirmSummary = ({
     const quoteResponseError = quoteResponseErrors[0]
     const tradeQuoteError = activeQuoteErrors?.[0]
     switch (true) {
-      case isAccountsMetadataLoading && !(sellAssetAccountId || buyAssetAccountId):
+      case isAccountsMetadataLoading && !sellAssetAccountId:
         return 'common.accountsLoading'
       case !shouldShowTradeQuoteOrAwaitInput:
       case !hasUserEnteredAmount:
@@ -210,7 +210,6 @@ export const ConfirmSummary = ({
     activeQuoteErrors,
     isAccountsMetadataLoading,
     sellAssetAccountId,
-    buyAssetAccountId,
     shouldShowTradeQuoteOrAwaitInput,
     hasUserEnteredAmount,
     isAnyTradeQuoteLoading,

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

@@ -1,4 +1,5 @@
 import { FormControl, FormLabel, Link } from '@chakra-ui/react'
+import { type ChainId } from '@shapeshiftoss/caip'
 import { isLedger } from '@shapeshiftoss/hdwallet-ledger'
 import { isMetaMask } from '@shapeshiftoss/hdwallet-metamask-multichain'
 import type { FC } from 'react'
@@ -8,28 +9,32 @@ import { useTranslate } from 'react-polyglot'
 import { AddressInput } from 'components/Modals/Send/AddressInput/AddressInput'
 import { SendFormFields } from 'components/Modals/Send/SendCommon'
 import { useReceiveAddress } from 'components/MultiHopTrade/hooks/useReceiveAddress'
-import { useAccountsFetchQuery } from 'context/AppProvider/hooks/useAccountsFetchQuery'
 import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
 import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
 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 { selectAccountIdsByAssetId } from 'state/slices/selectors'
 import {
-  selectFirstHopSellAccountId,
-  selectInputBuyAsset,
-} from 'state/slices/tradeInputSlice/selectors'
+  selectAccountIdsByAssetId,
+  selectIsAnyAccountMetadataLoadingForChainId,
+} from 'state/slices/selectors'
+import { selectInputBuyAsset } from 'state/slices/tradeInputSlice/selectors'
 import { tradeInput } from 'state/slices/tradeInputSlice/tradeInputSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 type ManualAddressEntryProps = {
   description?: string
   shouldForceManualAddressEntry?: boolean
+  chainId: ChainId
 }
 
 export const ManualAddressEntry: FC<ManualAddressEntryProps> = memo(
-  ({ description, shouldForceManualAddressEntry }: ManualAddressEntryProps): JSX.Element | null => {
+  ({
+    description,
+    shouldForceManualAddressEntry,
+    chainId,
+  }: ManualAddressEntryProps): JSX.Element | null => {
     const dispatch = useAppDispatch()
 
     const {
@@ -56,22 +61,27 @@ export const ManualAddressEntry: FC<ManualAddressEntryProps> = memo(
       }),
       [wallet],
     )
-    const sellAssetAccountId = useAppSelector(selectFirstHopSellAccountId)
     const { manualReceiveAddress } = useReceiveAddress(useReceiveAddressArgs)
 
-    const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
+    const isAnyAccountMetadataLoadingByChainIdFilter = useMemo(() => ({ chainId }), [chainId])
+    const isAnyAccountMetadataLoadingByChainId = useAppSelector(state =>
+      selectIsAnyAccountMetadataLoadingForChainId(
+        state,
+        isAnyAccountMetadataLoadingByChainIdFilter,
+      ),
+    )
 
     const shouldShowManualReceiveAddressInput = useMemo(() => {
-      if (isAccountsMetadataLoading && !sellAssetAccountId) return false
+      // Some AccountIds are loading for that chain - don't show the manual address input since these will eventually be populated
+      if (isAnyAccountMetadataLoadingByChainId) return false
       if (shouldForceManualAddressEntry) return true
       if (manualReceiveAddress) return false
       // Ledger "supports" all chains, but may not have them connected
       if (wallet && isLedger(wallet)) return !buyAssetAccountIds.length
       // We want to display the manual address entry if the wallet doesn't support the buy asset chain
       return !walletSupportsBuyAssetChain
     }, [
-      isAccountsMetadataLoading,
-      sellAssetAccountId,
+      isAnyAccountMetadataLoadingByChainId,
       shouldForceManualAddressEntry,
       manualReceiveAddress,
       wallet,

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

@@ -25,6 +25,10 @@ export const WithLazyMount = <T extends object>(props: WithLazyRenderProps<T>) =
   }, Object.values(props))
 
   useEffect(() => {
+    if (!shouldUse || persistentShouldUse.current === true) {
+      return
+    }
+
     persistentShouldUse.current = shouldUse
   }, [shouldUse])