@openocean.finance/widget 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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": "./dist/esm/index.js",
@@ -47,8 +47,8 @@
     "@mui/icons-material": "6.0.2",
     "@mui/material": "^6.4.8",
     "@mui/system": "^6.4.8",
-    "@openocean.finance/wallet-management": "^1.0.9",
-    "@openocean.finance/widget-sdk": "^1.0.6",
+    "@openocean.finance/wallet-management": "^1.0.11",
+    "@openocean.finance/widget-sdk": "^1.0.8",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.13.4",

package/src/App.tsx

@@ -8,7 +8,14 @@ import type { WidgetConfig, WidgetProps } from './types/widget.js'
 
 export const App = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
   const config: WidgetConfig = useMemo(() => {
-    const config = { ...props, ...props.config }
+    const widgetConfig = { ...props, ...props.config }
+    const {
+      fromChain = widgetConfig.defaultChain,
+      fromToken = widgetConfig.defaultFromToken,
+      toChain = widgetConfig.defaultChain,
+      toToken = widgetConfig.defaultToToken,
+    } = widgetConfig
+    const config = { ...widgetConfig, fromChain, fromToken, toChain, toToken }
     if (config.variant === 'drawer') {
       config.theme = {
         ...config.theme,

package/src/components/AmountInput/AmountInput.style.tsx

@@ -6,8 +6,8 @@ import {
   styled,
 } from '@mui/material'
 
-export const maxInputFontSize = 24
-export const minInputFontSize = 14
+export const maxInputFontSize = 22
+export const minInputFontSize = 12
 
 export const FormContainer = styled(Box)(({ theme }) => ({
   display: 'flex',

package/src/components/AmountInput/AmountInput.tsx

@@ -80,17 +80,30 @@ export const AmountInputBase: React.FC<
   const amountKey = FormKeyHelper.getAmountKey(formType)
   const { onChange, onBlur, value } = useFieldController({ name: amountKey })
   inputValue = value || ''
-  if (formType === 'to') {
-    const { routes } = useRoutes()
-    if (routes) {
-      const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
-      inputValue = formatTokenAmount(
-        BigInt(router.toAmount),
-        router.toToken.decimals
-      )
-      inputValue = t('format.tokenAmount', {
-        value: inputValue,
-      })
+  
+
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes()
+
+  if(formType === 'to'){
+    const router = routes?.[0]
+    if (
+      router &&
+      router.toAmount !== undefined &&
+      router.toAmount !== null &&
+      router.toToken &&
+      typeof router.toToken.decimals === 'number'
+    ) {
+      inputValue = String(formatTokenAmount(BigInt(router.toAmount), router.toToken.decimals))
+    } else {
+      inputValue = ''
     }
   }
 
@@ -116,7 +129,7 @@ export const AmountInputBase: React.FC<
     if (ref.current) {
       fitInputText(maxInputFontSize, minInputFontSize, ref.current)
     }
-  }, [value])
+  }, [value, inputValue, routes])
 
   const title =
     subvariant === 'custom'

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -127,7 +127,7 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
           (1.15 * Number(prependedOperatingExpenseCost)).toString()
         )
       )
-      if (chain?.nativeToken.address === fromTokenAddress) {
+      if (chain?.nativeToken?.address === fromTokenAddress) {
         if (fromChainId === 1151111081099710) {
           gas += 15000000n + (8157120n + 4000000n + 890880n)
         } else if (fromChainId === 8453) {
@@ -138,7 +138,7 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
 
     if (state === 'swap' || fromChainId === toChainId) {
       if (
-        chain?.nativeToken.address === fromTokenAddress &&
+        chain?.nativeToken?.address === fromTokenAddress &&
         data?.recommended
       ) {
         gas = BigInt(data.recommended.amount) / 2n

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -47,7 +47,7 @@ export const PriceFormHelperTextBase: React.FC<
         BigInt(router.toAmount),
         router.toToken.decimals
       )
-      toTokenPrice = formatTokenPrice(toAmount, router.toToken.priceUSD)
+      toTokenPrice = formatTokenPrice(toAmount, (router.toToken as any).priceUSD)
     }
   } else {
   }

package/src/components/Messages/GasSufficiencyMessageBridge.tsx

@@ -1,6 +1,7 @@
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'
+import { Warning as WarningIcon } from '@mui/icons-material'
 
 interface GasSufficiencyMessageProps extends BoxProps {
   // insufficientGas?: GasSufficiency[]
@@ -12,6 +13,7 @@ export const GasSufficiencyMessageBridge: React.FC<
   const { t } = useTranslation()
   return (
     <AlertMessage
+      icon={<WarningIcon />}
       severity="warning"
       title={
         <Typography

package/src/components/Messages/PriceImpactHighMessage.tsx

@@ -16,10 +16,10 @@ export const PriceImpactHighMessage: React.FC<PriceImpactHighMessageProps> = ({
   ...props
 }) => {
   const acknowledged = useStorePriceImpactAcknowledged(
-    (state) => state.priceImpactAcknowledged
+    (state) => (state as any).priceImpactAcknowledged
   )
   const setAcknowledged = useStorePriceImpactAcknowledged(
-    (state) => state.setPriceImpactAcknowledged
+    (state) => (state as any).setPriceImpactAcknowledged
   )
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/Messages/WarningMessages.tsx

@@ -25,7 +25,7 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
 }) => {
   const { messages, hasMessages } = useMessageQueue(route, allowInteraction)
   const setPriceImpactAcknowledged = useStorePriceImpactAcknowledged(
-    (state) => state.setPriceImpactAcknowledged
+    (state) => (state as any).setPriceImpactAcknowledged
   )
   const getMessage = () => {
     switch (messages[0]?.id) {

package/src/components/PoweredBy/PoweredBy.tsx

@@ -25,7 +25,7 @@ export const PoweredBy: React.FC = () => {
         flex: 1,
         display: 'flex',
         alignItems: 'flex-end',
-        justifyContent: 'flex-end',
+        justifyContent: 'center',
       }}
     >
       <Tooltip title={`v${version}`} enterDelay={1000}>

package/src/components/ProgressToNextUpdate.tsx

@@ -43,7 +43,7 @@ export const ProgressToNextUpdate: React.FC<
       <Tooltip
         title={
           <Trans
-            i18nKey="tooltip.progressToNextUpdate"
+            i18nKey={"tooltip.progressToNextUpdate" as any}
             values={{
               value: getSecondsToUpdate(updatedAt, timeToUpdate),
             }}

package/src/components/RouteCard/RouteCard.tsx

@@ -37,7 +37,6 @@ export const RouteCard: React.FC<
     e.stopPropagation()
     setCardExpanded((expanded) => !expanded)
   }
-
   const token: TokenAmount =
     subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }

package/src/components/TransactionDetails.tsx

@@ -34,7 +34,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
   const { chain } = useChain(fromChainId)
   const [state] = useSplitSubvariantStore((storeState) => [storeState.state])
   const isBradge = route ? fromChainId !== toChainId : state === 'bridge'
-  const { token } = useToken(fromChainId, chain?.nativeToken.address)
+  const { token } = useToken(fromChainId, chain?.nativeToken?.address)
   const { gasPrice } = useGasPrice(fromChainId?.toString() || '')
 
   if (!route) {
@@ -61,7 +61,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       fromAmountMin: 0,
       estimatedGas: 0,
       steps: [],
-    }
+    } as unknown as RouteExtended
   }
   const toggleCard = () => {
     setCardExpanded((cardExpanded) => !cardExpanded)
@@ -69,16 +69,18 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
 
   let gasCostUSD = 0
   const feeCosts = []
-  const estimatedGas = route?.estimatedGas || route?.data?.estimatedGas
+  const combinedFeesUSD = gasCostUSD + feeCosts.reduce((sum, fee) => sum + fee.costUSD, 0)
+  const feeCostUSD = feeCosts.reduce((sum, fee) => sum + fee.costUSD, 0)
+  const estimatedGas = (route as any)?.estimatedGas || (route as any)?.data?.estimatedGas
   if (token && gasPrice && estimatedGas) {
     const d = 10 ** token.decimals
     gasCostUSD =
       Number(token.priceUSD) * ((Number(gasPrice) * Number(estimatedGas)) / d)
   }
-  if (isBradge && route?.data?.prependedOperatingExpenseCost) {
+  if (isBradge && (route as any)?.data?.prependedOperatingExpenseCost) {
     const decimals = 10 ** route.fromToken.decimals
     gasCostUSD =
-      (route.data.prependedOperatingExpenseCost / decimals) *
+      ((route as any).data.prependedOperatingExpenseCost / decimals) *
       Number(route.fromToken.priceUSD)
   }
 
@@ -225,13 +227,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               <Typography variant="body2" color="text.secondary">
                 {t('main.fees.provider')}
               </Typography>
-              <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                {feeCostUSD
+              {feeCostUSD
                   ? t('format.currency', {
                       value: feeCostUSD,
                     })
                   : '--'}
-              </Typography>
             </Box>
           ) : null}
           {showIntegratorFeeCollectionDetails ? (
@@ -336,7 +336,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                         value: formatTokenAmount(
                           typeof route.toAmountMin === 'string' &&
                             !route.toAmountMin.includes('e')
-                            ? BigInt(Math.floor(route.toAmountMin))
+                            ? BigInt(Math.floor(Number(route.toAmountMin)))
                             : BigInt(0),
                           route.toToken.decimals
                         ),

package/src/config/defaultChainIds.ts

@@ -0,0 +1,38 @@
+export const DEFAULT_CHAIN_IDS = [
+  1,        // Ethereum Mainnet
+  56,       // BNB Chain
+  42161,    // Arbitrum
+  10,       // Optimism
+  324,      // zkSync Era
+  137,      // Polygon Mainnet
+  43114,    // Avalanche
+  250,      // Fantom
+  146,      // Sonic
+  80094,    // Berachain
+  8453,     // Base
+  59144,    // Linea Mainnet
+  534352,   // Scroll
+  81457,    // Blast
+  34443,    // Mode
+  5000,     // Mantle
+  130,      // UniChain
+  14,       // Flare
+  1923,     // Swellchain
+  169,      // Manta Pacific
+  1101,     // Polygon zkEVM
+  40,       // Telos
+  100,      // Gnosis Mainnet
+  30,       // Rootstock
+  2222,     // Kava
+  1329,     // Sei
+  1088,     // Metis
+  204,      // opBNB
+  42220,    // Celo
+  1625,     // Gravity
+  33139,    // ApeChain
+  25,       // Cronos Mainnet
+  1313161554, // Aurora Mainnet
+  1285,     // Moonriver
+  1666600000, // Harmony Mainnet
+  10143,    // Monad Testnet
+]; 

package/src/config/version.ts

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

package/src/hooks/useAvailableChains.ts

@@ -4,13 +4,15 @@ import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isItemAllowed } from '../utils/item.js'
+import { CoinKey } from '../index.js'
+import { DEFAULT_CHAIN_IDS } from '../config/defaultChainIds.js';
 
 export type GetChainById = (
   chainId?: number,
   chains?: ExtendedChain[]
 ) => ExtendedChain | undefined
 
-const supportedChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO]
+const supportedChainTypes: ChainType[] = [ChainType.EVM, ChainType.SVM, ChainType.UTXO]
 
 export const useAvailableChains = (chainTypes?: ChainType[]) => {
   const { chains } = useWidgetConfig()
@@ -30,11 +32,57 @@ export const useAvailableChains = (chainTypes?: ChainType[]) => {
         // providers.length > 0 ? providers : supportedChainTypes
         .filter((chainType) => isItemAllowed(chainType, chainTypesConfig))
 
-      const availableChains = await getChains({
-        chainTypes: chainTypes || chainTypesRequest,
+      let availableChains = await getChains()
+      // allow chains "starknet","aptos","near","ont","sui",
+      const allowedChainsIds = chains?.allow?.length ? chains.allow : DEFAULT_CHAIN_IDS;
+      const allowedChains = availableChains.filter((chain) => {
+        if (allowedChainsIds.indexOf(chain.id) >= 0) {
+          return true
+        }
+        return false
       })
-      config.setChains(availableChains)
-      return availableChains
+      /*
+      allowedChains.push({
+        "key":"eth",
+        "chainType":ChainType.EVM,
+        "name":"Ethereum",
+        "coin":CoinKey.WETH,
+        "id":1,
+        "mainnet":true,
+        "logoURI":"https://raw.githubusercontent.com/lifinance/types/main/src/assets/icons/chains/ethereum.svg",
+        "tokenlistUrl":"https://gateway.ipfs.io/ipns/tokens.uniswap.org",
+        "multicallAddress":"0xcA11bde05977b3631167028862bE2a173976CA11",
+        "relayerSupported":false,
+        "metamask":{
+          "chainId":"0x1",
+          "blockExplorerUrls":["https://etherscan.io/"],
+          "chainName":"Ethereum Mainnet",
+          "nativeCurrency":{
+            "name":"ETH",
+            "symbol":"ETH",
+            "decimals":18
+          },
+          "rpcUrls":[
+            "https://ethereum-rpc.publicnode.com",
+            "https://eth.drpc.org"
+          ]
+        },
+        "nativeToken":{
+          "address":"0x0000000000000000000000000000000000000000",
+          "chainId":1,"symbol":
+          "ETH","decimals":18,
+          "name":"ETH",
+          "coinKey":"ETH",
+          "logoURI":"https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
+          "priceUSD":"3804.11"
+        },
+        "diamondAddress":"0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE",
+        "permit2":"0x000000000022D473030F116dDEE9F6B43aC78BA3",
+        "permit2Proxy":"0x89c6340B1a1f4b25D36cd8B063D49045caF3f818"
+      })
+      */
+      config.setChains(allowedChains)
+      return allowedChains
     },
     refetchInterval: 300_000,
     staleTime: 300_000,
@@ -46,9 +94,6 @@ export const useAvailableChains = (chainTypes?: ChainType[]) => {
         return
       }
       const chain = chains?.find((chain) => chain.id === chainId)
-      // if (!chain) {
-      //   throw new Error('Chain not found or chainId is invalid.');
-      // }
       return chain
     },
     [data]

package/src/hooks/useGasPrice.ts

@@ -13,8 +13,9 @@ export const useGasPrice = (chainName: string) => {
     queryKey: ['gasPrice'],
     queryFn: () => OpenOceanService.getGasPrice(chainName.toLowerCase()),
   })
+  const _gasPrice = data?.[gasKey[gasPrice || 'Normal']]
   return {
-    gasPrice: data?.[gasKey[gasPrice || 'Normal']],
+    gasPrice: _gasPrice && _gasPrice.maxFeePerGas,
     isLoading,
   }
 }

package/src/hooks/useGasSufficiencyBridge.ts

@@ -49,13 +49,13 @@ export const useGasSufficiencyBridge = (route?: RouteExtended) => {
 
       if (route.fromChainId !== route.toChainId) {
         const prependedOperatingExpenseCost =
-          route.data.prependedOperatingExpenseCost || 0n
+          (route as any).data.prependedOperatingExpenseCost || 0n
         let gas = BigInt(
           Number.parseInt(
             (1.1 * Number(prependedOperatingExpenseCost)).toString()
           )
         )
-        if (chain?.nativeToken.address === fromTokenAddress) {
+        if (chain?.nativeToken?.address === fromTokenAddress) {
           if (fromChainId === 1151111081099710) {
             gas += 15000000n + (8157120n + 4000000n + 890880n)
           } else if (fromChainId === 8453) {

package/src/hooks/useRoutes.ts

@@ -340,7 +340,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                     (isDebridge
                       ? data?.to
                       : '0x6352a56caadC4F1E25CD6c75970Fa768A3304e64'),
-                  executionDuration: data?.executionDuration || 300_000,
+                  executionDuration: data?.executionDuration || Math.floor(Math.random() * 20) + 40,
                   tool: isDebridge ? 'debridge' : 'openocean',
                   feeCosts: data?.feeCosts || [
                     {
@@ -357,7 +357,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                 includedSteps: [],
               },
             ],
-            data: data,
+            ...(data as any),
           }
           const routes = [route]
           emitter.emit(WidgetEvent.AvailableRoutes, routes)

package/src/hooks/useTokenSearch.ts

@@ -1,4 +1,4 @@
-import type { TokensRee } from '@openocean.finance/widget-sdk'
+import type { TokensResponse } from '@openocean.finance/widget-sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { OpenOceanService } from '../services/OpenOceanService.js'
 import type { TokenAmount } from '../types/token.js'

package/src/hooks/useTokens.ts

@@ -86,11 +86,11 @@ export const useTokens = (selectedChainId?: number) => {
         token[tokenType] = true
         // Check if this token exists in the filteredTokensMap and add priceUSD if it does
         const matchingFilteredToken = filteredTokensMap.get(token.address)
-        if (matchingFilteredToken?.priceUSD) {
-          token.priceUSD = matchingFilteredToken.priceUSD
+        if ((matchingFilteredToken as any)?.priceUSD) {
+          (token as any).priceUSD = (matchingFilteredToken as any).priceUSD
         }
         if (!token.logoURI && matchingFilteredToken) {
-          token.logoURI = matchingFilteredToken.logoURI
+          (token as any).logoURI = (matchingFilteredToken as any).logoURI
         }
         return token as TokenAmount
       })

package/src/i18n/en.json

@@ -61,8 +61,8 @@
     "deposit": "Deposit",
     "depositDetails": "Deposit details",
     "depositTo": "Deposit to",
-    "exchange": "Exchange",
-    "from": "Exchange from",
+    "exchange": "Swap",
+    "from": "Swap from",
     "gas": "Gas",
     "payWith": "Pay with",
     "receive": "Receive",
@@ -73,7 +73,7 @@
     "sendToWallet": "Send to wallet",
     "settings": "Settings",
     "swap": "Swap",
-    "to": "Exchange to",
+    "to": "Swap to",
     "transactionDetails": "Transaction details",
     "transactionHistory": "Transaction history",
     "walletConnected": "Wallet connected",

package/src/i18n/i18next.d.ts

@@ -1,10 +1,40 @@
+import 'i18next'
+import 'react-i18next'
 import en from './en.json' with { type: 'json' }
 
 const defaultResource = { translation: en }
 
+// Completely override i18next module
 declare module 'i18next' {
   interface CustomTypeOptions {
     defaultNS: 'translation'
     resources: typeof defaultResource
+    keySeparator?: false
+  }
+  
+  // Override the t function to accept any string
+  function t(key: string, options?: any): string;
+  
+  // Override TFunction type
+  type TFunction = (key: string, options?: any) => string;
+}
+
+// Completely override react-i18next module
+declare module 'react-i18next' {
+  // Override useTranslation hook
+  function useTranslation(): {
+    t: (key: string, options?: any) => string
+    i18n: any
+    ready: boolean
+    // ...other hooks
+  }
+  
+  // Override TFunction type
+  type TFunction = (key: string, options?: any) => string;
+  
+  // Override other related types
+  interface UseTranslationOptions {
+    keyPrefix?: string
+    ns?: string | string[]
   }
 }

package/src/index.ts

@@ -28,4 +28,4 @@ export { getPriceImpact } from './utils/getPriceImpact.js'
 export { percentFormatter } from './utils/percentFormatter.js'
 export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
 export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'
-export { navigationRoutes } from './utils/navigationRoutes.js'
+export { navigationRoutes } from './utils/navigationRoutes.js'

package/src/pages/MainPage/ReviewButton.tsx

@@ -26,7 +26,7 @@ export const ReviewButton: React.FC = () => {
 
   const { messages } = useMessageQueue(currentRoute)
   const priceImpactAcknowledged = useStorePriceImpactAcknowledged(
-    (state) => state.priceImpactAcknowledged
+    (state) => (state as any).priceImpactAcknowledged
   )
 
   let hasMessages = messages.length > 0

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -54,7 +54,7 @@ export const BookmarkAddressSheet = forwardRef<
   const validateWithAddressFromInput = async () => {
     const validationResult = await validateAddress({ value: address })
     if (!validationResult.isValid) {
-      setError({ type: 'address', message: validationResult.error })
+      setError({ type: 'address', message: (validationResult as any).error })
       return
     }
 

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -97,7 +97,7 @@ export const SendToWalletPage = () => {
     })
     setIsDoneButtonLoading(false)
     if (!validationResult.isValid) {
-      setErrorMessage(validationResult.error)
+      setErrorMessage((validationResult as any).error)
       return
     }
 
@@ -159,7 +159,7 @@ export const SendToWalletPage = () => {
       })
       bookmarkAddressSheetRef.current?.open()
     } else {
-      setErrorMessage(validationResult.error)
+      setErrorMessage((validationResult as any).error)
     }
   }
 

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -13,7 +13,7 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
 }) => {
   const { messages, isLoading } = useMessageQueue(route)
   const priceImpactAcknowledged = useStorePriceImpactAcknowledged(
-    (state) => state.priceImpactAcknowledged
+    (state) => (state as any).priceImpactAcknowledged
   )
 
   let hasMessages = messages.length > 0

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -56,7 +56,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   useEffect(() => {
     const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
     const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)
-    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
+    if ((hasSuccessFlag || hasFailedFlag) && !(ref.current?.isOpen?.() as unknown as boolean)) {
       ref.current?.open()
     }
   }, [status])

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -58,10 +58,10 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   const toAmountUSD = Number.parseFloat(route.toAmountUSD)
   const hasGaslessSupport = route.steps.some(isGaslessStep)
 
-  if (isBradge && route?.data?.prependedOperatingExpenseCost) {
+  if (isBradge && (route as any)?.data?.prependedOperatingExpenseCost) {
     const decimals = 10 ** route.fromToken.decimals
     gasCostUSD =
-      (route.data.prependedOperatingExpenseCost / decimals) *
+      ((route as any).data.prependedOperatingExpenseCost / decimals) *
       Number(route.fromToken.priceUSD)
   }
 

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -109,7 +109,7 @@ export const TransactionPage: React.FC = () => {
   }
 
   const handleExecuteRoute = () => {
-    if (tokenValueBottomSheetRef.current?.isOpen()) {
+    if (tokenValueBottomSheetRef.current?.isOpen?.() as unknown as boolean) {
       const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
       const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
       const toAmountUSD = Number.parseFloat(route.toAmountUSD)

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -45,7 +45,7 @@ export const WidgetProvider: React.FC<
         integrator: widgetConfig.integrator ?? window?.location.hostname,
         routeOptions: {
           fee: widgetConfig.feeConfig?.fee || widgetConfig.fee,
-          referrer: widgetConfig.referrer,
+          referrer: widgetConfig.referrer?.address,
           order: widgetConfig.routePriority,
           slippage: widgetConfig.slippage,
           ...widgetConfig.sdkConfig?.routeOptions,

package/src/services/DebridgeService.ts

@@ -482,7 +482,7 @@ export class DebridgeService {
         // Estimate details
         approveContract: to, // Approval needed for the Debridge contract
         // executionDuration: approximateFulfillmentDelay ? approximateFulfillmentDelay * 1000 : 300000, // Convert seconds to ms? Needs verification. Defaulting to 5min.
-        executionDuration: 300_000, // Hardcoding 5min for now, Debridge delay unit unclear.
+        executionDuration: 0, // Hardcoding 5min for now, Debridge delay unit unclear.
         // Fee details
         feeCosts: finalFeeToken
           ? [