@lifi/widget 3.8.2 → 3.9.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
+}

package/src/hooks/useToAddressAutoPopulate.ts

@@ -0,0 +1,95 @@
+import { useAccount } from '@lifi/wallet-management'
+import { useCallback } from 'react'
+import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
+import type { FormType } from '../stores/form/types.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
+import { getChainTypeFromAddress } from '../utils/chainType.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export type UpdateToAddressArgs = {
+  formType: FormType
+  selectedToAddress?: string
+  selectedChainId?: number
+  selectedOppositeTokenAddress?: string
+  selectedOppositeChainId?: number
+}
+
+/**
+ * Automatically populates toAddress field if bridging across ecosystems and compatible wallet is connected
+ */
+export const useToAddressAutoPopulate = () => {
+  const { setFieldValue } = useFieldActions()
+  const { setSendToWallet } = useSendToWalletActions()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { getChainById } = useAvailableChains()
+  const { accounts } = useAccount()
+
+  return useCallback(
+    ({
+      formType,
+      selectedToAddress,
+      selectedChainId,
+      selectedOppositeTokenAddress,
+      selectedOppositeChainId,
+    }: UpdateToAddressArgs) => {
+      if (
+        !selectedOppositeTokenAddress ||
+        !selectedOppositeChainId ||
+        !selectedChainId ||
+        !accounts?.length
+      ) {
+        return
+      }
+      const selectedChain = getChainById?.(selectedChainId)
+      const selectedOppositeChain = getChainById?.(selectedOppositeChainId)
+      // Proceed if both chains are defined and of different ecosystem types (indicating cross-ecosystem bridging)
+      if (
+        !selectedChain ||
+        !selectedOppositeChain ||
+        selectedChain.chainType === selectedOppositeChain.chainType
+      ) {
+        return
+      }
+      // Identify the destination chain type based on the bridge direction ('from' or 'to')
+      const destinationChainType =
+        formType === 'from'
+          ? selectedOppositeChain.chainType
+          : selectedChain.chainType
+      // If toAddress is already selected, verify that it matches the destination chain type
+      if (selectedToAddress) {
+        const selectedToAddressChainType =
+          getChainTypeFromAddress(selectedToAddress)
+        if (destinationChainType === selectedToAddressChainType) {
+          return
+        }
+      }
+      // Find connected account compatible with the destination chain type
+      const destinationAccount = accounts?.find(
+        (account) => account.chainType === destinationChainType
+      )
+      // If a compatible destination account is found, set toAddress as if selecting it from the "Send to Wallet" connected wallets page
+      if (destinationAccount?.address) {
+        setFieldValue('toAddress', destinationAccount.address, {
+          isDirty: false,
+          isTouched: true,
+        })
+        setSelectedBookmark({
+          name: destinationAccount.connector?.name,
+          address: destinationAccount.address,
+          chainType: destinationAccount.chainType,
+          isConnectedAccount: true,
+        })
+        setSendToWallet(true)
+        return destinationAccount.address
+      }
+    },
+    [
+      accounts,
+      getChainById,
+      setFieldValue,
+      setSelectedBookmark,
+      setSendToWallet,
+    ]
+  )
+}

package/src/hooks/useToAddressRequirements.ts

