@lifi/widget 3.17.0 → 3.18.0

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/StepActions/StepActions.tsx

@@ -1,4 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
 import type { StepIconProps } from '@mui/material'
 import {
@@ -26,7 +27,6 @@ import {
   StepLabel,
   StepLabelTypography,
 } from './StepActions.style.js'
-import { StepFees } from './StepFees.js'
 import type {
   IncludedStepsProps,
   StepActionsProps,
@@ -95,7 +95,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
                   tool: toolDetails.name,
                 })}
           </Typography>
-          <StepFees ml={2} step={step} />
+          {/* <StepFees ml={2} step={step} /> */}
         </Box>
         {dense ? (
           <CardIconButton onClick={handleExpand} size="small">
@@ -160,6 +160,8 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
     ) : null
   }
 
+  const hasRelayerSupport = isRelayerStep(step)
+
   return (
     <Box
       sx={{
@@ -173,7 +175,11 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
       >
         {includedSteps.map((step, i, includedSteps) => (
           <MuiStep key={step.id} expanded>
-            <StepLabel StepIconComponent={StepIconComponent}>
+            <StepLabel
+              slots={{
+                stepIcon: StepIconComponent,
+              }}
+            >
               {step.type === 'custom' && subvariant === 'custom' ? (
                 <CustomStepDetailsLabel
                   step={step}
@@ -183,7 +189,11 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
               ) : step.type === 'cross' ? (
                 <BridgeStepDetailsLabel step={step} />
               ) : step.type === 'protocol' ? (
-                <ProtocolStepDetailsLabel step={step} feeConfig={feeConfig} />
+                <ProtocolStepDetailsLabel
+                  step={step}
+                  feeConfig={feeConfig}
+                  relayerSupport={hasRelayerSupport}
+                />
               ) : (
                 <SwapStepDetailsLabel step={step} />
               )}
@@ -345,14 +355,16 @@ export const SwapStepDetailsLabel: React.FC<
 
 export const ProtocolStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step, feeConfig }) => {
+> = ({ step, feeConfig, relayerSupport }) => {
   const { t } = useTranslation()
   return (
     <StepLabelTypography>
       {step.toolDetails.key === 'feeCollection'
         ? feeConfig?.name
           ? t('main.fees.integrator', { tool: feeConfig.name })
-          : t('main.fees.defaultIntegrator')
+          : relayerSupport
+            ? t('main.fees.relayerService')
+            : t('main.fees.defaultIntegrator')
         : step.toolDetails.key === 'gasZip'
           ? t('main.refuelStepDetails', {
               tool: step.toolDetails.name,

package/src/components/StepActions/types.ts

@@ -16,6 +16,7 @@ export interface StepDetailsLabelProps {
   subvariant?: Extract<WidgetSubvariant, 'custom'>
   subvariantOptions?: SubvariantOptions
   feeConfig?: WidgetFeeConfig
+  relayerSupport?: boolean
 }
 
 export interface IncludedStepsProps {

package/src/components/Timer/RouteTimer.tsx

@@ -1,5 +1,8 @@
 import type { RouteExtended } from '@lifi/sdk'
+
 import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { formatTimer } from '../../utils/timer.js'
 import { TimerContent } from './TimerContent.js'
 
 export const RouteTimer: React.FC<{
@@ -9,14 +12,22 @@ export const RouteTimer: React.FC<{
   const firstActiveProcess = firstActiveStep?.execution?.process.at(0)
 
   const startTime = new Date(firstActiveProcess?.startedAt ?? Date.now())
-  const { seconds, minutes } = useStopwatch({
+  const { seconds, minutes, days, hours } = useStopwatch({
     autoStart: true,
     offsetTimestamp: startTime,
   })
 
+  const { language } = useSettings(['language'])
+
   return (
     <TimerContent>
-      {`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}
+      {formatTimer({
+        days,
+        hours,
+        seconds,
+        minutes,
+        locale: language,
+      })}
     </TimerContent>
   )
 }

package/src/components/Timer/StepTimer.tsx

@@ -2,6 +2,8 @@ import type { LiFiStepExtended } from '@lifi/sdk'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStopwatch } from '../../hooks/timer/useStopwatch.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { formatTimer } from '../../utils/timer.js'
 import { TimerContent } from './TimerContent.js'
 
 const getFirstExecutionProcess = (step: LiFiStepExtended) =>
@@ -18,15 +20,17 @@ export const StepTimer: React.FC<{
   hideInProgress?: boolean
 }> = ({ step }) => {
   const { i18n } = useTranslation()
+  const { language } = useSettings(['language'])
 
   const [isExecutionStarted, setExecutionStarted] = useState(
     () => !!getExecutionProcess(step)
   )
 
-  const { seconds, minutes, isRunning, pause, reset, start } = useStopwatch({
-    autoStart: true,
-    offsetTimestamp: getStartTimestamp(step),
-  })
+  const { seconds, minutes, days, hours, isRunning, pause, reset, start } =
+    useStopwatch({
+      autoStart: true,
+      offsetTimestamp: getStartTimestamp(step),
+    })
 
   useEffect(() => {
     const executionProcess = getExecutionProcess(step)
@@ -78,7 +82,13 @@ export const StepTimer: React.FC<{
 
   return (
     <TimerContent>
-      {`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}
+      {formatTimer({
+        locale: language,
+        days,
+        hours,
+        minutes,
+        seconds,
+      })}
     </TimerContent>
   )
 }

package/src/components/Token/Token.tsx

@@ -177,7 +177,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
               &#x2022;
             </TextSecondary>
           ) : null}
-          {step ? (
+          {!disableDescription && step ? (
             <TokenStep
               step={step}
               stepVisible={stepVisible}

package/src/components/TransactionDetails.tsx

@@ -1,4 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import {
   ExpandLess,
   ExpandMore,
@@ -62,8 +63,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
     )
   }
 
+  const hasRelayerSupport = route.steps.some(isRelayerStep)
+
   const showIntegratorFeeCollectionDetails =
-    feeAmountUSD || Number.isFinite(feeConfig?.fee)
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasRelayerSupport
 
   return (
     <Card selectionColor="secondary" {...props}>
@@ -86,7 +89,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           <TokenRate route={route} />
         </Box>
         <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
-          <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
+          <FeeBreakdownTooltip
+            gasCosts={gasCosts}
+            feeCosts={feeCosts}
+            relayerSupport={hasRelayerSupport}
+          >
             <Box
               onClick={toggleCard}
               // biome-ignore lint/a11y/useSemanticElements:
@@ -102,15 +109,17 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                data-value={combinedFeesUSD}
+                data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
                 sx={{
                   fontSize: 14,
                   color: 'text.primary',
-                  fontWeight: '600',
+                  fontWeight: 600,
                   lineHeight: 1.429,
                 }}
               >
-                {t('format.currency', { value: combinedFeesUSD })}
+                {hasRelayerSupport
+                  ? t('main.fees.free')
+                  : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
             </Box>
           </FeeBreakdownTooltip>
@@ -138,11 +147,19 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             }}
           >
             <Typography variant="body2">{t('main.fees.network')}</Typography>
-            <FeeBreakdownTooltip gasCosts={gasCosts}>
-              <Typography variant="body2">
-                {t('format.currency', {
-                  value: gasCostUSD,
-                })}
+            <FeeBreakdownTooltip
+              gasCosts={gasCosts}
+              relayerSupport={hasRelayerSupport}
+            >
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 600, cursor: 'help' }}
+              >
+                {hasRelayerSupport
+                  ? t('main.fees.free')
+                  : t('format.currency', {
+                      value: gasCostUSD,
+                    })}
               </Typography>
             </FeeBreakdownTooltip>
           </Box>
@@ -156,7 +173,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             >
               <Typography variant="body2">{t('main.fees.provider')}</Typography>
               <FeeBreakdownTooltip feeCosts={feeCosts}>
-                <Typography variant="body2">
+                <Typography
+                  variant="body2"
+                  sx={{ fontWeight: 600, cursor: 'help' }}
+                >
                   {t('format.currency', {
                     value: feeCostUSD,
                   })}
@@ -180,16 +200,18 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               {feeConfig?.name ? (
                 <Tooltip
                   title={t('tooltip.feeCollection', { tool: feeConfig.name })}
-                  sx={{ cursor: 'help' }}
                 >
-                  <Typography variant="body2">
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 600, cursor: 'help' }}
+                  >
                     {t('format.currency', {
                       value: feeAmountUSD,
                     })}
                   </Typography>
                 </Tooltip>
               ) : (
-                <Typography variant="body2">
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
                   {t('format.currency', {
                     value: feeAmountUSD,
                   })}
@@ -205,8 +227,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             }}
           >
             <Typography variant="body2">{t('main.priceImpact')}</Typography>
-            <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
-              <Typography variant="body2">
+            <Tooltip title={t('tooltip.priceImpact')}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 600, cursor: 'help' }}
+              >
                 {t('format.percent', { value: priceImpact })}
               </Typography>
             </Tooltip>
@@ -221,8 +246,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 }}
               >
                 <Typography variant="body2">{t('main.maxSlippage')}</Typography>
-                <Tooltip title={t('tooltip.slippage')} sx={{ cursor: 'help' }}>
-                  <Typography variant="body2">
+                <Tooltip title={t('tooltip.slippage')}>
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 600, cursor: 'help' }}
+                  >
                     {t('format.percent', {
                       value: route.steps[0].action.slippage,
                     })}
@@ -236,11 +264,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 }}
               >
                 <Typography variant="body2">{t('main.minReceived')}</Typography>
-                <Tooltip
-                  title={t('tooltip.minReceived')}
-                  sx={{ cursor: 'help' }}
-                >
-                  <Typography variant="body2">
+                <Tooltip title={t('tooltip.minReceived')}>
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 600, cursor: 'help' }}
+                  >
                     {t('format.tokenAmount', {
                       value: formatTokenAmount(
                         BigInt(route.toAmountMin),

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.17.0'
+export const version = '3.18.0'

package/src/hooks/useGasRefuel.ts

@@ -49,8 +49,8 @@ export const useGasRefuel = () => {
 
   const enabled = useMemo(() => {
     if (
-      // We don't allow same chain refuel.
-      // If a user runs out of gas, he can't send a source chain transaction.
+      // Same chain refuel is not allowed since users need gas on source chain to initiate transaction
+      // We allow refuel when bridging to native token since bridging routes may require gas for destination swaps
       fromChainId === toChainId ||
       !gasRecommendation?.available ||
       !gasRecommendation?.recommended ||

package/src/hooks/useGasSufficiency.ts

@@ -1,4 +1,5 @@
 import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
 import { useAvailableChains } from './useAvailableChains.js'
@@ -22,19 +23,29 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     chainType: getChainById(route?.fromChainId)?.chainType,
   })
 
-  const { isContractAddress } = useIsContractAddress(
-    account.address,
-    route?.fromChainId,
-    account.chainType
-  )
+  const { isContractAddress, isLoading: isContractAddressLoading } =
+    useIsContractAddress(account.address, route?.fromChainId, account.chainType)
 
   const { data: insufficientGas, isLoading } = useQuery({
-    queryKey: ['gas-sufficiency-check', account.address, route?.id],
+    queryKey: [
+      'gas-sufficiency-check',
+      account.address,
+      route?.id,
+      isContractAddress,
+    ] as const,
     queryFn: async ({ queryKey: [, accountAddress] }) => {
       if (!route) {
         return
       }
 
+      // If we have a relayer step with a permit (EIP-2612) for the from token, we don't need to check for gas sufficiency
+      if (
+        isRelayerStep(route.steps[0]) &&
+        route.steps[0].permits.some((permit) => permit.permitType === 'Permit')
+      ) {
+        return
+      }
+
       // We assume that LI.Fuel protocol always refuels the destination chain
       const hasRefuelStep = route.steps
         .flatMap((step) => step.includedSteps)
@@ -136,7 +147,12 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       return gasCostResult
     },
 
-    enabled: Boolean(!isContractAddress && account.address && route),
+    enabled: Boolean(
+      !isContractAddress &&
+        !isContractAddressLoading &&
+        account.address &&
+        route
+    ),
     refetchInterval,
     staleTime: refetchInterval,
   })

package/src/hooks/useIsBatchingSupported.ts

@@ -0,0 +1,24 @@
+import { ChainType, isBatchingSupported } from '@lifi/sdk'
+import type { ExtendedChain } from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+
+export function useIsBatchingSupported(
+  chain?: ExtendedChain,
+  address?: string
+) {
+  const enabled = chain && chain.chainType === ChainType.EVM && !!address
+  const { data, isLoading } = useQuery({
+    queryKey: ['isBatchingSupported', chain?.id, address],
+    queryFn: () => {
+      return isBatchingSupported({ chainId: chain!.id })
+    },
+    enabled,
+    staleTime: 3_600_000,
+    retry: false,
+  })
+
+  return {
+    isBatchingSupported: data,
+    isBatchingSupportedLoading: enabled && isLoading,
+  }
+}

package/src/hooks/useProcessMessage.ts

@@ -39,6 +39,7 @@ const processStatusMessages: Record<
       ProcessStatus,
       (
         t: TFunction,
+        step: LiFiStep,
         subvariant?: WidgetSubvariant,
         subvariantOptions?: SubvariantOptions
       ) => string
@@ -47,19 +48,34 @@ 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'),
     DONE: (t) => t('main.process.switchChain.done'),
   },
+  PERMIT: {
+    STARTED: (t) => t('main.process.permit.started'),
+    ACTION_REQUIRED: (t) => t('main.process.permit.actionRequired'),
+    PENDING: (t) => t('main.process.permit.pending'),
+    DONE: (t) => t('main.process.permit.done'),
+  },
   SWAP: {
     STARTED: (t) => t('main.process.swap.started'),
     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'),
@@ -72,7 +88,7 @@ const processStatusMessages: Record<
   },
   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'),
@@ -193,6 +209,10 @@ export function getProcessMessage(
         title = t('error.title.transactionCanceled')
         message = getDefaultErrorMessage('error.message.transactionCanceled')
         break
+      case LiFiErrorCode.TransactionRejected:
+        title = t('error.title.transactionRejected')
+        message = getDefaultErrorMessage('error.message.transactionRejected')
+        break
       case LiFiErrorCode.TransactionConflict:
         title = t('error.title.transactionConflict')
         message = getDefaultErrorMessage('error.message.transactionConflict')
@@ -229,6 +249,7 @@ export function getProcessMessage(
     ]?.(t) ??
     processStatusMessages[process.type]?.[process.status]?.(
       t,
+      step,
       subvariant,
       subvariantOptions
     )