@openocean.finance/widget 1.0.0

package/src/hooks/useRoutes.ts

@@ -0,0 +1,410 @@
+import type { Route } from '@lifi/sdk'
+import { LiFiErrorCode } from '@lifi/sdk'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { parseUnits } from 'viem'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { DebridgeService } from '../services/DebridgeService.js'
+import { OpenOceanService } from '../services/OpenOceanService.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useSetExecutableRoute } from '../stores/routes/useSetExecutableRoute.js'
+import { useSettings } from '../stores/settings/useSettings.js'
+import { defaultSlippage } from '../stores/settings/useSettingsStore.js'
+import { WidgetEvent } from '../types/events.js'
+import { getChainTypeFromAddress } from '../utils/chainType.js'
+import { useChain } from './useChain.js'
+import { useDebouncedWatch } from './useDebouncedWatch.js'
+import { useGasPrice } from './useGasPrice.js'
+import { useGasRefuel } from './useGasRefuel.js'
+import { useIsBatchingSupported } from './useIsBatchingSupported.js'
+import { useSwapOnly } from './useSwapOnly.js'
+import { useToken } from './useToken.js'
+import { useWidgetEvents } from './useWidgetEvents.js'
+
+const refetchTime = 60_000
+
+interface RoutesProps {
+  observableRoute?: Route
+}
+
+export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
+  const {
+    subvariant,
+    sdkConfig,
+    contractTool,
+    bridges,
+    exchanges,
+    fee,
+    feeConfig,
+    useRelayerRoutes,
+  } = useWidgetConfig()
+  const setExecutableRoute = useSetExecutableRoute()
+  const queryClient = useQueryClient()
+  const emitter = useWidgetEvents()
+  const swapOnly = useSwapOnly()
+  const {
+    disabledBridges,
+    disabledExchanges,
+    enabledBridges,
+    enabledExchanges,
+    enabledAutoRefuel,
+    routePriority,
+    slippage,
+  } = useSettings([
+    'disabledBridges',
+    'disabledExchanges',
+    'enabledBridges',
+    'enabledExchanges',
+    'enabledAutoRefuel',
+    'routePriority',
+    'slippage',
+  ])
+  const [fromTokenAmount] = useDebouncedWatch(500, 'fromAmount')
+  const [
+    fromChainId,
+    fromTokenAddress,
+    _toAddress,
+    toTokenAmount,
+    toChainId,
+    toTokenAddress,
+    contractCalls,
+  ] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'toAddress',
+    'toAmount',
+    'toChain',
+    'toToken',
+    'contractCalls'
+  )
+  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+  const { chain: fromChain } = useChain(fromChainId)
+  const { chain: toChain } = useChain(toChainId)
+  const { enabled: enabledRefuel, fromAmount: gasRecommendationFromAmount } =
+    useGasRefuel()
+
+  const { gasPrice } = useGasPrice(fromChainId?.toString() || '')
+  const { account } = useAccount({ chainType: fromChain?.chainType })
+  const { isBatchingSupported, isBatchingSupportedLoading } =
+    useIsBatchingSupported(fromChain, account.address)
+
+  const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
+
+  const contractCallQuoteEnabled: boolean =
+    subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
+
+  const toAddress = fromChainId === toChainId ? account.address : _toAddress
+  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
+  // If toAddress is set, it must have the same chainType as toChain
+  const hasToAddressAndChainTypeSatisfied: boolean =
+    !!toChain &&
+    !!toAddress &&
+    getChainTypeFromAddress(toAddress) === toChain.chainType
+  // We need to check for toAddress only if it is set
+  const isToAddressSatisfied = toAddress
+    ? hasToAddressAndChainTypeSatisfied
+    : true
+
+  const isEnabled =
+    Boolean(Number(fromChain?.id)) &&
+    Boolean(Number(toChain?.id)) &&
+    Boolean(fromToken?.address) &&
+    Boolean(toToken?.address) &&
+    !Number.isNaN(slippage) &&
+    hasAmount &&
+    isToAddressSatisfied &&
+    contractCallQuoteEnabled &&
+    !isBatchingSupportedLoading
+
+  const queryKey = [
+    'routes',
+    account.address,
+    fromChain?.id as number,
+    fromToken?.address as string,
+    fromTokenAmount,
+    toAddress,
+    toChain?.id as number,
+    toToken?.address as string,
+    toTokenAmount,
+    contractCalls,
+    slippage,
+    swapOnly,
+    disabledBridges,
+    disabledExchanges,
+    enabledBridges,
+    enabledExchanges,
+    routePriority,
+    subvariant,
+    sdkConfig?.routeOptions?.allowSwitchChain,
+    enabledRefuel && enabledAutoRefuel,
+    gasRecommendationFromAmount,
+    feeConfig?.fee || fee,
+    !!isBatchingSupported,
+    observableRoute?.id,
+  ] as const
+
+  const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } =
+    useQuery({
+      queryKey,
+      queryFn: async ({
+        queryKey: [
+          _,
+          fromAddress,
+          fromChainId,
+          fromTokenAddress,
+          fromTokenAmount,
+          toAddress,
+          toChainId,
+          toTokenAddress,
+          toTokenAmount,
+          contractCalls,
+          slippage = defaultSlippage,
+          swapOnly,
+          disabledBridges,
+          disabledExchanges,
+          allowedBridges,
+          allowedExchanges,
+          routePriority,
+          subvariant,
+          allowSwitchChain,
+          enabledRefuel,
+          gasRecommendationFromAmount,
+          fee,
+          isBatchingSupported,
+          _observableRouteId,
+        ],
+        signal,
+      }) => {
+        try {
+          const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
+          const formattedSlippage = slippage
+            ? (Number.parseFloat(slippage) / 100).toString()
+            : '0.01' // Default slippage 1%
+
+          let quoteResult: any // Initialize quoteResult
+
+          // Check if it's a cross-chain swap
+          if (fromChainId !== toChainId) {
+            // Use DebridgeService for cross-chain quotes
+            if (fromToken && toToken) {
+              // Construct Asset objects for DebridgeService
+              const fromMsg = {
+                address: fromTokenAddress,
+                symbol: fromToken.symbol,
+                decimals: fromToken.decimals,
+                name: fromToken.name,
+                icon: fromToken.logoURI,
+                chainId: fromChainId,
+              }
+              const toMsg = {
+                address: toTokenAddress,
+                symbol: toToken.symbol,
+                decimals: toToken.decimals,
+                name: toToken.name,
+                icon: toToken.logoURI,
+                chainId: toChainId,
+              }
+
+              quoteResult = await DebridgeService.swapUThenCross({
+                fromMsg: fromMsg,
+                toMsg: toMsg,
+                inAmount: fromAmount.toString(),
+                slippage_tolerance: formattedSlippage, // Debridge might use a different format/unit
+                account: account?.address || '',
+                receiver: toAddress, // Assuming receiver is the same as account for now
+              })
+              // Add a flag or modify structure to indicate it's a Debridge route
+              if (quoteResult) {
+                quoteResult.isDebridgeRoute = true
+              }
+            } else {
+              console.warn(
+                'Cannot get Debridge quote: Missing account address, fromToken, or toToken.'
+              )
+              quoteResult = null // Or handle error appropriately
+            }
+          } else {
+            // Use OpenOceanService for same-chain swaps
+            if (account.address) {
+              quoteResult = await OpenOceanService.getSwapQuote({
+                chain: fromChainId.toString(),
+                inTokenSymbol: fromToken?.symbol || '',
+                inTokenAddress: fromTokenAddress,
+                outTokenSymbol: toToken?.symbol || '',
+                outTokenAddress: toTokenAddress,
+                amount: fromAmount.toString(),
+                account: account.address,
+                slippage: formattedSlippage, // OpenOcean expects slippage like '100' for 1%
+                gasPrice: gasPrice || '10', // Consider chain-specific defaults
+                enabledDexIds: fromChainId === 1151111081099710 ? '6' : '', // Example for Solana specific dex
+              })
+            } else {
+              // Use getQuote if account is not connected (view mode)
+              quoteResult = await OpenOceanService.getQuote({
+                chain: fromChainId.toString(),
+                inTokenSymbol: fromToken?.symbol || '',
+                inTokenAddress: fromTokenAddress,
+                outTokenSymbol: toToken?.symbol || '',
+                outTokenAddress: toTokenAddress,
+                amount: fromAmount.toString(),
+                slippage: formattedSlippage, // OpenOcean expects slippage like '100' for 1%
+                gasPrice: gasPrice || '10', // Consider chain-specific defaults
+                enabledDexIds: fromChainId === 1151111081099710 ? '6' : '', // Example for Solana specific dex
+              })
+            }
+            // Ensure the structure is consistent or add a flag
+            if (quoteResult) {
+              quoteResult.isDebridgeRoute = false
+            }
+          }
+          const data = quoteResult || {}
+          // minOutAmount calculation is now handled within DebridgeService or OpenOceanService
+          const isDebridge = data.isDebridgeRoute === true
+
+          const route: Route = {
+            id: data?.orderId || Date.now().toString(),
+            fromChainId: fromChainId,
+            fromAmountUSD: data?.fromTokenUSD || '0',
+            fromAmount: fromAmount.toString(),
+            fromToken: fromToken!,
+            fromAddress: fromAddress || '',
+            toChainId: toChainId,
+            toAmountUSD: data?.toTokenUSD || '0',
+            toAmount: data?.outAmount || '0',
+            toAmountMin:
+              data?.minOutAmount ||
+              (isDebridge
+                ? '0'
+                : Math.floor(
+                    (Number(data?.outAmount || 0) *
+                      (100 - Number.parseFloat(slippage))) /
+                      100
+                  ).toString()),
+            toToken: toToken!,
+            toAddress: toAddress || '',
+            insurance: {
+              state: 'NOT_INSURABLE',
+              feeAmountUsd: '0',
+            },
+            steps: [
+              {
+                id: '1',
+                type: 'lifi',
+                tool: isDebridge ? 'debridge' : 'openocean',
+                transactionRequest: {
+                  chainId: data?.chainId || fromChainId,
+                  from: data?.from,
+                  data: data?.transaction || data?.data || '0x',
+                  to: data?.to,
+                  value: data?.value || '0x0',
+                  gasPrice: data?.gasPrice,
+                  type: isDebridge ? '0x0' : data?.dexId || '0x0',
+                },
+                toolDetails: {
+                  key: isDebridge ? 'debridge' : 'openocean',
+                  name: isDebridge ? 'Debridge' : 'OpenOcean',
+                  logoURI: isDebridge
+                    ? 'https://s3.openocean.finance/static/debridge.svg'
+                    : 'https://assets.coingecko.com/coins/images/17014/small/ooe_log.png',
+                },
+                action: {
+                  fromChainId: fromChainId,
+                  fromAmount: fromAmount.toString(),
+                  fromToken: fromToken!,
+                  toChainId: toChainId,
+                  toToken: toToken!,
+                  slippage: Number(formattedSlippage),
+                  fromAddress: fromAddress || '',
+                  toAddress: toAddress || '',
+                },
+                estimate: {
+                  fromAmount: fromAmount.toString(),
+                  toAmount: data?.outAmount || '0',
+                  toAmountMin:
+                    data?.minOutAmount ||
+                    (isDebridge
+                      ? '0'
+                      : Math.floor(
+                          (Number(data?.outAmount || 0) *
+                            (100 - Number.parseFloat(slippage))) /
+                            100
+                        ).toString()),
+                  approvalAddress:
+                    data?.approveContract ||
+                    (isDebridge
+                      ? data?.to
+                      : '0x6352a56caadC4F1E25CD6c75970Fa768A3304e64'),
+                  executionDuration: data?.executionDuration || 300_000,
+                  tool: isDebridge ? 'debridge' : 'openocean',
+                  feeCosts: data?.feeCosts || [
+                    {
+                      name: 'Gas Fee',
+                      description: 'Estimated gas fee',
+                      token: fromToken!,
+                      amount: (data?.estimatedGas || '0').toString(),
+                      amountUSD: '0',
+                      percentage: '0',
+                      included: true,
+                    },
+                  ],
+                },
+                includedSteps: [],
+              },
+            ],
+            data: data,
+          }
+          const routes = [route]
+          emitter.emit(WidgetEvent.AvailableRoutes, routes)
+          return routes
+        } catch (error) {
+          console.error('Failed to fetch OpenOcean routes:', error)
+          return []
+        }
+      },
+      enabled: isEnabled,
+      staleTime: refetchTime,
+      refetchInterval(query) {
+        return Math.min(
+          Math.abs(refetchTime - (Date.now() - query.state.dataUpdatedAt)),
+          refetchTime
+        )
+      },
+      retry(failureCount, error: any) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Route query failed:', { failureCount, error })
+        }
+        if (failureCount >= 3) {
+          return false
+        }
+        if (error?.code === LiFiErrorCode.NotFound) {
+          return false
+        }
+        return true
+      },
+    })
+
+  const setReviewableRoute = (route: Route) => {
+    const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
+    queryClient.setQueryData(
+      queryDataKey,
+      { routes: [route] },
+      { updatedAt: dataUpdatedAt }
+    )
+    setExecutableRoute(route)
+  }
+
+  return {
+    routes: data,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+    fromChain,
+    toChain,
+    queryKey,
+    setReviewableRoute,
+  }
+}

