@openocean.finance/widget 1.0.4 → 1.0.8

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "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.8",
+    "@openocean.finance/widget-sdk": "^1.0.5",
     "@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/Header/Header.tsx

@@ -7,7 +7,7 @@ import { ElementId, createElementId } from '../../utils/elements.js'
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'
 import { Container } from './Header.style.js'
 import { NavigationHeader } from './NavigationHeader.js'
-// import { WalletHeader } from './WalletHeader.js'
+import { WalletHeader } from './WalletHeader.js'
 
 export const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation()
@@ -52,7 +52,7 @@ export const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
 export const Header: FC = () => {
   return (
     <HeaderContainer>
-      {/* <WalletHeader /> */}
+      <WalletHeader />
       <NavigationHeader />
     </HeaderContainer>
   )

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,59 @@
+import { WarningRounded } from '@mui/icons-material'
+import {
+  type BoxProps,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+} from '@mui/material'
+import { AlertMessage } from './AlertMessage.js'
+import { useStorePriceImpactAcknowledged } from './useMessageQueue.js'
+interface PriceImpactHighMessageProps extends BoxProps {
+  onAcknowledge?: (acknowledged: boolean) => void
+}
+
+export const PriceImpactHighMessage: React.FC<PriceImpactHighMessageProps> = ({
+  onAcknowledge,
+  ...props
+}) => {
+  const acknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.priceImpactAcknowledged
+  )
+  const setAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.setPriceImpactAcknowledged
+  )
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.checked
+    setAcknowledged(newValue)
+    onAcknowledge?.(newValue)
+  }
+
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography variant="body2" sx={{ color: 'text.primary' }}>
+          Price impact is too high
+        </Typography>
+      }
+      {...props}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
+        I acknowledge the risk and confirm to continue the trade despite loss of
+        funds
+      </Typography>
+      <FormControlLabel
+        control={<Checkbox checked={acknowledged} onChange={handleChange} />}
+        label="I understand and accept the risk"
+        sx={{ alignItems: 'center', px: 2, pt: 1 }}
+      />
+    </AlertMessage>
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -4,8 +4,13 @@ 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'
+import {
+  useMessageQueue,
+  useStorePriceImpactAcknowledged,
+} from './useMessageQueue.js'
 
 type WarningMessagesProps = BoxProps & {
   route?: Route
@@ -18,7 +23,9 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
   ...props
 }) => {
   const { messages, hasMessages } = useMessageQueue(route, allowInteraction)
-
+  const setPriceImpactAcknowledged = useStorePriceImpactAcknowledged(
+    (state) => state.setPriceImpactAcknowledged
+  )
   const getMessage = () => {
     switch (messages[0]?.id) {
       case 'INSUFFICIENT_FUNDS':
@@ -30,8 +37,19 @@ 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
+            onAcknowledge={(e) => {
+              setPriceImpactAcknowledged(e)
+            }}
+            {...props}
+          />
+        )
       case 'TO_ADDRESS_REQUIRED':
         const fromChainId = route?.fromChainId
         const toChainId = route?.toChainId

package/src/components/Messages/useMessageQueue.ts

@@ -1,10 +1,22 @@
 import type { Route } from '@openocean.finance/widget-sdk'
 import { useMemo } from 'react'
+import { create } from 'zustand'
 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'
 
+export const useStorePriceImpactAcknowledged = create((set) => ({
+  priceImpactAcknowledged: false,
+  setPriceImpactAcknowledged: (v: boolean) =>
+    set((state) => {
+      return {
+        priceImpactAcknowledged: v,
+      }
+    }),
+}))
 interface QueuedMessage {
   id: string
   priority: number
@@ -19,9 +31,15 @@ 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[] = []
 
@@ -32,6 +50,13 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
+    if (priceImpact <= -0.3) {
+      queue.push({
+        id: 'PRICE_IMPACT_HIGH',
+        priority: 1,
+      })
+    }
+
     if (insufficientGas?.length) {
       queue.push({
         id: 'INSUFFICIENT_GAS',
@@ -39,6 +64,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({
@@ -59,9 +91,11 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     allowInteraction,
     insufficientFromToken,
     insufficientGas,
+    insufficientBridge,
     isCompatibleDestinationAccount,
     requiredToAddress,
     toAddress,
+    priceImpact,
   ])
 
   return {
@@ -70,6 +104,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,12 @@ 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',
+                  ? Number(priceImpact) < 0
+                    ? Number(priceImpact) > -0.3
+                      ? 'orange'
+                      : 'error.main'
+                    : 'green'
+                  : '',
               }}
             >
               {priceImpact ? t('format.percent', { value: priceImpact }) : '--'}
@@ -320,7 +334,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.8'

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,
+  }
+}