@lifi/widget 4.1.0 → 4.2.0

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

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