package/src/hooks/useScrollableContainer.ts

@@ -0,0 +1,42 @@
+import { useCallback, useLayoutEffect, useState } from 'react'
+import { getScrollableContainer } from '../utils/elements.js'
+import { useDefaultElementId } from './useDefaultElementId.js'
+
+export const useGetScrollableContainer = () => {
+  const elementId = useDefaultElementId()
+  const getContainer = useCallback(
+    () => getScrollableContainer(elementId),
+    [elementId]
+  )
+
+  return getContainer
+}
+
+export const useScrollableContainer = (elementId: string) => {
+  const [containerElement, setContainerElement] = useState(() =>
+    getScrollableContainer(elementId)
+  )
+
+  useLayoutEffect(() => {
+    if (!containerElement) {
+      setContainerElement(getScrollableContainer(elementId))
+    }
+  }, [containerElement, elementId])
+
+  return containerElement
+}
+
+export const useScrollableOverflowHidden = () => {
+  const elementId = useDefaultElementId()
+  useLayoutEffect(() => {
+    const element = getScrollableContainer(elementId)
+    if (element) {
+      element.style.overflowY = 'hidden'
+    }
+    return () => {
+      if (element) {
+        element.style.overflowY = 'auto'
+      }
+    }
+  }, [elementId])
+}

