@openocean.finance/widget 1.0.27 → 1.0.29

package/src/hooks/useRoutes.ts

@@ -2,14 +2,17 @@ import { useAccount } from '@openocean.finance/wallet-management'
 import type { Route } from '@openocean.finance/widget-sdk'
 import { OpenOceanErrorCode } from '@openocean.finance/widget-sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { parseUnits, formatUnits } from 'viem'
+import { parseUnits } from 'viem'
+import { useConfig } from 'wagmi'
+import { getWalletClient } from 'wagmi/actions'
+import { getCrossChainQuote } from '../cross/crossChainQuote.js'
 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 { useServerErrorStore } from '../stores/useServerErrorStore.js'
 import { WidgetEvent } from '../types/events.js'
 import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { useChain } from './useChain.js'
@@ -20,7 +23,6 @@ import { useIsBatchingSupported } from './useIsBatchingSupported.js'
 import { useSwapOnly } from './useSwapOnly.js'
 import { useToken } from './useToken.js'
 import { useWidgetEvents } from './useWidgetEvents.js'
-import { useServerErrorStore } from '../stores/useServerErrorStore.js'
 
 const refetchTime = 60_000
 
@@ -29,6 +31,8 @@ interface RoutesProps {
 }
 
 export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
+  const wagmiConfig = useConfig()
+
   const {
     subvariant,
     sdkConfig,
@@ -38,7 +42,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     fee,
     feeConfig,
     useRelayerRoutes,
-    referrer
+    referrer,
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -96,14 +100,18 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const contractCallQuoteEnabled: boolean =
     subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
 
-  const toAddress = fromChainId === toChainId || (fromChain?.chainType === 'EVM' && toChain?.chainType === 'EVM') ? account.address : _toAddress
-  // When we bridge between ecosystems we need to be sure toAddress is set and has the same chainType as toChain
+  const toAddress =
+    fromChainId === toChainId ||
+    (fromChain?.chainType === 'EVM' && toChain?.chainType === 'EVM')
+      ? account.address
+      : _toAddress
+  // When bridging between ecosystems, we need to ensure 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
+  // We only need to check if toAddress is set
   const isToAddressSatisfied = toAddress
     ? hasToAddressAndChainTypeSatisfied
     : true
@@ -182,8 +190,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           useServerErrorStore.getState().setError(null)
           const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
           const formattedSlippage = slippage
-            ? (Number.parseFloat(slippage) / 100).toString()
-            : '0.01' // Default slippage 1%
+            ? slippage
+            : '1' // Default slippage 1%
 
           let quoteResult: any // Initialize quoteResult
 
@@ -209,17 +217,29 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                 chainId: toChainId,
               }
 
-              quoteResult = await DebridgeService.swapUThenCross({
-                fromMsg: fromMsg,
-                toMsg: toMsg,
+              const walletClient = await getWalletClient(wagmiConfig)
+
+              quoteResult = await getCrossChainQuote({
+                feeBps: 10,
+                fromMsg,
+                toMsg,
                 inAmount: fromAmount.toString(),
-                slippage_tolerance: formattedSlippage, // Debridge might use a different format/unit
+                slippage_tolerance: formattedSlippage,
                 account: account?.address || '',
-                receiver: toAddress, // Assuming receiver is the same as account for now
+                walletClient,
               })
+
+              // 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
+                quoteResult.isBridge = true
               }
             } else {
               console.warn(
@@ -260,27 +280,29 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             }
             // Ensure the structure is consistent or add a flag
             if (quoteResult) {
-              quoteResult.isDebridgeRoute = false
+              quoteResult.isBridge = false
             }
           }
-          const data = quoteResult && quoteResult.data || {}
+          const data = (quoteResult && quoteResult.data) || {}
           // minOutAmount calculation is now handled within DebridgeService or OpenOceanService
