@lifi/widget 3.7.0-beta.8 → 3.8.0-beta.0

package/dist/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,47 +0,0 @@
-import { EvStation } from '@mui/icons-material'
-import { useTranslation } from 'react-i18next'
-import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
-import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
-import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
-import { BadgedValue } from './SettingsCard/BadgedValue.js'
-import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
-
-export const GasPriceSettings: React.FC = () => {
-  const { t } = useTranslation()
-  const setValue = useSettingsStore((state) => state.setValue)
-  const { isGasPriceChanged } = useSettingMonitor()
-  const { gasPrice } = useSettings(['gasPrice'])
-
-  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {
-    setValue('gasPrice', gasPrice)
-  }
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
-          {t(`settings.gasPrice.${gasPrice}` as any)}
-        </BadgedValue>
-      }
-      icon={<EvStation />}
-      title={t('settings.gasPrice.title')}
-    >
-      <CardTabs
-        value={gasPrice}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleGasPriceChange}
-        sx={{ mt: 1.5 }}
-      >
-        <Tab label={t('settings.gasPrice.slow')} value="slow" disableRipple />
-        <Tab
-          label={t('settings.gasPrice.normal')}
-          value="normal"
-          disableRipple
-        />
-        <Tab label={t('settings.gasPrice.fast')} value="fast" disableRipple />
-      </CardTabs>
-    </SettingCardExpandable>
-  )
-}

package/dist/pages/SettingsPage/LanguageSetting.tsx

@@ -1,34 +0,0 @@
-import { Language } from '@mui/icons-material'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import { CardButton } from '../../components/Card/CardButton.js'
-import { CardValue } from '../../components/Card/CardButton.style.js'
-import { useLanguages } from '../../hooks/useLanguages.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../../types/widget.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-
-export const LanguageSetting: React.FC = () => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { hiddenUI } = useWidgetConfig()
-  const { selectedLanguageDisplayName } = useLanguages()
-
-  if (hiddenUI?.includes(HiddenUI.Language)) {
-    return null
-  }
-
-  const handleClick = () => {
-    navigate(navigationRoutes.languages)
-  }
-
-  return (
-    <CardButton
-      onClick={handleClick}
-      icon={<Language />}
-      title={t('language.title')}
-    >
-      <CardValue>{selectedLanguageDisplayName}</CardValue>
-    </CardButton>
-  )
-}

package/dist/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,12 +0,0 @@
-import { Box, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../../utils/colors.js'
-
-export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: getContrastAlphaColor(theme, 0.04),
-  borderRadius: '16px',
-  padding: '16px',
-
-  svg: {
-    fill: getContrastAlphaColor(theme, 0.4),
-  },
-}))

package/dist/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,66 +0,0 @@
-import { InfoRounded } from '@mui/icons-material'
-import {
-  Box,
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Dialog } from '../../components/Dialog.js'
-import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
-import { ResetButtonContainer } from './ResetSettingsButton.style.js'
-
-export const ResetSettingsButton: React.FC = () => {
-  const { t } = useTranslation()
-  const { isCustomRouteSettings, reset } = useSettingMonitor()
-  const [open, setOpen] = useState(false)
-
-  const toggleDialog = useCallback(() => {
-    setOpen((open) => !open)
-  }, [])
-
-  const handleReset = () => {
-    reset()
-    toggleDialog()
-  }
-
-  if (!isCustomRouteSettings) {
-    return null
-  }
-
-  return (
-    <Box mt={2}>
-      <ResetButtonContainer>
-        <Box display="flex" marginBottom="12px">
-          <InfoRounded
-            sx={{
-              marginRight: '8px',
-            }}
-          />
-          <Box fontSize={14}>{t('settings.resetSettings')}</Box>
-        </Box>
-        <Button onClick={toggleDialog} fullWidth>
-          {t('button.resetSettings')}
-        </Button>
-
-        <Dialog open={open} onClose={toggleDialog}>
-          <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              {t('warning.message.resetSettings')}
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-            <Button variant="contained" onClick={handleReset} autoFocus>
-              {t('button.reset')}
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </ResetButtonContainer>
-    </Box>
-  )
-}

