@lifi/widget 3.15.2 → 3.16.1-beta.0

package/src/hooks/useAddressActivity.ts

@@ -0,0 +1,39 @@
+import type { Address } from 'viem'
+import { isAddress } from 'viem'
+import { useTransactionCount } from 'wagmi'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+interface AddressActivity {
+  hasActivity: boolean
+  isLoading: boolean
+  isFetched: boolean
+  toAddress: string | undefined
+}
+
+export const useAddressActivity = (chainId?: number): AddressActivity => {
+  const [toAddress, toChainId] = useFieldValues('toAddress', 'toChain')
+
+  const destinationChainId = chainId ?? toChainId
+
+  const {
+    data: transactionCount,
+    isLoading,
+    isFetched,
+    error,
+  } = useTransactionCount({
+    address: toAddress as Address,
+    chainId: destinationChainId,
+    query: {
+      enabled: Boolean(toAddress && destinationChainId && isAddress(toAddress)),
+      refetchInterval: 300_000,
+      staleTime: 300_000,
+    },
+  })
+
+  return {
+    toAddress,
+    hasActivity: Boolean(transactionCount && transactionCount > 0),
+    isLoading,
+    isFetched: isFetched && !error,
+  }
+}

package/src/hooks/useGasSufficiency.ts

@@ -38,7 +38,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       // We assume that LI.Fuel protocol always refuels the destination chain
       const hasRefuelStep = route.steps
         .flatMap((step) => step.includedSteps)
-        .some((includedStep) => includedStep.tool === 'lifuelProtocol')
+        .some((includedStep) => includedStep.tool === 'gasZip')
 
       const gasCosts = route.steps
         .filter((step) => !step.execution || step.execution.status !== 'DONE')

package/src/hooks/useIsCompatibleDestinationAccount.ts

@@ -0,0 +1,58 @@
+import type { RouteExtended } from '@lifi/sdk'
+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 = (route?: RouteExtended) => {
+  const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'toAddress'
+  )
+
+  const fromChainId = route?.fromChainId ?? formFromChainId
+  const toChainId = route?.toChainId ?? formToChainId
+
+  const { chain: fromChain } = useChain(fromChainId)
+  const { chain: toChain } = useChain(toChainId)
+  const { account } = useAccount({
+    chainType: fromChain?.chainType,
+  })
+
+  const fromAddress = route?.fromAddress ?? account.address
+  const toAddress = route
+    ? route.fromAddress !== route.toAddress
+      ? route.toAddress
+      : formToAddress
+    : formToAddress
+
+  const {
+    isContractAddress: isFromContractAddress,
+    contractCode: fromContractCode,
+    isLoading: isFromContractLoading,
+    isFetched: isFromContractFetched,
+  } = useIsContractAddress(fromAddress, fromChainId, fromChain?.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 &&
+    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
+
+  return {
+    isCompatibleDestinationAccount: !accountNotDeployedAtDestination,
+    isFromContractAddress,
+    isToContractAddress,
+    isLoading: isFromContractLoading || isToContractLoading,
+    isFetched: isFromContractFetched && isToContractFetched,
+  }
+}

package/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,
+  }
 }

package/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,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const { token: toToken } = useToken(toChainId, toTokenAddress)
   const { chain: fromChain } = useChain(fromChainId)
   const { chain: toChain } = useChain(toChainId)
+  const { isCompatibleDestinationAccount } =
+    useIsCompatibleDestinationAccount(observableRoute)
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel()
 
@@ -107,6 +110,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 +144,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     allowedExchanges,
     routePriority,
     subvariant,
-    sdkConfig?.routeOptions?.allowSwitchChain,
+    allowSwitchChain,
     enabledRefuel && enabledAutoRefuel,
     gasRecommendationFromAmount,
     feeConfig?.fee || fee,

package/src/hooks/useToAddressRequirements.ts

