@openocean.finance/widget 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Openocean Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/AmountInput/AmountInput.tsx

@@ -81,15 +81,7 @@ export const AmountInputBase: React.FC<
   const { onChange, onBlur, value } = useFieldController({ name: amountKey })
   inputValue = value || ''
   if (formType === 'to') {
-    const {
-      routes,
-      isLoading,
-      isFetching,
-      isFetched,
-      dataUpdatedAt,
-      refetchTime,
-      refetch,
-    } = useRoutes()
+    const { routes } = useRoutes()
     if (routes) {
       const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
       inputValue = formatTokenAmount(

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,8 +1,11 @@
 import { InputAdornment } from '@mui/material'
+import { CircularProgress } from '@mui/material'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import { DebridgeService } from '../../services/DebridgeService.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
@@ -16,6 +19,7 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   const { t } = useTranslation()
   const { getChainById } = useAvailableChains()
   const { setFieldValue } = useFieldActions()
+  const [isMaxLoading, setIsMaxLoading] = useState(false)
 
   const [fromChainId, fromTokenAddress] = useFieldValues(
     FormKeyHelper.getChainKey(formType),
@@ -35,6 +39,16 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   const { data } = useGasRecommendation(fromChainId)
 
   const [state] = useSplitSubvariantStore((storeState) => [storeState.state])
+
+  const { routes } = useRoutes()
+  let prependedOperatingExpenseCost = 0n
+  if (routes) {
+    const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
+    if (router.data && router.data.prependedOperatingExpenseCost) {
+      prependedOperatingExpenseCost = router.data.prependedOperatingExpenseCost
+    }
+  }
+
   const handleMax = async () => {
     if (!token?.amount) {
       return
@@ -44,59 +58,73 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
     let maxAmount = token.amount
 
     let gas = 0n
+    try {
+      if (
+        state === 'bridge' &&
+        fromChainId !== toChainId &&
+        fromTokenAddress &&
+        toTokenAddress
+      ) {
+        if (!prependedOperatingExpenseCost) {
+          setIsMaxLoading(true)
+          prependedOperatingExpenseCost = await getCost({
+            srcChainId:
+              fromChainId === 1151111081099710 ? 7565164 : fromChainId,
+            srcChainTokenIn: fromTokenAddress,
+            srcChainTokenInAmount: maxAmount,
+            dstChainTokenOutAmount: 'auto',
+            dstChainId: toChainId === 1151111081099710 ? 7565164 : toChainId,
+            dstChainTokenOut: toTokenAddress,
+            prependOperatingExpenses: true,
+            additionalTakerRewardBps: 0,
+            tab: new Date().getTime(),
+          })
+        }
 
-    if (state === 'bridge') {
-      const prependedOperatingExpenseCost = await getCost({
-        srcChainId: fromChainId === 1151111081099710 ? 7565164 : fromChainId,
-        srcChainTokenIn: fromTokenAddress,
-        srcChainTokenInAmount: maxAmount,
-        dstChainTokenOutAmount: 'auto',
-        dstChainId: toChainId === 1151111081099710 ? 7565164 : toChainId,
-        dstChainTokenOut: toTokenAddress,
-        prependOperatingExpenses: true,
-        additionalTakerRewardBps: 0,
-        tab: new Date().getTime(),
-      })
-
-      gas = BigInt(
-        Number.parseInt((1.15 * prependedOperatingExpenseCost).toString())
-      )
-      if (chain?.nativeToken.address === fromTokenAddress) {
-        if (fromChainId === 1151111081099710) {
-          gas += 15000000n + (8157120n + 4000000n + 890880n)
-        } else if (fromChainId === 8453) {
-          gas += 1000000000000000n + 1000000000000n
+        gas = BigInt(
+          Number.parseInt((1.15 * prependedOperatingExpenseCost).toString())
+        )
+        if (chain?.nativeToken.address === fromTokenAddress) {
+          if (fromChainId === 1151111081099710) {
+            gas += 15000000n + (8157120n + 4000000n + 890880n)
+          } else if (fromChainId === 8453) {
+            gas += 1000000000000000n + 1000000000000n
+          }
         }
       }
-    }
 
-    if (state === 'swap') {
-      if (
-        chain?.nativeToken.address === fromTokenAddress &&
-        data?.recommended
-      ) {
-        gas = BigInt(data.recommended.amount) / 2n
+      if (state === 'swap' || fromChainId === toChainId) {
+        if (
+          chain?.nativeToken.address === fromTokenAddress &&
+          data?.recommended
+        ) {
+          gas = BigInt(data.recommended.amount) / 2n
+        }
       }
-    }
 
-    if (token.amount > gas) {
-      maxAmount = maxAmount - gas
-    } else {
-      maxAmount = 0n
-    }
+      if (token.amount > gas) {
+        maxAmount = maxAmount - gas
+      } else {
+        maxAmount = 0n
+      }
 
-    if (maxAmount) {
-      setFieldValue(
-        FormKeyHelper.getAmountKey(formType),
-        formatUnits(maxAmount, token.decimals),
-        {
+      if (maxAmount) {
+        setFieldValue(
+          FormKeyHelper.getAmountKey(formType),
+          formatUnits(maxAmount, token.decimals),
+          {
+            isTouched: true,
+          }
+        )
+      } else {
+        setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
           isTouched: true,
-        }
-      )
-    } else {
-      setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
-        isTouched: true,
-      })
+        })
+      }
+    } catch (error) {
+      console.error('handleMax error', error)
+    } finally {
+      setIsMaxLoading(false)
     }
   }
 
@@ -105,7 +133,15 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
       {isLoading && fromTokenAddress ? (
         <MaxButtonSkeleton variant="rectangular" />
       ) : formType === 'from' && token?.amount ? (
-        <MaxButton onClick={handleMax}>{t('button.max')}</MaxButton>
+        <MaxButton
+          onClick={handleMax}
+          disabled={isMaxLoading}
+          startIcon={
+            isMaxLoading ? <CircularProgress size={14} color="inherit" /> : null
+          }
+        >
+          {t('button.max')}
+        </MaxButton>
       ) : null}
     </InputAdornment>
   )

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

@@ -58,7 +58,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 +70,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
@@ -149,17 +146,37 @@ async function executeEvmSwap(
 ): Promise<void> {
   try {
     const 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
+        const updatedWalletClient = await getWalletClient(options.wagmiConfig)
+        if (!updatedWalletClient || updatedWalletClient.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) {