@lifi/widget 4.1.0 → 4.2.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])
 

package/src/stores/navigationTabs/utils.ts

@@ -1,7 +1,9 @@
 import type {
+  DefaultUI,
   InternalNavigationTabKey,
   ModeOptions,
   NavigationTabKey,
+  RequiredUIConfig,
   SplitMode,
   SplitNavigationTabKey,
   WidgetConfig,
@@ -13,26 +15,56 @@ import type { NavigationTab } from './types.js'
 
 /** Configured navigation tabs by key. Labels are resolved from the key by a hook. */
 const navigationTabsByKey: Record<InternalNavigationTabKey, NavigationTab> = {
-  default: { key: 'default', variant: 'wide', mode: 'default' },
+  default: {
+    key: 'default',
+    variant: 'wide',
+    mode: 'default',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
   private: {
     key: 'private',
     variant: 'compact',
-    mode: 'split',
-    modeOptions: { split: 'swap' },
+    mode: 'default',
+    defaultUI: {
+      layout: 'cards',
+    },
+    requiredUI: { toAddress: true },
+  },
+  refuel: {
+    key: 'refuel',
+    variant: 'wide',
+    mode: 'refuel',
+    defaultUI: {
+      layout: 'cards',
+    },
+  },
+  limit: {
+    key: 'limit',
+    variant: 'compact',
+    mode: 'limit',
+    defaultUI: {
+      layout: 'cards',
+    },
   },
-  refuel: { key: 'refuel', variant: 'wide', mode: 'refuel' },
-  limit: { key: 'limit', variant: 'compact', mode: 'limit' },
   'swap-advanced': {
     key: 'swap-advanced',
     variant: 'wide',
     mode: 'split',
     modeOptions: { split: 'swap' },
+    defaultUI: {
+      layout: 'cards',
+    },
   },
   'bridge-advanced': {
     key: 'bridge-advanced',
     variant: 'wide',
     mode: 'split',
     modeOptions: { split: 'bridge' },
+    defaultUI: {
+      layout: 'cards',
+    },
   },
 }
 
@@ -132,3 +164,33 @@ export const getTabModeOptions = (
   const tab = key ? tabByKey[key] : undefined
   return tab?.modeOptions ?? config.modeOptions
 }
+
+/**
+ * Default UI for a tab, layered over the widget config's `defaultUI` so the
+ * tab overrides only the fields it sets and inherits the rest.
+ */
+export const getTabDefaultUI = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): DefaultUI | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  if (!tab?.defaultUI) {
+    return config.defaultUI
+  }
+  return { ...config.defaultUI, ...tab.defaultUI }
+}
+
+/**
+ * Required UI for a tab, layered over the widget config's `requiredUI` so the
+ * tab overrides only the fields it sets and inherits the rest.
+ */
+export const getTabRequiredUI = (
+  config: WidgetConfig,
+  key?: NavigationTabKey
+): RequiredUIConfig | undefined => {
+  const tab = key ? tabByKey[key] : undefined
+  if (!tab?.requiredUI) {
+    return config.requiredUI
+  }
+  return { ...config.requiredUI, ...tab.requiredUI }
+}

package/src/types/events.ts

@@ -3,14 +3,17 @@ import type { DefaultValues } from '../stores/form/types.js'
 import type { SettingsProps } from '../stores/settings/types.js'
 import type { NavigationRouteType } from '../utils/navigationRoutes.js'
 import type { TokenAmount } from './token.js'
