@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,90 @@
+import { Collapse } from '@mui/material'
+import type { PropsWithChildren, ReactNode } from 'react'
+import {
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type RefAttributes,
+  useId,
+  useImperativeHandle,
+  useRef,
+} 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
+  disabled?: boolean
+  keepValueVisible?: boolean
+  onEntered?: () => void
+}
+
+export interface SettingCardExpandableRef {
+  element: HTMLButtonElement | null
+  isExpanded: boolean
+  toggleExpanded: (forceExpanded?: boolean) => void
+}
+
+export const SettingCardExpandable: ForwardRefExoticComponent<
+  PropsWithChildren<SettingCardExpandableProps> &
+    RefAttributes<SettingCardExpandableRef>
+> = forwardRef<
+  SettingCardExpandableRef,
+  PropsWithChildren<SettingCardExpandableProps>
+>(
+  (
+    { icon, title, value, children, disabled, keepValueVisible, onEntered },
+    ref
+  ) => {
+    const { expanded, toggleExpanded } = useSettingsCardExpandable()
+    const buttonId = useId()
+    const collapseId = useId()
+    const buttonRef = useRef<HTMLButtonElement>(null)
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        element: buttonRef.current,
+        isExpanded: expanded,
+        toggleExpanded,
+      }),
+      [expanded, toggleExpanded]
+    )
+
+    return (
+      <Card sx={{ p: 1 }}>
+        <CardRowButton
+          ref={buttonRef}
+          id={buttonId}
+          aria-expanded={expanded}
+          aria-controls={collapseId}
+          onClick={disabled ? undefined : () => toggleExpanded()}
+          disableRipple
+          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}
+        >
+          <CardTitleContainer>
+            {icon}
+            <CardValue>{title}</CardValue>
+          </CardTitleContainer>
+          {(!expanded || keepValueVisible) && value}
+        </CardRowButton>
+        <Collapse
+          id={collapseId}
+          role="region"
+          aria-labelledby={buttonId}
+          in={expanded}
+          mountOnEnter
+          unmountOnExit
+          onEntered={onEntered}
+        >
+          {children}
+        </Collapse>
+      </Card>
+    )
+  }
+)

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

@@ -0,0 +1,48 @@
+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 = (): {
+  expanded: boolean
+  toggleExpanded: (forceExpanded?: boolean) => void
+} => {
+  const settingCardExpandableId = useId()
+  const [expanded, setExpanded] = useState(false)
+  const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
+
+  const toggleExpanded = (forceExpanded?: boolean) => {
+    const newExpanded = forceExpanded ?? !expanded
+    setExpanded(newExpanded)
+
+    if (newExpanded && openCard !== settingCardExpandableId) {
+      setOpenCard(settingCardExpandableId)
+    }
+  }
+
+  useEffect(() => {
+    if (openCard !== settingCardExpandableId) {
+      setExpanded(false)
+    }
+  }, [settingCardExpandableId, openCard])
+
+  return {
+    expanded: expanded,
+    toggleExpanded: toggleExpanded,
+  }
+}

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

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

package/src/pages/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'
+import { ThemeSettings } from './ThemeSettings.js'
+
+export const SettingsPage = (): JSX.Element => {
+  const { t } = useTranslation()
+  const { hiddenUI } = useWidgetConfig()
+  useHeader(t('header.settings'))
+
+  return (
+    <PageContainer topGutters bottomGutters>
+      <SettingsList>
+        <SettingsCardAccordion>
+          <ThemeSettings />
+          <LanguageSetting />
+          <RoutePrioritySettings />
+          <GasPriceSettings />
+          <SlippageSettings />
+          {!hiddenUI?.hideSmallBalances && <SmallBalanceFilterSettings />}
+          <BridgeAndExchangeSettings type="Bridges" />
+          <BridgeAndExchangeSettings type="Exchanges" />
+        </SettingsCardAccordion>
+      </SettingsList>
+      <ResetSettingsButton />
+    </PageContainer>
+  )
+}

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