package/dist/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,58 +0,0 @@
-import type { Order } from '@lifi/sdk'
-import { Route } from '@mui/icons-material'
-import { useTranslation } from 'react-i18next'
-import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
-import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
-import { useSettings } from '../../stores/settings/useSettings.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.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 = useSettingsStore((state) => state.setValue)
-  const { isRoutePriorityChanged } = useSettingMonitor()
-  const { routePriority } = useSettings(['routePriority'])
-  const currentRoutePriority = routePriority ?? ''
-
-  const handleRoutePriorityChange = (
-    _: React.SyntheticEvent,
-    routePriority: Order
-  ) => {
-    setValue('routePriority', routePriority)
-  }
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
-          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
-        </BadgedValue>
-      }
-      icon={<Route />}
-      title={t('settings.routePriority')}
-    >
-      <CardTabs
-        value={currentRoutePriority}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleRoutePriorityChange}
-        orientation="vertical"
-        sx={{ mt: 1.5 }}
-      >
-        {Priorities.map((priority) => {
-          return (
-            <Tab
-              key={priority}
-              label={t(`main.tags.${priority.toLowerCase()}` as any)}
-              value={priority}
-              disableRipple
-            />
-          )
-        })}
-      </CardTabs>
-    </SettingCardExpandable>
-  )
-}

package/dist/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -1,22 +0,0 @@
-import type { BadgeProps } from '@mui/material'
-import type { PropsWithChildren } from 'react'
-import { CardValue } from '../../../components/Card/CardButton.style.js'
-import { Badge } from './SettingCard.style.js'
-
-interface BadgedValueProps {
-  showBadge: boolean
-  badgeColor?: BadgeProps['color']
-}
-
-export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
-  showBadge,
-  badgeColor,
-  children,
-}) =>
-  showBadge && badgeColor ? (
-    <Badge variant="dot" color={badgeColor}>
-      <CardValue>{children}</CardValue>
-    </Badge>
-  ) : (
-    <CardValue>{children}</CardValue>
-  )

package/dist/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,21 +0,0 @@
-import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material'
-
-export const SettingsList = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-}))
-
-export const Badge = styled(MuiBadge)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(1.25),
-  [`.${badgeClasses.badge}`]: {
-    width: 10,
-    height: 10,
-    // the following removes MUI styling so we can position the badge with flex
-    position: 'relative',
-    transform: 'translateX(0)',
-    borderRadius: '50%',
-  },
-}))

package/dist/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -1,51 +0,0 @@
-import { Collapse } from '@mui/material'
-import type { PropsWithChildren, ReactNode } from 'react'
-import { useId } from 'react'
-import { Card } from '../../../components/Card/Card.js'
-import {
-  CardRowButton,
-  CardTitleContainer,
-  CardValue,
-} from '../../../components/Card/CardButton.style.js'
-import { useSettingsCardExpandable } from './SettingsAccordian.js'
-import type { SettingCardTitle } from './types.js'
-
-interface SettingCardExpandableProps extends SettingCardTitle {
-  value: ReactNode
-}
-
-export const SettingCardExpandable: React.FC<
-  PropsWithChildren<SettingCardExpandableProps>
-> = ({ icon, title, value, children }) => {
-  const { expanded, toggleExpanded } = useSettingsCardExpandable()
-  const buttonId = useId()
-  const collapseId = useId()
-
-  return (
-    <Card sx={{ p: 1 }}>
-      <CardRowButton
-        id={buttonId}
-        aria-expanded={expanded}
-        aria-controls={collapseId}
-        onClick={toggleExpanded}
-        disableRipple
-        sx={{ p: 1 }}
-      >
-        <CardTitleContainer>
-          {icon}
-          <CardValue>{title}</CardValue>
-        </CardTitleContainer>
-        {!expanded && value}
-      </CardRowButton>
-      <Collapse
-        id={collapseId}
-        // biome-ignore lint/a11y/useSemanticElements:
-        role="region"
-        aria-labelledby={buttonId}
-        in={expanded}
-      >
-        {children}
-      </Collapse>
-    </Card>
-  )
-}

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

