@openocean.finance/widget 1.0.4 → 1.0.7

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "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",
-  "types": "./src/index.d.ts",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "watch": "tsc -w -p ./tsconfig.json",
@@ -44,14 +44,15 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@openocean.finance/widget-sdk": "^1.0.0",
-    "@openocean.finance/wallet-management": "^1.0.2",
     "@mui/icons-material": "6.0.2",
     "@mui/material": "^6.4.8",
     "@mui/system": "^6.4.8",
+    "@openocean.finance/wallet-management": "^1.0.7",
+    "@openocean.finance/widget-sdk": "^1.0.3",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.4",
+    "ethers": "^6.13.5",
     "i18next": "^24.2.3",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,5 +1,6 @@
 import { InputAdornment } from '@mui/material'
 import { CircularProgress } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'
@@ -41,13 +42,55 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   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 {
+    data: prependedOperatingExpenseCostOne,
+    isLoading: isLoadingPrependedOperatingExpenseCost,
+  } = useQuery({
+    queryKey: [
+      'get-prepended-operating-expense-cost',
+      fromChainId,
+      fromTokenAddress,
+      toChainId,
+      toTokenAddress,
+    ] as const,
+    queryFn: async () => {
+      if (
+        !(
+          fromChainId &&
+          fromTokenAddress &&
+          toChainId &&
+          toTokenAddress &&
+          toChainId !== fromChainId
+        )
+      ) {
+        return 0n
+      }
+      let srcChainTokenInAmount: any = token.amount || 0
+      const asUsd =
+        Number(token.priceUSD) * (Number(token.amount) / 10 ** token.decimals)
+      if (asUsd < 5) {
+        srcChainTokenInAmount = BigInt(
+          Number.parseInt(
+            (5 / Number(token.priceUSD)) * 10 ** token.decimals + ''
+          )
+        )
+      }
+      const prependedOperatingExpenseCost = await getCost({
+        srcChainId: fromChainId === 1151111081099710 ? 7565164 : fromChainId,
+        srcChainTokenIn: fromTokenAddress,
+        srcChainTokenInAmount: srcChainTokenInAmount,
+        dstChainTokenOutAmount: 'auto',
+        dstChainId: toChainId === 1151111081099710 ? 7565164 : toChainId,
+        dstChainTokenOut: toTokenAddress,
+        prependOperatingExpenses: true,
+        additionalTakerRewardBps: 0,
+        tab: new Date().getTime(),
+      })
+      return prependedOperatingExpenseCost
+    },
+  })
+  let prependedOperatingExpenseCost = prependedOperatingExpenseCostOne || 0
 
   const handleMax = async () => {
     if (!token?.amount) {
@@ -58,73 +101,67 @@ 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' &&
+      fromChainId !== toChainId &&
+      fromTokenAddress &&
+      toTokenAddress
+    ) {
+      if (routes) {
+        const router: any = routes[0] || {
+          toAmount: 0,
+          toToken: { decimals: 18 },
         }
-
-        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 (
+          router &&
+          router.data &&
+          router.data.prependedOperatingExpenseCost
+        ) {
+          prependedOperatingExpenseCost =
+            router.data.prependedOperatingExpenseCost
         }
       }
 
-      if (state === 'swap' || fromChainId === toChainId) {
-        if (
-          chain?.nativeToken.address === fromTokenAddress &&
-          data?.recommended
-        ) {
-          gas = BigInt(data.recommended.amount) / 2n
+      gas = BigInt(
+        Number.parseInt(
+          (1.15 * Number(prependedOperatingExpenseCost)).toString()
+        )
+      )
+      if (chain?.nativeToken.address === fromTokenAddress) {
+        if (fromChainId === 1151111081099710) {
+          gas += 15000000n + (8157120n + 4000000n + 890880n)
+        } else if (fromChainId === 8453) {
+          gas += 1000000000000000n + 1000000000000n
         }
       }
+    }
 
-      if (token.amount > gas) {
-        maxAmount = maxAmount - gas
-      } else {
-        maxAmount = 0n
+    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 (maxAmount) {
-        setFieldValue(
-          FormKeyHelper.getAmountKey(formType),
-          formatUnits(maxAmount, token.decimals),
-          {
-            isTouched: true,
-          }
-        )
-      } else {
-        setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
+    if (maxAmount) {
+      setFieldValue(
+        FormKeyHelper.getAmountKey(formType),
+        formatUnits(maxAmount, token.decimals),
+        {
           isTouched: true,
-        })
-      }
-    } catch (error) {
-      console.error('handleMax error', error)
-    } finally {
-      setIsMaxLoading(false)
+        }
+      )
+    } else {
+      setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
+        isTouched: true,
+      })
     }
   }
 