+import type { Appearance, NavigationTabKey } from './widget.js'
 
 export enum WidgetEvent {
+  AppearanceChanged = 'appearanceChanged',
   AvailableRoutes = 'availableRoutes',
   ChainPinned = 'chainPinned',
   ContactSupport = 'contactSupport',
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   FormFieldChanged = 'formFieldChanged',
   LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
+  NavigationTabChanged = 'navigationTabChanged',
   PageEntered = 'pageEntered',
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
@@ -26,12 +29,14 @@ export enum WidgetEvent {
 }
 
 export type WidgetEvents = {
+  appearanceChanged: (data: Appearance) => void
   availableRoutes: (data: Route[]) => void
   chainPinned: (data: ChainPinned) => void
   contactSupport: (data: ContactSupport) => void
   destinationChainTokenSelected: (data: ChainTokenSelected) => void
   formFieldChanged: (data: FormFieldChanged) => void
   lowAddressActivityConfirmed: (data: LowAddressActivityConfirmed) => void
+  navigationTabChanged: (data: NavigationTabChanged) => void
   pageEntered: (data: NavigationRouteType) => void
   routeExecutionCompleted: (data: Route) => void
   routeExecutionFailed: (data: RouteExecutionUpdate) => void
@@ -112,3 +117,10 @@ export type LowAddressActivityConfirmed = {
   address: string
   chainId: number
 }
+
+export type NavigationTabChanged = {
+  /** Key of the now-active tab. */
+  tab: NavigationTabKey
+  /** Key of the previously active tab, or `undefined` on first render. */
+  previousTab?: NavigationTabKey
+}

package/src/types/widget.ts

@@ -173,6 +173,15 @@ export interface RequiredUIConfig {
 export type DefaultUI = {
   transactionDetailsExpanded?: boolean
   navigationHeaderTitleNoWrap?: boolean
+  /**
+   * Layout for the main form.
+   * - `'default'`: the chain/token selectors plus single amount input.
+   * - `'cards'`: the redesigned card-based layout — stacked Send/Receive amount
+   *   cards (`AmountInputCardPair`) with inline token pill selectors and a swap
+   *   button.
+   * @default 'default'
+   */
+  layout?: 'default' | 'cards'
 }
 
 export interface WidgetWalletConfig {

package/src/utils/format.ts

@@ -175,7 +175,11 @@ const units = [
   ['second', 1],
 ] as const
 
-export function formatDuration(seconds: number, locale: string): string {
+export function formatDuration(
+  seconds: number,
+  locale: string,
+  unitDisplay: Intl.NumberFormatOptions['unitDisplay'] = 'narrow'
+): string {
   const match = units.find(([, v]) => seconds >= v)
   const amount = match ? Math.floor(seconds / match[1]) : 0
   const unit = match?.[0] ?? 'second'
@@ -183,7 +187,7 @@ export function formatDuration(seconds: number, locale: string): string {
   return amount.toLocaleString(locale, {
     style: 'unit',
     unit,
-    unitDisplay: 'narrow',
+    unitDisplay,
   })
 }
 

package/src/utils/limitOrder.ts

@@ -0,0 +1,88 @@
+import { formatInputAmount } from './format.js'
+
+/** Default order validity: 1 day, expressed as a duration in seconds. */
+export const DEFAULT_VALID_UNTIL_SECONDS: number = 24 * 60 * 60
+
+/**
+ * High-precision formatter for derived limit-order values. Mirrors the
+ * approach used by `priceToTokenAmount` — these are display-level derivations;
+ * the route request re-parses amounts via `parseUnits`.
+ */
+const preciseFormatter = new Intl.NumberFormat('en', {
+  notation: 'standard',
+  roundingPriority: 'morePrecision',
+  maximumSignificantDigits: 20,
+  maximumFractionDigits: 20,
+  useGrouping: false,
+})
+
+function parsePositive(value?: string): number | undefined {
+  if (!value) {
+    return undefined
+  }
+  const parsed = Number.parseFloat(value)
+  if (Number.isNaN(parsed) || parsed <= 0) {
+    return undefined
+  }
+  return parsed
+}
+
+/**
+ * Derive the receive amount: `receiveAmount = sendAmount × limitPrice`.
+ * Returns an empty string when either input is missing or invalid.
+ */
+export function deriveReceiveAmount(
+  sendAmount?: string,
+  limitPrice?: string,
+  toDecimals?: number
+): string {
+  const send = parsePositive(sendAmount)
+  const price = parsePositive(limitPrice)
+  if (send === undefined || price === undefined) {
+    return ''
+  }
+  return formatInputAmount(
+    preciseFormatter.format(send * price),
+    toDecimals ?? null
+  )
+}
+
+/**
+ * Derive the limit price: `limitPrice = receiveAmount ÷ sendAmount`.
+ * Returns an empty string when either input is missing or invalid.
+ */
+export function deriveLimitPrice(
+  sendAmount?: string,
+  receiveAmount?: string
+): string {
+  const send = parsePositive(sendAmount)
+  const receive = parsePositive(receiveAmount)
+  if (send === undefined || receive === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(receive / send)
+}
+
+/** Invert a price for display flipping: `1 ÷ price`. */
+export function invertPrice(price?: string): string {
+  const parsed = parsePositive(price)
+  if (parsed === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(1 / parsed)
+}
+
+/**
+ * Apply a percentage offset to a price, e.g. `percent = 2` → `price × 1.02`.
+ * Used by the quick-set buttons (+2%, +5%).
+ */
+export function applyPriceOffset(
+  price: string | undefined,
+  percent: number
+): string {
+  const parsed = parsePositive(price)
+  if (parsed === undefined) {
+    return ''
+  }
+  return preciseFormatter.format(parsed * (1 + percent / 100))
+}