@openocean.finance/widget 1.0.3 → 1.0.7

package/src/pages/SettingsPage/DynamicSlippageSettings.tsx

@@ -0,0 +1,54 @@
+import { Box, styled, Switch, Typography, Tooltip } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { Card } from '../../components/Card/Card.js'
+import { CardRowContainer, CardTitleContainer, CardValue } from '../../components/Card/CardButton.style.js'
+import { InfoOutlined } from '@mui/icons-material'
+
+const StyledSwitch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  '& .MuiSwitch-track': {
+    backgroundColor: '#666',
+    opacity: 1,
+    borderRadius: 20,
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: theme.palette.common.white,
+  },
+  '& .Mui-checked+.MuiSwitch-track': {
+    backgroundColor: theme.palette.primary.main,
+    opacity: 1,
+  },
+}))
+
+export const DynamicSlippageSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { dynamicSlippage } = useSettings(['dynamicSlippage'])
+  const { setValue } = useSettingsActions()
+
+  const handleToggle = () => {
+    setValue('dynamicSlippage', !dynamicSlippage)
+  }
+
+  return (
+    <Card sx={{ p: 1, mb: 1 }}>
+      <CardRowContainer sx={{ padding: '0 0 0 8px' }}>
+        <CardTitleContainer>
+          <CardValue>
+            {t('translation:settings.dynamicMode', 'Dynamic Mode')}
+            <Tooltip title={t('translation:settings.dynamicModeTooltip', 'Automatically minimizes slippage to enhance the MEV protection through running simulations.')}>
+              <InfoOutlined fontSize="small" sx={{ ml: 0.5, verticalAlign: 'middle', fontSize: '16px', opacity: 0.7 }} />
+            </Tooltip>
+          </CardValue>
+        </CardTitleContainer>
+        <StyledSwitch
+          checked={!!dynamicSlippage}
+          onChange={handleToggle}
+          name="dynamicSlippage"
+          inputProps={{ 'aria-label': 'dynamic slippage toggle' }}
+        />
+      </CardRowContainer>
+    </Card>
+  )
+} 

package/src/pages/SettingsPage/SettingsPage.tsx

@@ -5,10 +5,11 @@ import { ResetSettingsButton } from './ResetSettingsButton.js'
 import { SettingsList } from './SettingsCard/SettingCard.style.js'
 import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'
 import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'