package/src/components/Messages/GasSufficiencyMessageBridge.tsx

@@ -0,0 +1,40 @@
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+interface GasSufficiencyMessageProps extends BoxProps {
+  // insufficientGas?: GasSufficiency[]
+}
+
+export const GasSufficiencyMessageBridge: React.FC<
+  GasSufficiencyMessageProps
+> = ({ ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
+          Not enough balance
+        </Typography>
+      }
+      {...props}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
+        Included gas is paid on top of the amount and covers solvers gas costs
+        to fulfill your trade
+      </Typography>
+    </AlertMessage>
+  )
+}

package/src/components/Messages/PriceImpactHighMessage.tsx

@@ -0,0 +1,27 @@
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+interface GasSufficiencyMessageProps extends BoxProps {
+  // insufficientGas?: GasSufficiency[]
+}
+
+export const PriceImpactHighMessage: React.FC<GasSufficiencyMessageProps> = ({
+  ...props
+}) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage severity="warning" {...props}>
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
+        Price impact is too high. I acknowledge the risk and confirm to continue
+        the trade despite loss of funs
+      </Typography>
+    </AlertMessage>
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -4,6 +4,8 @@ import type { Route } from '@openocean.finance/widget-sdk'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { GasSufficiencyMessageBridge } from './GasSufficiencyMessageBridge.js'
+import { PriceImpactHighMessage } from './PriceImpactHighMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
 
@@ -30,8 +32,12 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
             {...props}
           />
         )
+      case 'INSUFFICIENT_BRIDGE':
+        return <GasSufficiencyMessageBridge {...props} />
       case 'ACCOUNT_NOT_DEPLOYED':
         return <AccountNotDeployedMessage {...props} />
+      case 'PRICE_IMPACT_HIGH':
+        return <PriceImpactHighMessage {...props} />
       case 'TO_ADDRESS_REQUIRED':
         const fromChainId = route?.fromChainId
         const toChainId = route?.toChainId

package/src/components/Messages/useMessageQueue.ts

@@ -2,7 +2,9 @@ import type { Route } from '@openocean.finance/widget-sdk'
 import { useMemo } from 'react'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { useGasSufficiencyBridge } from '../../hooks/useGasSufficiencyBridge.js'
 import { useIsCompatibleDestinationAccount } from '../../hooks/useIsCompatibleDestinationAccount.js'
+import { usePriceImpact } from '../../hooks/usePriceImpact.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 
 interface QueuedMessage {
@@ -19,12 +21,25 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
   } = useIsCompatibleDestinationAccount(route)
   const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
     useFromTokenSufficiency(route)
+
+  const { insufficientBridge, isLoading: isGasSufficiencyBridgeLoading } =
+    useGasSufficiencyBridge(route)
+
   const { insufficientGas, isLoading: isGasSufficiencyLoading } =
     useGasSufficiency(route)
 
+  const { priceImpact } = usePriceImpact(route)
+
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
 
+    if (Math.abs(priceImpact) >= 0.3) {
+      queue.push({
+        id: 'PRICE_IMPACT_HIGH',
+        priority: 1,
+      })
+    }
+
     if (insufficientFromToken) {
       queue.push({
         id: 'INSUFFICIENT_FUNDS',
@@ -39,6 +54,13 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
         props: { insufficientGas },
       })
     }
+    if (insufficientBridge) {
+      queue.push({
+        id: 'INSUFFICIENT_BRIDGE',
+        priority: 2,
+        props: { insufficientBridge },
+      })
+    }
 
     if (!isCompatibleDestinationAccount && !allowInteraction) {
       queue.push({
@@ -70,6 +92,7 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     isLoading:
       isGasSufficiencyLoading ||
       isFromTokenSufficiencyLoading ||
-      isCompatibleDestinationAccountLoading,
+      isCompatibleDestinationAccountLoading ||
+      isGasSufficiencyBridgeLoading,
   }
 }

package/src/components/TransactionDetails.tsx

@@ -7,13 +7,13 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../hooks/useChain.js'
 import { useGasPrice } from '../hooks/useGasPrice.js'
+import { usePriceImpact } from '../hooks/usePriceImpact.js'
 import { useToken } from '../hooks/useToken.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { isRouteDone } from '../stores/routes/utils.js'
 import { useSplitSubvariantStore } from '../stores/settings/useSplitSubvariantStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../utils/format.js'
-import { getPriceImpact } from '../utils/getPriceImpact.js'
 import { Card } from './Card/Card.js'
 import { IconTypography } from './IconTypography.js'
 import { TokenRate } from './TokenRate/TokenRate.js'
@@ -82,12 +82,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       Number(route.fromToken.priceUSD)
   }
 
