@lifi/widget 4.0.0 → 4.2.0

package/src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import { createContext, useContext, useEffect, useId, useState } from 'react'
+import { createContext, use, useEffect, useId, useState } from 'react'
 
 const SettingsAccordionContext = createContext({
   setOpenCard: (_id: string) => {},
@@ -12,9 +12,9 @@ export const SettingsCardAccordion: React.FC<PropsWithChildren> = ({
   const [openCard, setOpenCard] = useState('')
 
   return (
-    <SettingsAccordionContext.Provider value={{ openCard, setOpenCard }}>
+    <SettingsAccordionContext value={{ openCard, setOpenCard }}>
       {children}
-    </SettingsAccordionContext.Provider>
+    </SettingsAccordionContext>
   )
 }
 
@@ -24,7 +24,7 @@ export const useSettingsCardExpandable = (): {
 } => {
   const settingCardExpandableId = useId()
   const [expanded, setExpanded] = useState(false)
-  const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
+  const { openCard, setOpenCard } = use(SettingsAccordionContext)
 
   const toggleExpanded = (forceExpanded?: boolean) => {
     const newExpanded = forceExpanded ?? !expanded

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/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,8 +1,8 @@
 import Wallet from '@mui/icons-material/Wallet'
 import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import { forwardRef, useRef } from 'react'
+import type { JSX, Ref, RefObject } from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -28,9 +28,12 @@ interface ConfirmToAddressSheetContentProps extends ConfirmToAddressSheetProps {
   onClose: () => void
 }
 
-export const ConfirmToAddressSheet: ForwardRefExoticComponent<
-  ConfirmToAddressSheetProps & RefAttributes<BottomSheetBase>
-> = forwardRef<BottomSheetBase, ConfirmToAddressSheetProps>((props, ref) => {
+export const ConfirmToAddressSheet = ({
+  ref,
+  ...props
+}: ConfirmToAddressSheetProps & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
   const handleClose = () => {
     ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
@@ -40,7 +43,7 @@ export const ConfirmToAddressSheet: ForwardRefExoticComponent<
       <ConfirmToAddressSheetContent {...props} onClose={handleClose} />
     </BottomSheet>
   )
-})
+}
 
 const ConfirmToAddressSheetContent: React.FC<
   ConfirmToAddressSheetContentProps

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,13 +1,7 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
 import { Box, Button, Typography } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
+import type { JSX, Ref } from 'react'
+import { useCallback, useImperativeHandle, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -28,62 +22,63 @@ interface ExchangeRateBottomSheetProps {
   onCancel?(): void
 }
 
-export const ExchangeRateBottomSheet: ForwardRefExoticComponent<
-  ExchangeRateBottomSheetProps & RefAttributes<ExchangeRateBottomSheetBase>
-> = forwardRef<ExchangeRateBottomSheetBase, ExchangeRateBottomSheetProps>(
-  ({ onContinue, onCancel }, ref) => {
-    const [data, setData] = useState<ExchangeRateUpdateParams>()
-    const bottomSheetRef = useRef<BottomSheetBase>(null)
-    const resolverRef = useRef<(value: boolean) => void>(null)
+export const ExchangeRateBottomSheet = ({
+  onContinue,
+  onCancel,
+  ref,
+}: ExchangeRateBottomSheetProps & {
+  ref?: Ref<ExchangeRateBottomSheetBase>
+}): JSX.Element => {
+  const [data, setData] = useState<ExchangeRateUpdateParams>()
+  const bottomSheetRef = useRef<BottomSheetBase>(null)
+  const resolverRef = useRef<(value: boolean) => void>(null)
 
-    const handleContinue = () => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)
-      onContinue?.()
+  const close = useCallback((value = false, bottomSheetClose = true) => {
+    resolverRef.current?.(value)
+    if (bottomSheetClose) {
+      bottomSheetRef.current?.close()
     }
+  }, [])
 
-    const handleCancel = useCallback(() => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)
-      onCancel?.()
-    }, [onCancel, ref])
+  const handleContinue = useCallback(() => {
+    close(true)
+    onContinue?.()
+  }, [close, onContinue])
 
-    const handleClose = useCallback(() => {
-      ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(
-        false,
-        false
-      )
-      onCancel?.()
-    }, [onCancel, ref])
+  const handleCancel = useCallback(() => {
+    close(false)
+    onCancel?.()
+  }, [close, onCancel])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => bottomSheetRef.current?.isOpen(),
-        open: (resolver, data) => {
-          setData(data)
-          resolverRef.current = resolver
-          bottomSheetRef.current?.open()
-        },
-        close: (value = false, bottomSheetClose = true) => {
-          resolverRef.current?.(value)
-          if (bottomSheetClose) {
-            bottomSheetRef.current?.close()
-          }
-        },
-      }),
-      []
-    )
+  const handleClose = useCallback(() => {
+    close(false, false)
+    onCancel?.()
+  }, [close, onCancel])
 
-    return (
-      <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
-        <ExchangeRateBottomSheetContent
-          data={data}
-          onContinue={handleContinue}
-          onCancel={handleCancel}
-        />
-      </BottomSheet>
-    )
-  }
-)
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => bottomSheetRef.current?.isOpen(),
+      open: (resolver, data) => {
+        setData(data)
+        resolverRef.current = resolver
+        bottomSheetRef.current?.open()
+      },
+      close,
+    }),
+    [close]
+  )
+
+  return (
+    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
+      <ExchangeRateBottomSheetContent
+        data={data}
+        onContinue={handleContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+}
 
 const ExchangeRateBottomSheetContent: React.FC<
   ExchangeRateBottomSheetProps