-          const isDebridge = data.isDebridgeRoute === true
-
-          let toAmountMin = '0';
+          const isBridge = quoteResult.isBridge
+          let toAmountMin = '0'
           if (data?.minOutAmount) {
-            toAmountMin = data.minOutAmount;
-          } else if (isDebridge) {
-            toAmountMin = '0';
+            toAmountMin = data.minOutAmount
+          } else if (isBridge) {
+            toAmountMin = '0'
           } else {
-            const amount = Number(data?.outAmount || 0);
-            const slippageValue = Number.parseFloat(slippage);
-            const minAmount = (amount * (100 - slippageValue)) / 100;
-            toAmountMin = minAmount.toFixed(20).replace(/\.?0+$/, '');
-            // 如果还是科学计数法，再强制转字符串
+            const amount = Number(data?.outAmount || 0)
+            const slippageValue = Number.parseFloat(slippage)
+            const minAmount = (amount * (100 - slippageValue)) / 100
+            toAmountMin = minAmount.toFixed(20).replace(/\.?0+$/, '')
+            // If still in scientific notation, force convert to string
             if (toAmountMin.includes('e') || toAmountMin.includes('E')) {
-              toAmountMin = minAmount.toLocaleString('fullwide', { useGrouping: false, maximumSignificantDigits: 21 });
-              toAmountMin = toAmountMin.replace(/\.?0+$/, '');
+              toAmountMin = minAmount.toLocaleString('fullwide', {
+                useGrouping: false,
+                maximumSignificantDigits: 21,
+              })
+              toAmountMin = toAmountMin.replace(/\.?0+$/, '')
             }
           }
           const route: Route = {
@@ -303,8 +325,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             steps: [
               {
                 id: '1',
-                type: 'openocean',
-                tool: isDebridge ? 'debridge' : 'openocean',
+                type: isBridge ? 'bridge' : 'swap',
+                tool: isBridge ? 'bridge' : 'openocean',
                 transactionRequest: {
                   chainId: data?.chainId || fromChainId,
                   from: data?.from,
@@ -312,12 +334,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   to: data?.to,
                   value: data?.value || '0x0',
                   gasPrice: data?.gasPrice,
-                  type: isDebridge ? '0x0' : data?.dexId || '0x0',
+                  type: isBridge ? data?.quoteAdapterKey : data?.dexId || '0x0',
                 },
                 toolDetails: {
-                  key: isDebridge ? 'debridge' : 'openocean',
-                  name: isDebridge ? 'Debridge' : 'OpenOcean',
-                  logoURI: isDebridge
+                  key: isBridge ? data?.quoteAdapterKey : 'openocean',
+                  name: isBridge ? data?.quoteAdapterName : 'OpenOcean',
+                  logoURI: isBridge
                     ? 'https://s3.openocean.finance/static/debridge.svg'
                     : 'https://assets.coingecko.com/coins/images/17014/small/ooe_log.png',
                 },
@@ -335,13 +357,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   fromAmount: fromAmount.toString(),
                   toAmount: data?.outAmount || '0',
                   toAmountMin,
-                  approvalAddress:
-                    data?.approveContract ||
-                    (isDebridge
-                      ? data?.to
-                      : '0x6352a56caadC4F1E25CD6c75970Fa768A3304e64'),
-                  executionDuration: data?.executionDuration || Math.floor(Math.random() * 20) + 40,
-                  tool: isDebridge ? 'debridge' : 'openocean',
+                  approvalAddress: data?.approveContract || '0x0',
+                  executionDuration:
+                    data?.executionDuration ||
+                    Math.floor(Math.random() * 20) + 40,
+                  tool: isBridge ? 'bridge' : 'openocean',
                   feeCosts: data?.feeCosts || [
                     {
                       name: 'Gas Fee',
@@ -355,6 +375,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   ],
                 },
                 includedSteps: [],
+                quoteData: isBridge ? data : null,
               },
             ],
             ...(data as any),

package/src/hooks/useSettingMonitor.ts

@@ -27,7 +27,7 @@ export const useSettingMonitor = () => {
   const { tools } = useTools()
   const config = useWidgetConfig()
   const { setDefaultSettings, resetSettings } = useSettingsActions()
-
+debugger;
   const isSlippageChanged = config.slippage
     ? Number(slippage) !== config.slippage * 100
     : slippage !== defaultConfigurableSettings.slippage

package/src/hooks/useTokenPrice.ts

@@ -9,11 +9,13 @@ export const useTokenPrice = (chainId?: number, token?: TokenAmount) => {
       if (!chainId || !token?.address) {
         return undefined
       }
-      const prices = await OpenOceanService.getTokensPrice(chainId.toString(), [token.address])
+      const prices = await OpenOceanService.getTokensPrice(chainId.toString(), [
+        token.address,
+      ])
       return prices[token.address.toLowerCase()] || 0
     },
     enabled: !!chainId && !!token?.address,
-    refetchInterval: 60_000, // 每分钟更新一次价格
+    refetchInterval: 60_000, // Update price every minute
     staleTime: 60_000,
   })
 
@@ -21,4 +23,4 @@ export const useTokenPrice = (chainId?: number, token?: TokenAmount) => {
     price,
     isLoading,
   }
-} 
+}