@lifi/widget 4.1.0 → 4.3.0

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

@@ -0,0 +1,176 @@
+import Check from '@mui/icons-material/Check'
+import CloseRounded from '@mui/icons-material/CloseRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Box, Collapse, List, Typography } from '@mui/material'
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
+import { useRef, useState } 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 { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
+import { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'
+import { useSettings } from '../../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
+import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
+import {
+  SlippageClearButton,
+  SlippageInput,
+  SlippageLimitsWarningContainer,
+} from './SlippageSettings.style.js'
+
+const slippagePresets = ['0.5', '1']
+const maxFractionDigits = 5
+
+export const SlippagePage: React.FC = () => {
+  const { t } = useTranslation()
+  const {
+    isSlippageNotRecommended,
+    isSlippageUnderRecommendedLimits,
+    isSlippageOutsideRecommendedLimits,
+  } = useSettingMonitor()
+  const { slippage } = useSettings(['slippage'])
+  const { setValue } = useSettingsActions()
+  const defaultValue = useRef(slippage)
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight } = useListHeight({ listParentRef })
+
+  useHeader(t('settings.slippage'))
+
+  const isAuto = !slippage || slippage === defaultSlippage
+  const isPreset = !!slippage && slippagePresets.includes(slippage)
+  const isCustom = !isAuto && !isPreset
+
+  const [customMode, setCustomMode] = useState(isCustom)
+  const [inputValue, setInputValue] = useState(isCustom ? (slippage ?? '') : '')
+
+  const handleAuto = () => {
+    setCustomMode(false)
+    setInputValue('')
+    setValue('slippage', defaultSlippage)
+  }
+
+  const handlePreset = (preset: string) => {
+    setCustomMode(false)
+    setValue('slippage', preset)
+  }
+
+  const handleCustom = () => {
+    setCustomMode(true)
+    const initialValue = slippage || ''
+    if (initialValue) {
+      setInputValue(initialValue)
+      setValue('slippage', initialValue)
+    }
+  }
+
+  const formatAndSetSlippage = (value: string, returnInitial = false) => {
+    const formattedSlippage = formatSlippage(
+      value,
+      defaultValue.current,
+      returnInitial
+    )
+    const formattedValue =
+      Number(formattedSlippage) === 0 && !returnInitial
+        ? '0'
+        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)
+    const maxLength =
+      Number(formattedValue) < 10
+        ? maxFractionDigits + 2
+        : maxFractionDigits + 3
+    const slicedValue = formattedValue.slice(0, maxLength)
+    setInputValue(slicedValue)
+    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)
+  }
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetSlippage(event.target.value, true)
+  }
+
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetSlippage(event.target.value)
+  }
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetSlippage(event.target.value)
+  }
+
+  const slippageWarningText = isSlippageOutsideRecommendedLimits
+    ? t('warning.message.slippageOutsideRecommendedLimits')
+    : isSlippageUnderRecommendedLimits
+      ? t('warning.message.slippageUnderRecommendedLimits')
+      : ''
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        sx={{
+          padding: 1.5,
+        }}
+      >
+        <SettingsListItemButton onClick={handleAuto}>
+          <ListItemText
+            primary={t('button.auto')}
+            secondary={t('settings.slippageAutoDescription')}
+          />
+          {!customMode && isAuto && <Check color="primary" />}
+        </SettingsListItemButton>
+        {slippagePresets.map((preset) => (
+          <SettingsListItemButton
+            key={preset}
+            onClick={() => handlePreset(preset)}
+          >
+            <ListItemText primary={`${preset}%`} />
+            {!customMode && slippage === preset && <Check color="primary" />}
+          </SettingsListItemButton>
+        ))}
+        <SettingsListItemButton onClick={handleCustom}>
+          <ListItemText primary={t('settings.custom')} />
+          {customMode && <Check color="primary" />}
+        </SettingsListItemButton>
+        <Collapse in={customMode}>
+          <Box sx={{ px: 1.5, pt: 1 }}>
+            <SlippageInput
+              placeholder="0.5"
+              inputProps={{ inputMode: 'decimal' }}
+              value={inputValue}
+              onChange={handleInputUpdate}
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
+              autoComplete="off"
+              endAdornment={
+                !isAuto && (
+                  <SlippageClearButton
+                    size="small"
+                    onClick={handleAuto}
+                    aria-label="Clear"
+                  >
+                    <CloseRounded fontSize="small" />
+                  </SlippageClearButton>
+                )
+              }
+            />
+            {isSlippageNotRecommended && (
+              <SlippageLimitsWarningContainer>
+                <WarningRounded color="warning" />
+                <Typography
+                  sx={{
+                    fontSize: 13,
+                    fontWeight: 400,
+                  }}
+                >
+                  {slippageWarningText}
+                </Typography>
+              </SlippageLimitsWarningContainer>
+            )}
+          </Box>
+        </Collapse>
+      </List>
+    </PageContainer>
+  )
+}

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