-  const priceImpact = getPriceImpact({
-    fromAmount: BigInt(route?.fromAmount),
-    toAmount: BigInt(route?.toAmount),
-    fromToken: route?.fromToken,
-    toToken: route?.toToken,
-  })
+  const { priceImpact } = usePriceImpact(route)
 
   const feeCollectionStep = route.steps[0]
     ? route.steps[0].includedSteps.find(
@@ -187,8 +182,27 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 mb: 0.5,
               }}
             >
-              <Typography variant="body2" color="text.secondary">
-                {!isBradge ? t('main.fees.network') : 'Fee'}
+              <Typography
+                variant="body2"
+                sx={{ display: 'flex', alignItems: 'center' }}
+              >
+                <Typography variant="body2" color="text.secondary">
+                  {!isBradge ? t('main.fees.network') : 'Fee'}
+                </Typography>
+                {isBradge ? (
+                  <Tooltip
+                    title="Included gas is paid on top of the amount and covers solvers gas costs to
+        fulfill your trade"
+                  >
+                    <HelpOutline
+                      sx={{
+                        fontSize: '0.975rem',
+                        ml: 0.5,
+                        color: 'text.secondary',
+                      }}
+                    />
+                  </Tooltip>
+                ) : undefined}
               </Typography>
 
               <Typography variant="body2" sx={{ fontWeight: 600 }}>
@@ -277,12 +291,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               sx={{
                 fontWeight: 600,
                 color: priceImpact
-                  ? Number.parseFloat(priceImpact) > 0
-                    ? 'success.main'
-                    : Number.parseFloat(priceImpact) < 0
-                      ? 'error.main'
-                      : 'text.primary'
-                  : 'text.primary',
+                  ? Math.abs(Number(priceImpact)) >= 0.3
+                    ? 'error.main'
+                    : 'orange'
+                  : 'main',
               }}
             >
               {priceImpact ? t('format.percent', { value: priceImpact }) : '--'}
@@ -320,7 +332,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                     <Typography variant="body2" sx={{ fontWeight: 600 }}>
                       {t('format.tokenAmount', {
                         value: formatTokenAmount(
-                          BigInt(route.toAmountMin),
+                          typeof route.toAmountMin === 'string' &&
+                            !route.toAmountMin.includes('e')
+                            ? BigInt(route.toAmountMin)
+                            : BigInt(0),
                           route.toToken.decimals
                         ),
                       })}{' '}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@openocean.finance/widget'
-export const version = '1.0.0'
+export const version = '1.0.7'

package/src/hooks/useFromTokenSufficiency.ts

@@ -45,7 +45,6 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
       }
       const parsedFromAmount = parseUnits(fromAmount, token.decimals)
       let currentTokenBalance = token.amount ?? 0n