@@ -1,44 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { createContext, useContext, useEffect, useId, useState } from 'react'
-
-const SettingsAccordionContext = createContext({
-  setOpenCard: (_id: string) => {},
-  openCard: '',
-})
-
-export const SettingsCardAccordion: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
-  const [openCard, setOpenCard] = useState('')
-
-  return (
-    <SettingsAccordionContext.Provider value={{ openCard, setOpenCard }}>
-      {children}
-    </SettingsAccordionContext.Provider>
-  )
-}
-
-export const useSettingsCardExpandable = () => {
-  const settingCardExpandableId = useId()
-  const [expanded, setExpanded] = useState(false)
-  const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
-  const toggleExpanded = () => {
-    const newExpanded = !expanded
-    setExpanded(newExpanded)
-
-    if (newExpanded && openCard !== settingCardExpandableId) {
-      setOpenCard(settingCardExpandableId)
-    }
-  }
-
-  useEffect(() => {
-    if (openCard !== settingCardExpandableId) {
-      setExpanded(false)
-    }
-  }, [settingCardExpandableId, openCard])
-
-  return {
-    expanded,
-    toggleExpanded,
-  }
-}

package/dist/pages/SettingsPage/SettingsCard/types.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react'
-
-export interface SettingCardTitle {
-  icon: ReactNode
-  title: ReactNode
-}

package/dist/pages/SettingsPage/SettingsPage.tsx

@@ -1,34 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { PageContainer } from '../../components/PageContainer.js'
-import { useHeader } from '../../hooks/useHeader.js'
-import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'
-import { GasPriceSettings } from './GasPriceSettings.js'
-import { LanguageSetting } from './LanguageSetting.js'
-import { ResetSettingsButton } from './ResetSettingsButton.js'
-import { RoutePrioritySettings } from './RoutePrioritySettings.js'
-import { SettingsList } from './SettingsCard/SettingCard.style.js'
-import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'
-import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'
-import { ThemeSettings } from './ThemeSettings.js'
-
-export const SettingsPage = () => {
-  const { t } = useTranslation()
-  useHeader(t('header.settings'))
-
-  return (
-    <PageContainer bottomGutters>
-      <SettingsList>
-        <SettingsCardAccordion>
-          <ThemeSettings />
-          <LanguageSetting />
-          <RoutePrioritySettings />
-          <GasPriceSettings />
-          <SlippageSettings />
-          <BridgeAndExchangeSettings type="Bridges" />
-          <BridgeAndExchangeSettings type="Exchanges" />
-        </SettingsCardAccordion>
-      </SettingsList>
-      <ResetSettingsButton />
-    </PageContainer>
-  )
-}

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

@@ -1,96 +0,0 @@
-import type { Theme } from '@mui/material'
-import {
-  Box,
-  ButtonBase,
-  InputBase,
-  alpha,
-  inputBaseClasses,
-  styled,
-} from '@mui/material'
-
-export const SettingsFieldSet = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.04)
-      : alpha(theme.palette.common.white, 0.08),
-  borderRadius: theme.shape.borderRadius,
-  padding: theme.spacing(0.5),
-  gap: theme.spacing(0.5),
-  height: '3.5rem',
-}))
-
-const slippageControlSelected = (theme: Theme) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.background.paper
-      : alpha(theme.palette.common.black, 0.56),
-  borderRadius: theme.shape.borderRadius - 4,
-  boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
-})
-
-interface SlippageDefaultProps {
-  selected?: boolean
-}
-
-export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
-  ({ theme, selected }) => {
-    const selectedStyle = selected
-      ? {
-          '&:not(:focus)': {
-            ...slippageControlSelected(theme),
-          },
-        }
-      : {}
-
-    return {
-      height: '100%',
-      width: '100%',
-      fontSize: '1rem',
-      fontWeight: 700,
-      '&:focus': {
-        ...slippageControlSelected(theme),
-      },
-      ...selectedStyle,
-    }
-  }
-)
-
-export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
-  ({ theme, selected }) => {
-    const selectedStyle = selected
-      ? {
-          '&:not(:focus)': {
-            ...slippageControlSelected(theme),
-          },
-        }
-      : {}
-
-    return {
-      height: '100%',
-      width: '100%',
-
-      [`.${inputBaseClasses.input}`]: {
-        height: '100%',
-        width: '100%',
-        padding: 0,
-        textAlign: 'center',
-        '&::placeholder': {
-          fontSize: '1rem',
-          fontWeight: 700,
-          opacity: 1,
-        },
-        '&:focus': {
-          ...slippageControlSelected(theme),
-        },
-        ...selectedStyle,
-      },
-    }
-  }
-)
-
-export const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(1.25),
-  marginTop: theme.spacing(1.5),
-}))