+import { DynamicSlippageSettings } from './DynamicSlippageSettings.js'
 
 export const SettingsPage = () => {
   const { t } = useTranslation()
-  useHeader(t('header.settings'))
+  useHeader(t('translation:header.settings', 'Settings'))
 
   return (
     <PageContainer bottomGutters>
@@ -18,6 +19,7 @@ export const SettingsPage = () => {
           {/* <LanguageSetting /> */}
           {/* <RoutePrioritySettings /> */}
           {/* <GasPriceSettings /> */}
+          <DynamicSlippageSettings />
           <SlippageSettings />
           {/* <BridgeAndExchangeSettings type="Bridges" />
           <BridgeAndExchangeSettings type="Exchanges" /> */}

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -107,7 +107,7 @@ export const SlippageSettings: React.FC = () => {
           {slippage ? `${slippage}%` : t('button.auto')}
         </BadgedValue>
       }
-      // icon={<Percent />}
+      icon={null}
       title={t('settings.slippage')}
     >
       <Box

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/Card/Card.js'
 import { CardIconButton } from '../../components/Card/CardIconButton.js'
 import { CardTitle } from '../../components/Card/CardTitle.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
 
 interface TransferIdCardProps {
   transferId: string
@@ -37,7 +38,7 @@ export const TransferIdCard = ({ transferId, chain }: TransferIdCardProps) => {
           flex: 1,
         }}
       >
-        <CardTitle flex={1}>{t('main.transferId')}</CardTitle>
+        <CardTitle flex={1}>{t('translation:main.transferId')}</CardTitle>
         <Box
           sx={{
             gap: 1,

package/src/services/DebridgeService.ts

@@ -41,6 +41,32 @@ interface BuildSolanaBridgeDataParams {
 // Define mapping between chain IDs and Debridge internal chain IDs
 const DEBRIDGE_CHAIN_IDS: Record<number | string, string> = {
   1151111081099710: '7565164', // Solana
+  100: '100000002', // Gnosis Chain
+  42161: '42161', // Arbitrum
+  43114: '43114', // Avalanche
+  56: '56', // BNB Chain
+  1: '1', // Ethereum
+  137: '137', // Polygon
+  250: '250', // Fantom
+  59144: '59144', // Linea
+  10: '10', // Optimism
+  8453: '8453', // Base
+  245022934: '100000001', // Neon
+  1890: '100000003', // Lightlink (suspended)
+  1088: '100000004', // Metis
+  7171: '100000005', // Bitrock
+  4158: '100000006', // CrossFi
+  388: '100000010', // Cronos zkEVM
+  1514: '100000013', // Story
+  146: '100000014', // Sonic
+  48900: '100000015', // Zircuit
+  2741: '100000017', // Abstract
+  80094: '100000020', // Berachain
+  60808: '100000021', // BOB
+  999: '100000022', // HyperEVM
+  5000: '100000023', // Mantle
+  747: '100000009', // Flow
+  32769: '100000008', // Zilliqa
   // Other EVM chain IDs use numeric strings directly
 }
 
@@ -59,89 +85,6 @@ const NATIVE_TOKEN_ADDRESSES = [
   '', // Empty string might be used in some cases
 ].map((addr) => addr.toLowerCase())
 
-// Contract addresses and configurations
-const CONTRACT_CONFIG: Record<number, Record<string, any>> = {
-  56: {
-    // BSC
-    debridge: '0x...', // Supplement Debridge contract address
-    ooSwap: '0x22fefa40802E7aD7878FdE48700462e3f920E2C5',
-    bridgeId: { debridge: 22 /* Example ID */ },
-    messageBus: { debridge: '0x...' /* Example */ },
-    middlewareId: { ooSwap: 11 },
-  },
-  250: {
-    // Fantom
-    debridge: '0x...',
-    ooSwap: '0x521a8903B8D4C21b55768aE14f6cA31879B98d5e',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 5 },
-  },
-  137: {
-    // Polygon
-    debridge: '0x...',
-    ooSwap: '0x22fefa40802E7aD7878FdE48700462e3f920E2C5',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 7 },
-  },
-  43114: {
-    // Avalanche
-    debridge: '0x...',
-    ooSwap: '0x521a8903B8D4C21b55768aE14f6cA31879B98d5e',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 7 },
-  },
-  1: {
-    // Ethereum
-    debridge: '0x...',
-    ooSwap: '0xf951a9ea6b8400de7094d4b2b8d2ff2176d7ca81',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 11 },
-  },
-  42161: {
-    // Arbitrum
-    debridge: '0x65C757C04141a1602705F1F90260FEd66a86d0b8',
-    ooSwap: '0x900822ea09123b5583ef5ca8fd8ca542ea21699a',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' /* Needs supplement */ },
-    middlewareId: { ooSwap: 6 },
-  },
-  10: {
-    // Optimism
-    debridge: '0x...',
-    ooSwap: '0x521a8903B8D4C21b55768aE14f6cA31879B98d5e',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 2 },
-  },
-  324: {
-    // zkSync Era
-    debridge: '0x...',
-    ooSwap: '0xB6d35eE980Cde5e706C0866DF0122b076D26C44d',
-    bridgeId: { debridge: 22 },
-    messageBus: { debridge: '0x...' },
-    middlewareId: { ooSwap: 1 },
-  },
-  8453: {
-    // Base
-    debridge: '0x4045734fe21c7B7E0cE516BE009780Cc2BA39A8f',
-    // ooSwap: '...', // Base chain might not have ooSwap
-    bridgeId: { debridge: 3 },
-    messageBus: { debridge: '0x...' /* Needs supplement */ },
-    // middlewareId: {},
-  },
-  7565164: {
-    // Solana (Special handling)
-    debridge: '', // Solana might not need EVM address, but program ID
-    bridgeId: { debridge: -1 /* Placeholder */ },
-    messageBus: {},
-  },
-  // ... Add other chain Debridge configurations
-}
-
 // Native token information
 const NATIVE_TOKENS: Record<number, Asset> = {
   1: {
@@ -292,30 +235,6 @@ export class DebridgeService {
     return NATIVE_TOKENS[chainId]
   }
 
-  /**
-   * Get contract configuration information for specified chain and contract type
-   * @param chainId Chain ID
-   * @param contractType Contract type ('debridge', 'ooSwap', 'bridgeId', 'messageBus', 'middlewareId')
-   * @param subType Optional, for getting specific values under 'bridgeId', 'messageBus', 'middlewareId'
-   * @returns Configuration value or undefined
-   */
-  private static getContractConfig(
-    chainId: number,
-    contractType: string,
-    subType?: string
-  ): any {
-    const chainConfig = CONTRACT_CONFIG[chainId]
-    if (!chainConfig) {
-      console.warn(`No contract config found for chainId: ${chainId}`)
-      return undefined
-    }
-    const typeConfig = chainConfig[contractType]
-    if (subType) {
-      return typeConfig ? typeConfig[subType] : undefined
-    }
-    return typeConfig
-  }
-
   /**
    * Get Debridge internal chain ID
    * @param chainId Original chain ID

package/src/services/ExecuteRoute.ts

@@ -9,6 +9,114 @@ import { Connection, Transaction, VersionedTransaction } from '@solana/web3.js'
 import type { Config } from 'wagmi'
 import { getPublicClient, getWalletClient } from 'wagmi/actions'
 import { sendAndConfirmSolanaTransaction } from './SendAndConfirmSolanaTransaction.js'
+import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
+import { ethers } from 'ethers'
+
+const OpenOceanABI = [
+  {
+      "inputs": [
+          {
+              "internalType": "contract IOpenOceanCaller",
+              "name": "caller",
+              "type": "address"
+          },
+          {
+              "components": [
+                  {
+                      "internalType": "contract IERC20",
+                      "name": "srcToken",
+                      "type": "address"
+                  },
+                  {
+                      "internalType": "contract IERC20",
+                      "name": "dstToken",
+                      "type": "address"
+                  },
+                  {
+                      "internalType": "address",
+                      "name": "srcReceiver",
+                      "type": "address"
+                  },
+                  {
+                      "internalType": "address",
+                      "name": "dstReceiver",
+                      "type": "address"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "amount",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "minReturnAmount",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "guaranteedAmount",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "flags",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "address",
+                      "name": "referrer",
+                      "type": "address"
+                  },
+                  {
+                      "internalType": "bytes",
+                      "name": "permit",
+                      "type": "bytes"
+                  }
+              ],
+              "internalType": "struct OpenOceanExchange.SwapDescription",
+              "name": "desc",
+              "type": "tuple"
+          },
+          {
+              "components": [
+                  {
+                      "internalType": "uint256",
+                      "name": "target",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "gasLimit",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "uint256",
+                      "name": "value",
+                      "type": "uint256"
+                  },
+                  {
+                      "internalType": "bytes",
+                      "name": "data",
+                      "type": "bytes"
+                  }
+              ],
+              "internalType": "struct IOpenOceanCaller.CallDescription[]",
+              "name": "calls",
+              "type": "tuple[]"
+          }
+      ],
+      "name": "swap",
+      "outputs": [
+          {
+              "internalType": "uint256",
+              "name": "returnAmount",
+              "type": "uint256"
+          }
+      ],
+      "stateMutability": "payable",
+      "type": "function"
+  }
+]
 
 // Add helper function for handling hexadecimal conversion
 function hexToUint8Array(hexString: string): Uint8Array {
@@ -58,7 +166,9 @@ async function executeSolanaSwap(
     }
 
     let transaction: any = ''
-    let connection: any = null
+    const connection = new Connection(
+      'https://burned-practical-bird.solana-mainnet.quiknode.pro/33f4786133c252415e194b29ee69ffc7671480ab'
+    )
     const txData: any = step.transactionRequest?.data || ''
     const dexId = step.transactionRequest?.type || 0
     if (step.action.fromChainId === step.action.toChainId) {
@@ -68,15 +178,10 @@ async function executeSolanaSwap(
         transaction = Transaction.from(hexToUint8Array(txData))
       }
     } else {
-      transaction = VersionedTransaction.deserialize(
-        hexToUint8Array(txData.slice(2))
-      )
-      // Create connection instance
-      connection = new Connection(
-        'https://burned-practical-bird.solana-mainnet.quiknode.pro/33f4786133c252415e194b29ee69ffc7671480ab'
-      )
-      const { blockhash } = await connection.getLatestBlockhash()
-      transaction.message.recentBlockhash = blockhash
+      transaction = VersionedTransaction.deserialize(hexToUint8Array(txData.slice(2)))
+
+      const { blockhash } = await connection.getLatestBlockhash();
+      transaction.message.recentBlockhash = blockhash;
     }
 
     // Check signTransaction method exists
@@ -148,18 +253,38 @@ async function executeEvmSwap(
   route: ExtendedRoute
 ): Promise<void> {
   try {
-    const walletClient = await getWalletClient(options.wagmiConfig)
+    let walletClient = await getWalletClient(options.wagmiConfig)
+    
+    // Check if wallet is connected
     if (!walletClient) {
-      // If disconnect callback exists, disconnect the current connection first
       if (options.account?.connector && options.onDisconnect) {
         await options.onDisconnect(options.account)
       }
-      // Open wallet menu to let user reconnect
       if (options.onOpenWalletMenu) {
         options.onOpenWalletMenu()
       }
       throw new Error('Please connect wallet first')
     }
+    
+    // Check if current chain matches target chain
+    const currentChainId = walletClient.chain.id
+    const targetChainId = step.action.fromChainId
+    
+    if (currentChainId !== targetChainId) {
+      try {
+        // Try to switch to target chain
+        await walletClient.switchChain({ id: targetChainId })
+        
+        // Get updated walletClient after chain switch
+        walletClient = await getWalletClient(options.wagmiConfig)
+        if (!walletClient || walletClient.chain.id !== targetChainId) {
+          throw new Error('Failed to switch chain')
+        }
+      } catch (error) {
+        console.error('Failed to switch chain:', error)
+        throw new Error(`Please manually switch to chain ID: ${targetChainId}`)
+      }
+    }
 
     const publicClient = getPublicClient(options.wagmiConfig)
     if (!publicClient) {
@@ -186,8 +311,7 @@ async function executeEvmSwap(
 
     // Check token approval
     if (
-      step.action.fromToken.address !==
-      '0x0000000000000000000000000000000000000000'
+      ['0x0000000000000000000000000000000000000000', '0x0000000000000000000000000000000000001010'].indexOf(step.action.fromToken.address) === -1
     ) {
       let allowance = 0n
       try {
@@ -232,6 +356,8 @@ async function executeEvmSwap(
           : BigInt(amount)
 
         const hash = await walletClient.writeContract({
+          chain: walletClient.chain,
+          account: walletClient.account,
           address: step.action.fromToken.address as `0x${string}`,
           abi: [
             {
@@ -265,6 +391,35 @@ async function executeEvmSwap(
       account: walletClient.account.address,
     }
 
+    // 在这里根据useSettingsStore 中的 dynamicSlippage 参数来判断是否调用下面的函数 swap_quote_mev
+    const { dynamicSlippage } = useSettingsStore.getState()
+    if (dynamicSlippage) {
+      try {
+        // 构建 response 对象
+        const response = {
+          inAmount: step.action.fromAmount || '0',
+          inToken: step.action.fromToken,
+          data: transactionRequest?.data,
+          from: walletClient.account.address,
+          to: transactionRequest?.to,
+          value: transactionRequest?.value || '0'
+        };
+        
+        // 调用 swap_quote_mev 获取调整后的交易数据
+        const adjustedResponse = await swapQuoteMEV(response, { publicClient });
+        
+        // 如果 swap_quote_mev 返回了修改后的数据，更新交易请求
+        if (adjustedResponse && adjustedResponse.data !== response.data) {
+          txRequest.data = adjustedResponse.data as `0x${string}`;
+          txRequest.value = BigInt(adjustedResponse.value || '0');
+          console.log('Applied MEV protection with dynamic slippage');
+        }
+      } catch (error) {
+        console.error('Failed to apply MEV protection:', error);
+        // 错误时继续使用原始交易请求
+      }
+    }
+
     // Estimate gas
     const estimatedGas = await publicClient.estimateGas(txRequest)
     console.log('estimatedGas', estimatedGas)
@@ -275,7 +430,10 @@ async function executeEvmSwap(
       gas: estimatedGas * 2n,
     }
 
-    const hash = await walletClient.sendTransaction(finalTxRequest)
+    const hash = await walletClient.sendTransaction({
+      ...finalTxRequest,
+      kzg: undefined,
+    })
 
     process.status = 'PENDING'
     process.txHash = hash
@@ -318,6 +476,120 @@ async function executeEvmSwap(
   }
 }
 
+/**
+ * 将带精度的金额转换为实际金额
+ * @param amount 带精度的金额
+ * @param decimals 精度
+ * @returns 实际金额
+ */
+function decimals2Amount(amount: string | number, decimals = 18): number {
+  return Number(amount) / Math.pow(10, decimals);
+}
+
+/**
+ * 交易响应类型
+ */
+interface SwapResponse {
+  inAmount?: string;
+  inToken?: {
+    decimals?: number;
+    price?: string | number;
+    priceUSD?: string | number;
+    address?: string;
+  };
+  data?: string;
+  from?: string;
+  to?: string;
+  value?: string;
+  minOutAmount?: string;
+}
+
+/**
+ * 根据动态滑点调整交易参数，提供 MEV 保护
+ */
+async function swapQuoteMEV(
+  response: SwapResponse, 
+  options?: { publicClient?: any }
+): Promise<SwapResponse> {
+  try {
+    const inAmount = response?.inAmount;
+    const inTokenDecimals = response?.inToken?.decimals || 18;
+    const inTokenPrice = Number(response?.inToken?.priceUSD || 0);
+    const amount = decimals2Amount(inAmount, inTokenDecimals) * inTokenPrice;
+    if (amount < 1) {
+      return response;
+    }
+    const { publicClient } = options;
+    const OPENOCEAN_CONTRACT = new ethers.Contract(
+      "0x6352a56caadC4F1E25CD6c75970Fa768A3304e64",
+      OpenOceanABI
+    );
+    if (
+      ethers.hexlify(ethers.getBytes(response?.data || "0x").slice(0, 4)) !==
+      OPENOCEAN_CONTRACT.interface.getFunction("swap").selector
+    ) {
+      return response;
+    }
+    let oldCallData = OPENOCEAN_CONTRACT.interface.decodeFunctionData(
+      "swap",
+      response?.data
+    );
+    let callData = [...oldCallData];
+    callData[1] = [...oldCallData[1]];
+    const minOutAmount = BigInt(callData[1][5] || 0);
+    const outAmount = BigInt(callData[1][6] || 0);
+    const slippageAmount = outAmount - minOutAmount;
+
+    let minOutAmounts = await Promise.all(
+      [1, 2, 3].map(async (i) => {
+        const mockMinOutAmount = minOutAmount + (slippageAmount / 4n) * BigInt(i);
+        callData[1][5] = mockMinOutAmount;
+        const params = {
+          from: response?.from as `0x${string}`,
+          to: response?.to as `0x${string}`,
+          data: OPENOCEAN_CONTRACT.interface.encodeFunctionData(
+            "swap",
+            callData
+          ) as `0x${string}`,
+          value: BigInt(response?.value || '0'),
+        };
+        try {
+          await publicClient.estimateGas(params);
+          return mockMinOutAmount;
+        } catch (error) {
+          console.error('Failed to estimate gas:', error);
+          return undefined;
+        }
+      })
+    );
+    let [min1, min2] = minOutAmounts
+      .filter((value) => value !== undefined)
+      .sort((a, b) => (BigInt(b || 0) > BigInt(a || 0) ? 1 : -1))
+      .slice(0, 2);
+    min1 = min1 ?? minOutAmount;
+    min2 = min2 ?? minOutAmount;
+
+    const randomFactor = BigInt(Math.floor(Math.random() * 10000));
+    const minOutAmountDiff = BigInt(min1 || 0) - BigInt(min2 || 0);
+    const finalMinOutAmount = BigInt(min2 || 0) + 
+      (minOutAmountDiff * randomFactor / BigInt(10000));
+    
+    if (finalMinOutAmount < minOutAmount) {
+      return response;
+    }
+    callData[1][5] = finalMinOutAmount;
+    const finalCallData = OPENOCEAN_CONTRACT.interface.encodeFunctionData(
+      "swap",
+      callData
+    );
+    response.minOutAmount = finalMinOutAmount.toString();
+    response.data = finalCallData;
+    return response;
+  } catch (error) {
+    return response;
+  }
+}
+
 // Execute transaction
 async function executeSwap(
   route: ExtendedRoute,

package/src/stores/settings/types.ts

@@ -25,6 +25,7 @@ export interface SettingsProps {
   routePriority?: Order
   enabledAutoRefuel: boolean
   slippage?: string
+  dynamicSlippage?: boolean
   disabledBridges: string[]
   enabledBridges: string[]
   _enabledBridges: Record<string, boolean>

package/src/stores/settings/useSettingsStore.ts

@@ -9,17 +9,19 @@ export const defaultSlippage = '1'
 
 export const defaultConfigurableSettings: Pick<
   SettingsState,
-  'routePriority' | 'slippage' | 'gasPrice'
+  'routePriority' | 'slippage' | 'gasPrice' | 'dynamicSlippage'
 > = {
   routePriority: 'CHEAPEST',
   slippage: defaultSlippage,
   gasPrice: 'normal',
+  dynamicSlippage: false,
 }
 
 export const defaultSettings: SettingsProps = {
   appearance: 'auto',
   gasPrice: 'normal',
   enabledAutoRefuel: true,
+  dynamicSlippage: false,
   disabledBridges: [],
   disabledExchanges: [],
   enabledBridges: [],