@@ -0,0 +1,102 @@
+import type { Theme } from '@mui/material'
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  inputBaseClasses,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const SettingsFieldSet: React.FC<
+  React.ComponentProps<typeof Box> & SettingsControlProps
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  borderRadius: theme.vars.shape.borderRadius,
+  padding: theme.spacing(0.5),
+  gap: theme.spacing(0.5),
+  height: '3.5rem',
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  }),
+}))
+
+const settingsControlSelected = (theme: Theme) => ({
+  backgroundColor: theme.vars.palette.background.paper,
+  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,
+  }),
+  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
+})
+
+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 }) => {
+  const settingsControlSelectedStyles = settingsControlSelected(theme)
+  const selectedStyle = selected
+    ? {
+        '&:not(:focus)': {
+          ...settingsControlSelectedStyles,
+        },
+      }
+    : {}
+
+  return {
+    height: '100%',
+    width: '100%',
+    [`.${inputBaseClasses.input}`]: {
+      height: '100%',
+      width: '100%',
+      padding: 0,
+      textAlign: 'center',
+      '&::placeholder': {
+        fontSize: '1rem',
+        fontWeight: 700,
+        opacity: 1,
+      },
+      '&:focus': {
+        ...settingsControlSelectedStyles,
+      },
+      ...selectedStyle,
+    },
+  }
+})
+
+export const SlippageLimitsWarningContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(1.25),
+  marginTop: theme.spacing(1.5),
+}))

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

@@ -0,0 +1,151 @@
+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 { useTranslation } from 'react-i18next'
+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 { 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 { 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'
+    : isSlippageChanged
+      ? 'info'
+      : undefined
+
+  const slippageWarningText = isSlippageOutsideRecommendedLimits
+    ? t('warning.message.slippageOutsideRecommendedLimits')
+    : isSlippageUnderRecommendedLimits
+      ? t('warning.message.slippageUnderRecommendedLimits')
+      : ''
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor={badgeColor} showBadge={!!badgeColor}>
+          {slippage ? `${slippage}%` : t('button.auto')}
+        </BadgedValue>
+      }
+      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>
+  )
+}

package/src/pages/SettingsPage/SmallBalanceFilterSettings.tsx

