@lifi/widget 3.13.1 → 3.14.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.13.1",
+  "version": "3.14.0-beta.0",
   "description": "LI.FI 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",
@@ -30,29 +30,26 @@
     "lifi"
   ],
   "dependencies": {
-    "@bigmi/client": "^0.0.7",
-    "@bigmi/core": "^0.0.7",
+    "@bigmi/client": "^0.1.0",
+    "@bigmi/core": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.4.4",
+    "@lifi/sdk": "3.6.0-beta.3",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.20",
-    "@mui/material": "^6.2.0",
-    "@mui/system": "^6.2.0",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.11.2",
-    "i18next": "^24.2.0",
-    "microdiff": "^1.4.0",
+    "i18next": "^24.2.1",
+    "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.2.0",
-    "react-intersection-observer": "^9.14.0",
+    "react-i18next": "^15.4.0",
+    "react-intersection-observer": "^9.15.0",
     "react-router-dom": "^6.28.0",
-    "viem": "^2.21.55",
-    "zustand": "^5.0.2",
-    "@lifi/wallet-management": "^3.5.1"
+    "viem": "^2.22.8",
+    "zustand": "^5.0.3",
+    "@lifi/wallet-management": "^3.6.0-beta.0"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.0.7",

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -35,6 +35,7 @@ export const ActiveTransactionItem: React.FC<{
 
   const getStatusComponent = () => {
     switch (lastActiveProcess?.status) {
+      case 'PERMIT_REQUIRED':
       case 'ACTION_REQUIRED':
         return <InfoRounded color="info" fontSize="small" />
       case 'FAILED':

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount, useWalletMenu } from '@lifi/wallet-management'
-import { LoadingButton } from '@mui/lab'
+import { Button } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -39,7 +39,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   }
 
   return (
-    <LoadingButton
+    <Button
       variant="contained"
       color="primary"
       onClick={handleClick}
@@ -49,6 +49,6 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       fullWidth
     >
       {getButtonText()}
-    </LoadingButton>
+    </Button>
   )
 }

package/src/components/ButtonTertiary.tsx

@@ -1,8 +1,7 @@
-import { LoadingButton, loadingButtonClasses } from '@mui/lab'
-import { styled } from '@mui/material'
+import { Button, buttonClasses, styled } from '@mui/material'
 import { getContrastAlphaColor } from '../utils/colors.js'
 
-export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
+export const ButtonTertiary = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
   height: 40,
   fontSize: 14,
@@ -10,10 +9,10 @@ export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
   '&:hover, &:active': {
     backgroundColor: getContrastAlphaColor(theme, 0.08),
   },
-  [`&.${loadingButtonClasses.loading}:disabled`]: {
+  [`&.${buttonClasses.loading}:disabled`]: {
     backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  [`.${loadingButtonClasses.loadingIndicator}`]: {
+  [`.${buttonClasses.loadingIndicator}`]: {
     color: theme.palette.text.primary,
   },
 }))

package/src/components/Card/CardLabel.tsx

@@ -13,7 +13,6 @@ export const CardLabel = styled(Box, {
   minWidth: 24,
   userSelect: 'none',
   fontSize: '1rem',
-  marginRight: theme.spacing(1),
   backgroundColor: blend(
     theme.palette.background.paper,
     theme.palette.common.white,

package/src/components/RouteCard/RouteCard.tsx

@@ -1,4 +1,5 @@
 import type { TokenAmount } from '@lifi/sdk'
+import { isEVMPermitStep } from '@lifi/sdk'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
@@ -14,6 +15,7 @@ import { Token } from '../Token/Token.js'
 import { TokenContainer } from './RouteCard.style.js'
 import { RouteCardEssentials } from './RouteCardEssentials.js'
 import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js'
+import { getMatchingLabels } from './getMatchingLabels.js'
 import type { RouteCardProps } from './types.js'
 
 export const RouteCard: React.FC<
@@ -26,7 +28,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+  const { subvariant, subvariantOptions, routeLabels } = useWidgetConfig()
   const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -43,9 +45,13 @@ export const RouteCard: React.FC<
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : undefined
 
-  const tags = route.tags?.filter(
-    (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
-  )
+  const customLabels = getMatchingLabels(route, routeLabels)
+  const tags: string[] =
+    route.tags?.filter((tag) => tag === 'CHEAPEST' || tag === 'FASTEST') ?? []
+  const hasRelayerSupport = route.steps.some((step) => isEVMPermitStep(step))
+  if (hasRelayerSupport) {
+    tags.push('GASLESS')
+  }
 
   const cardContent = (
     <Box
@@ -53,21 +59,28 @@ export const RouteCard: React.FC<
         flex: 1,
       }}
     >
-      {subvariant !== 'refuel' && route.tags?.length ? (
+      {subvariant !== 'refuel' && (tags.length || customLabels.length) ? (
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
             mb: 2,
+            gap: 1,
+            flexWrap: 'wrap',
           }}
         >
-          {tags?.length ? (
+          {tags.length ? (
             <CardLabel type={active ? 'active' : undefined}>
               <CardLabelTypography>
                 {t(`main.tags.${tags[0].toLowerCase()}` as any)}
               </CardLabelTypography>
             </CardLabel>
           ) : null}
+          {customLabels.map((label, index) => (
+            <CardLabel key={index} sx={label.sx}>
+              <CardLabelTypography>{label.text}</CardLabelTypography>
+            </CardLabel>
+          ))}
         </Box>
       ) : null}
       <TokenContainer>

package/src/components/RouteCard/getMatchingLabels.ts

@@ -0,0 +1,53 @@
+import type { Route } from '@lifi/sdk'
+import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
+import { isItemAllowed } from '../../utils/item.js'
+
+export const getMatchingLabels = (
+  route: Route,
+  routeLabels?: RouteLabelRule[]
+): RouteLabel[] => {
+  if (!routeLabels?.length) {
+    return []
+  }
+
+  return routeLabels
+    .filter((rule) => {
+      const conditions: boolean[] = []
+
+      // Check bridge/exchange matches if specified
+      if (rule.bridges || rule.exchanges) {
+        const toolNames = route.steps.flatMap((step) =>
+          step.includedSteps.map((s) => s.tool)
+        )
+        conditions.push(
+          toolNames.some(
+            (toolName) =>
+              isItemAllowed(toolName, rule.bridges) &&
+              isItemAllowed(toolName, rule.exchanges)
+          )
+        )
+      }
+
+      // Check token matches if specified
+      if (rule.fromTokenAddress?.length) {
+        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))
+      }
+
+      if (rule.toTokenAddress?.length) {
+        conditions.push(rule.toTokenAddress.includes(route.toToken.address))
+      }
+
+      // Check chain matches if specified
+      if (rule.fromChainId?.length) {
+        conditions.push(rule.fromChainId.includes(route.fromChainId))
+      }
+
+      if (rule.toChainId?.length) {
+        conditions.push(rule.toChainId.includes(route.toChainId))
+      }
+
+      // Must have at least one condition and all conditions must be true
+      return conditions.length && conditions.every(Boolean)
+    })
+    .map((rule) => rule.label)
+}

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,7 +1,7 @@
 import type { Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { Collapse, Grow, Stack, Typography } from '@mui/material'
-import { useEffect, useRef } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { RouteObject } from 'react-router-dom'
 import { useRoutes as useDOMRoutes, useNavigate } from 'react-router-dom'
@@ -41,7 +41,7 @@ const routes: RouteObject[] = [
 
 export const RoutesExpanded = () => {
   const element = useDOMRoutes(routes)
-  const match = Boolean(element?.props?.children)
+  const match = Boolean((element?.props as PropsWithChildren)?.children)
 
   return (
     <CollapseContainer>
@@ -65,7 +65,7 @@ export const RoutesExpandedElement = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { subvariant, subvariantOptions } = useWidgetConfig()
-  const routesRef = useRef<Route[]>()
+  const routesRef = useRef<Route[]>(undefined)
   const emitter = useWidgetEvents()
   const routesActiveRef = useRef(false)
   const {

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

@@ -15,6 +15,7 @@ const getStatusColor = (
   substatus?: Substatus
 ) => {
   switch (status) {
+    case 'PERMIT_REQUIRED':
     case 'ACTION_REQUIRED':
       return alpha(theme.palette.info.main, 0.12)
     case 'DONE':
@@ -33,12 +34,22 @@ export const CircularIcon = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
 })<{ status?: ProcessStatus; substatus?: Substatus }>(
   ({ theme, status, substatus }) => ({
-    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
+    backgroundColor: [
+      'PERMIT_REQUIRED',
+      'ACTION_REQUIRED',
+      'DONE',
+      'FAILED',
+    ].includes(status!)
       ? getStatusColor(theme, status, substatus)
       : theme.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
+    borderWidth: ![
+      'PERMIT_REQUIRED',
+      'ACTION_REQUIRED',
+      'DONE',
+      'FAILED',
+    ].includes(status!)
       ? 3
       : 0,
     display: 'grid',

package/src/components/Step/CircularProgress.tsx

@@ -17,7 +17,8 @@ export function CircularProgress({ process }: { process: Process }) {
       {process.status === 'STARTED' || process.status === 'PENDING' ? (
         <CircularProgressPending size={40} />
       ) : null}
-      {process.status === 'ACTION_REQUIRED' ? (
+      {process.status === 'PERMIT_REQUIRED' ||
+      process.status === 'ACTION_REQUIRED' ? (
         <InfoRounded
           color="info"
           sx={{

package/src/components/Step/Step.tsx

@@ -27,36 +27,47 @@ export const Step: React.FC<{
   )
 
   const getCardTitle = () => {
+    const hasBridgeStep = step.includedSteps.some(
+      (step) => step.type === 'cross'
+    )
+    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')
+    const hasCustomStep = step.includedSteps.some(
+      (step) => step.type === 'custom'
+    )
+
+    const isCustomVariant = hasCustomStep && subvariant === 'custom'
+
     switch (step.type) {
       case 'lifi': {
-        const hasBridgeStep = step.includedSteps.some(
-          (step) => step.type === 'cross'
-        )
-        const hasSwapStep = step.includedSteps.some(
-          (step) => step.type === 'swap'
-        )
         if (hasBridgeStep && hasSwapStep) {
-          return subvariant === 'custom'
+          return isCustomVariant
             ? subvariantOptions?.custom === 'deposit'
               ? t('main.stepBridgeAndDeposit')
               : t('main.stepBridgeAndBuy')
             : t('main.stepSwapAndBridge')
         }
         if (hasBridgeStep) {
-          return subvariant === 'custom'
+          return isCustomVariant
             ? subvariantOptions?.custom === 'deposit'
               ? t('main.stepBridgeAndDeposit')
               : t('main.stepBridgeAndBuy')
             : t('main.stepBridge')
         }
-        return subvariant === 'custom'
+        if (hasSwapStep) {
+          return isCustomVariant
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepSwapAndDeposit')
+              : t('main.stepSwapAndBuy')
+            : t('main.stepSwap')
+        }
+        return isCustomVariant
           ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
           : t('main.stepSwap')
       }
       default:
-        return subvariant === 'custom'
+        return isCustomVariant
           ? subvariantOptions?.custom === 'deposit'
             ? t('main.stepDeposit')
             : t('main.stepBuy')

package/src/components/Step/StepProcess.tsx

@@ -29,7 +29,8 @@ export const StepProcess: React.FC<{
         <CircularProgress process={process} />
         <Typography
           sx={{
-            mx: 2,
+            marginLeft: 2,
+            marginRight: 0.5,
             flex: 1,
             fontSize: 14,
             fontWeight: process.error ? 600 : 400,

package/src/components/Step/StepTimer.tsx

@@ -44,7 +44,9 @@ export const StepTimer: React.FC<{
       return
     }
     const shouldRestart = executionProcess.status === 'FAILED'
-    const shouldPause = executionProcess.status === 'ACTION_REQUIRED'
+    const shouldPause =
+      executionProcess.status === 'PERMIT_REQUIRED' ||
+      executionProcess.status === 'ACTION_REQUIRED'
     const shouldStart =
       executionProcess.status === 'STARTED' ||
       executionProcess.status === 'PENDING'

package/src/components/TokenList/TokenListItem.tsx

@@ -73,7 +73,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       )
     : undefined
   const container = useRef(null)
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>()
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const [showAddress, setShowAddress] = useState(false)
 
   const tokenAddress =

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.13.1'
+export const version = '3.14.0-beta.0'

package/src/hooks/timer/useInterval.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 export function useInterval(callback: () => void, delay: number) {
-  const callbacRef = useRef<() => void>()
+  const callbacRef = useRef<() => void>(null)
 
   // update callback function with current render callback that has access to latest props and state
   useEffect(() => {

package/src/hooks/useDebouncedWatch.ts

@@ -8,7 +8,7 @@ export const useDebouncedWatch = <T extends FormFieldNames[]>(
 ) => {
   const watchedValue = useFieldValues(...name)
   const [debouncedValue, setDebouncedValue] = useState(watchedValue)
-  const debouncedValueRef = useRef<typeof watchedValue>()
+  const debouncedValueRef = useRef<typeof watchedValue>(null)
   const isMounted = useRef(false)
 
   useEffect(() => {

package/src/hooks/useProcessMessage.ts

@@ -39,6 +39,7 @@ const processStatusMessages: Record<
       ProcessStatus,
       (
         t: TFunction,
+        step: LiFiStep,
         subvariant?: WidgetSubvariant,
         subvariantOptions?: SubvariantOptions
       ) => string
@@ -47,9 +48,18 @@ const processStatusMessages: Record<
 > = {
   TOKEN_ALLOWANCE: {
     STARTED: (t) => t('main.process.tokenAllowance.started'),
-    ACTION_REQUIRED: (t) => t('main.process.tokenAllowance.pending'),
-    PENDING: (t) => t('main.process.tokenAllowance.pending'),
-    DONE: (t) => t('main.process.tokenAllowance.done'),
+    ACTION_REQUIRED: (t, step) =>
+      t('main.process.tokenAllowance.actionRequired', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    PENDING: (t, step) =>
+      t('main.process.tokenAllowance.pending', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
+    DONE: (t, step) =>
+      t('main.process.tokenAllowance.done', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
   },
   SWITCH_CHAIN: {
     ACTION_REQUIRED: (t) => t('main.process.switchChain.actionRequired'),
@@ -57,22 +67,30 @@ const processStatusMessages: Record<
   },
   SWAP: {
     STARTED: (t) => t('main.process.swap.started'),
+    PERMIT_REQUIRED: (t, step) =>
+      t('main.process.swap.permitRequired', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
     ACTION_REQUIRED: (t) => t('main.process.swap.actionRequired'),
     PENDING: (t) => t('main.process.swap.pending'),
-    DONE: (t, subvariant, subvariantOptions) =>
+    DONE: (t, _, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.swap.done'),
   },
   CROSS_CHAIN: {
     STARTED: (t) => t('main.process.bridge.started'),
+    PERMIT_REQUIRED: (t, step) =>
+      t('main.process.bridge.permitRequired', {
+        tokenSymbol: step.action.fromToken.symbol,
+      }),
     ACTION_REQUIRED: (t) => t('main.process.bridge.actionRequired'),
     PENDING: (t) => t('main.process.bridge.pending'),
     DONE: (t) => t('main.process.bridge.done'),
   },
   RECEIVING_CHAIN: {
     PENDING: (t) => t('main.process.receivingChain.pending'),
-    DONE: (t, subvariant, subvariantOptions) =>
+    DONE: (t, _, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.receivingChain.done'),
@@ -229,6 +247,7 @@ export function getProcessMessage(
     ]?.(t) ??
     processStatusMessages[process.type]?.[process.status]?.(
       t,
+      step,
       subvariant,
       subvariantOptions
     )