@lifi/widget 4.1.0 → 4.3.0

package/src/hooks/useRoutes.ts

@@ -18,6 +18,7 @@ import { useCallback, useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useNavigationTabsStore } from '../stores/navigationTabs/useNavigationTabsStore.js'
 import { useIntermediateRoutesStore } from '../stores/routes/useIntermediateRoutesStore.js'
 import { useSetExecutableRoute } from '../stores/routes/useSetExecutableRoute.js'
 import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
@@ -70,6 +71,10 @@ export const useRoutes = ({
   const queryClient = useQueryClient()
   const emitter = useWidgetEvents()
   const swapOnly = useSwapOnly()
+  const isPrivate = useNavigationTabsStore(
+    (state) => state.activeTab === 'private'
+  )
+
   const {
     disabledBridges,
     disabledExchanges,
@@ -88,11 +93,12 @@ export const useRoutes = ({
     'slippage',
   ])
   const [fromTokenAmount] = useDebouncedWatch(500, 'fromAmount')
+  // Debounce toAmount like fromAmount to avoid a request per keystroke
+  const [toTokenAmount] = useDebouncedWatch(500, 'toAmount')
   const [
     fromChainId,
     fromTokenAddress,
     toAddress,
-    toTokenAmount,
     toChainId,
     toTokenAddress,
     contractCalls,
@@ -100,11 +106,14 @@ export const useRoutes = ({
     'fromChain',
     'fromToken',
     'toAddress',
-    'toAmount',
     'toChain',
     'toToken',
     'contractCalls'
   )
+  const [validUntilDuration, partiallyFillable] = useFieldValues(
+    'validUntil',
+    'partiallyFillable'
+  )
   const { token: fromToken } = useToken(fromChainId, fromTokenAddress)
   const { token: toToken } = useToken(toChainId, toTokenAddress)
   const { chain: fromChain } = useChain(fromChainId)
@@ -117,7 +126,15 @@ export const useRoutes = ({
   const { isBatchingSupported, isBatchingSupportedLoading } =
     useIsBatchingSupported(fromChain, account.address)
 
-  const hasAmount = Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
+  // In limit mode toAmount is the user's limit target, derived from the sell
+  // amount and limit price. It's keyed and sent to the backend so changing the
+  // limit fetches a fresh quote. The receive card is read-only (it displays the
+  // quote and never writes toAmount back), so keying on it can't loop. Both a
+  // sell amount and a limit price (→ toAmount) are required before fetching.
+  const hasAmount =
+    mode === 'limit'
+      ? Number(fromTokenAmount) > 0 && Number(toTokenAmount) > 0
+      : Number(fromTokenAmount) > 0 || Number(toTokenAmount) > 0
 
   const contractCallQuoteEnabled: boolean =
     mode === 'custom' ? Boolean(contractCalls && account.address) : true
@@ -169,6 +186,8 @@ export const useRoutes = ({
         toChain?.id as number,
         toToken?.address as string,
         toTokenAmount,
+        validUntilDuration,
+        partiallyFillable,
         contractCalls,
         slippage,
         swapOnly,
@@ -184,6 +203,7 @@ export const useRoutes = ({
         feeConfig?.fee,
         disableMessageSigning,
         !!isBatchingSupported,
+        isPrivate,
         observableRoute?.id,
       ] as const,
     [
@@ -196,6 +216,8 @@ export const useRoutes = ({
       toChain?.id,
       toToken?.address,
       toTokenAmount,
+      validUntilDuration,
+      partiallyFillable,
       contractCalls,
       slippage,
       swapOnly,
@@ -212,6 +234,7 @@ export const useRoutes = ({
       feeConfig?.fee,
       disableMessageSigning,
       isBatchingSupported,
+      isPrivate,
       observableRoute?.id,
     ]
   )
@@ -233,6 +256,8 @@ export const useRoutes = ({
           toChainId,
           toTokenAddress,
           toTokenAmount,
+          validUntilDuration,
+          partiallyFillable,
           contractCalls,
           slippage = defaultSlippage,
           swapOnly,
@@ -248,13 +273,16 @@ export const useRoutes = ({
           configuredFee,
           disableMessageSigning,
           isBatchingSupported,
+          isPrivate,
           // _observableRouteId must be the last element in the query key
           _observableRouteId,
         ],
         signal,
       }) => {
         const fromAmount = parseUnits(fromTokenAmount, fromToken!.decimals)
-        const toAmount = parseUnits(toTokenAmount, toToken!.decimals)
+        const toAmount = toTokenAmount
+          ? parseUnits(toTokenAmount, toToken!.decimals)
+          : undefined
         const formattedSlippage = slippage
           ? Number.parseFloat(slippage) / 100
           : defaultSlippage
@@ -360,6 +388,8 @@ export const useRoutes = ({
         const shouldUseMainRoutes =
           !observableRoute || !isObservableRelayerRoute
         const shouldUseRelayerQuote =
+          // Relayer quotes don't support limit-order params
+          mode !== 'limit' &&
           fromAddress &&
           fromChain?.chainType === ChainType.EVM &&
           fromChain.permit2 &&
@@ -370,6 +400,15 @@ export const useRoutes = ({
           !isBatchingSupported &&
           (!observableRoute || isObservableRelayerRoute)
 
+        const limitOrderRouteParams =
+          mode === 'limit'
+            ? {
+                toAmount: toAmount?.toString(),
+                validUntil: Math.floor(Date.now() / 1000) + validUntilDuration,
+                partiallyFillable: partiallyFillable,
+              }
+            : undefined
+
         const mainRoutesPromise = shouldUseMainRoutes
           ? getRoutes(
               sdkClient,
@@ -385,6 +424,7 @@ export const useRoutes = ({
                   enabledRefuel && gasRecommendationFromAmount
                     ? gasRecommendationFromAmount
                     : undefined,
+                ...limitOrderRouteParams,
                 options: {
                   allowSwitchChain:
                     mode === 'refuel' ? false : allowSwitchChain,
@@ -410,6 +450,7 @@ export const useRoutes = ({
                   slippage: formattedSlippage,
                   fee: calculatedFee || configuredFee,
                   executionType: disableMessageSigning ? 'transaction' : 'all',
+                  ...(isPrivate && { private: true }),
                 },
               },
               { signal }

package/src/hooks/useWideVariant.ts

@@ -1,13 +1,19 @@
 import type { Theme } from '@mui/material'
 import { useMediaQuery } from '@mui/material'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useNavigationTabsStore } from '../stores/navigationTabs/useNavigationTabsStore.js'
+import { getTabVariant } from '../stores/navigationTabs/utils.js'
 
 const defaultExpandableWidth = 852
 
 export const useWideVariant = (): boolean => {
-  const { variant, showSingleRoute } = useWidgetConfig()
+  const config = useWidgetConfig()
+  const activeTab = useNavigationTabsStore((store) => store.activeTab)
+  // The active tab can pin its own variant (e.g. the limit tab is compact),
+  // falling back to the widget config's variant when it doesn't.
+  const variant = getTabVariant(config, activeTab)
   const expandableAllowed = useMediaQuery((theme: Theme) =>
     theme.breakpoints.up(defaultExpandableWidth)
   )
-  return variant === 'wide' && expandableAllowed && !showSingleRoute
+  return variant === 'wide' && expandableAllowed && !config.showSingleRoute
 }

package/src/pages/MainPage/LimitPageContent.tsx

@@ -0,0 +1,18 @@
+import { AmountInputCardPair } from '../../components/AmountInputCard/AmountInputCardPair.js'
+import { LimitOrderSettings } from '../../components/LimitOrderSettings/LimitOrderSettings.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { LimitOrderRoutes } from '../../components/Routes/LimitOrderRoutes.js'
+import { MainPageActions } from './MainPageActions.js'
+
+const marginSx = { marginBottom: 2 }
+
+export const LimitPageContent: React.FC = () => {
+  return (
+    <PageContainer topGutters>
+      <AmountInputCardPair sx={marginSx} />
+      <LimitOrderSettings sx={marginSx} />
+      <LimitOrderRoutes sx={marginSx} />
+      <MainPageActions />
+    </PageContainer>
+  )
+}

package/src/pages/MainPage/MainPage.tsx

@@ -1,26 +1,38 @@
-import { Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AmountInput } from '../../components/AmountInput/AmountInput.js'
+import { AmountInputCardPair } from '../../components/AmountInputCard/AmountInputCardPair.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { GasRefuelMessage } from '../../components/Messages/GasRefuelMessage.js'
 import { PageContainer } from '../../components/PageContainer.js'
-import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'
 import { Routes } from '../../components/Routes/Routes.js'
 import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'
 import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'
-import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'
+import { SettingsPanel } from '../../components/SettingsPanel/SettingsPanel.js'
+import { advancedNavigationTabKeys } from '../../components/SettingsPanel/utils.js'
 import { useHeader } from '../../hooks/useHeader.js'
 import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { MainWarningMessages } from './MainWarningMessages.js'
-import { ReviewButton } from './ReviewButton.js'
+import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
+import { LimitPageContent } from './LimitPageContent.js'
+import { MainPageActions } from './MainPageActions.js'
+
+const marginSx = { marginBottom: 2 }
 
 export const MainPage: React.FC = () => {
   const { t } = useTranslation()
   const wideVariant = useWideVariant()
-  const { mode, modeOptions, contractComponent, hiddenUI } = useWidgetConfig()
+  const { mode, modeOptions, contractComponent, hiddenUI, defaultUI } =
+    useWidgetConfig()
+  const activeTab = useNavigationTabsStore((state) => state.activeTab)
+
   const custom = mode === 'custom'
-  const showPoweredBy = !hiddenUI?.poweredBy
+  // Surface the settings panel on the main page for advanced navigation tabs.
+  const advancedMode =
+    !!activeTab && advancedNavigationTabKeys.includes(activeTab)
+  const showSendReceiveCards = defaultUI?.layout === 'cards'
+  // Custom non-deposit contract flows have no amount entry — they keep the
+  // chain/token selectors only, in both layouts.
+  const showAmountEntry = !custom || modeOptions?.custom?.type === 'deposit'
   const showGasRefuelMessage = !hiddenUI?.gasRefuelMessage
 
   const splitTitle =
@@ -30,41 +42,42 @@ export const MainPage: React.FC = () => {
         ? t('header.swap')
         : undefined
   const title =
-    mode === 'custom'
-      ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
-      : mode === 'refuel'
-        ? t('header.gas')
-        : mode === 'split' && splitTitle
-          ? splitTitle
-          : t('header.exchange')
+    mode === 'limit'
+      ? t('header.limit')
+      : mode === 'custom'
+        ? t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
+        : mode === 'refuel'
+          ? t('header.gas')
+          : mode === 'split' && splitTitle
+            ? splitTitle
+            : t('header.exchange')
 
   useHeader(title)
 
-  const marginSx = { marginBottom: 2 }
+  if (mode === 'limit') {
+    return <LimitPageContent />
+  }
 
   return (
     <PageContainer topGutters>
       {custom ? (
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
-      <SelectChainAndToken sx={marginSx} />
-      {!custom || modeOptions?.custom?.type === 'deposit' ? (
-        <AmountInput formType="from" sx={marginSx} />
-      ) : null}
+      {showSendReceiveCards && showAmountEntry ? (
+        <AmountInputCardPair sx={marginSx} />
+      ) : (
+        <>
+          <SelectChainAndToken sx={marginSx} />
+          {!showSendReceiveCards && showAmountEntry ? (
+            <AmountInput formType="from" sx={marginSx} />
+          ) : null}
+        </>
+      )}
+      {advancedMode ? <SettingsPanel sx={marginSx} /> : null}
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
       {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}
-      <MainWarningMessages sx={marginSx} />
-      <Box
-        sx={{
-          display: 'flex',
-          mb: showPoweredBy ? 1 : 3,
-        }}
-      >
-        <ReviewButton />
-        <SendToWalletExpandButton />
-      </Box>
-      {showPoweredBy ? <PoweredBy /> : null}
+      <MainPageActions showSendToWalletExpand />
     </PageContainer>
   )
 }

package/src/pages/MainPage/MainPageActions.tsx

@@ -0,0 +1,35 @@
+import { Box } from '@mui/material'
+import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js'
+import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { MainWarningMessages } from './MainWarningMessages.js'
+import { ReviewButton } from './ReviewButton.js'
+
+interface MainPageActionsProps {
+  showSendToWalletExpand?: boolean
+}
+
+const marginSx = { marginBottom: 2 }
+
+export const MainPageActions: React.FC<MainPageActionsProps> = ({
+  showSendToWalletExpand,
+}) => {
+  const { hiddenUI } = useWidgetConfig()
+  const showPoweredBy = !hiddenUI?.poweredBy
+
+  return (
+    <>
+      <MainWarningMessages sx={marginSx} />
+      <Box
+        sx={{
+          display: 'flex',
+          mb: showPoweredBy ? 1 : 3,
+        }}
+      >
+        <ReviewButton />
+        {showSendToWalletExpand ? <SendToWalletExpandButton /> : null}
+      </Box>
+      {showPoweredBy ? <PoweredBy /> : null}
+    </>
+  )
+}

package/src/pages/MainPage/ReviewButton.tsx

@@ -5,6 +5,7 @@ import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -17,8 +18,15 @@ export const ReviewButton: React.FC = () => {
   const splitState = useSplitMode()
   const { toAddress, requiredToAddress } = useToAddressRequirements()
   const { routes, setReviewableRoute } = useRoutes()
+  const [selectedRouteId] = useFieldValues('selectedRouteId')
 
-  const currentRoute = routes?.[0]
+  // The provider pick only applies in limit mode (it's the only flow that sets
+  // it). Honoring it in other modes would be wrong, since provider/tool keys
+  // can collide across modes. Everywhere else, fall back to the best route.
+  const currentRoute =
+    (mode === 'limit'
+      ? routes?.find((route) => route.id === selectedRouteId)
+      : undefined) ?? routes?.[0]
 
   const handleClick = async () => {
     if (!currentRoute) {
@@ -43,6 +51,8 @@ export const ReviewButton: React.FC = () => {
           return t(`button.${modeOptions?.custom?.type ?? 'checkout'}Review`)
         case 'refuel':
           return t('button.getGas')
+        case 'limit':
+          return t('button.review')
         default: {
           const transactionType =
             currentRoute.fromChainId === currentRoute.toChainId
@@ -59,6 +69,8 @@ export const ReviewButton: React.FC = () => {
           : t('button.buy')
       case 'refuel':
         return t('button.getGas')
+      case 'limit':
+        return t('button.review')
       case 'split':
         if (splitState) {
           return t(`button.${splitState}`)

package/src/pages/RoutePriorityPage.tsx

@@ -0,0 +1,55 @@
+import type { Order } from '@lifi/sdk'
+import Check from '@mui/icons-material/Check'
+import { List } from '@mui/material'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ListItemText } from '../components/ListItemText.js'
+import { PageContainer } from '../components/PageContainer.js'
+import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
+import { useHeader } from '../hooks/useHeader.js'
+import { useListHeight } from '../hooks/useListHeight.js'
+import { useSettings } from '../stores/settings/useSettings.js'
+import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+
+const routePriorities: Order[] = ['CHEAPEST', 'FASTEST']
+
+export const RoutePriorityPage: React.FC = () => {
+  const { t } = useTranslation()
+  const { setValue } = useSettingsActions()
+  const { routePriority } = useSettings(['routePriority'])
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight } = useListHeight({ listParentRef })
+
+  useHeader(t('settings.routePriority'))
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        sx={{
+          padding: 1.5,
+        }}
+      >
+        {routePriorities.map((priority) => {
+          const key = priority.toLowerCase()
+          return (
+            <SettingsListItemButton
+              key={priority}
+              onClick={() => setValue('routePriority', priority)}
+            >
+              <ListItemText
+                primary={t(`settings.routePriorityOptions.${key}.title` as any)}
+                secondary={t(
+                  `settings.routePriorityOptions.${key}.description` as any
+                )}
+              />
+              {routePriority === priority && <Check color="primary" />}
+            </SettingsListItemButton>
+          )
+        })}
+      </List>
+    </PageContainer>
+  )
+}

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,57 +1,33 @@
-import type { Order } from '@lifi/sdk'
 import Route from '@mui/icons-material/Route'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { BadgedValue } from './SettingsCard/BadgedValue.js'
-import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
-
-const Priorities: Order[] = ['CHEAPEST', 'FASTEST']
 
 export const RoutePrioritySettings: React.FC = () => {
   const { t } = useTranslation()
-  const { setValue } = useSettingsActions()
+  const navigate = useNavigate()
   const { isRoutePriorityChanged } = useSettingMonitor()
   const { routePriority } = useSettings(['routePriority'])
-  const currentRoutePriority = routePriority ?? ''
 
-  const handleRoutePriorityChange = (
-    _: React.SyntheticEvent,
-    routePriority: Order
-  ) => {
-    setValue('routePriority', routePriority)
+  const handleClick = () => {
+    navigate({ to: navigationRoutes.routePriority })
   }
 
   return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
-          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
-        </BadgedValue>
-      }
+    <CardButton
+      onClick={handleClick}
       icon={<Route />}
       title={t('settings.routePriority')}
     >
-      <CardTabs
-        value={currentRoutePriority}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleRoutePriorityChange}
-        sx={{ mt: 1.5 }}
-      >
-        {Priorities.map((priority) => {
-          return (
-            <Tab
-              key={priority}
-              label={t(`main.tags.${priority.toLowerCase()}` as any)}
-              value={priority}
-              disableRipple
-            />
-          )
-        })}
-      </CardTabs>
-    </SettingCardExpandable>
+      <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+        {routePriority === 'FASTEST'
+          ? t('settings.routePriorityOptions.fastest.title')
+          : t('settings.routePriorityOptions.cheapest.title')}
+      </BadgedValue>
+    </CardButton>
   )
 }