@@ -1,7 +1,7 @@
 import type { Theme } from '@mui/material'
 import {
   Box,
-  ButtonBase,
+  IconButton,
   InputBase,
   inputBaseClasses,
   styled,
@@ -36,30 +36,6 @@ interface SettingsControlProps {
   selected?: boolean
 }
 
-export const SettingsDefaultButton: React.FC<
-  React.ComponentProps<typeof ButtonBase> & SettingsControlProps
-> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {
-  const settingsControlSelectedStyles = settingsControlSelected(theme)
-  const selectedStyle = selected
-    ? {
-        '&:not(:focus)': {
-          ...settingsControlSelectedStyles,
-        },
-      }
-    : {}
-
-  return {
-    height: '100%',
-    width: '100%',
-    fontSize: '1rem',
-    fontWeight: 700,
-    '&:focus': {
-      ...settingsControlSelectedStyles,
-    },
-    ...selectedStyle,
-  }
-})
-
 export const SettingsCustomInput: React.FC<
   React.ComponentProps<typeof InputBase> & SettingsControlProps
 > = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {
@@ -100,3 +76,34 @@ export const SlippageLimitsWarningContainer: React.FC<
   gap: theme.spacing(1.25),
   marginTop: theme.spacing(1.5),
 }))
+
+export const SlippageInput: React.FC<React.ComponentProps<typeof InputBase>> =
+  styled(InputBase)(({ theme }) => ({
+    minHeight: 44,
+    width: '100%',
+    backgroundColor: theme.vars.palette.background.default,
+    border: '1px solid',
+    borderColor: theme.vars.palette.divider,
+    borderRadius: theme.vars.shape.borderRadius,
+    paddingRight: theme.spacing(1),
+    [`.${inputBaseClasses.input}`]: {
+      padding: theme.spacing(1.5),
+      fontSize: 16,
+      fontWeight: 500,
+      lineHeight: '20px',
+      '&::placeholder': {
+        opacity: 1,
+        color: theme.vars.palette.text.secondary,
+      },
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+        display: 'none',
+      },
+    },
+  }))
+
+export const SlippageClearButton: React.FC<
+  React.ComponentProps<typeof IconButton>
+> = styled(IconButton)(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  flexShrink: 0,
+}))

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

@@ -1,82 +1,17 @@
 import Percent from '@mui/icons-material/Percent'
-import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Typography } from '@mui/material'
-import type { ChangeEventHandler, FocusEventHandler } from 'react'
-import { useRef, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
+import { CardButton } from '../../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
-import { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'
 import { useSettings } from '../../../stores/settings/useSettings.js'
-import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
-import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
+import { navigationRoutes } from '../../../utils/navigationRoutes.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
-import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
-import {
-  SettingsCustomInput,
-  SettingsDefaultButton,
-  SettingsFieldSet,
-  SlippageLimitsWarningContainer,
-} from './SlippageSettings.style.js'
-
-const defaultSlippageInputValue = '0.5'
-const maxFractionDigits = 5
 
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation()
-  const {
-    isSlippageNotRecommended,
-    isSlippageUnderRecommendedLimits,
-    isSlippageOutsideRecommendedLimits,
-    isSlippageChanged,
-  } = useSettingMonitor()
+  const navigate = useNavigate()
+  const { isSlippageNotRecommended, isSlippageChanged } = useSettingMonitor()
   const { slippage } = useSettings(['slippage'])
-  const { setValue } = useSettingsActions()
-  const defaultValue = useRef(slippage)
-  const [focused, setFocused] = useState<'input' | 'button'>()
-
-  const customInputValue =
-    !slippage || slippage === defaultSlippage
-      ? defaultSlippageInputValue
-      : slippage
-
-  const [inputValue, setInputValue] = useState(customInputValue)
-
-  const handleDefaultClick = () => {
-    setValue('slippage', defaultSlippage)
-  }
-
-  const formatAndSetSlippage = (value: string, returnInitial = false) => {
-    const formattedSlippage = formatSlippage(
-      value,
-      defaultValue.current,
-      returnInitial
-    )
-    const formattedValue =
-      Number(formattedSlippage) === 0 && !returnInitial
-        ? '0'
-        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)
-    const maxLength =
-      Number(formattedValue) < 10
-        ? maxFractionDigits + 2
-        : maxFractionDigits + 3
-    const slicedValue = formattedValue.slice(0, maxLength)
-    setInputValue(slicedValue)
-    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)
-  }
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
-    formatAndSetSlippage(event.target.value, true)
-  }
-
-  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused('input')
-    formatAndSetSlippage(event.target.value)
-  }
-
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused(undefined)
-    formatAndSetSlippage(event.target.value)
-  }
 
   const badgeColor = isSlippageNotRecommended
     ? 'warning'
