@openocean.finance/widget 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.2",
+  "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",
@@ -25,9 +25,8 @@
     "unlink:sdk": "pnpm unlink --global @openocean.finance/sdk",
     "test": "vitest run"
   },
-  "author": "Eugene Chybisov <@openocean.finance>",
-
-  "license": "Apache-1.0",
+  "author": "openocean",
+  "license": "ISC",
   "keywords": [
     "widget",
     "openocean-widget",
@@ -45,7 +44,7 @@
     "@bigmi/core": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "3.6.2",
+    "@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",

package/src/components/AmountInput/AmountInput.tsx

@@ -1,5 +1,5 @@
-import type { Token } from '@lifi/sdk'
 import type { CardProps } from '@mui/material'
+import type { Token } from '@openocean.finance/widget-sdk'
 import type { ChangeEvent, ReactNode } from 'react'
 import { useLayoutEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -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/components/AmountInput/PriceFormHelperText.tsx

@@ -1,12 +1,12 @@
-import type { TokenAmount } from '@lifi/sdk'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import type { TokenAmount } from '@openocean.finance/widget-sdk'
 import { useTranslation } from 'react-i18next'
+import { useRoutes } from '../../hooks/useRoutes.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
-import { useRoutes } from '../../hooks/useRoutes.js'
 
 export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(
@@ -35,21 +35,21 @@ export const PriceFormHelperTextBase: React.FC<
   const { t } = useTranslation()
   const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
   const tokenAmount = token
-  ? formatTokenAmount(token.amount, token.decimals)
-  : '0'
+    ? formatTokenAmount(token.amount, token.decimals)
+    : '0'
   const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
-  let toTokenPrice;
-  if(formType === 'to'){
-    const {
-      routes
-    } = useRoutes()
-    if(routes){
-      const router = routes[0] || { toAmount: 0, toToken: { decimals:18 } };
-      const toAmount = formatTokenAmount(BigInt(router.toAmount), router.toToken.decimals)
+  let toTokenPrice
+  if (formType === 'to') {
+    const { routes } = useRoutes()
+    if (routes) {
+      const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } }
+      const toAmount = formatTokenAmount(
+        BigInt(router.toAmount),
+        router.toToken.decimals
+      )
       toTokenPrice = formatTokenPrice(toAmount, router.toToken.priceUSD)
     }
   } else {
-    
   }
 
   return (

package/src/components/Avatar/TokenAvatar.tsx

@@ -1,6 +1,6 @@
-import type { Chain, StaticToken } from '@lifi/sdk'
 import type { SxProps, Theme } from '@mui/material'
 import { Badge } from '@mui/material'
+import type { Chain, StaticToken } from '@openocean.finance/widget-sdk'
 import { useChain } from '../../hooks/useChain.js'
 import { useToken } from '../../hooks/useToken.js'
 import { AvatarBadgedSkeleton } from './Avatar.js'

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,5 +1,5 @@
-import type { EVMChain } from '@lifi/sdk'
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'
+import type { EVMChain } from '@openocean.finance/widget-sdk'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {

package/src/components/ChainSelect/useChainSelect.ts

@@ -1,4 +1,4 @@
-import type { EVMChain } from '@lifi/sdk'
+import type { EVMChain } from '@openocean.finance/widget-sdk'
 import { useChains } from '../../hooks/useChains.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'

package/src/components/ContractComponent/ItemPrice.tsx

@@ -1,4 +1,4 @@
-import type { ContractCall } from '@lifi/sdk'
+import type { ContractCall } from '@openocean.finance/widget-sdk'
 import { useEffect } from 'react'
 import { formatUnits } from 'viem'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'

package/src/components/ContractComponent/NFT/types.ts

@@ -1,4 +1,4 @@
-import type { ContractCall, TokenAmount } from '@lifi/sdk'
+import type { ContractCall, TokenAmount } from '@openocean.finance/widget-sdk'
 
 export interface NFTBaseProps {
   imageUrl?: string

package/src/components/Messages/WarningMessages.tsx

@@ -1,6 +1,6 @@
-import type { Route } from '@lifi/sdk'
 import type { BoxProps } from '@mui/material'
 import { Collapse } from '@mui/material'
+import type { Route } from '@openocean.finance/widget-sdk'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
@@ -33,12 +33,12 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
       case 'ACCOUNT_NOT_DEPLOYED':
         return <AccountNotDeployedMessage {...props} />
       case 'TO_ADDRESS_REQUIRED':
-        const fromChainId = route?.fromChainId;
-        const toChainId = route?.toChainId;
+        const fromChainId = route?.fromChainId
+        const toChainId = route?.toChainId
         if (fromChainId && toChainId && fromChainId !== toChainId) {
-          return <ToAddressRequiredMessage {...props} />;
+          return <ToAddressRequiredMessage {...props} />
         }
-        return null;
+        return null
       default:
         return null
     }

package/src/components/Messages/useMessageQueue.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk'
+import type { Route } from '@openocean.finance/widget-sdk'
 import { useMemo } from 'react'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'

package/src/components/RouteCard/RouteCard.tsx

@@ -1,7 +1,7 @@
-import type { TokenAmount } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import { Box, Collapse } from '@mui/material'
+import type { TokenAmount } from '@openocean.finance/widget-sdk'
+import { isGaslessStep } from '@openocean.finance/widget-sdk'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,6 +1,6 @@
-import { isGaslessStep } from '@lifi/sdk'
 import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
 import { Box, Tooltip, Typography } from '@mui/material'
+import { isGaslessStep } from '@openocean.finance/widget-sdk'
 import { useTranslation } from 'react-i18next'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
 import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'

package/src/components/RouteCard/getMatchingLabels.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk'
+import type { Route } from '@openocean.finance/widget-sdk'
 import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
 import { isItemAllowed } from '../../utils/item.js'
 

package/src/components/RouteCard/types.ts

@@ -1,4 +1,4 @@
-import type { Route } from '@lifi/sdk'
+import type { Route } from '@openocean.finance/widget-sdk'
 
 export interface RouteCardProps {
   route: Route

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,6 +1,6 @@
-import type { Route } from '@lifi/sdk'
 import { Collapse, Grow, Stack, Typography } from '@mui/material'
 import { useAccount } from '@openocean.finance/wallet-management'
+import type { Route } from '@openocean.finance/widget-sdk'
 import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { RouteObject } from 'react-router-dom'

package/src/components/Step/CircularProgress.style.tsx

@@ -1,4 +1,3 @@
-import type { ProcessStatus, Substatus } from '@lifi/sdk'
 import type { Theme } from '@mui/material'
 import {
   Box,
@@ -8,6 +7,7 @@ import {
   keyframes,
   styled,
 } from '@mui/material'
+import type { ProcessStatus, Substatus } from '@openocean.finance/widget-sdk'
 
 const getStatusColor = (
   theme: Theme,

package/src/components/Step/CircularProgress.tsx

@@ -1,4 +1,3 @@
-import type { Process } from '@lifi/sdk'
 import {
   Done,
   ErrorRounded,
@@ -6,6 +5,7 @@ import {
   WarningRounded,
 } from '@mui/icons-material'
 import { darken } from '@mui/material'
+import type { Process } from '@openocean.finance/widget-sdk'
 import {
   CircularIcon,
   CircularProgressPending,

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,12 +1,12 @@
-import type { LiFiStepExtended } from '@lifi/sdk'
 import { LinkRounded, Wallet } from '@mui/icons-material'
 import { Box, Link, Typography } from '@mui/material'
+import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
 import { useTranslation } from 'react-i18next'
 import { CardIconButton } from '../Card/CardIconButton.js'
 import { CircularIcon } from './CircularProgress.style.js'
 
 export const DestinationWalletAddress: React.FC<{
-  step: LiFiStepExtended
+  step: OpenOceanStepExtended
   toAddress: string
   toAddressLink: string
 }> = ({ step, toAddress, toAddressLink }) => {

package/src/components/Step/Step.tsx

@@ -1,5 +1,8 @@
-import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk'
 import { Box } from '@mui/material'
+import type {
+  OpenOceanStepExtended,
+  TokenAmount,
+} from '@openocean.finance/widget-sdk'
 import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/Card/Card.js'
 import { CardTitle } from '../../components/Card/CardTitle.js'
@@ -12,7 +15,7 @@ import { DestinationWalletAddress } from './DestinationWalletAddress.js'
 import { StepProcess } from './StepProcess.js'
 
 export const Step: React.FC<{
-  step: LiFiStepExtended
+  step: OpenOceanStepExtended
   fromToken?: TokenAmount
   toToken?: TokenAmount
   impactToken?: TokenAmount
@@ -37,7 +40,7 @@ export const Step: React.FC<{
     const isCustomVariant = hasCustomStep && subvariant === 'custom'
 
     switch (step.type) {
-      case 'lifi': {
+      case 'openocean': {
         if (hasBridgeStep && hasSwapStep) {
           return isCustomVariant
             ? subvariantOptions?.custom === 'deposit'

package/src/components/Step/StepList.tsx

@@ -1,4 +1,4 @@
-import type { RouteExtended, TokenAmount } from '@lifi/sdk'
+import type { RouteExtended, TokenAmount } from '@openocean.finance/widget-sdk'
 import { Fragment } from 'react'
 import { StepDivider } from '../../components/StepDivider/StepDivider.js'
 import type { WidgetSubvariant } from '../../types/widget.js'

package/src/components/Step/StepProcess.tsx

@@ -1,13 +1,13 @@
-import type { LiFiStep, Process } from '@lifi/sdk'
 import { OpenInNewRounded } from '@mui/icons-material'
 import { Box, Link, Typography } from '@mui/material'
+import type { OpenOceanStep, Process } from '@openocean.finance/widget-sdk'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
 import { CircularProgress } from './CircularProgress.js'
 
 export const StepProcess: React.FC<{
-  step: LiFiStep
+  step: OpenOceanStep
   process: Process
 }> = ({ step, process }) => {
   const { title, message } = useProcessMessage(step, process)

package/src/components/StepActions/StepActions.tsx

@@ -1,5 +1,3 @@
-import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
 import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
 import type { StepIconProps } from '@mui/material'
 import {
@@ -10,11 +8,13 @@ import {
   Stepper,
   Typography,
 } from '@mui/material'
+import type { OpenOceanStep, StepExtended } from '@openocean.finance/widget-sdk'
+import { isGaslessStep } from '@openocean.finance/widget-sdk'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import { OOToolLogo } from '../../icons/lifi.js'
+import { OOToolLogo } from '../../icons/openocean.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../../types/widget.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
@@ -304,8 +304,8 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
   // FIXME: step transaction request overrides step tool details, but not included step tool details
   const toolDetails =
     subvariant === 'custom' &&
-    (step as unknown as LiFiStep).includedSteps?.length > 0
-      ? (step as unknown as LiFiStep).includedSteps.find(
+    (step as unknown as OpenOceanStep).includedSteps?.length > 0
+      ? (step as unknown as OpenOceanStep).includedSteps.find(
           (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
         )?.toolDetails || step.toolDetails
       : step.toolDetails

package/src/components/StepActions/StepFees.tsx

@@ -1,12 +1,12 @@
-import type { LiFiStepExtended } from '@lifi/sdk'
 import type { TypographyProps } from '@mui/material'
 import { Typography } from '@mui/material'
+import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
 import { useTranslation } from 'react-i18next'
 import { getStepFeeCostsBreakdown } from '../../utils/fees.js'
 
 export const StepFees: React.FC<
   TypographyProps & {
-    step: LiFiStepExtended
+    step: OpenOceanStepExtended
   }
 > = ({ step, ...other }) => {
   const { t } = useTranslation()

package/src/components/StepActions/types.ts

@@ -1,5 +1,5 @@
-import type { LiFiStep, Step } from '@lifi/sdk'
 import type { BoxProps } from '@mui/material'
+import type { OpenOceanStep, Step } from '@openocean.finance/widget-sdk'
 import type {
   SubvariantOptions,
   WidgetFeeConfig,
@@ -7,7 +7,7 @@ import type {
 } from '../../types/widget.js'
 
 export interface StepActionsProps extends BoxProps {
-  step: LiFiStep
+  step: OpenOceanStep
   dense?: boolean
 }
 
@@ -20,5 +20,5 @@ export interface StepDetailsLabelProps {
 }
 
 export interface IncludedStepsProps {
-  step: LiFiStep
+  step: OpenOceanStep
 }

package/src/components/Timer/RouteTimer.tsx

@@ -1,4 +1,4 @@
-import type { RouteExtended } from '@lifi/sdk'
+import type { RouteExtended } from '@openocean.finance/widget-sdk'
 
 import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
 import { useSettings } from '../../stores/settings/useSettings.js'

package/src/components/Timer/StepTimer.tsx

@@ -1,4 +1,4 @@
-import type { LiFiStepExtended } from '@lifi/sdk'
+import type { OpenOceanStepExtended } from '@openocean.finance/widget-sdk'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
@@ -6,17 +6,17 @@ import { useSettings } from '../../stores/settings/useSettings.js'
 import { formatTimer } from '../../utils/timer.js'
 import { TimerContent } from './TimerContent.js'
 
-const getFirstExecutionProcess = (step: LiFiStepExtended) =>
+const getFirstExecutionProcess = (step: OpenOceanStepExtended) =>
   step.execution?.process.at(0)
 
-const getExecutionProcess = (step: LiFiStepExtended) =>
+const getExecutionProcess = (step: OpenOceanStepExtended) =>
   step.execution?.process.at(-1)
 
-const getStartTimestamp = (step: LiFiStepExtended) =>
+const getStartTimestamp = (step: OpenOceanStepExtended) =>
   new Date(getFirstExecutionProcess(step)?.startedAt ?? Date.now())
 
 export const StepTimer: React.FC<{
-  step: LiFiStepExtended
+  step: OpenOceanStepExtended
   hideInProgress?: boolean
 }> = ({ step }) => {
   const { i18n } = useTranslation()

package/src/components/Token/Token.tsx

@@ -1,6 +1,6 @@
-import type { LiFiStep, TokenAmount } from '@lifi/sdk'
 import type { BoxProps } from '@mui/material'
 import { Box, Grow, Skeleton, Tooltip } from '@mui/material'
+import type { OpenOceanStep, TokenAmount } from '@openocean.finance/widget-sdk'
 import type { FC, PropsWithChildren, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
@@ -17,7 +17,7 @@ interface TokenProps {
   token: TokenAmount
   impactToken?: TokenAmount
   enableImpactTokenTooltip?: boolean
-  step?: LiFiStep
+  step?: OpenOceanStep
   stepVisible?: boolean
   disableDescription?: boolean
   isLoading?: boolean
@@ -41,11 +41,13 @@ export const TokenFallback: FC<TokenProps & BoxProps> = ({
   )
   return (
     <TokenBase
-      token={{
-        ...token,
-        priceUSD: token.priceUSD || chainToken?.priceUSD,
-        logoURI: token.logoURI || chainToken?.logoURI,
-      } as TokenAmount}
+      token={
+        {
+          ...token,
+          priceUSD: token.priceUSD || chainToken?.priceUSD,
+          logoURI: token.logoURI || chainToken?.logoURI,
+        } as TokenAmount
+      }
       isLoading={isLoading || isLoadingToken}
       {...other}
     />

package/src/components/TokenList/TokenListItem.tsx

@@ -1,4 +1,3 @@
-import { ChainType } from '@lifi/sdk'
 import { OpenInNewRounded } from '@mui/icons-material'
 import {
   Avatar,
@@ -10,6 +9,7 @@ import {
   Slide,
   Typography,
 } from '@mui/material'
+import { ChainType } from '@openocean.finance/widget-sdk'
 import type { MouseEventHandler } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/TokenList/types.ts

@@ -1,5 +1,5 @@
-import type { ExtendedChain } from '@lifi/sdk'
 import type { Account } from '@openocean.finance/wallet-management'
+import type { ExtendedChain } from '@openocean.finance/widget-sdk'
 import type { MouseEventHandler, MutableRefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'