@lifi/widget 3.16.1 → 3.17.0

package/src/hooks/useSettingMonitor.ts

@@ -33,7 +33,14 @@ export const useSettingMonitor = () => {
     : slippage !== defaultConfigurableSettings.slippage
 
   const isSlippageOutsideRecommendedLimits =
-    isSlippageChanged && Number(slippage) > 1
+    isSlippageChanged && slippage && Number(slippage) > 1
+
+  const isSlippageUnderRecommendedLimits =
+    isSlippageChanged && slippage && Number(slippage) < 0.1
+
+  const isSlippageNotRecommended = Boolean(
+    isSlippageOutsideRecommendedLimits || isSlippageUnderRecommendedLimits
+  )
 
   const isRoutePriorityChanged = config.routePriority
     ? routePriority !== config.routePriority
@@ -51,7 +58,7 @@ export const useSettingMonitor = () => {
     isRoutePriorityChanged ||
     isGasPriceChanged
 
-  const isRouteSettingsWithWarnings = isSlippageOutsideRecommendedLimits
+  const isRouteSettingsWithWarnings = isSlippageNotRecommended
 
   const reset = () => {
     if (tools) {
@@ -68,7 +75,9 @@ export const useSettingMonitor = () => {
     isBridgesChanged,
     isExchangesChanged,
     isSlippageChanged,
+    isSlippageNotRecommended,
     isSlippageOutsideRecommendedLimits,
+    isSlippageUnderRecommendedLimits,
     isRoutePriorityChanged,
     isGasPriceChanged,
     isCustomRouteSettings,

package/src/i18n/en.json

@@ -128,7 +128,8 @@
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
       "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
       "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
-      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running."
+      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running.",
+      "slippageUnderRecommendedLimits": "Low slippage tolerance may cause transaction delays or failures."
     },
     "title": {
       "deleteActiveTransactions": "Delete all active transactions?",

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -6,20 +6,20 @@ import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
 import { FullPageContainer } from '../../components/FullPageContainer.js'
 import { TokenList } from '../../components/TokenList/TokenList.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { SearchTokenInput } from './SearchTokenInput.js'
-import { useTokenListHeight } from './useTokenListHeight.js'
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useScrollableOverflowHidden()
   const { navigateBack } = useNavigateBack()
   const headerRef = useRef<HTMLElement>(null)
   const listParentRef = useRef<HTMLUListElement | null>(null)
-  const { tokenListHeight, minListHeight } = useTokenListHeight({
+  const { listHeight, minListHeight } = useListHeight({
     listParentRef,
     headerRef,
   })
@@ -64,7 +64,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
       >
         <TokenList
           parentRef={listParentRef}
-          height={tokenListHeight}
+          height={listHeight}
           onClick={navigateBack}
           formType={formType}
         />

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -17,22 +17,30 @@ import {
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style.js'
 
+const DEFAULT_CUSTOM_INPUT_VALUE = '0.5'
+
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation()
-  const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
-    useSettingMonitor()
+  const {
+    isSlippageNotRecommended,
+    isSlippageUnderRecommendedLimits,
+    isSlippageOutsideRecommendedLimits,
+    isSlippageChanged,
+  } = useSettingMonitor()
   const { slippage } = useSettings(['slippage'])
   const { setValue } = useSettingsActions()
   const defaultValue = useRef(slippage)
   const [focused, setFocused] = useState<'input' | 'button'>()
 
   const customInputValue =
-    !slippage || slippage === defaultSlippage ? '' : slippage
+    !slippage || slippage === defaultSlippage
+      ? DEFAULT_CUSTOM_INPUT_VALUE
+      : slippage
 
   const [inputValue, setInputValue] = useState(customInputValue)
 
   const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current))
+    setValue('slippage', defaultSlippage)
   }
 
   const debouncedSetValue = useMemo(() => debounce(setValue, 500), [setValue])
@@ -41,43 +49,49 @@ export const SlippageSettings: React.FC = () => {
     (event) => {
       const { value } = event.target
 
-      setInputValue(formatSlippage(value, defaultValue.current, true))
+      const formattedValue = formatSlippage(value, defaultValue.current, true)
 
+      setInputValue(formattedValue)
       debouncedSetValue(
         'slippage',
-        formatSlippage(value || defaultSlippage, defaultValue.current, true)
+        formattedValue.length ? formattedValue : defaultSlippage
       )
     },
     [debouncedSetValue]
   )
 
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused(undefined)
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    setFocused('input')
 
     const { value } = event.target
 
-    const formattedValue = formatSlippage(
-      value || defaultSlippage,
-      defaultValue.current
-    )
-    setInputValue(formattedValue === defaultSlippage ? '' : formattedValue)
+    const formattedValue = formatSlippage(value, defaultValue.current)
+    setInputValue(formattedValue)
 
-    setValue('slippage', formattedValue)
+    setValue(
+      'slippage',
+      formattedValue.length ? formattedValue : defaultSlippage
+    )
   }
 
-  const badgeColor = isSlippageOutsideRecommendedLimits
+  const badgeColor = isSlippageNotRecommended
     ? 'warning'
     : isSlippageChanged
       ? 'info'
       : undefined
 
+  const slippageWarningText = isSlippageOutsideRecommendedLimits
+    ? t('warning.message.slippageOutsideRecommendedLimits')
+    : isSlippageUnderRecommendedLimits
+      ? t('warning.message.slippageUnderRecommendedLimits')
+      : ''
+
   return (
     <SettingCardExpandable
       value={
-        <BadgedValue
-          badgeColor={badgeColor}
-          showBadge={!!badgeColor}
-        >{`${slippage}%`}</BadgedValue>
+        <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>
+          {slippage ? `${slippage}%` : t('button.auto')}
+        </BadgedValue>
       }
       icon={<Percent />}
       title={t('settings.slippage')}
@@ -99,7 +113,7 @@ export const SlippageSettings: React.FC = () => {
             onClick={handleDefaultClick}
             disableRipple
           >
-            {defaultSlippage}
+            {t('button.auto')}
           </SlippageDefaultButton>
           <SlippageCustomInput
             selected={defaultSlippage !== slippage && focused !== 'button'}
@@ -108,15 +122,13 @@ export const SlippageSettings: React.FC = () => {
               inputMode: 'decimal',
             }}
             onChange={handleInputUpdate}
-            onFocus={() => {
-              setFocused('input')
-            }}
-            onBlur={handleInputBlur}
+            onFocus={handleInputFocus}
             value={inputValue}
             autoComplete="off"
+            onBlur={() => setFocused(undefined)}
           />
         </SettingsFieldSet>
-        {isSlippageOutsideRecommendedLimits && (
+        {isSlippageNotRecommended && (
           <SlippageLimitsWarningContainer>
             <WarningRounded color="warning" />
             <Typography
@@ -125,7 +137,7 @@ export const SlippageSettings: React.FC = () => {
                 fontWeight: 400,
               }}
             >
-              {t('warning.message.slippageOutsideRecommendedLimits')}
+              {slippageWarningText}
             </Typography>
           </SlippageLimitsWarningContainer>
         )}

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,11 +1,14 @@
 import type { FullStatusData } from '@lifi/sdk'
-import { List } from '@mui/material'
+import { Box, List } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
+import type React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
+
+import { useListHeight } from '../../hooks/useListHeight.js'
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
 import { TransactionHistoryItem } from './TransactionHistoryItem.js'
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
@@ -19,9 +22,13 @@ export const TransactionHistoryPage: React.FC = () => {
   const { t } = useTranslation()
   useHeader(t('header.transactionHistory'))
 
+  const { listHeight } = useListHeight({
+    listParentRef: parentRef,
+  })
+
   const { getVirtualItems, getTotalSize } = useVirtualizer({
     count: transactions.length,
-    overscan: 10,
+    overscan: 5,
     paddingEnd: 12,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 186,
@@ -35,36 +42,46 @@ export const TransactionHistoryPage: React.FC = () => {
 
   return (
     <PageContainer
-      ref={parentRef}
-      style={{ height: minTransactionListHeight, overflow: 'auto' }}
+      disableGutters
+      style={{ minHeight: minTransactionListHeight }}
     >
-      {isLoading ? (
-        <List disablePadding>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <TransactionHistoryItemSkeleton key={index} />
-          ))}
-        </List>
-      ) : (
-        <List
-          style={{
-            height: getTotalSize(),
-            width: '100%',
-            position: 'relative',
-          }}
-          disablePadding
-        >
-          {getVirtualItems().map((item) => {
-            const transaction = transactions[item.index]
-            return (
-              <TransactionHistoryItem
-                key={item.key}
-                start={item.start}
-                transaction={transaction}
-              />
-            )
-          })}
-        </List>
-      )}
+      <Box
+        ref={parentRef}
+        style={{
+          height: listHeight,
+        }}
+        sx={{
+          overflow: 'auto',
+          paddingX: 3,
+        }}
+      >
+        {isLoading ? (
+          <List disablePadding>
+            {Array.from({ length: 3 }).map((_, index) => (
+              <TransactionHistoryItemSkeleton key={index} />
+            ))}
+          </List>
+        ) : (
+          <List
+            style={{
+              height: getTotalSize(),
+              position: 'relative',
+            }}
+            disablePadding
+          >
+            {getVirtualItems().map((item) => {
+              const transaction = transactions[item.index]
+              return (
+                <TransactionHistoryItem
+                  key={item.key}
+                  start={item.start}
+                  transaction={transaction}
+                />
+              )
+            })}
+          </List>
+        )}
+      </Box>
     </PageContainer>
   )
 }

package/src/stores/settings/useSettingsStore.ts

@@ -5,7 +5,7 @@ import type { SettingsProps, SettingsState } from './types.js'
 import { SettingsToolTypes } from './types.js'
 import { getStateValues } from './utils/getStateValues.js'
 
-export const defaultSlippage = '0.5'
+export const defaultSlippage = undefined
 
 export const defaultConfigurableSettings: Pick<
   SettingsState,

package/src/types/widget.ts

@@ -94,6 +94,7 @@ export enum HiddenUI {
   ToToken = 'toToken',
   WalletMenu = 'walletMenu',
   IntegratorStepDetails = 'integratorStepDetails',
+  ReverseTokensButton = 'reverseTokensButton',
 }
 export type HiddenUIType = `${HiddenUI}`
 
@@ -144,7 +145,7 @@ export interface CalculateFeeParams {
   toAddress?: string
   fromAmount?: bigint
   toAmount?: bigint
-  slippage: number
+  slippage?: number
 }
 
 export interface WidgetFeeConfig {

package/dist/esm/components/Step/StepTimer.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AccessTimeFilled } from '@mui/icons-material';
-import { Box, Tooltip } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useTimer } from '../../hooks/timer/useTimer.js';
-import { IconTypography } from '../IconTypography.js';
-const getExecutionProcess = (step) => step.execution?.process.findLast((process) => process.type === 'SWAP' ||
-    process.type === 'CROSS_CHAIN' ||
-    process.type === 'RECEIVING_CHAIN');
-const getExpiryTimestamp = (step) => new Date((getExecutionProcess(step)?.startedAt ?? Date.now()) +
-    step.estimate.executionDuration * 1000);
-export const StepTimer = ({ step, hideInProgress }) => {
-    const { t, i18n } = useTranslation();
-    const [isExpired, setExpired] = useState(false);
-    const [isExecutionStarted, setExecutionStarted] = useState(() => !!getExecutionProcess(step));
-    const [expiryTimestamp, setExpiryTimestamp] = useState(() => getExpiryTimestamp(step));
-    const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
-        autoStart: false,
-        expiryTimestamp,
-        onExpire: () => setExpired(true),
-    });
-    useEffect(() => {
-        const executionProcess = getExecutionProcess(step);
-        if (!executionProcess) {
-            return;
-        }
-        const shouldRestart = executionProcess.status === 'FAILED';
-        const shouldPause = executionProcess.status === 'ACTION_REQUIRED';
-        const shouldStart = executionProcess.status === 'STARTED' ||
-            executionProcess.status === 'PENDING';
-        const shouldResume = executionProcess.status === 'PENDING';
-        if (isExecutionStarted && shouldRestart) {
-            setExecutionStarted(false);
-            setExpired(false);
-            return;
-        }
-        if (isExecutionStarted && isExpired) {
-            return;
-        }
-        if (!isExecutionStarted && shouldStart) {
-            const expiryTimestamp = getExpiryTimestamp(step);
-            setExecutionStarted(true);
-            setExpired(false);
-            setExpiryTimestamp(expiryTimestamp);
-            restart(expiryTimestamp);
-            return;
-        }
-        if (isRunning && shouldPause) {
-            pause();
-        }
-        else if (!isRunning && shouldResume) {
-            resume();
-        }
-    }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step]);
-    if (!isExecutionStarted) {
-        const showSeconds = step.estimate.executionDuration < 60;
-        const duration = showSeconds
-            ? Math.floor(step.estimate.executionDuration)
-            : Math.floor(step.estimate.executionDuration / 60);
-        return (_jsx(StepTimerContent, { children: duration.toLocaleString(i18n.language, {
-                style: 'unit',
-                unit: showSeconds ? 'second' : 'minute',
-                unitDisplay: 'narrow',
-            }) }));
-    }
-    const isTimerExpired = isExpired || (!minutes && !seconds);
-    if (step.execution?.status === 'DONE' ||
-        step.execution?.status === 'FAILED' ||
-        (isTimerExpired && hideInProgress)) {
-        return null;
-    }
-    return isTimerExpired ? (t('main.inProgress')) : (_jsx(StepTimerContent, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
-};
-const StepTimerContent = ({ children }) => {
-    const { t } = useTranslation();
-    return (_jsx(Tooltip, { title: t('tooltip.estimatedTime'), sx: { cursor: 'help' }, children: _jsxs(Box, { component: "span", sx: {
-                display: 'flex',
-                alignItems: 'center',
-                height: 14,
-            }, children: [_jsx(IconTypography, { as: "span", sx: { marginRight: 0.5, fontSize: 16 }, children: _jsx(AccessTimeFilled, { fontSize: "inherit" }) }), _jsx(Box, { component: "span", sx: {
-                        fontVariantNumeric: 'tabular-nums',
-                        cursor: 'help',
-                    }, children: children })] }) }));
-};
-//# sourceMappingURL=StepTimer.js.map

package/dist/esm/components/Step/StepTimer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StepTimer.js","sourceRoot":"","sources":["../../../../src/components/Step/StepTimer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAmC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,mBAAmB,GAAG,CAAC,IAAsB,EAAE,EAAE,CACrD,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,CAC9B,CAAC,OAAO,EAAE,EAAE,CACV,OAAO,CAAC,IAAI,KAAK,MAAM;IACvB,OAAO,CAAC,IAAI,KAAK,aAAa;IAC9B,OAAO,CAAC,IAAI,KAAK,iBAAiB,CACrC,CAAA;AAEH,MAAM,kBAAkB,GAAG,CAAC,IAAsB,EAAE,EAAE,CACpD,IAAI,IAAI,CACN,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,SAAS,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;IAClD,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG,IAAI,CACzC,CAAA;AAEH,MAAM,CAAC,MAAM,SAAS,GAGjB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE;IAChC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACxD,GAAG,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAClC,CAAA;IACD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1D,kBAAkB,CAAC,IAAI,CAAC,CACzB,CAAA;IACD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;QACvE,SAAS,EAAE,KAAK;QAChB,eAAe;QACf,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;KACjC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAA;QAClD,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,KAAK,QAAQ,CAAA;QAC1D,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,KAAK,iBAAiB,CAAA;QACjE,MAAM,WAAW,GACf,gBAAgB,CAAC,MAAM,KAAK,SAAS;YACrC,gBAAgB,CAAC,MAAM,KAAK,SAAS,CAAA;QACvC,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,KAAK,SAAS,CAAA;QAC1D,IAAI,kBAAkB,IAAI,aAAa,EAAE,CAAC;YACxC,mBAAmB,CAAC,KAAK,CAAC,CAAA;YAC1B,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,OAAM;QACR,CAAC;QACD,IAAI,kBAAkB,IAAI,SAAS,EAAE,CAAC;YACpC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,kBAAkB,IAAI,WAAW,EAAE,CAAC;YACvC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;YAChD,mBAAmB,CAAC,IAAI,CAAC,CAAA;YACzB,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,kBAAkB,CAAC,eAAe,CAAC,CAAA;YACnC,OAAO,CAAC,eAAe,CAAC,CAAA;YACxB,OAAM;QACR,CAAC;QACD,IAAI,SAAS,IAAI,WAAW,EAAE,CAAC;YAC7B,KAAK,EAAE,CAAA;QACT,CAAC;aAAM,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE,CAAC;YACtC,MAAM,EAAE,CAAA;QACV,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;IAE5E,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG,EAAE,CAAA;QACxD,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YAC7C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,GAAG,EAAE,CAAC,CAAA;QACpD,OAAO,CACL,KAAC,gBAAgB,cACd,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtC,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBACvC,WAAW,EAAE,QAAQ;aACtB,CAAC,GACe,CACpB,CAAA;IACH,CAAC;IAED,MAAM,cAAc,GAAG,SAAS,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAA;IAE1D,IACE,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM;QACjC,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,QAAQ;QACnC,CAAC,cAAc,IAAI,cAAc,CAAC,EAClC,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,cAAc,CAAC,CAAC,CAAC,CACtB,CAAC,CAAC,iBAAiB,CAAC,CACrB,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,cACd,GAAG,OAAO,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GACtC,CACpB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAChE,MAAC,GAAG,IACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;gBACF,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,MAAM,EAAE,EAAE;aACX,aAED,KAAC,cAAc,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,YAC9D,KAAC,gBAAgB,IAAC,QAAQ,EAAC,SAAS,GAAG,GACxB,EACjB,KAAC,GAAG,IACF,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE;wBACF,kBAAkB,EAAE,cAAc;wBAClC,MAAM,EAAE,MAAM;qBACf,YAEA,QAAQ,GACL,IACF,GACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/pages/SelectTokenPage/useTokenListHeight.d.ts

@@ -1,12 +0,0 @@
-import type { MutableRefObject } from 'react';
-interface UseContentHeightProps {
-    listParentRef: MutableRefObject<HTMLUListElement | null>;
-    headerRef: MutableRefObject<HTMLElement | null>;
-}
-export declare const minTokenListHeight = 360;
-export declare const minMobileTokenListHeight = 160;
-export declare const useTokenListHeight: ({ listParentRef, headerRef, }: UseContentHeightProps) => {
-    minListHeight: number;
-    tokenListHeight: number;
-};
-export {};

package/dist/esm/pages/SelectTokenPage/useTokenListHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTokenListHeight.js","sourceRoot":"","sources":["../../../../src/pages/SelectTokenPage/useTokenListHeight.ts"],"names":[],"mappings":"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"}

package/src/components/Step/StepTimer.tsx

@@ -1,137 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk'
-import { AccessTimeFilled } from '@mui/icons-material'
-import { Box, Tooltip } from '@mui/material'
-import { type FC, type PropsWithChildren, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTimer } from '../../hooks/timer/useTimer.js'
-import { IconTypography } from '../IconTypography.js'
-
-const getExecutionProcess = (step: LiFiStepExtended) =>
-  step.execution?.process.findLast(
-    (process) =>
-      process.type === 'SWAP' ||
-      process.type === 'CROSS_CHAIN' ||
-      process.type === 'RECEIVING_CHAIN'
-  )
-
-const getExpiryTimestamp = (step: LiFiStepExtended) =>
-  new Date(
-    (getExecutionProcess(step)?.startedAt ?? Date.now()) +
-      step.estimate.executionDuration * 1000
-  )
-
-export const StepTimer: React.FC<{
-  step: LiFiStepExtended
-  hideInProgress?: boolean
-}> = ({ step, hideInProgress }) => {
-  const { t, i18n } = useTranslation()
-  const [isExpired, setExpired] = useState(false)
-  const [isExecutionStarted, setExecutionStarted] = useState(
-    () => !!getExecutionProcess(step)
-  )
-  const [expiryTimestamp, setExpiryTimestamp] = useState(() =>
-    getExpiryTimestamp(step)
-  )
-  const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
-    autoStart: false,
-    expiryTimestamp,
-    onExpire: () => setExpired(true),
-  })
-
-  useEffect(() => {
-    const executionProcess = getExecutionProcess(step)
-    if (!executionProcess) {
-      return
-    }
-    const shouldRestart = executionProcess.status === 'FAILED'
-    const shouldPause = executionProcess.status === 'ACTION_REQUIRED'
-    const shouldStart =
-      executionProcess.status === 'STARTED' ||
-      executionProcess.status === 'PENDING'
-    const shouldResume = executionProcess.status === 'PENDING'
-    if (isExecutionStarted && shouldRestart) {
-      setExecutionStarted(false)
-      setExpired(false)
-      return
-    }
-    if (isExecutionStarted && isExpired) {
-      return
-    }
-    if (!isExecutionStarted && shouldStart) {
-      const expiryTimestamp = getExpiryTimestamp(step)
-      setExecutionStarted(true)
-      setExpired(false)
-      setExpiryTimestamp(expiryTimestamp)
-      restart(expiryTimestamp)
-      return
-    }
-    if (isRunning && shouldPause) {
-      pause()
-    } else if (!isRunning && shouldResume) {
-      resume()
-    }
-  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step])
-
-  if (!isExecutionStarted) {
-    const showSeconds = step.estimate.executionDuration < 60
-    const duration = showSeconds
-      ? Math.floor(step.estimate.executionDuration)
-      : Math.floor(step.estimate.executionDuration / 60)
-    return (
-      <StepTimerContent>
-        {duration.toLocaleString(i18n.language, {
-          style: 'unit',
-          unit: showSeconds ? 'second' : 'minute',
-          unitDisplay: 'narrow',
-        })}
-      </StepTimerContent>
-    )
-  }
-
-  const isTimerExpired = isExpired || (!minutes && !seconds)
-
-  if (
-    step.execution?.status === 'DONE' ||
-    step.execution?.status === 'FAILED' ||
-    (isTimerExpired && hideInProgress)
-  ) {
-    return null
-  }
-
-  return isTimerExpired ? (
-    t('main.inProgress')
-  ) : (
-    <StepTimerContent>
-      {`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}
-    </StepTimerContent>
-  )
-}
-
-const StepTimerContent: FC<PropsWithChildren> = ({ children }) => {
-  const { t } = useTranslation()
-  return (
-    <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-      <Box
-        component="span"
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          height: 14,
-        }}
-      >
-        <IconTypography as="span" sx={{ marginRight: 0.5, fontSize: 16 }}>
-          <AccessTimeFilled fontSize="inherit" />
-        </IconTypography>
-        <Box
-          component="span"
-          sx={{
-            fontVariantNumeric: 'tabular-nums',
-            cursor: 'help',
-          }}
-        >
-          {children}
-        </Box>
-      </Box>
-    </Tooltip>
-  )
-}