@@ -84,68 +19,19 @@ export const SlippageSettings: React.FC = () => {
       ? 'info'
       : undefined
 
-  const slippageWarningText = isSlippageOutsideRecommendedLimits
-    ? t('warning.message.slippageOutsideRecommendedLimits')
-    : isSlippageUnderRecommendedLimits
-      ? t('warning.message.slippageUnderRecommendedLimits')
-      : ''
+  const handleClick = () => {
+    navigate({ to: navigationRoutes.slippage })
+  }
 
   return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>
-          {slippage ? `${slippage}%` : t('button.auto')}
-        </BadgedValue>
-      }
+    <CardButton
+      onClick={handleClick}
       icon={<Percent />}
       title={t('settings.slippage')}
     >
-      <Box
-        sx={{
-          mt: 1.5,
-        }}
-      >
-        <SettingsFieldSet>
-          <SettingsDefaultButton
-            selected={defaultSlippage === slippage && focused !== 'input'}
-            onFocus={() => {
-              setFocused('button')
-            }}
-            onBlur={() => {
-              setFocused(undefined)
-            }}
-            onClick={handleDefaultClick}
-            disableRipple
-          >
-            {t('button.auto')}
-          </SettingsDefaultButton>
-          <SettingsCustomInput
-            selected={defaultSlippage !== slippage && focused !== 'button'}
-            placeholder={focused === 'input' ? '' : t('settings.custom')}
-            inputProps={{
-              inputMode: 'decimal',
-            }}
-            onChange={handleInputUpdate}
-            onFocus={handleInputFocus}
-            value={inputValue}
-            autoComplete="off"
-            onBlur={handleInputBlur}
-          />
-        </SettingsFieldSet>
-        {isSlippageNotRecommended && (
-          <SlippageLimitsWarningContainer>
-            <WarningRounded color="warning" />
-            <Typography
-              sx={{
-                fontSize: 13,
-                fontWeight: 400,
-              }}
-            >
-              {slippageWarningText}
-            </Typography>
-          </SlippageLimitsWarningContainer>
-        )}
-      </Box>
-    </SettingCardExpandable>
+      <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>
+        {slippage ? `${slippage}%` : t('button.auto')}
+      </BadgedValue>
+    </CardButton>
   )
 }

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -5,7 +5,9 @@ import { Tooltip, useColorScheme } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { CardValue } from '../../components/Card/CardButton.style.js'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { WidgetEvent } from '../../types/events.js'
 import type { Appearance } from '../../types/widget.js'
 import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
 