package/src/hooks/useSetContentHeight.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject } from 'react'
+import { useLayoutEffect } from 'react'
+import { getRelativeContainer } from '../utils/elements.js'
+import { useDefaultElementId } from './useDefaultElementId.js'
+
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
+
+export const useSetContentHeight = (
+  ref: MutableRefObject<HTMLElement | null>,
+  dependency?: unknown
+) => {
+  const elementId = useDefaultElementId()
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we use dependency to refresh height
+  useLayoutEffect(() => {
+    const relativeContainer = getRelativeContainer(elementId)
+    if (
+      !relativeContainer ||
+      !ref.current ||
+      ref.current?.clientHeight <= relativeContainer?.clientHeight
+    ) {
+      return
+    }
+    relativeContainer.style.minHeight = `${ref.current.clientHeight}px`
+    return () => {
+      relativeContainer.style.removeProperty('min-height')
+    }
+  }, [elementId, ref, dependency])
+}

package/src/hooks/useSettingMonitor.ts

@@ -0,0 +1,87 @@
+import { shallow } from 'zustand/shallow'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+import {
+  defaultConfigurableSettings,
+  useSettingsStore,
+} from '../stores/settings/useSettingsStore.js'
+import { useTools } from './useTools.js'
+
+export const useSettingMonitor = () => {
+  const [
+    disabledBridges,
+    disabledExchanges,
+    routePriority,
+    slippage,
+    gasPrice,
+  ] = useSettingsStore(
+    (state) => [
+      state.disabledBridges,
+      state.disabledExchanges,
+      state.routePriority,
+      state.slippage,
+      state.gasPrice,
+    ],
+    shallow
+  )
+  const { tools } = useTools()
+  const config = useWidgetConfig()
+  const { setDefaultSettings, resetSettings } = useSettingsActions()
+
+  const isSlippageChanged = config.slippage
+    ? Number(slippage) !== config.slippage * 100
+    : slippage !== defaultConfigurableSettings.slippage
+
+  const isSlippageOutsideRecommendedLimits =
+    isSlippageChanged && slippage && Number(slippage) > 1
+
+  const isSlippageUnderRecommendedLimits =
+    isSlippageChanged && slippage && Number(slippage) < 0.1
+
+  const isSlippageNotRecommended = Boolean(
+    isSlippageOutsideRecommendedLimits || isSlippageUnderRecommendedLimits
+  )
+
+  const isRoutePriorityChanged = config.routePriority
+    ? routePriority !== config.routePriority
+    : routePriority !== defaultConfigurableSettings.routePriority
+
+  const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice
+
+  const isBridgesChanged = Boolean(disabledBridges.length)
+  const isExchangesChanged = Boolean(disabledExchanges.length)
+
+  const isCustomRouteSettings =
+    isBridgesChanged ||
+    isExchangesChanged ||
+    isSlippageChanged ||
+    isRoutePriorityChanged ||
+    isGasPriceChanged
+
+  const isRouteSettingsWithWarnings = isSlippageNotRecommended
+
+  const reset = () => {
+    if (tools) {
+      resetSettings(
+        tools.bridges.map((tool) => tool.key),
+        tools.exchanges.map((tool) => tool.key)
+      )
+
+      setDefaultSettings(config)
+    }
+  }
+
+  return {
+    isBridgesChanged,
+    isExchangesChanged,
+    isSlippageChanged,
+    isSlippageNotRecommended,
+    isSlippageOutsideRecommendedLimits,
+    isSlippageUnderRecommendedLimits,
+    isRoutePriorityChanged,
+    isGasPriceChanged,
+    isCustomRouteSettings,
+    isRouteSettingsWithWarnings,
+    reset,
+  }
+}

package/src/hooks/useSwapOnly.ts

@@ -0,0 +1,6 @@
+import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js'
+
+export const useSwapOnly = () => {
+  const state = useSplitSubvariantStore((state) => state.state)
+  return state === 'swap'
+}

package/src/hooks/useToAddressAutoPopulate.ts

@@ -0,0 +1,95 @@
+import { useAccount } from '@openocean.finance/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,
+    ]
+  )
+}