-
       if (!route || isRouteDone(route)) {
         const insufficientFunds = currentTokenBalance < parsedFromAmount
         return insufficientFunds

package/src/hooks/useGasSufficiencyBridge.ts

@@ -0,0 +1,87 @@
+import { useAccount } from '@openocean.finance/wallet-management'
+import type { RouteExtended } from '@openocean.finance/widget-sdk'
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { parseUnits } from 'viem'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useTokenAddressBalance } from './useTokenAddressBalance.js'
+
+const refetchInterval = 30_000
+
+export const useGasSufficiencyBridge = (route?: RouteExtended) => {
+  const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
+    'fromChain',
+    'fromToken',
+    'fromAmount'
+  )
+
+  let chainId = fromChainId
+  let tokenAddress = fromTokenAddress
+  if (route) {
+    chainId = route.fromToken.chainId
+    tokenAddress = route.fromToken.address
+  }
+
+  const {
+    token,
+    chain,
+    isLoading: isTokenAddressBalanceLoading,
+  } = useTokenAddressBalance(chainId, tokenAddress)
+
+  const { account } = useAccount({ chainType: chain?.chainType })
+
+  const { data: insufficientBridge, isLoading } = useQuery({
+    queryKey: [
+      'bridge-sufficiency-check',
+      account.address,
+      chainId,
+      tokenAddress,
+      route?.id ?? fromAmount,
+    ] as const,
+    queryFn: async ({ queryKey: [, accountAddress] }) => {
+      if (!accountAddress || !token) {
+        return
+      }
+      const parsedFromAmount = parseUnits(fromAmount, token.decimals)
+      let currentTokenBalance = token.amount ?? 0n
+      if (!route) {
+        return false
+      }
+
+      if (route.fromChainId !== route.toChainId) {
+        const prependedOperatingExpenseCost =
+          route.data.prependedOperatingExpenseCost || 0n
+        let gas = BigInt(
+          Number.parseInt(
+            (1.1 * Number(prependedOperatingExpenseCost)).toString()
+          )
+        )
+        if (chain?.nativeToken.address === fromTokenAddress) {
+          if (fromChainId === 1151111081099710) {
+            gas += 15000000n + (8157120n + 4000000n + 890880n)
+          } else if (fromChainId === 8453) {
+            gas += 1000000000000000n + 1000000000000n
+          }
+        }
+        if (currentTokenBalance > gas) {
+          currentTokenBalance = currentTokenBalance - gas
+        } else {
+          currentTokenBalance = 0n
+        }
+        const insufficientFunds =
+          BigInt(parsedFromAmount) > currentTokenBalance &&
+          BigInt(parsedFromAmount) < token.amount
+        return insufficientFunds
+      }
+      return false
+    },
+    enabled: Boolean(account.address && token && !isTokenAddressBalanceLoading),
+    refetchInterval,
+    staleTime: refetchInterval,
+    placeholderData: account.address ? keepPreviousData : undefined,
+  })
+
+  return {
+    insufficientBridge,
+    isLoading,
+  }
+}

package/src/hooks/usePriceImpact.ts

@@ -0,0 +1,18 @@
+import type { RouteExtended } from '@openocean.finance/widget-sdk'
+import { getPriceImpact } from '../utils/getPriceImpact.js'
+
+export const usePriceImpact = (route?: RouteExtended) => {
+  let priceImpact = 0
+  if (route) {
+    priceImpact = getPriceImpact({
+      fromAmount: BigInt(route?.fromAmount),
+      toAmount: BigInt(route?.toAmount),
+      fromToken: route?.fromToken,
+      toToken: route?.toToken,
+    })
+  }
+
+  return {
+    priceImpact,
+  }
+}

package/src/hooks/useRoutes.ts

@@ -2,7 +2,7 @@ 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 } from 'viem'
+import { parseUnits, formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { DebridgeService } from '../services/DebridgeService.js'
 import { OpenOceanService } from '../services/OpenOceanService.js'
@@ -94,7 +94,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const contractCallQuoteEnabled: boolean =
     subvariant === 'custom' ? Boolean(contractCalls && account.address) : true
 
-  const toAddress = fromChainId === toChainId ? account.address : _toAddress
+  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
   // If toAddress is set, it must have the same chainType as toChain
   const hasToAddressAndChainTypeSatisfied: boolean =
@@ -262,6 +262,23 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           // minOutAmount calculation is now handled within DebridgeService or OpenOceanService
           const isDebridge = data.isDebridgeRoute === true
 
+          let toAmountMin = '0';
+          if (data?.minOutAmount) {
+            toAmountMin = data.minOutAmount;
+          } else if (isDebridge) {
+            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+$/, '');
+            // 如果还是科学计数法，再强制转字符串
+            if (toAmountMin.includes('e') || toAmountMin.includes('E')) {
+              debugger;
+              toAmountMin = minAmount.toLocaleString('fullwide', { useGrouping: false, maximumSignificantDigits: 21 });
+              toAmountMin = toAmountMin.replace(/\.?0+$/, '');
+            }
+          }
           const route: Route = {
             id: data?.orderId || Date.now().toString(),
             fromChainId: fromChainId,
@@ -272,15 +289,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             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()),
+            toAmountMin,
             toToken: toToken!,
             toAddress: toAddress || '',
             insurance: {
@@ -321,15 +330,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                 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()),
+                  toAmountMin,
                   approvalAddress:
                     data?.approveContract ||
                     (isDebridge

package/src/pages/MainPage/MainPage.tsx

@@ -13,10 +13,10 @@ import { useHeader } from '../../hooks/useHeader.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 // import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 import { HiddenUI } from '../../types/widget.js'
 import { MainWarningMessages } from './MainWarningMessages.js'
 import { ReviewButton } from './ReviewButton.js'
-import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
 
 export const MainPage: React.FC = () => {
   const { t } = useTranslation()