package/dist/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,116 +0,0 @@
-import { Percent, WarningRounded } from '@mui/icons-material'
-import { Box, Typography } from '@mui/material'
-import type { ChangeEventHandler, FocusEventHandler } from 'react'
-import { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
-import { useSettings } from '../../../stores/settings/useSettings.js'
-import {
-  defaultSlippage,
-  useSettingsStore,
-} from '../../../stores/settings/useSettingsStore.js'
-import { formatSlippage } from '../../../utils/format.js'
-import { BadgedValue } from '../SettingsCard/BadgedValue.js'
-import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
-import {
-  SettingsFieldSet,
-  SlippageCustomInput,
-  SlippageDefaultButton,
-  SlippageLimitsWarningContainer,
-} from './SlippageSettings.style.js'
-
-export const SlippageSettings: React.FC = () => {
-  const { t } = useTranslation()
-  const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
-    useSettingMonitor()
-  const { slippage } = useSettings(['slippage'])
-  const setValue = useSettingsStore((state) => state.setValue)
-  const defaultValue = useRef(slippage)
-  const [focused, setFocused] = useState<'input' | 'button'>()
-
-  const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current))
-  }
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target
-
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current, true)
-    )
-  }
-
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused(undefined)
-
-    const { value } = event.target
-
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current)
-    )
-  }
-
-  const customInputValue =
-    !slippage || slippage === defaultSlippage ? '' : slippage
-
-  const badgeColor = isSlippageOutsideRecommendedLimits
-    ? 'warning'
-    : isSlippageChanged
-      ? 'info'
-      : undefined
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue
-          badgeColor={badgeColor}
-          showBadge={!!badgeColor}
-        >{`${slippage}%`}</BadgedValue>
-      }
-      icon={<Percent />}
-      title={t('settings.slippage')}
-    >
-      <Box mt={1.5}>
-        <SettingsFieldSet>
-          <SlippageDefaultButton
-            selected={defaultSlippage === slippage && focused !== 'input'}
-            onFocus={() => {
-              setFocused('button')
-            }}
-            onBlur={() => {
-              setFocused(undefined)
-            }}
-            onClick={handleDefaultClick}
-            disableRipple
-          >
-            {defaultSlippage}
-          </SlippageDefaultButton>
-          <SlippageCustomInput
-            selected={defaultSlippage !== slippage && focused !== 'button'}
-            placeholder={focused === 'input' ? '' : t('settings.custom')}
-            inputProps={{
-              inputMode: 'decimal',
-            }}
-            onChange={handleInputUpdate}
-            onFocus={() => {
-              setFocused('input')
-            }}
-            onBlur={handleInputBlur}
-            value={customInputValue}
-            autoComplete="off"
-          />
-        </SettingsFieldSet>
-        {isSlippageOutsideRecommendedLimits && (
-          <SlippageLimitsWarningContainer>
-            <WarningRounded color="warning" />
-            <Typography fontSize={13} fontWeight={400}>
-              {t('warning.message.slippageOutsideRecommendedLimits')}
-            </Typography>
-          </SlippageLimitsWarningContainer>
-        )}
-      </Box>
-    </SettingCardExpandable>
-  )
-}