@lifi/widget 4.1.0 → 4.2.0

package/src/components/SettingsPanel/SettingsPanel.tsx

@@ -0,0 +1,73 @@
+import type { BoxProps } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { Card } from '../Card/Card.js'
+import {
+  SettingsPanelButton,
+  SettingsPanelContainer,
+  SettingsPanelTitle,
+  SettingsPanelValue,
+} from './SettingsPanel.style.js'
+import {
+  bridgeSettingsPanelKeys,
+  type SettingsPanelKey,
+  swapSettingsPanelKeys,
+} from './utils.js'
+
+export const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const splitMode = useSplitMode()
+  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])
+  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =
+    useSettingsStore((state) => [
+      Object.values(state._enabledBridges).filter(Boolean).length,
+      Object.values(state._enabledBridges).length,
+      Object.values(state._enabledExchanges).filter(Boolean).length,
+      Object.values(state._enabledExchanges).length,
+    ])
+
+  const rows =
+    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys
+
+  const labelByKey: Record<SettingsPanelKey, string> = {
+    routePriority: t('settings.routePriority'),
+    exchanges: t('settings.enabledExchanges'),
+    bridges: t('settings.enabledBridges'),
+    slippage: t('settings.slippage'),
+  }
+
+  const valueByKey: Record<SettingsPanelKey, string> = {
+    routePriority:
+      routePriority === 'FASTEST'
+        ? t('settings.routePriorityOptions.fastest.title')
+        : t('settings.routePriorityOptions.cheapest.title'),
+    exchanges: `${enabledExchanges}/${totalExchanges}`,
+    bridges: `${enabledBridges}/${totalBridges}`,
+    slippage: slippage ? `${slippage}%` : t('button.auto'),
+  }
+
+  const handleClick = (key: SettingsPanelKey) => {
+    navigate({
+      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,
+    })
+  }
+
+  return (
+    <SettingsPanelContainer {...props}>
+      {rows.map((key) => (
+        <Card key={key}>
+          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>
+            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>
+            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>
+          </SettingsPanelButton>
+        </Card>
+      ))}
+    </SettingsPanelContainer>
+  )
+}

package/src/components/SettingsPanel/utils.ts

@@ -0,0 +1,27 @@
+import type { NavigationTabKey } from '../../types/widget.js'
+
+export type SettingsPanelKey =
+  | 'routePriority'
+  | 'exchanges'
+  | 'bridges'
+  | 'slippage'
+
+/** Navigation tabs that surface the settings panel on the main page. */
+export const advancedNavigationTabKeys: NavigationTabKey[] = [
+  'swap-advanced',
+  'bridge-advanced',
+]
+
+// Keys are ordered to match the settings page layout.
+// Swap is same-chain, so route priority and bridges are not relevant.
+export const swapSettingsPanelKeys: SettingsPanelKey[] = [
+  'slippage',
+  'exchanges',
+]
+
+export const bridgeSettingsPanelKeys: SettingsPanelKey[] = [
+  'routePriority',
+  'slippage',
+  'bridges',
+  'exchanges',
+]

package/src/components/SwapButton/SwapButton.style.tsx

@@ -0,0 +1,28 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import { Card } from '../Card/Card.js'
+
+// Sits just above MUI's appBar layer (1100) so the swap icon stays on top of the
+// two overlapping amount cards it bridges.
+const swapButtonZIndex = 1110
+
+export const SwapIconCard: React.FC<React.ComponentProps<typeof Card>> = styled(
+  Card
+)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  zIndex: swapButtonZIndex,
+}))
+
+export const SwapButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(-1.5),
+  }))

package/src/components/SwapButton/SwapButton.tsx

