@lifi/widget 3.8.2 → 3.10.0

package/dist/esm/stores/form/useFieldActions.d.ts

@@ -4,6 +4,7 @@ export declare const useFieldActions: () => {
     setUserAndDefaultValues: (formValues: Partial<DefaultValues>) => void;
     setDefaultValues: (formValues: DefaultValues) => void;
     isTouched: (fieldName: FormFieldNames) => boolean;
+    isDirty: (fieldName: FormFieldNames) => boolean;
     setAsTouched: (fieldName: FormFieldNames) => void;
     resetField: (fieldName: FormFieldNames, resetOptions?: import("./types.js").ResetOptions) => void;
     getFieldValues: <T extends FormFieldNames[]>(...names: T) => import("./types.js").FormFieldArray<T>;

package/dist/esm/stores/form/useFieldActions.js

@@ -8,6 +8,7 @@ export const useFieldActions = () => {
     const actions = useFormStore((store) => ({
         getFieldValues: store.getFieldValues,
         isTouched: store.isTouched,
+        isDirty: store.isDirty,
         resetField: store.resetField,
         setAsTouched: store.setAsTouched,
         setDefaultValues: store.setDefaultValues,

package/dist/esm/stores/form/useFieldActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldActions.js","sourceRoot":"","sources":["../../../../src/stores/form/useFieldActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAQnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,OAAO,GAAG,YAAY,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACV,cAAc,EAAE,KAAK,CAAC,cAAc;QACpC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,uBAAuB,EAAE,KAAK,CAAC,uBAAuB;KACvD,CAAC,EACF,OAAO,CACR,CAAA;IAED,MAAM,8BAA8B,GAAG,WAAW,CAChD,CACE,SAAyB,EACzB,QAA0B,EAC1B,OAAoB,EACpB,EAAE;QACF,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAErD,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;QAEnD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE;gBACzC,SAAS;gBACT,QAAQ;gBACR,QAAQ;aACW,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;IAED,MAAM,wCAAwC,GAAG,WAAW,CAC1D,CAAC,UAAkC,EAAE,EAAE;QACrC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAqB,CAAA;QAElE,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CACzC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YACrD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;YAEtC,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC1B,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;YAC/C,CAAC;YAED,OAAO,KAAK,CAAA;QACd,CAAC,EACD,EAIG,CACJ,CAAA;QAED,OAAO,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAA;QAE3C,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC1D,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE;gBACzC,SAAS;gBACT,QAAQ;gBACR,QAAQ;aACW,CAAC,CAAA;QACxB,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;IAED,OAAO;QACL,GAAG,OAAO;QACV,aAAa,EAAE,8BAA8B;QAC7C,uBAAuB,EAAE,wCAAwC;KAClE,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"useFieldActions.js","sourceRoot":"","sources":["../../../../src/stores/form/useFieldActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAQnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,eAAe,EAAE,CAAA;IACjC,MAAM,OAAO,GAAG,YAAY,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACV,cAAc,EAAE,KAAK,CAAC,cAAc;QACpC,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,uBAAuB,EAAE,KAAK,CAAC,uBAAuB;KACvD,CAAC,EACF,OAAO,CACR,CAAA;IAED,MAAM,8BAA8B,GAAG,WAAW,CAChD,CACE,SAAyB,EACzB,QAA0B,EAC1B,OAAoB,EACpB,EAAE;QACF,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;QAErD,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;QAEnD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE;gBACzC,SAAS;gBACT,QAAQ;gBACR,QAAQ;aACW,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;IAED,MAAM,wCAAwC,GAAG,WAAW,CAC1D,CAAC,UAAkC,EAAE,EAAE;QACrC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAqB,CAAA;QAElE,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CACzC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YACrD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;YAEtC,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC1B,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;YAC/C,CAAC;YAED,OAAO,KAAK,CAAA;QACd,CAAC,EACD,EAIG,CACJ,CAAA;QAED,OAAO,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAA;QAE3C,aAAa,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC1D,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE;gBACzC,SAAS;gBACT,QAAQ;gBACR,QAAQ;aACW,CAAC,CAAA;QACxB,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;IAED,OAAO;QACL,GAAG,OAAO;QACV,aAAa,EAAE,8BAA8B;QAC7C,uBAAuB,EAAE,wCAAwC;KAClE,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/types/widget.d.ts

@@ -60,6 +60,15 @@ export interface WidgetWalletConfig {
     walletConnect?: WalletConnectParameters;
     coinbase?: CoinbaseWalletParameters;
     metaMask?: MetaMaskParameters;
+    /**
+     * Determines whether the widget should provide partial wallet management functionality.
+     *
+     * In partial mode, external wallet management will be used for "opt-out" providers,
+     * while the internal management is applied for any remaining providers that do not opt out.
+     * This allows a flexible balance between the integrator’s custom wallet menu and the widget’s native wallet menu.
+     * @default false
+     */
+    usePartialWalletManagement?: boolean;
 }
 export interface WidgetSDKConfig extends Omit<SDKConfig, 'apiKey' | 'disableVersionCheck' | 'integrator' | 'routeOptions' | 'widgetVersion'> {
     routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.8.2",
+  "version": "3.10.0",
   "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": "./dist/esm/index.js",
@@ -30,12 +30,12 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.0.3",
-    "@bigmi/core": "^0.0.3",
-    "@bigmi/react": "^0.0.3",
+    "@bigmi/client": "^0.0.4",
+    "@bigmi/core": "^0.0.4",
+    "@bigmi/react": "^0.0.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@lifi/sdk": "^3.3.1",
+    "@lifi/sdk": "^3.4.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
@@ -45,7 +45,7 @@
     "@solana/web3.js": "^1.95.4",
     "@tanstack/react-query": "^5.59.16",
     "@tanstack/react-virtual": "^3.10.8",
-    "i18next": "^23.16.3",
+    "i18next": "^23.16.4",
     "microdiff": "^1.4.0",
     "mitt": "^3.0.1",
     "react": "^18.3.1",
@@ -53,10 +53,10 @@
     "react-i18next": "^15.1.0",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.27.0",
-    "viem": "^2.21.34",
+    "viem": "^2.21.35",
     "wagmi": "^2.12.25",
     "zustand": "^4.5.5",
-    "@lifi/wallet-management": "^3.3.1"
+    "@lifi/wallet-management": "^3.4.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/components/ChainSelect/useChainSelect.ts

@@ -2,7 +2,7 @@ import type { EVMChain } from '@lifi/sdk'
 import { useChains } from '../../hooks/useChains.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrder } from '../../stores/chains/useChainOrder.js'
 import type { FormType } from '../../stores/form/types.js'
@@ -16,11 +16,16 @@ export const useChainSelect = (formType: FormType) => {
   const chainKey = FormKeyHelper.getChainKey(formType)
   const { onChange } = useFieldController({ name: chainKey })
   const { setFieldValue, getFieldValues } = useFieldActions()
-  const { hasExternalProvider, availableChainTypes } =
-    useHasExternalWalletProvider()
+  const { useExternalWalletProvidersOnly, externalChainTypes } =
+    useExternalWalletProvider()
   const { chains, isLoading, getChainById } = useChains(
     formType,
-    formType === 'from' && hasExternalProvider ? availableChainTypes : undefined
+    // If the integrator uses external wallet management and has not opted in for partial wallet management,
+    // restrict the displayed chains to those compatible with external wallet management.
+    // This ensures users only see chains for which they can sign transactions.
+    formType === 'from' && useExternalWalletProvidersOnly
+      ? externalChainTypes
+      : undefined
   )
 
   const [chainOrder, setChainOrder] = useChainOrder(formType)

package/src/components/Header/CloseDrawerButton.tsx

@@ -2,7 +2,7 @@ import { CloseRounded } from '@mui/icons-material'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 
 interface CloseDrawerButtonProps {
@@ -13,10 +13,11 @@ export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
   const { t } = useTranslation()
   const { subvariant } = useWidgetConfig()
   const { closeDrawer } = useDrawer()
-  const { hasExternalProvider } = useHasExternalWalletProvider()
+  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
 
   const showInNavigationHeader =
-    header === 'navigation' && (hasExternalProvider || subvariant === 'split')
+    header === 'navigation' &&
+    (useExternalWalletProvidersOnly || subvariant === 'split')
 
   const showInWalletHeader = header === 'wallet' && subvariant !== 'split'
 

package/src/components/Header/WalletHeader.tsx

@@ -9,8 +9,9 @@ import { Avatar, Badge } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
-import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { HiddenUI } from '../../types/widget.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { SmallAvatar } from '../Avatar/SmallAvatar.js'
@@ -24,12 +25,23 @@ import {
 import { WalletMenu } from './WalletMenu.js'
 import { WalletMenuContainer } from './WalletMenu.style.js'
 
-export const WalletHeader: React.FC = () => {
+const useInternalWalletManagement = () => {
   const { subvariant, hiddenUI } = useWidgetConfig()
-  const { hasExternalProvider } = useHasExternalWalletProvider()
-  return !hasExternalProvider &&
-    subvariant !== 'split' &&
-    !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
+  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()
+
+  const isSplitVariant = subvariant === 'split'
+  const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)
+
+  const shouldShowWalletMenu =
+    !useExternalWalletProvidersOnly && !isSplitVariant && !isWalletMenuHidden
+
+  return shouldShowWalletMenu
+}
+
+export const WalletHeader: React.FC = () => {
+  const shouldShowWalletMenu = useInternalWalletManagement()
+
+  return shouldShowWalletMenu ? (
     <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>
       <WalletMenuButton />
     </HeaderAppBar>
@@ -37,22 +49,27 @@ export const WalletHeader: React.FC = () => {
 }
 
 export const SplitWalletMenuButton: React.FC = () => {
-  const { hiddenUI } = useWidgetConfig()
-  const { hasExternalProvider } = useHasExternalWalletProvider()
-  return !hasExternalProvider && !hiddenUI?.includes(HiddenUI.WalletMenu) ? (
-    <WalletMenuButton />
-  ) : null
+  const shouldShowWalletMenu = useInternalWalletManagement()
+  return shouldShowWalletMenu ? <WalletMenuButton /> : null
 }
 
 export const WalletMenuButton: React.FC = () => {
-  const { account } = useAccount()
   const { variant, hiddenUI } = useWidgetConfig()
+  const { account, accounts } = useAccount()
+
+  const [fromChainId] = useFieldValues('fromChain')
+  const { chain: fromChain } = useChain(fromChainId)
+
+  const activeAccount =
+    (fromChain
+      ? accounts.find((account) => account.chainType === fromChain.chainType)
+      : undefined) || account
 
   if (variant === 'drawer') {
     return (
       <DrawerWalletContainer>
-        {account.isConnected ? (
-          <ConnectedButton account={account} />
+        {activeAccount.isConnected ? (
+          <ConnectedButton account={activeAccount} />
         ) : (
           <ConnectButton />
         )}
@@ -62,8 +79,8 @@ export const WalletMenuButton: React.FC = () => {
       </DrawerWalletContainer>
     )
   }
-  return account.isConnected ? (
-    <ConnectedButton account={account} />
+  return activeAccount.isConnected ? (
+    <ConnectedButton account={activeAccount} />
   ) : (
     <ConnectButton />
   )
@@ -74,7 +91,7 @@ const ConnectButton = () => {
   const { walletConfig, subvariant, variant } = useWidgetConfig()
   const { openWalletMenu } = useWalletMenu()
   const connect = async () => {
-    if (walletConfig?.onConnect) {
+    if (!walletConfig?.usePartialWalletManagement && walletConfig?.onConnect) {
       walletConfig.onConnect()
       return
     }

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,5 +1,6 @@
 import { ArrowDownward, ArrowForward } from '@mui/icons-material'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'
@@ -10,20 +11,38 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
   const { setFieldValue, getFieldValues } = useFieldActions()
   const { getChainById } = useAvailableChains()
   const { tryResetToAddress } = useToAddressReset()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
 
   const handleClick = () => {
-    const [fromChainId, fromToken, toChainId, toToken] = getFieldValues(
-      'fromChain',
-      'fromToken',
-      'toChain',
-      'toToken'
-    )
+    const [fromChainId, fromToken, toChainId, toToken, toAddress] =
+      getFieldValues(
+        'fromChain',
+        'fromToken',
+        'toChain',
+        'toToken',
+        'toAddress'
+      )
     setFieldValue('fromAmount', '', { isTouched: true })
     setFieldValue('fromChain', toChainId, { isTouched: true })
     setFieldValue('fromToken', toToken, { isTouched: true })
     setFieldValue('toChain', fromChainId, { isTouched: true })
     setFieldValue('toToken', fromToken, { isTouched: true })
 
+    const autoPopulatedToAddress = autoPopulateToAddress({
+      formType: 'from',
+      selectedToAddress: toAddress,
+      selectedChainId: toChainId,
+      selectedOppositeChainId: fromChainId,
+      selectedOppositeTokenAddress: fromToken,
+    })
+
+    // Returning early as a compatible connected wallet was found, and toAddress has been populated
+    if (autoPopulatedToAddress) {
+      return
+    }
+
+    // Auto-population applies in certain scenarios, but otherwise,
+    // we attempt to reset `toAddress` when bridging across ecosystems
     // fromChainId becomes toChainId after using reverse
     const toChain = getChainById(fromChainId)
     if (toChain) {

package/src/components/Step/StepTimer.tsx

@@ -1,7 +1,7 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
 import { AccessTimeFilled } from '@mui/icons-material'
 import { Box, Tooltip } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { type FC, type PropsWithChildren, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTimer } from '../../hooks/timer/useTimer.js'
 import { IconTypography } from '../IconTypography.js'
@@ -78,20 +78,13 @@ export const StepTimer: React.FC<{
       ? Math.floor(step.estimate.executionDuration)
       : Math.floor(step.estimate.executionDuration / 60)
     return (
-      <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-        <Box component="span" display="flex" alignItems="center">
-          <IconTypography component="span" mr={0.5} fontSize={16}>
-            <AccessTimeFilled fontSize="inherit" />
-          </IconTypography>
-          <Box component="span">
-            {duration.toLocaleString(i18n.language, {
-              style: 'unit',
-              unit: showSeconds ? 'second' : 'minute',
-              unitDisplay: 'narrow',
-            })}
-          </Box>
-        </Box>
-      </Tooltip>
+      <StepTimerContent>
+        {duration.toLocaleString(i18n.language, {
+          style: 'unit',
+          unit: showSeconds ? 'second' : 'minute',
+          unitDisplay: 'narrow',
+        })}
+      </StepTimerContent>
     )
   }
 
@@ -108,15 +101,32 @@ export const StepTimer: React.FC<{
   return isTimerExpired ? (
     t('main.inProgress')
   ) : (
+    <StepTimerContent>
+      {`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}
+    </StepTimerContent>
+  )
+}
+
+const StepTimerContent: FC<PropsWithChildren> = ({ children }) => {
+  const { t } = useTranslation()
+  return (
     <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-      <Box component="span" display="flex" alignItems="center">
-        <IconTypography component="span" mr={0.5} fontSize={16}>
+      <Box component="span" display="flex" alignItems="center" height={14}>
+        <IconTypography
+          component="span"
+          sx={{ marginRight: 0.5, fontSize: 16 }}
+        >
           <AccessTimeFilled fontSize="inherit" />
         </IconTypography>
         <Box
           component="span"
-          sx={{ fontVariantNumeric: 'tabular-nums', cursor: 'help' }}
-        >{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</Box>
+          sx={{
+            fontVariantNumeric: 'tabular-nums',
+            cursor: 'help',
+          }}
+        >
+          {children}
+        </Box>
       </Box>
     </Tooltip>
   )

package/src/components/TokenList/TokenList.tsx

@@ -26,8 +26,11 @@ export const TokenList: FC<TokenListProps> = ({
     'tokenSearchFilter'
   )
 
-  const { chain, isLoading: isChainLoading } = useChain(selectedChainId)
-  const { account } = useAccount({ chainType: chain?.chainType })
+  const { chain: selectedChain, isLoading: isSelectedChainLoading } =
+    useChain(selectedChainId)
+  const { account } = useAccount({
+    chainType: selectedChain?.chainType,
+  })
 
   const {
     tokens: chainTokens,
@@ -64,7 +67,7 @@ export const TokenList: FC<TokenListProps> = ({
 
   const isLoading =
     isTokensLoading ||
-    isChainLoading ||
+    isSelectedChainLoading ||
     (tokenSearchEnabled && isSearchedTokenLoading)
 
   const tokens = filteredTokens.length
@@ -88,7 +91,7 @@ export const TokenList: FC<TokenListProps> = ({
         tokens={tokens}
         scrollElementRef={parentRef}
         chainId={selectedChainId}
-        chain={chain}
+        chain={selectedChain}
         isLoading={isLoading}
         isBalanceLoading={isBalanceLoading}
         showCategories={showCategories}

package/src/components/TokenList/TokenListItem.tsx

@@ -34,7 +34,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
 }) => {
   const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
     e.stopPropagation()
-    onClick?.(token.address)
+    onClick?.(token.address, chain?.id)
   }
   return (
     <ListItem

package/src/components/TokenList/types.ts

@@ -20,11 +20,11 @@ export interface VirtualizedTokenListProps {
   chainId?: number
   chain?: ExtendedChain
   showCategories?: boolean
-  onClick(tokenAddress: string): void
+  onClick(tokenAddress: string, chainId?: number): void
 }
 
 export interface TokenListItemBaseProps {
-  onClick?(tokenAddress: string): void
+  onClick?(tokenAddress: string, chainId?: number): void
   size: number
   start: number
 }

package/src/components/TokenList/useTokenSelect.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.js'
@@ -9,13 +10,20 @@ import { useFieldController } from '../../stores/form/useFieldController.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
+export type UseTokenSelectArgs = {
+  formType: FormType
+  onClick?: () => void
+}
+
 export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const { subvariant, disabledUI } = useWidgetConfig()
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+  const chainOrderStore = useChainOrderStoreContext()
+
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const { onChange } = useFieldController({ name: tokenKey })
-  const chainOrderStore = useChainOrderStoreContext()
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
@@ -32,13 +40,18 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
         setFieldValue(amountKey, '')
       }
       const oppositeFormType = formType === 'from' ? 'to' : 'from'
-      const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues(
+      const [
+        selectedOppositeTokenAddress,
+        selectedOppositeChainId,
+        selectedToAddress,
+      ] = getFieldValues(
         FormKeyHelper.getTokenKey(oppositeFormType),
-        FormKeyHelper.getChainKey(oppositeFormType)
+        FormKeyHelper.getChainKey(oppositeFormType),
+        'toAddress'
       )
       // TODO: remove when we enable same chain/token transfers
       if (
-        selectedOppositeToken === tokenAddress &&
+        selectedOppositeTokenAddress === tokenAddress &&
         selectedOppositeChainId === selectedChainId &&
         subvariant !== 'custom'
       ) {
@@ -48,20 +61,29 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
         })
       }
 
-      // Check if the selected source chain matches any chain on the destination chain selection view (chainOrder array).
-      // If a match exists and the destination token is not selected, update the destination chain to match the source.
-      if (
-        formType === 'from' &&
-        !selectedOppositeToken &&
-        selectedChainId &&
-        chainOrderStore.getState().chainOrder.to.includes(selectedChainId)
-      ) {
-        setFieldValue(FormKeyHelper.getChainKey('to'), selectedChainId, {
-          isDirty: true,
-          isTouched: true,
-        })
+      // If no opposite token is selected, synchronize the opposite chain to match the currently selected chain
+      const { setChain } = chainOrderStore.getState()
+      if (!selectedOppositeTokenAddress && selectedChainId) {
+        setFieldValue(
+          FormKeyHelper.getChainKey(oppositeFormType),
+          selectedChainId,
+          {
+            isDirty: true,
+            isTouched: true,
+          }
+        )
+        setChain(selectedChainId, oppositeFormType)
       }
 
+      // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
+      autoPopulateToAddress({
+        formType,
+        selectedToAddress,
+        selectedChainId,
+        selectedOppositeChainId,
+        selectedOppositeTokenAddress,
+      })
+
       const eventToEmit =
         formType === 'from'
           ? WidgetEvent.SourceChainTokenSelected
@@ -77,6 +99,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       onClick?.()
     },
     [
+      autoPopulateToAddress,
       chainOrderStore,
       disabledUI,
       emitter,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.8.2'
+export const version = '3.10.0'

package/src/hooks/useAvailableChains.ts

@@ -5,6 +5,11 @@ import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isItemAllowed } from '../utils/item.js'
 
+export type GetChainById = (
+  chainId?: number,
+  chains?: ExtendedChain[]
+) => ExtendedChain | undefined
+
 const supportedChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO]
 
 export const useAvailableChains = (chainTypes?: ChainType[]) => {
@@ -35,7 +40,7 @@ export const useAvailableChains = (chainTypes?: ChainType[]) => {
     staleTime: 300_000,
   })
 
-  const getChainById = useCallback(
+  const getChainById: GetChainById = useCallback(
     (chainId?: number, chains: ExtendedChain[] | undefined = data) => {
       if (!chainId) {
         return

package/src/hooks/useChain.ts

@@ -9,5 +9,6 @@ export const useChain = (chainId?: number) => {
   return {
     chain,
     isLoading,
+    getChainById,
   }
 }

package/src/hooks/useGasSufficiency.ts

@@ -1,14 +1,8 @@
-import {
-  ChainType,
-  type EVMChain,
-  type RouteExtended,
-  type Token,
-} from '@lifi/sdk'
+import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
-import type { Address } from 'viem'
-import { type Connector, useBytecode } from 'wagmi'
 import { useAvailableChains } from './useAvailableChains.js'
+import { useIsContractAddress } from './useIsContractAddress.js'
 import { getTokenBalancesWithRetry } from './useTokenBalance.js'
 
 export interface GasSufficiency {
@@ -27,18 +21,12 @@ export const useGasSufficiency = (route?: RouteExtended) => {
   const { account } = useAccount({
     chainType: getChainById(route?.fromChainId)?.chainType,
   })
-  const { data: contractCode } = useBytecode({
-    address:
-      account.chainType === ChainType.EVM
-        ? (account.address as Address)
-        : undefined,
-    query: {
-      refetchInterval: 300_000,
-      staleTime: 300_000,
-    },
-  })
 
-  const isContractAddress = !!contractCode
+  const isContractAddress = useIsContractAddress(
+    account.address,
+    route?.fromChainId,
+    account.chainType
+  )
 
   const { data: insufficientGas, isLoading } = useQuery({
     queryKey: ['gas-sufficiency-check', account.address, route?.id],

package/src/hooks/useIsContractAddress.ts

@@ -0,0 +1,21 @@
+import { ChainType } from '@lifi/sdk'
+import type { Address } from 'viem'
+import { useBytecode } from 'wagmi'
+
+export const useIsContractAddress = (
+  address?: string,
+  chainId?: number,
+  chainType?: ChainType
+) => {
+  const { data: contractCode } = useBytecode({
+    address: address as Address,
+    chainId: chainId,
+    query: {
+      refetchInterval: 300_000,
+      staleTime: 300_000,
+      enabled: Boolean(chainType === ChainType.EVM && chainId),
+    },
+  })
+  const isContractAddress = !!contractCode
+  return isContractAddress
+}