Merge branch 'main' into LF-10831-transaction-history-page-virtualiza…

…tion

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.16.1](https://github.com/lifinance/widget/compare/v3.16.0...v3.16.1) (2025-02-11)
+
+
+### Bug Fixes
+
+* improve SCA as destination flow ([#350](https://github.com/lifinance/widget/issues/350)) ([c58e5dd](https://github.com/lifinance/widget/commit/c58e5dd5835f8b25411f9b33070c914702f659ab))
+* replace lifuel protocol with gasZip ([#347](https://github.com/lifinance/widget/issues/347)) ([8b4bdf2](https://github.com/lifinance/widget/commit/8b4bdf24936c01f4efd24f8a370262992cd545a0))
+* restrict 2-step routes if account is not deployed on destination… ([#346](https://github.com/lifinance/widget/issues/346)) ([bf48c3c](https://github.com/lifinance/widget/commit/bf48c3c0ed5501bc720dfa8003f1b0ffd3ec571d))
+
 ## [3.16.0](https://github.com/lifinance/widget/compare/v3.15.2...v3.16.0) (2025-02-01)
 
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.16.0",
+  "version": "3.16.1",
   "private": true,
   "sideEffects": false,
   "type": "module",

packages/widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",

packages/widget/src/components/Messages/MainMessages.tsx → packages/widget/src/components/Messages/WarningMessages.tsx

@@ -1,16 +1,21 @@
+import type { Route } from '@lifi/sdk'
 import type { BoxProps } from '@mui/material'
 import { Collapse } from '@mui/material'
-import { useRoutes } from '../../hooks/useRoutes.js'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
-export const MainMessages: React.FC<BoxProps> = (props) => {
-  const { routes } = useRoutes()
-  const currentRoute = routes?.[0]
-  const { currentMessage, hasMessages } = useMessageQueue(currentRoute)
+type WarningMessagesProps = BoxProps & {
+  route?: Route
+}
+
+export const WarningMessages: React.FC<WarningMessagesProps> = ({
+  route,
+  ...props
+}) => {
+  const { currentMessage, hasMessages } = useMessageQueue(route)
 
   const getMessage = () => {
     switch (currentMessage?.id) {

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

@@ -12,10 +12,15 @@ interface QueuedMessage {
 }
 
 export const useMessageQueue = (route?: Route) => {
-  const { requiredToAddress, toAddress } = useToAddressRequirements()
-  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
-  const { insufficientFromToken } = useFromTokenSufficiency(route)
-  const { insufficientGas } = useGasSufficiency(route)
+  const { requiredToAddress, toAddress } = useToAddressRequirements(route)
+  const {
+    isCompatibleDestinationAccount,
+    isLoading: isCompatibleDestinationAccountLoading,
+  } = useIsCompatibleDestinationAccount(route)
+  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
+    useFromTokenSufficiency(route)
+  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
+    useGasSufficiency(route)
 
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
@@ -61,5 +66,9 @@ export const useMessageQueue = (route?: Route) => {
   return {
     currentMessage: messageQueue[0],
     hasMessages: messageQueue.length > 0,
+    isLoading:
+      isGasSufficiencyLoading ||
+      isFromTokenSufficiencyLoading ||
+      isCompatibleDestinationAccountLoading,
   }
 }

packages/widget/src/components/Routes/RoutesExpanded.tsx

@@ -5,6 +5,7 @@ import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { RouteObject } from 'react-router-dom'
 import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom'
+import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -82,6 +83,7 @@ export const RoutesExpandedElement = () => {
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
+  const { isCompatibleDestinationAccount } = useIsCompatibleDestinationAccount()
 
   const handleRouteClick = (route: Route) => {
     setReviewableRoute(route)
@@ -111,7 +113,9 @@ export const RoutesExpandedElement = () => {
   )
 
   const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    (currentRoute && requiredToAddress && !toAddress) ||
+    !isCompatibleDestinationAccount
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   useEffect(() => {

packages/widget/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.16.0'
+export const version = '3.16.1'

packages/widget/src/hooks/useIsCompatibleDestinationAccount.ts

@@ -1,27 +1,39 @@
+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 = () => {
-  const [fromChainId, toChainId, toAddress] = useFieldValues(
+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(account.address, fromChainId, account.chainType)
+  } = useIsContractAddress(fromAddress, fromChainId, fromChain?.chainType)
   const {
     isContractAddress: isToContractAddress,
     isLoading: isToContractLoading,
@@ -34,7 +46,7 @@ export const useIsCompatibleDestinationAccount = () => {
     // to maintain EOA-like properties while delegating execution.
     !isDelegationDesignatorCode(fromContractCode) &&
     !isToContractAddress &&
-    account.address?.toLowerCase() === toAddress?.toLowerCase()
+    fromAddress?.toLowerCase() === toAddress?.toLowerCase()
 
   return {
     isCompatibleDestinationAccount: !accountNotDeployedAtDestination,

packages/widget/src/hooks/useRoutes.ts

@@ -77,7 +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()
+  const { isCompatibleDestinationAccount } =
+    useIsCompatibleDestinationAccount(observableRoute)
   const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
     useGasRefuel()
 

packages/widget/src/hooks/useToAddressRequirements.ts

@@ -1,17 +1,27 @@
+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 { 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({

packages/widget/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",

packages/widget/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',

packages/widget/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} />
+}

packages/widget/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 (

packages/widget/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,12 +1,13 @@
 import { Wallet, WarningRounded } from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
 import type { MutableRefObject } from 'react'
-import { forwardRef } 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 {
@@ -47,6 +48,8 @@ const ConfirmToAddressSheetContent: React.FC<
   const { t } = useTranslation()
   const { chain } = useChain(toChainId)
   const emitter = useWidgetEvents()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
 
   const handleContinue = () => {
     emitter.emit(WidgetEvent.LowAddressActivityConfirmed, {
@@ -58,7 +61,7 @@ const ConfirmToAddressSheetContent: React.FC<
   }
 
   return (
-    <SendToWalletSheetContainer>
+    <SendToWalletSheetContainer ref={ref}>
       <IconContainer>
         <Wallet sx={{ fontSize: 40 }} />
       </IconContainer>

packages/widget/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}
     />
   )
 }

packages/widget/src/pages/TransactionPage/TransactionPage.tsx

@@ -6,7 +6,7 @@ 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'
@@ -207,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,

packages/widget/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,