@@ -0,0 +1,71 @@
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import type { BoxProps } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'
+
+export const SwapButton: React.FC<BoxProps> = ({
+  sx,
+  ...props
+}): JSX.Element => {
+  const { t } = useTranslation()
+  const { mode } = useWidgetConfig()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { getChainById } = useAvailableChains()
+  const { tryResetToAddress } = useToAddressReset()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+
+  const handleClick = (): void => {
+    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =
+      getFieldValues(
+        'fromChain',
+        'fromToken',
+        'toChain',
+        'toToken',
+        'toAddress',
+        'toAmount'
+      )
+    const newFromAmount =
+      mode === 'limit' && toAmount ? (toAmount as string) : ''
+    setFieldValue('fromAmount', newFromAmount, { isTouched: true })
+    setFieldValue('fromChain', toChainId, { isTouched: true })
+    setFieldValue('fromToken', toToken, { isTouched: true })
+    setFieldValue('toChain', fromChainId, { isTouched: true })
+    setFieldValue('toToken', fromToken, { isTouched: true })
+
+    const autoPopulatedToAddress = autoPopulateToAddress({
+      formType: 'from',
+      selectedToAddress: toAddress,
+      selectedChainId: toChainId,
+      selectedOppositeChainId: fromChainId,
+      selectedOppositeTokenAddress: fromToken,
+    })
+
+    if (autoPopulatedToAddress) {
+      return
+    }
+
+    const toChain = getChainById(fromChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+  }
+
+  return (
+    <SwapButtonContainer sx={sx} {...props}>
+      <SwapIconCard
+        component="button"
+        onClick={handleClick}
+        aria-label={t('button.swap')}
+        data-testid="widget-swap-tokens-button"
+      >
+        <ArrowDownward fontSize="inherit" />
+      </SwapIconCard>
+    </SwapButtonContainer>
+  )
+}

package/src/components/TokenPillButton/TokenPillButton.style.tsx

@@ -0,0 +1,50 @@
+import { Button, styled, type Theme, Typography } from '@mui/material'
+import type React from 'react'
+
+const pillLayout = (theme: Theme) => ({
+  height: 36,
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  padding: theme.spacing(0.5, 1),
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+})
+
+export const TokenPill: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  ...pillLayout(theme),
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  border: '1px solid transparent',
+  transition: theme.transitions.create(['background-color'], {
+    duration: theme.transitions.duration.short,
+  }),
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+}))
+
+export const TokenSelectPill: React.FC<React.ComponentProps<typeof Button>> =
+  styled(TokenPill)({ minWidth: 0 })
+
+export const TokenPillSymbol: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  lineHeight: '18px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: theme.vars.palette.text.primary,
+}))
+
+export const TokenPillLabel: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: 16,
+    fontWeight: 700,
+    lineHeight: '20px',
+    color: theme.vars.palette.text.secondary,
+  }))

package/src/components/TokenPillButton/TokenPillButton.tsx

@@ -0,0 +1,81 @@
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import {
+  TokenPill,
+  TokenPillLabel,
+  TokenPillSymbol,
+  TokenSelectPill,
+} from './TokenPillButton.style.js'
+
+export const TokenPillButton: React.FC<FormTypeProps> = ({
+  formType,
+}): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { disabledUI, mode } = useWidgetConfig()
+
+  const tokenKey = FormKeyHelper.getTokenKey(formType)
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    tokenKey
+  )
+
+  const { chain } = useChain(chainId)
+  const { token } = useToken(chainId, tokenAddress)
+
+  const isSelected = !!(chain && token)
+
+  const handleClick = (): void => {
+    navigate({
+      to:
+        formType === 'from'
+          ? navigationRoutes.fromToken
+          : mode === 'refuel'
+            ? navigationRoutes.toTokenNative
+            : navigationRoutes.toToken,
+    })
+  }
+
+  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]
+
+  const testId = `widget-${formType}-token-button`
+
+  if (isSelected) {
+    return (
+      <TokenPill
+        onClick={isDisabled ? undefined : handleClick}
+        disabled={isDisabled}
+        data-testid={testId}
+      >
+        <TokenAvatar
+          token={token}
+          chain={chain}
+          tokenAvatarSize={24}
+          chainAvatarSize={12}
+        />
+        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>
+      </TokenPill>
+    )
+  }
+
+  return (
+    <TokenSelectPill
+      onClick={isDisabled ? undefined : handleClick}
+      data-testid={testId}
+    >
+      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />
+      <TokenPillLabel>{t('main.select')}</TokenPillLabel>
+    </TokenSelectPill>
+  )
+}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.1.0'
+export const version = '4.2.0'

package/src/hooks/useLimitMarketRate.ts