@@ -37,6 +39,7 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
 export const ThemeSettings: React.FC = () => {
   const { t } = useTranslation()
   const { mode, setMode } = useColorScheme()
+  const widgetEvents = useWidgetEvents()
   const { hiddenUI } = useWidgetConfig()
 
   if (hiddenUI?.appearance) {
@@ -52,6 +55,7 @@ export const ThemeSettings: React.FC = () => {
     appearance: Appearance
   ) => {
     setMode(appearance)
+    widgetEvents.emit(WidgetEvent.AppearanceChanged, appearance)
   }
 
   return (

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -18,13 +18,23 @@ const formValueKeys: FormFieldNames[] = [
   'toToken',
 ]
 
+// Limit-order params are only mirrored to the URL while the limit tab is
+// active, and stripped when the user leaves it. Unlike the base keys these are
+// presence-gated (not touched-gated) so the URL fully reproduces the limit
+// order — including the boolean/number fields, which are never "falsy-empty".
+const limitFormValueKeys: FormFieldNames[] = [
+  'toAmount',
+  'validUntil',
+  'partiallyFillable',
+]
+
 export const URLSearchParamsBuilder = () => {
   const { pathname } = useLocation()
   const touchedFields = useTouchedFields()
-  const values = useFieldValues(...formValueKeys)
+  const values = useFieldValues(...formValueKeys, ...limitFormValueKeys)
   const { setSelectedBookmark, addRecentWallet } = useBookmarkActions()
   const { validateAddress } = useAddressValidation()
-  const { buildUrl } = useWidgetConfig()
+  const { buildUrl, mode } = useWidgetConfig()
   // Using these methods as trying to use the touchedFields and values above
   // often has a lag that can effect the widgets initialisation sequence
   // and accidentally cause values to be wiped from the query string
@@ -85,9 +95,21 @@ export const URLSearchParamsBuilder = () => {
         url.searchParams.delete(key)
       }
     })
+    // Limit params live in the URL only while the limit tab is active.
+    limitFormValueKeys.forEach((key) => {
+      const value = getFieldValues(key)[0]
+      // Booleans are always "set" (false is meaningful); strings/numbers use
+      // truthiness so an empty toAmount is treated as absent.
+      const hasValue = typeof value === 'boolean' ? true : Boolean(value)
+      if (mode === 'limit' && hasValue) {
+        url.searchParams.set(key, String(value))
+      } else {
+        url.searchParams.delete(key)
+      }
+    })
     url.searchParams.sort()
     window.history.replaceState(window.history.state, '', url)
-  }, [pathname, touchedFields, values, isTouched, getFieldValues])
+  }, [pathname, touchedFields, values, isTouched, getFieldValues, mode])
 
   return null
 }

package/src/stores/form/createFormStore.ts

@@ -1,6 +1,6 @@
 import type { StoreApi, UseBoundStore } from 'zustand'
 import { create } from 'zustand'
