feat: revert of the revert of "fix: swapper transition states (#7917)" (

#8002)

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

@@ -15,6 +15,7 @@ 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'
@@ -23,7 +24,6 @@ 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 isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
+  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
   const isAccountMetadataLoadingByAccountId = useAppSelector(
     selectIsAccountMetadataLoadingByAccountId,
   )

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

@@ -16,9 +16,10 @@ 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, selectIsAccountsMetadataLoading } from 'state/slices/selectors'
+import { selectFeeAssetById } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 import { breakpoints } from 'theme/theme'
 
@@ -91,7 +92,8 @@ export const SharedTradeInputFooter = ({
   const buyAssetFeeAsset = useAppSelector(state =>
     selectFeeAssetById(state, buyAsset?.assetId ?? ''),
   )
-  const isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
+
+  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
   const walletSupportsBuyAssetChain = useWalletSupportsChain(buyAsset.chainId, wallet)
 
   const displayManualAddressEntry = useMemo(() => {
@@ -195,7 +197,6 @@ export const SharedTradeInputFooter = ({
           shouldForceManualAddressEntry={shouldForceManualAddressEntry}
           component={ManualAddressEntry}
           description={manualAddressEntryDescription}
-          chainId={buyAsset.chainId}
         />
 
         <ButtonWalletPredicate

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

@@ -10,6 +10,7 @@ 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'
@@ -20,7 +21,6 @@ import {
   selectInputBuyAsset,
   selectInputSellAmountUsd,
   selectInputSellAsset,
-  selectIsAccountsMetadataLoading,
   selectManualReceiveAddressIsEditing,
   selectManualReceiveAddressIsValid,
   selectManualReceiveAddressIsValidating,
@@ -90,7 +90,8 @@ export const ConfirmSummary = ({
   const buyAssetFeeAsset = useAppSelector(state =>
     selectFeeAssetById(state, buyAsset?.assetId ?? ''),
   )
-  const isAccountsMetadataLoading = useAppSelector(selectIsAccountsMetadataLoading)
+  const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
+
   const inputAmountUsd = useAppSelector(selectInputSellAmountUsd)
   // use the fee data from the actual quote in case it varies from the theoretical calculation
   const affiliateBps = useAppSelector(selectActiveQuoteAffiliateBps)
@@ -102,8 +103,7 @@ export const ConfirmSummary = ({
 
   const { data: _isSmartContractReceiveAddress, isLoading: isReceiveAddressByteCodeLoading } =
     useIsSmartContractAddress(receiveAddress ?? '', buyAsset.chainId)
-
-  const { sellAssetAccountId } = useAccountIds()
+  const { sellAssetAccountId, buyAssetAccountId } = 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:
+      case isAccountsMetadataLoading && !(sellAssetAccountId || buyAssetAccountId):
         return 'common.accountsLoading'
       case !shouldShowTradeQuoteOrAwaitInput:
       case !hasUserEnteredAmount:
@@ -210,6 +210,7 @@ export const ConfirmSummary = ({
     activeQuoteErrors,
     isAccountsMetadataLoading,
     sellAssetAccountId,
+    buyAssetAccountId,
     shouldShowTradeQuoteOrAwaitInput,
     hasUserEnteredAmount,
     isAnyTradeQuoteLoading,

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

@@ -1,5 +1,4 @@
 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'
@@ -9,32 +8,28 @@ 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 {
-  selectAccountIdsByAssetId,
-  selectIsAnyAccountMetadataLoadingForChainId,
-} from 'state/slices/selectors'
-import { selectInputBuyAsset } from 'state/slices/tradeInputSlice/selectors'
+  selectFirstHopSellAccountId,
+  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,
-    chainId,
-  }: ManualAddressEntryProps): JSX.Element | null => {
+  ({ description, shouldForceManualAddressEntry }: ManualAddressEntryProps): JSX.Element | null => {
     const dispatch = useAppDispatch()
 
     const {
@@ -61,27 +56,22 @@ export const ManualAddressEntry: FC<ManualAddressEntryProps> = memo(
       }),
       [wallet],
     )
+    const sellAssetAccountId = useAppSelector(selectFirstHopSellAccountId)
     const { manualReceiveAddress } = useReceiveAddress(useReceiveAddressArgs)
 
-    const isAnyAccountMetadataLoadingByChainIdFilter = useMemo(() => ({ chainId }), [chainId])
-    const isAnyAccountMetadataLoadingByChainId = useAppSelector(state =>
-      selectIsAnyAccountMetadataLoadingForChainId(
-        state,
-        isAnyAccountMetadataLoadingByChainIdFilter,
-      ),
-    )
+    const { isFetching: isAccountsMetadataLoading } = useAccountsFetchQuery()
 
     const shouldShowManualReceiveAddressInput = useMemo(() => {
-      // 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 (isAccountsMetadataLoading && !sellAssetAccountId) 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
     }, [
-      isAnyAccountMetadataLoadingByChainId,
+      isAccountsMetadataLoading,
+      sellAssetAccountId,
       shouldForceManualAddressEntry,
       manualReceiveAddress,
       wallet,

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

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