@@ -1,20 +1,31 @@
+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 = () => {
   const { requiredUI } = useWidgetConfig()
   const [fromChainId, toChainId] = useFieldValues('fromChain', 'toChain')
-
   const { chain: fromChain } = useChain(fromChainId)
   const { chain: toChain } = useChain(toChainId)
+  const { account } = useAccount({
+    chainType: fromChain?.chainType,
+  })
+  const isFromContractAddress = useIsContractAddress(
+    account.address,
+    fromChainId,
+    account.chainType
+  )
 
   const isDifferentChainType =
     fromChain && toChain && fromChain.chainType !== toChain.chainType
 
   const requiredToAddress =
-    requiredUI?.includes(RequiredUI.ToAddress) || isDifferentChainType
+    requiredUI?.includes(RequiredUI.ToAddress) ||
+    isDifferentChainType ||
+    isFromContractAddress
 
   return {
     requiredToAddress,

package/src/hooks/useToAddressReset.ts

@@ -3,13 +3,15 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
 import { useBookmarks } from '../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../stores/settings/useSendToWalletStore.js'
 import { RequiredUI } from '../types/widget.js'
 
 export const useToAddressReset = () => {
   const { requiredUI } = useWidgetConfig()
-  const { setFieldValue } = useFieldActions()
+  const { setFieldValue, isDirty } = useFieldActions()
   const { selectedBookmark } = useBookmarks()
   const { setSelectedBookmark } = useBookmarkActions()
+  const { setSendToWallet } = useSendToWalletActions()
 
   const tryResetToAddress = (toChain: ExtendedChain) => {
     const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
@@ -20,15 +22,20 @@ export const useToAddressReset = () => {
     const shouldResetToAddress =
       !requiredToAddress && !bookmarkSatisfiesToChainType
 
-    // toAddress field is required (always visible) when bridging between
-    // two ecosystems (fromChain and toChain have different chain types).
-    // We clean up toAddress on every chain change if toAddress is not required.
-    // This is used when we switch between different chain ecosystems (chain types) and
-    // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
-    // but it keeps toAddress value set for the previous chain pair.
+    // The toAddress field is required and always visible when bridging between
+    // different ecosystems (fromChain and toChain have different chain types).
+    // We reset toAddress on each chain change if it's no longer required, ensuring that
+    // switching chain types doesn't leave a previously set toAddress value when
+    // the "Send to Wallet" field is hidden.
     if (shouldResetToAddress) {
-      setFieldValue('toAddress', '')
+      setFieldValue('toAddress', '', { isTouched: true })
       setSelectedBookmark()
+      // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
+      // and not manually edited by the user, we need to hide "Send to Wallet".
+      const isToAddressDirty = isDirty('toAddress')
+      if (!isToAddressDirty) {
+        setSendToWallet(false)
+      }
     }
   }
 

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -58,6 +58,7 @@ export const BookmarksPage = () => {
   const handleBookmarkSelected = (bookmark: Bookmark) => {
     setFieldValue('toAddress', bookmark.address, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark(bookmark)
     setSendToWallet(true)

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -40,6 +40,7 @@ export const ConfirmAddressSheet = forwardRef<
     if (validatedBookmark) {
       setFieldValue('toAddress', validatedBookmark.address, {
         isTouched: true,
+        isDirty: true,
       })
       onConfirm?.(validatedBookmark)
       setSendToWallet(true)

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -47,6 +47,7 @@ export const ConnectedWalletsPage = () => {
   const handleWalletSelected = (account: Account) => {
     setFieldValue('toAddress', account.address!, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark({
       name: account.connector?.name,

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -60,6 +60,7 @@ export const RecentWalletsPage = () => {
     addRecentWallet(recentWallet)
     setFieldValue('toAddress', recentWallet.address, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark(recentWallet)
     setSendToWallet(true)

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -43,7 +43,10 @@ export const SendToConfiguredWalletPage = () => {
 
   const handleCuratedSelected = (toAddress: ToAddress) => {
     setSelectedBookmark(toAddress)
-    setFieldValue('toAddress', toAddress.address, { isTouched: true })
+    setFieldValue('toAddress', toAddress.address, {
+      isTouched: true,
+      isDirty: true,
+    })
     navigateBack()
   }
 

package/src/stores/form/createFormStore.ts

@@ -102,6 +102,8 @@ export const createFormStore = (defaultValues?: DefaultValues) =>
       },
       isTouched: (fieldName: FormFieldNames) =>
         !!get().userValues[fieldName]?.isTouched,
+      isDirty: (fieldName: FormFieldNames) =>
+        !!get().userValues[fieldName]?.isDirty,
       setAsTouched: (fieldName: FormFieldNames) => {
         const userValues = {
           ...get().userValues,

package/src/stores/form/types.ts

@@ -70,6 +70,7 @@ export interface FormActions {
   setDefaultValues: (formValues: DefaultValues) => void
   setUserAndDefaultValues: (formValues: Partial<DefaultValues>) => void
   isTouched: (fieldName: FormFieldNames) => boolean
+  isDirty: (fieldName: FormFieldNames) => boolean
   setAsTouched: (fieldName: FormFieldNames) => void
   resetField: (fieldName: FormFieldNames, resetOptions?: ResetOptions) => void
   setFieldValue: (

package/src/stores/form/useFieldActions.ts

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

package/src/stores/header/useHeaderStore.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useRef } from 'react'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { PersistStoreProps, PersistStoreProviderProps } from '../types.js'
+import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
 
 export const HeaderStoreContext = createContext<HeaderStore | null>(null)