@@ -0,0 +1,39 @@
+import { FormKeyHelper } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useToken } from './useToken.js'
+
+/**
+ * Canonical limit-order market rate (receive token per send token), derived
+ * from the tokens' USD prices: 1 send token ≈ sendPrice / receivePrice receive
+ * tokens. This is the spot ratio — what the price card's "Market" reference and
+ * proximity indicator compare against. Returns `undefined` until both token
+ * prices are known.
+ */
+export const useLimitMarketRate = (): number | undefined => {
+  const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] =
+    useFieldValues(
+      FormKeyHelper.getChainKey('from'),
+      FormKeyHelper.getTokenKey('from'),
+      FormKeyHelper.getChainKey('to'),
+      FormKeyHelper.getTokenKey('to')
+    )
+  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+
+  const fromPrice = Number(fromToken?.priceUSD)
+  const toPrice = Number(toToken?.priceUSD)
+
+  // A `priceUSD` of `"0"` (or missing) means the price is unknown — there's no
+  // meaningful spot ratio to derive, and dividing by a zero `toPrice` would be
+  // `Infinity`, so the falsy guard intentionally suppresses the rate here.
+  if (
+    !fromPrice ||
+    !toPrice ||
+    Number.isNaN(fromPrice) ||
+    Number.isNaN(toPrice)
+  ) {
+    return undefined
+  }
+
+  return fromPrice / toPrice
+}

package/src/hooks/useLinkedLimitFields.ts

@@ -0,0 +1,74 @@
+import { FormKeyHelper } from '../stores/form/types.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { deriveLimitPrice, deriveReceiveAmount } from '../utils/limitOrder.js'
+import { useToken } from './useToken.js'
+
+export interface LinkedLimitFields {
+  limitPrice: string
+  /** Set the send amount (explicit user edit); derives receiveAmount when a price is set. */
+  setSendAmount: (value: string) => void
+  /** Set the limit price (canonical: receive per send); derives receiveAmount when a send amount is set. */
+  setLimitPrice: (value: string) => void
+}
+
+/**
+ * Implements the linked-field derivation for limit orders:
+ * - `limitPrice = receiveAmount / sendAmount`
+ * - editing sendAmount recomputes receiveAmount, holding the current price
+ * - editing limitPrice (with a send amount set) recomputes receiveAmount
+ * - sendAmount never changes without an explicit user edit
+ *
+ * The receive amount (`toAmount`) is read-only in the UI — it is derived here
+ * from the send amount and limit price, then sent to the routes request; the
+ * receive card only displays the resulting quote.
+ *
+ * The limit price is NOT stored: it is purely a function of the `fromAmount`
+ * and `toAmount` form fields (canonical receive-per-send). The UI layer handles
+ * base/quote display inversion. Because it's derived, editing the send amount
+ * only has to preserve the pre-edit price.
+ */
+export const useLinkedLimitFields = (): LinkedLimitFields => {
+  const { setFieldValue } = useFieldActions()
+  const [toChainId, toTokenAddress, sendAmount, receiveAmount] = useFieldValues(
+    FormKeyHelper.getChainKey('to'),
+    FormKeyHelper.getTokenKey('to'),
+    FormKeyHelper.getAmountKey('from'),
+    FormKeyHelper.getAmountKey('to')
+  )
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+
+  const limitPrice = deriveLimitPrice(sendAmount, receiveAmount)
+
+  const setSendAmount = (value: string): void => {
+    // Hold the pre-edit price (derived from the current fields) so changing the
+    // send amount rescales the receive amount instead of moving the price.
+    setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })
+    const nextReceive = deriveReceiveAmount(
+      value,
+      limitPrice,
+      toToken?.decimals
+    )
+    if (nextReceive) {
+      setFieldValue('toAmount', nextReceive, { isDirty: true })
+    }
+  }
+
+  const setLimitPrice = (value: string): void => {
+    // Write unconditionally (including '') so the receive amount tracks the
+    // price both ways — clearing the price clears the derived receive amount
+    // instead of leaving a stale value that re-derives the old price.
+    const nextReceive = deriveReceiveAmount(
+      sendAmount,
+      value,
+      toToken?.decimals
+    )
+    setFieldValue('toAmount', nextReceive, { isDirty: true })
+  }
+
+  return {
+    limitPrice,
+    setSendAmount,
+    setLimitPrice,
+  }
+}

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>
+  )
+}