@@ -1,31 +1,36 @@
+import type { RouteExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 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 = () => {
+export const useToAddressRequirements = (route?: RouteExtended) => {
   const { requiredUI } = useWidgetConfig()
-  const [fromChainId, toChainId, toAddress] = useFieldValues(
+  const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
     'fromChain',
     'toChain',
     'toAddress'
   )
+
+  const fromChainId = route?.fromChainId ?? formFromChainId
+  const toChainId = route?.toChainId ?? formToChainId
+  const toAddress = route
+    ? route.fromAddress !== route.toAddress
+      ? route.toAddress
+      : formToAddress
+    : formToAddress
+
   const { chain: fromChain } = useChain(fromChainId)
   const { chain: toChain } = useChain(toChainId)
   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 +39,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 +47,6 @@ export const useToAddressRequirements = () => {
   return {
     requiredToAddress,
     requiredToChainType: toChain?.chainType,
-    accountNotDeployedAtDestination,
     toAddress,
   }
 }

package/src/i18n/en.json

@@ -90,7 +90,7 @@
       "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
       "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination.",
-      "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred."
+      "toAddressIsRequired": "The destination wallet address is required to proceed with the transfer."
     },
     "title": {
       "autoRefuel": "Get {{chainName}} gas",
@@ -118,6 +118,8 @@
   "warning": {
     "message": {
       "accountNotDeployedMessage": "Smart contract account is not deployed on the destination chain. Sending funds to a non-existent contract would result in permanent loss.",
+      "noAddressActivity": "This address has never been used on this network. Please verify you're sending to the correct address to prevent potential loss of funds.",
+      "lowAddressActivity": "This address has low activity on {{chainName}} network. Please verify you're sending to the correct address and network to prevent potential loss of funds.",
       "deleteActiveTransactions": "Active transactions are only stored locally and can't be recovered if you delete them.",
       "deleteTransactionHistory": "Transaction history is only stored locally and can't be recovered if you delete it.",
       "fundsLossPrevention": "Always ensure smart contract accounts are properly set up on the destination chain and avoid direct transfers to exchanges to prevent fund loss.",
@@ -135,7 +137,8 @@
       "highValueLoss": "High value loss",
       "insufficientGas": "Insufficient gas",
       "rateChanged": "Rate changed",
-      "resetSettings": "Reset settings?"
+      "resetSettings": "Reset settings?",
+      "lowAddressActivity": "Low Activity Address"
     }
   },
   "error": {

package/src/pages/MainPage/MainPage.tsx

@@ -4,7 +4,6 @@ import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTr
 import { AmountInput } from '../../components/AmountInput/AmountInput.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
-import { MainMessages } from '../../components/Messages/MainMessages.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'
 import { Routes } from '../../components/Routes/Routes.js'
@@ -15,6 +14,7 @@ import { useHeader } from '../../hooks/useHeader.js'
 import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../../types/widget.js'
+import { MainWarningMessages } from './MainWarningMessages.js'
 import { ReviewButton } from './ReviewButton.js'
 
 export const MainPage: React.FC = () => {
@@ -49,7 +49,7 @@ export const MainPage: React.FC = () => {
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
       <GasRefuelMessage mb={2} />
-      <MainMessages mb={2} />
+      <MainWarningMessages mb={2} />
       <Box
         sx={{
           display: 'flex',

package/src/pages/MainPage/MainWarningMessages.tsx

@@ -0,0 +1,17 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+
+interface MainWarningMessagesProps extends BoxProps {
+  route?: Route
+}
+
+export const MainWarningMessages: React.FC<MainWarningMessagesProps> = (
+  props
+) => {
+  const { routes } = useRoutes()
+  const currentRoute = routes?.[0]
+
+  return <WarningMessages route={currentRoute} {...props} />
+}

package/src/pages/MainPage/ReviewButton.tsx

@@ -1,11 +1,11 @@
 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'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -16,24 +16,25 @@ export const ReviewButton: React.FC = () => {
   const emitter = useWidgetEvents()
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const splitState = useSplitSubvariantStore((state) => state.state)
-  const [toAddress] = useFieldValues('toAddress')
-  const { requiredToAddress, accountNotDeployedAtDestination } =
-    useToAddressRequirements()
+  const { toAddress, requiredToAddress } = useToAddressRequirements()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
   const { routes, setReviewableRoute } = useRoutes()
 
   const currentRoute = routes?.[0]
 
   const handleClick = async () => {
-    if (currentRoute) {
-      setReviewableRoute(currentRoute)
-      navigate(navigationRoutes.transactionExecution, {
-        state: { routeId: currentRoute.id },
-      })
-      emitter.emit(WidgetEvent.RouteSelected, {
-        route: currentRoute,
-        routes: routes!,
-      })
+    if (!currentRoute) {
+      return
     }
+
+    setReviewableRoute(currentRoute)
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: currentRoute.id },
+    })
+    emitter.emit(WidgetEvent.RouteSelected, {
+      route: currentRoute,
+      routes: routes!,
+    })
   }
 
   const getButtonText = (): string => {
@@ -75,7 +76,7 @@ export const ReviewButton: React.FC = () => {
       onClick={handleClick}
       disabled={
         (currentRoute && requiredToAddress && !toAddress) ||
-        accountNotDeployedAtDestination
+        !isCompatibleDestinationAccount
       }
     />
   )

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -8,6 +8,7 @@ import { RouteCard } from '../../components/RouteCard/RouteCard.js'
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
@@ -18,6 +19,7 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { Stack } from './RoutesPage.style.js'
 
 export const RoutesPage: React.FC<BoxProps> = () => {
+  const { t } = useTranslation()
   const { navigate } = useNavigateBack()
   const emitter = useWidgetEvents()
   const {
@@ -33,8 +35,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
-
-  const { t } = useTranslation()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
 
   const headerAction = useMemo(
     () => (
@@ -65,7 +66,9 @@ export const RoutesPage: React.FC<BoxProps> = () => {
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching
 
-  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    (routes?.[0] && requiredToAddress && !toAddress) ||
+    !isCompatibleDestinationAccount
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (

package/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -0,0 +1,96 @@
+import { Wallet, WarningRounded } from '@mui/icons-material'
+import { Button, Typography } from '@mui/material'
+import type { MutableRefObject } from 'react'
+import { forwardRef, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { useChain } from '../../hooks/useChain.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { WidgetEvent } from '../../types/events.js'
+import {
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+} from '../SendToWallet/SendToWalletPage.style.js'
+
+interface ConfirmToAddressSheetProps {
+  onContinue: () => void
+  toAddress: string
+  toChainId: number
+}
+
+interface ConfirmToAddressSheetContentProps extends ConfirmToAddressSheetProps {
+  onClose: () => void
+}
+
+export const ConfirmToAddressSheet = forwardRef<
+  BottomSheetBase,
+  ConfirmToAddressSheetProps
+>((props, ref) => {
+  const handleClose = () => {
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref}>
+      <ConfirmToAddressSheetContent {...props} onClose={handleClose} />
+    </BottomSheet>
+  )
+})
+
+const ConfirmToAddressSheetContent: React.FC<
+  ConfirmToAddressSheetContentProps
+> = ({ onContinue, onClose, toAddress, toChainId }) => {
+  const { t } = useTranslation()
+  const { chain } = useChain(toChainId)
+  const emitter = useWidgetEvents()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+
+  const handleContinue = () => {
+    emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {
+      address: toAddress,
+      chainId: toChainId,
+    })
+    onClose()
+    onContinue()
+  }
+
+  return (
+    <SendToWalletSheetContainer ref={ref}>
+      <IconContainer>
+        <Wallet sx={{ fontSize: 40 }} />
+      </IconContainer>
+      <Typography variant="h6" sx={{ textAlign: 'center', mb: 2 }}>
+        {t('warning.title.lowAddressActivity')}
+      </Typography>
+      <SheetAddressContainer>
+        <Typography>{toAddress}</Typography>
+      </SheetAddressContainer>
+      <AlertMessage
+        severity="warning"
+        title={
+          <Typography variant="body2" sx={{ color: 'text.primary' }}>
+            {t('warning.message.lowAddressActivity', {
+              chainName: chain?.name,
+            })}
+          </Typography>
+        }
+        icon={<WarningRounded />}
+        multiline
+      />
+      <SendToWalletButtonRow>
+        <Button variant="text" onClick={onClose} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleContinue} fullWidth>
+          {t('button.continue')}
+        </Button>
+      </SendToWalletButtonRow>
+    </SendToWalletSheetContainer>
+  )
+}

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,6 +1,5 @@
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
-import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
-import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
 import type { StartTransactionButtonProps } from './types.js'
 
 export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
@@ -9,21 +8,14 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
   text,
   loading,
 }) => {
-  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
-    useGasSufficiency(route)
-  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
-    useFromTokenSufficiency(route)
-
-  const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length
+  const { hasMessages, isLoading } = useMessageQueue(route)
 
   return (
     <BaseTransactionButton
       onClick={onClick}
       text={text}
-      disabled={shouldDisableButton}
-      loading={
-        isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading
-      }
+      disabled={hasMessages}
+      loading={isLoading || loading}
     />
   )
 }

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -6,10 +6,11 @@ import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
-import { GasMessage } from '../../components/Messages/GasMessage.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { getStepList } from '../../components/Step/StepList.js'
 import { TransactionDetails } from '../../components/TransactionDetails.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
 import { useHeader } from '../../hooks/useHeader.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useRouteExecution } from '../../hooks/useRouteExecution.js'
@@ -19,6 +20,7 @@ import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 import { WidgetEvent } from '../../types/events.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'
 import { RouteTracker } from './RouteTracker.js'
@@ -44,6 +46,7 @@ export const TransactionPage: React.FC = () => {
 
   const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
   const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
 
   const onAcceptExchangeRateUpdate = (
     resolver: (value: boolean) => void,
@@ -58,6 +61,13 @@ export const TransactionPage: React.FC = () => {
       onAcceptExchangeRateUpdate,
     })
 
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route?.toChainId)
+
   const getHeaderTitle = () => {
     if (subvariant === 'custom') {
       return t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
@@ -127,6 +137,16 @@ export const TransactionPage: React.FC = () => {
 
   const handleStartClick = async () => {
     if (status === RouteExecutionStatus.Idle) {
+      if (
+        toAddress &&
+        !hasActivity &&
+        !isLoadingAddressActivity &&
+        isActivityAddressFetched
+      ) {
+        confirmToAddressSheetRef.current?.open()
+        return
+      }
+
       const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
       const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
       const toAmountUSD = Number.parseFloat(route.toAmountUSD)
@@ -187,7 +207,7 @@ export const TransactionPage: React.FC = () => {
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
         <>
-          <GasMessage mt={2} route={route} />
+          <WarningMessages mt={2} route={route} />
           <Box
             sx={{
               mt: 2,
@@ -198,7 +218,7 @@ export const TransactionPage: React.FC = () => {
               text={getButtonText()}
               onClick={handleStartClick}
               route={route}
-              loading={routeRefreshing}
+              loading={routeRefreshing || isLoadingAddressActivity}
             />
             {status === RouteExecutionStatus.Failed ? (
               <Tooltip
@@ -228,6 +248,12 @@ export const TransactionPage: React.FC = () => {
         />
       ) : null}
       <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
+      <ConfirmToAddressSheet
+        ref={confirmToAddressSheetRef}
+        onContinue={handleExecuteRoute}
+        toAddress={toAddress!}
+        toChainId={route.toChainId!}
+      />
     </PageContainer>
   )
 }

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -76,7 +76,10 @@ export const URLSearchParamsBuilder = () => {
           const validationResult = await validateAddress({
             value: formValues.toAddress,
           })
-          if (validationResult.isValid) {
+          // Check if the toAddress is still in the query string
+          // Could be modified by the user before the validation is done
+          const { toAddress } = getDefaultValuesFromQueryString()
+          if (validationResult.isValid && toAddress) {
             const bookmark = {
               address: validationResult.address,
               chainType: validationResult.chainType,

package/src/types/events.ts

@@ -29,6 +29,7 @@ export enum WidgetEvent {
   FormFieldChanged = 'formFieldChanged',
   SettingUpdated = 'settingUpdated',
   TokenSearch = 'tokenSearch',
+  LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
 }
 
 export type WidgetEvents = {
@@ -50,6 +51,10 @@ export type WidgetEvents = {
   pageEntered: NavigationRouteType
   settingUpdated: SettingUpdated
   tokenSearch: TokenSearch
+  [WidgetEvent.LowAddressActivityConfirmed]: {
+    address: string
+    chainId: number
+  }
 }
 
 export type ContactSupport = {

package/dist/esm/components/Messages/MainMessages.d.ts

@@ -1,2 +0,0 @@
-import type { BoxProps } from '@mui/material';
-export declare const MainMessages: React.FC<BoxProps>;