fix: restrict 2-step routes if account is not deployed on destination… (

#346)

packages/widget/src/components/Messages/useMessageQueue.ts

@@ -2,6 +2,7 @@ import type { Route } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 
 interface QueuedMessage {
@@ -11,8 +12,8 @@ interface QueuedMessage {
 }
 
 export const useMessageQueue = (route?: Route) => {
-  const { requiredToAddress, accountNotDeployedAtDestination, toAddress } =
-    useToAddressRequirements()
+  const { requiredToAddress, toAddress } = useToAddressRequirements()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
   const { insufficientFromToken } = useFromTokenSufficiency(route)
   const { insufficientGas } = useGasSufficiency(route)
 
@@ -34,7 +35,7 @@ export const useMessageQueue = (route?: Route) => {
       })
     }
 
-    if (accountNotDeployedAtDestination) {
+    if (!isCompatibleDestinationAccount) {
       queue.push({
         id: 'ACCOUNT_NOT_DEPLOYED',
         priority: 3,
@@ -50,7 +51,7 @@ export const useMessageQueue = (route?: Route) => {
 
     return queue.sort((a, b) => a.priority - b.priority)
   }, [
-    accountNotDeployedAtDestination,
+    isCompatibleDestinationAccount,
     insufficientFromToken,
     insufficientGas,
     requiredToAddress,

packages/widget/src/hooks/useIsCompatibleDestinationAccount.ts

@@ -0,0 +1,46 @@
+import { useAccount } from '@lifi/wallet-management'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { isDelegationDesignatorCode } from '../utils/eip7702.js'
+import { useChain } from './useChain.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
+
+export const useIsCompatibleDestinationAccount = () => {
+  const [fromChainId, toChainId, toAddress] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'toAddress'
+  )
+  const { chain: fromChain } = useChain(fromChainId)
+  const { chain: toChain } = useChain(toChainId)
+  const { account } = useAccount({
+    chainType: fromChain?.chainType,
+  })
+
+  const {
+    isContractAddress: isFromContractAddress,
+    contractCode: fromContractCode,
+    isLoading: isFromContractLoading,
+    isFetched: isFromContractFetched,
+  } = useIsContractAddress(account.address, fromChainId, account.chainType)
+  const {
+    isContractAddress: isToContractAddress,
+    isLoading: isToContractLoading,
+    isFetched: isToContractFetched,
+  } = useIsContractAddress(toAddress, toChainId, toChain?.chainType)
+
+  const accountNotDeployedAtDestination =
+    isFromContractAddress &&
+    // We don't want to block transfers for EIP-7702 accounts since they are designed
+    // to maintain EOA-like properties while delegating execution.
+    !isDelegationDesignatorCode(fromContractCode) &&
+    !isToContractAddress &&
+    account.address?.toLowerCase() === toAddress?.toLowerCase()
+
+  return {
+    isCompatibleDestinationAccount: !accountNotDeployedAtDestination,
+    isFromContractAddress,
+    isToContractAddress,
+    isLoading: isFromContractLoading || isToContractLoading,
+    isFetched: isFromContractFetched && isToContractFetched,
+  }
+}

packages/widget/src/hooks/useIsContractAddress.ts

@@ -7,7 +7,11 @@ export const useIsContractAddress = (
   chainId?: number,
   chainType?: ChainType
 ) => {
-  const { data: contractCode } = useBytecode({
+  const {
+    data: contractCode,
+    isLoading,
+    isFetched,
+  } = useBytecode({
     address: address as Address,
     chainId: chainId,
     query: {
@@ -17,5 +21,10 @@ export const useIsContractAddress = (
     },
   })
 
-  return { isContractAddress: !!contractCode, contractCode }
+  return {
+    isContractAddress: !!contractCode,
+    contractCode,
+    isLoading,
+    isFetched,
+  }
 }

packages/widget/src/hooks/useRoutes.ts

@@ -13,6 +13,7 @@ import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { useChain } from './useChain.js'
 import { useDebouncedWatch } from './useDebouncedWatch.js'
 import { useGasRefuel } from './useGasRefuel.js'
+import { useIsCompatibleDestinationAccount } from './useIsCompatibleDestinationAccount.js'
 import { useSwapOnly } from './useSwapOnly.js'
 import { useToken } from './useToken.js'
 import { useWidgetEvents } from './useWidgetEvents.js'
@@ -76,6 +77,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const { token: toToken } = useToken(toChainId, toTokenAddress)
   const { chain: fromChain } = useChain(fromChainId)
   const { chain: toChain } = useChain(toChainId)
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel()
 
@@ -107,6 +109,9 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     exchanges?.allow?.length || exchanges?.deny?.length
       ? enabledExchanges
       : undefined
+  const allowSwitchChain = isCompatibleDestinationAccount
+    ? sdkConfig?.routeOptions?.allowSwitchChain
+    : false
 
   const isEnabled =
     Boolean(Number(fromChainId)) &&
@@ -138,7 +143,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     allowedExchanges,
     routePriority,
     subvariant,
-    sdkConfig?.routeOptions?.allowSwitchChain,
+    allowSwitchChain,
     enabledRefuel && enabledAutoRefuel,
     gasRecommendationFromAmount,
     feeConfig?.fee || fee,

packages/widget/src/hooks/useToAddressRequirements.ts

@@ -3,7 +3,6 @@ import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { RequiredUI } from '../types/widget.js'
-import { isDelegationDesignatorCode } from '../utils/eip7702.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = () => {
@@ -18,14 +17,10 @@ export const useToAddressRequirements = () => {
   const { account } = useAccount({
     chainType: fromChain?.chainType,
   })
-  const {
-    isContractAddress: isFromContractAddress,
-    contractCode: fromContractCode,
-  } = useIsContractAddress(account.address, fromChainId, account.chainType)
-  const { isContractAddress: isToContractAddress } = useIsContractAddress(
-    toAddress,
-    toChainId,
-    toChain?.chainType
+  const { isContractAddress: isFromContractAddress } = useIsContractAddress(
+    account.address,
+    fromChainId,
+    account.chainType
   )
 
   const isDifferentChainType =
@@ -34,14 +29,6 @@ export const useToAddressRequirements = () => {
   const isCrossChainContractAddress =
     isFromContractAddress && fromChainId !== toChainId
 
-  const accountNotDeployedAtDestination =
-    isFromContractAddress &&
-    // We don't want to block transfers for EIP-7702 accounts since they are designed
-    // to maintain EOA-like properties while delegating execution.
-    !isDelegationDesignatorCode(fromContractCode) &&
-    !isToContractAddress &&
-    account.address?.toLowerCase() === toAddress?.toLowerCase()
-
   const requiredToAddress =
     requiredUI?.includes(RequiredUI.ToAddress) ||
     isDifferentChainType ||
@@ -50,7 +37,6 @@ export const useToAddressRequirements = () => {
   return {
     requiredToAddress,
     requiredToChainType: toChain?.chainType,
-    accountNotDeployedAtDestination,
     toAddress,
   }
 }

packages/widget/src/pages/MainPage/ReviewButton.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -15,8 +16,8 @@ export const ReviewButton: React.FC = () => {
   const emitter = useWidgetEvents()
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const splitState = useSplitSubvariantStore((state) => state.state)
-  const { toAddress, requiredToAddress, accountNotDeployedAtDestination } =
-    useToAddressRequirements()
+  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
   const { routes, setReviewableRoute } = useRoutes()
 
   const currentRoute = routes?.[0]
@@ -75,7 +76,7 @@ export const ReviewButton: React.FC = () => {
       onClick={handleClick}
       disabled={
         (currentRoute && requiredToAddress && !toAddress) ||
-        accountNotDeployedAtDestination
+        !isCompatibleDestinationAccount
       }
     />
   )