@@ -0,0 +1,116 @@
+import AttachMoney from '@mui/icons-material/AttachMoney'
+import { Box } from '@mui/material'
+import {
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { Switch } from '../../components/Switch.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { formatInputAmount, usdDecimals } from '../../utils/format.js'
+import {
+  SettingCardExpandable,
+  type SettingCardExpandableRef,
+} from './SettingsCard/SettingCardExpandable.js'
+import {
+  SettingsCustomInput,
+  SettingsFieldSet,
+} from './SlippageSettings/SlippageSettings.style.js'
+
+const defaultThreshold = '0.01'
+
+export const SmallBalanceFilterSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])
+  const { setValue } = useSettingsActions()
+  const [inputValue, setInputValue] = useState(
+    smallBalanceThreshold ?? defaultThreshold
+  )
+  const buttonRef = useRef<SettingCardExpandableRef>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {
+    const value = inputValue.replace('$', '')
+    const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)
+    if (returnInitial) {
+      setInputValue(formattedValue)
+    } else {
+      const formattedOrDefault = formattedValue || defaultThreshold
+      setInputValue(formattedOrDefault)
+      setValue('smallBalanceThreshold', formattedOrDefault)
+    }
+  }
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, true)
+  }
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, false)
+  }
+
+  const handleHideSmallBalancesChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ) => {
+    setValue(
+      'smallBalanceThreshold',
+      event.target.checked ? defaultThreshold : undefined
+    )
+    if (buttonRef.current) {
+      buttonRef.current?.toggleExpanded(event.target.checked)
+    }
+  }
+
+  const handleExpanded = () => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+
+  useEffect(() => {
+    setInputValue(smallBalanceThreshold ?? defaultThreshold)
+  }, [smallBalanceThreshold])
+
+  return (
+    <SettingCardExpandable
+      ref={buttonRef}
+      value={
+        <Switch
+          checked={!!smallBalanceThreshold}
+          onChange={handleHideSmallBalancesChange}
+          aria-label={t('settings.hideSmallBalances')}
+        />
+      }
+      icon={<AttachMoney />}
+      title={t('settings.hideSmallBalances')}
+      disabled={!smallBalanceThreshold}
+      keepValueVisible
+      onEntered={handleExpanded}
+    >
+      <Box
+        sx={{
+          mt: 1.5,
+        }}
+      >
+        <SettingsFieldSet>
+          <SettingsCustomInput
+            inputRef={inputRef}
+            selected
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleInputUpdate}
+            onBlur={handleInputBlur}
+            value={`$${inputValue}`}
+            autoComplete="off"
+          />
+        </SettingsFieldSet>
+      </Box>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -0,0 +1,85 @@
+import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
+import LightMode from '@mui/icons-material/LightMode'
+import Nightlight from '@mui/icons-material/Nightlight'
+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 { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { Appearance } from '../../types/widget.js'
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
+
+const themeIcons = {
+  light: LightMode,
+  dark: Nightlight,
+  system: BrightnessAuto,
+}
+
+interface ThemeTabProps {
+  title: string
+  value: Appearance
+  Icon: React.ReactElement
+}
+
+// If the Tab is not the direct child of the Tabs component you can loose the switching
+// The component passes the props to the Tab component so switching isn't lost
+const ThemeTab: React.FC<ThemeTabProps> = ({
+  title,
+  value,
+  Icon,
+  ...props
+}) => (
+  <Tooltip title={title}>
+    <Tab icon={Icon} value={value} {...props} disableRipple />
+  </Tooltip>
+)
+
+export const ThemeSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { mode, setMode } = useColorScheme()
+  const { hiddenUI } = useWidgetConfig()
+
+  if (hiddenUI?.appearance) {
+    return null
+  }
+
+  const appearance = mode ?? 'system'
+
+  const ThemeIcon = themeIcons[appearance]
+
+  const handleThemeChange = (
+    _: React.SyntheticEvent,
+    appearance: Appearance
+  ) => {
+    setMode(appearance)
+  }
+
+  return (
+    <SettingCardExpandable
+      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}
+      icon={<ThemeIcon />}
+      title={t('settings.appearance')}
+    >
+      <CardTabs
+        value={appearance}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleThemeChange}
+        sx={{ mt: 1.5 }}
+      >
+        {Object.entries(themeIcons).map(([theme, Icon]) => {
+          const supportedThemeOption = theme as Appearance
+
+          return (
+            <ThemeTab
+              key={supportedThemeOption}
+              title={t(`button.${supportedThemeOption}`)}
+              value={supportedThemeOption}
+              Icon={<Icon />}
+            />
+          )
+        })}
+      </CardTabs>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/TransactionDetailsPage/ContactSupportButton.style.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material'
+import type React from 'react'
+import { ButtonTertiary } from '../../components/ButtonTertiary.js'
+
+export const ButtonChip: React.FC<React.ComponentProps<typeof ButtonTertiary>> =
+  styled(ButtonTertiary)(({ theme }) => ({
+    padding: theme.spacing(0.5, 1.5),
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.3334,
+    height: 'auto',
+  }))

package/src/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -0,0 +1,21 @@
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContactSupport } from '../../hooks/useContactSupport.js'
+import { ButtonChip } from './ContactSupportButton.style.js'
+
+interface ContactSupportButtonProps {
+  supportId?: string
+}
+
+export const ContactSupportButton = ({
+  supportId,
+}: ContactSupportButtonProps): JSX.Element => {
+  const { t } = useTranslation()
+  const handleContactSupport = useContactSupport(supportId)
+
+  return (
+    <ButtonChip onClick={handleContactSupport}>
+      {t('button.contactSupport')}
+    </ButtonChip>
+  )
+}