-
+import { DEFAULT_VALID_UNTIL_SECONDS } from '../../utils/limitOrder.js'
 import type {
   DefaultValues,
   FormFieldArray,
@@ -14,6 +14,9 @@ export const formDefaultValues: DefaultValues = {
   fromAmount: '',
   toAmount: '',
   tokenSearchFilter: '',
+  priceInverted: false,
+  validUntil: DEFAULT_VALID_UNTIL_SECONDS,
+  partiallyFillable: true,
 }
 
 const defaultValueToFormValue = <T>(value: T): FormValueControl<T> => ({
@@ -32,7 +35,8 @@ const valuesToFormValues = (defaultValues: DefaultValues): FormValues => {
   )
 }
 
-const isString = (str: any) => typeof str === 'string' || str instanceof String
+const isString = (str: unknown): str is string =>
+  typeof str === 'string' || str instanceof String
 
 const getUpdatedTouchedFields = (userValues: FormValues) => {
   return (Object.keys(userValues) as FormFieldNames[]).reduce(
@@ -58,7 +62,7 @@ const mergeDefaultFormValues = (
         ),
         isDirty: !!(userValues[key]?.isDirty || defaultValues[key]?.isTouched),
         value:
-          userValues[key]?.value || Number.isFinite(userValues[key]?.value)
+          userValues[key]?.value !== undefined && userValues[key]?.value !== ''
             ? userValues[key]?.value
             : defaultValues[key]?.value,
       }

package/src/stores/form/getDefaultValuesFromQueryString.ts

@@ -41,6 +41,17 @@ export const getDefaultValuesFromQueryString = ({
     ...(Number.isFinite(Number.parseFloat(searchParams.fromAmount))
       ? { fromAmount: formatInputAmount(searchParams.fromAmount) }
       : {}),
+    ...(Number.isFinite(Number.parseFloat(searchParams.toAmount))
+      ? { toAmount: formatInputAmount(searchParams.toAmount) }
+      : {}),
+    // Limit-order params (written only while on the limit tab).
+    ...(Number.isFinite(Number.parseInt(searchParams.validUntil, 10))
+      ? { validUntil: Number.parseInt(searchParams.validUntil, 10) }
+      : {}),
+    ...(searchParams.partiallyFillable === 'true' ||
+    searchParams.partiallyFillable === 'false'
+      ? { partiallyFillable: searchParams.partiallyFillable === 'true' }
+      : {}),
     ...(includeToAddress && searchParams.toAddress
       ? { toAddress: searchParams.toAddress }
       : {}),

package/src/stores/form/types.ts

@@ -14,9 +14,22 @@ export interface DefaultFieldValues {
 export interface DefaultValues extends DefaultFieldValues {
   contractCalls?: ContractCall[]
   tokenSearchFilter: string
+  /** Limit-order: when true, the price is displayed/entered inverted. */
+  priceInverted: boolean
+  /** Limit-order: order validity as a duration in seconds. */
+  validUntil: number
+  /** Limit-order: whether the order may be partially filled. */
+  partiallyFillable: boolean
+  /** Limit-order: id of the route the user picked. */
+  selectedRouteId?: string
 }
 
-export type GenericFormValue = string | number | ContractCall[] | undefined
+export type GenericFormValue =
+  | string
+  | number
+  | boolean
+  | ContractCall[]
+  | undefined
 export interface FormValueControl<T> {
   isTouched: boolean
   isDirty: boolean

package/src/stores/form/useClearAmountFields.ts

@@ -6,5 +6,6 @@ export const useClearAmountFields = (): (() => void) => {
   return useCallback(() => {
     setFieldValue('fromAmount', '')
     setFieldValue('toAmount', '')
+    setFieldValue('selectedRouteId', undefined)
   }, [setFieldValue])
 }

package/src/stores/navigationTabs/types.ts

@@ -1,7 +1,9 @@
 import type { StoreApi, UseBoundStore } from 'zustand'
 import type {
+  DefaultUI,
   ModeOptions,
   NavigationTabKey,
+  RequiredUIConfig,
   WidgetMode,
   WidgetVariant,
 } from '../../types/widget.js'
@@ -14,6 +16,10 @@ export interface NavigationTab {
   /** When omitted, the tab inherits `config.mode`. */
   mode?: WidgetMode
   modeOptions?: ModeOptions
+  /** Layered over `config.defaultUI` while the tab is active. */
+  defaultUI?: DefaultUI
+  /** Layered over `config.requiredUI` while the tab is active. */
+  requiredUI?: RequiredUIConfig
 }
 
 export interface NavigationTabsState {

package/src/stores/navigationTabs/useNavigationTabsStore.tsx

@@ -21,8 +21,10 @@ import type { NavigationTabsState, NavigationTabsStore } from './types.js'
 import {
   getInitialActiveTab,
   getNavigationTabKeys,
+  getTabDefaultUI,
   getTabMode,
   getTabModeOptions,
+  getTabRequiredUI,
   getTabSplitMode,
   getTabVariant,
 } from './utils.js'
@@ -49,9 +51,10 @@ export function NavigationTabsStoreProvider({
     signatureRef.current = signature
   }
 
-  // Override the widget config with the active tab's mode, variant and
-  // modeOptions (each falling back to the config), so the rest of the widget
-  // reads tab-driven config transparently. No-op when there is no active tab.
+  // Override the widget config with the active tab's mode, variant,
+  // modeOptions, defaultUI and requiredUI (each falling back to the config), so
+  // the rest of the widget reads tab-driven config transparently. No-op when
+  // there is no active tab.
   const widgetConfig = useWidgetConfig()
   const activeTab = store((state) => state.activeTab)
   const tabConfig = useMemo(() => {
@@ -63,6 +66,8 @@ export function NavigationTabsStoreProvider({
       mode: getTabMode(widgetConfig, activeTab),
       variant: getTabVariant(widgetConfig, activeTab),
       modeOptions: getTabModeOptions(widgetConfig, activeTab),
+      defaultUI: getTabDefaultUI(widgetConfig, activeTab),
+      requiredUI: getTabRequiredUI(widgetConfig, activeTab),
     }
   }, [widgetConfig, activeTab])