@openocean.finance/widget 1.0.0

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -0,0 +1,58 @@
+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 { useSettingsActions } from '../../stores/settings/useSettingsActions.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 { 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/src/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -0,0 +1,22 @@
+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/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -0,0 +1,21 @@
+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/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -0,0 +1,51 @@
+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>
+        {value}
+      </CardRowButton>
+      <Collapse
+        id={collapseId}
+        // biome-ignore lint/a11y/useSemanticElements:
+        role="region"
+        aria-labelledby={buttonId}
+        in={expanded}
+      >
+        {children}
+      </Collapse>
+    </Card>
+  )
+}

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

@@ -0,0 +1,44 @@
+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/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,29 @@
+import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { ResetSettingsButton } from './ResetSettingsButton.js'
+import { SettingsList } from './SettingsCard/SettingCard.style.js'
+import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'
+import { SlippageSettings } from './SlippageSettings/SlippageSettings.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/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -0,0 +1,95 @@
+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: alpha(theme.palette.common.white, 0.08),
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(0.5),
+  gap: theme.spacing(0.5),
+  height: '3.5rem',
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  }),
+}))
+
+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/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -0,0 +1,165 @@
+import { WarningRounded } from '@mui/icons-material'
+import { Box, Typography, debounce } from '@mui/material'
+import type { ChangeEventHandler, FocusEventHandler } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
+import { useSettings } from '../../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
+import { defaultSlippage } 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'
+
+const DEFAULT_CUSTOM_INPUT_VALUE = '0.5'
+const list = [
+  {
+    name: '0.5%',
+    value: '0.5',
+  },
+  {
+    name: '1%',
+    value: '1',
+  },
+  {
+    name: '3%',
+    value: '3',
+  },
+]
+
+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
+      ? DEFAULT_CUSTOM_INPUT_VALUE
+      : slippage
+
+  const [inputValue, setInputValue] = useState(customInputValue)
+
+  const handleDefaultClick = (value: string) => {
+    setValue('slippage', value)
+    setInputValue('')
+  }
+
+  const debouncedSetValue = useMemo(() => debounce(setValue, 500), [setValue])
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      const { value } = event.target
+
+      const formattedValue = formatSlippage(value, defaultValue.current, true)
+
+      setInputValue(formattedValue)
+      debouncedSetValue(
+        'slippage',
+        formattedValue.length ? formattedValue : defaultSlippage
+      )
+    },
+    [debouncedSetValue]
+  )
+
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
+    setFocused('input')
+
+    const { value } = event.target
+
+    const formattedValue = formatSlippage(value, defaultValue.current)
+    setInputValue(formattedValue)
+    setValue(
+      'slippage',
+      formattedValue.length ? formattedValue : defaultSlippage
+    )
+  }
+
+  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>
+          {list.map((item, i) => (
+            <SlippageDefaultButton
+              key={i}
+              selected={item.value === slippage && focused !== 'input'}
+              onFocus={() => {
+                setFocused('button')
+              }}
+              onBlur={() => {
+                setFocused(undefined)
+              }}
+              onClick={() => handleDefaultClick(item.value)}
+              disableRipple
+            >
+              {item.name}
+            </SlippageDefaultButton>
+          ))}
+
+          <SlippageCustomInput
+            selected={true}
+            placeholder={focused === 'input' ? '' : t('settings.custom')}
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleInputUpdate}
+            onFocus={handleInputFocus}
+            value={inputValue}
+            autoComplete="off"
+            onBlur={() => setFocused(undefined)}
+          />
+        </SettingsFieldSet>
+        {isSlippageNotRecommended && (
+          <SlippageLimitsWarningContainer>
+            <WarningRounded color="warning" />
+            <Typography
+              sx={{
+                fontSize: 13,
+                fontWeight: 400,
+              }}
+            >
+              {slippageWarningText}
+            </Typography>
+          </SlippageLimitsWarningContainer>
+        )}
+      </Box>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -0,0 +1,83 @@
+import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material'
+import { Tooltip } 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 { useAppearance } from '../../stores/settings/useAppearance.js'
+import type { Appearance } from '../../types/widget.js'
+import { HiddenUI } from '../../types/widget.js'
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
+
+const themeIcons = {
+  light: LightMode,
+  dark: Nightlight,
+  auto: 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 [appearance, setAppearance] = useAppearance()
+  const { hiddenUI } = useWidgetConfig()
+
+  if (hiddenUI?.includes(HiddenUI.Appearance)) {
+    return null
+  }
+
+  const ThemeIcon = themeIcons[appearance]
+
+  const handleThemeChange = (
+    _: React.SyntheticEvent,
+    appearance: Appearance
+  ) => {
+    setAppearance(appearance)
+  }
+
+  return (
+    <SettingCardExpandable
+      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}
+      icon={<ThemeIcon />}
+      title={t('settings.theme')}
+    >
+      <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.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { WidgetEvent } from '../../types/events.js'
+
+interface ContactSupportButtonProps {
+  supportId?: string
+}
+
+export const ContactSupportButton = ({
+  supportId,
+}: ContactSupportButtonProps) => {
+  const { t } = useTranslation()
+  const widgetEvents = useWidgetEvents()
+
+  const handleClick = () => {
+    if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
+      const url = 'https://t.me/OpenOceanAPI'
+      const target = '_blank'
+      const rel = 'nofollow noreferrer'
+      window.open(url, target, rel)
+    } else {
+      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
+    }
+  }
+
+  return (
+    <Button onClick={handleClick} fullWidth>
+      {t('button.contactSupport')}
+    </Button>
+  )
+}