@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
+import AirlineStopsIcon from '@mui/icons-material/AirlineStops';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import { useSettingsStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardButton, BadgedValue } from './SettingsCard';
+
+const supportedIcons = {
+  Bridges: AirlineStopsIcon,
+  Exchanges: SwapHorizIcon,
+};
+
+export const BridgeAndExchangeSettings: React.FC<{
+  type: 'Bridges' | 'Exchanges';
+}> = ({ type }) => {
+  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [enabledTools, tools] = useSettingsStore((state) => {
+    const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
+    return [enabledTools.filter(Boolean).length, enabledTools.length];
+  }, shallow);
+
+  const customisationLookUp = {
+    Bridges: isBridgesChanged,
+    Exchanges: isExchangesChanged,
+  };
+
+  const handleClick = () => {
+    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges']);
+  };
+
+  const Icon = supportedIcons[type];
+
+  return (
+    <SettingCardButton
+      onClick={handleClick}
+      icon={<Icon />}
+      title={t(`settings.enabled${type}`)}
+    >
+      <BadgedValue
+        badgeColor="info"
+        showBadge={customisationLookUp[type]}
+      >{`${enabledTools}/${tools}`}</BadgedValue>
+    </SettingCardButton>
+  );
+};

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -0,0 +1,45 @@
+import EvStationIcon from '@mui/icons-material/EvStation';
+import { useTranslation } from 'react-i18next';
+import { useSettings, useSettingsStore } from '../../stores';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
+
+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={<EvStationIcon />}
+      title={t(`settings.gasPrice.title`)}
+    >
+      <Tabs
+        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 />
+      </Tabs>
+    </SettingCardExpandable>
+  );
+};

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
+import { navigationRoutes } from '../../utils';
+import { useLanguages } from '../../hooks';
+import { SettingCardButton, SummaryValue } from './SettingsCard';
+
+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 (
+    <SettingCardButton
+      onClick={handleClick}
+      icon={<LanguageIcon />}
+      title={t(`language.title`)}
+    >
+      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
+    </SettingCardButton>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { getContrastAlphaColor } from '../../utils';
+import { Box, styled } from '@mui/material';
+
+export const ResetButtonContainer = styled(Box)(({ theme }) => ({
+  background: getContrastAlphaColor(theme.palette.mode, '4%'),
+  borderRadius: '16px',
+  padding: '16px',
+
+  [`svg`]: {
+    fill: getContrastAlphaColor(theme.palette.mode, '40%'),
+  },
+}));

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -0,0 +1,66 @@
+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';
+import { useSettingMonitor } from '../../hooks';
+import { ResetButtonContainer } from './ResetSettingsButton.style';
+import { InfoRounded } from '@mui/icons-material';
+
+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 px={3} mb={1}>
+      <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/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next';
+import RouteIcon from '@mui/icons-material/Route';
+import { Orders } from '@lifi/sdk';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useSettings, useSettingsStore } from '../../stores';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
+
+type SupportedRoute = (typeof Orders)[number];
+
+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: SupportedRoute,
+  ) => {
+    setValue('routePriority', routePriority);
+  };
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isRoutePriorityChanged}>
+          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
+        </BadgedValue>
+      }
+      icon={<RouteIcon />}
+      title={t(`settings.routePriority`)}
+    >
+      <Tabs
+        value={currentRoutePriority}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleRoutePriorityChange}
+        orientation="vertical"
+        sx={{ mt: 1.5 }}
+      >
+        {Orders.map((order) => {
+          return (
+            <Tab
+              key={order}
+              label={t(`main.tags.${order.toLowerCase()}` as any)}
+              value={order}
+              disableRipple
+            />
+          );
+        })}
+      </Tabs>
+    </SettingCardExpandable>
+  );
+};

package/src/pages/SettingsPage/SendToWalletOptionSetting.tsx

@@ -0,0 +1,48 @@
+import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Switch } from '../../components/Switch';
+import { useWidgetConfig } from '../../providers';
+import {
+  useSendToWalletStore,
+  useSettings,
+  useSettingsStore,
+} from '../../stores';
+import { HiddenUI } from '../../types';
+import {
+  SettingCard,
+  SummaryRowContainer,
+  SummaryTitleContainer,
+  SummaryValue,
+} from './SettingsCard';
+
+export const SendToWalletOptionSetting = () => {
+  const { t } = useTranslation();
+  const { hiddenUI } = useWidgetConfig();
+  const setSendToWallet = useSendToWalletStore(
+    (state) => state.setSendToWallet,
+  );
+  const setValue = useSettingsStore((state) => state.setValue);
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+
+  if (hiddenUI?.includes(HiddenUI.ToAddress)) {
+    return null;
+  }
+
+  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setValue('showDestinationWallet', checked);
+    setSendToWallet(false);
+  };
+
+  return (
+    <SettingCard>
+      <SummaryRowContainer>
+        <SummaryTitleContainer>
+          <WalletIcon />
+          <SummaryValue>{t(`settings.sendToWalletOption`)}</SummaryValue>
+        </SummaryTitleContainer>
+        <Switch checked={showDestinationWallet} onChange={onChange} />
+      </SummaryRowContainer>
+    </SettingCard>
+  );
+};

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

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

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

@@ -0,0 +1,56 @@
+import { Box, ButtonBase, Badge as MuiBadge, Typography } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import { styled } from '@mui/material/styles';
+
+export const SettingsList = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 3, 2),
+}));
+
+export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.5),
+}));
+
+export const SummaryRowContainer = styled(Box)({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const SummaryRowButton = styled(ButtonBase)({
+  background: 'none',
+  color: 'inherit',
+  border: 'none',
+  padding: 0,
+  font: 'inherit',
+  cursor: 'pointer',
+  outline: 'inherit',
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const SummaryValue = styled(Typography)({
+  lineHeight: '1.25',
+  fontWeight: 500,
+});
+
+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/SettingCard.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import { Card } from '../../../components/Card';
+
+export const SettingCard: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Card
+      variant="default"
+      selectionColor="primary"
+      sx={{
+        p: 2,
+      }}
+    >
+      {children}
+    </Card>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import type { SettingCardTitle } from './types';
+import { SettingCard } from './SettingCard';
+import {
+  SummaryRowButton,
+  SummaryValue,
+  SummaryTitleContainer,
+} from './SettingCard.style';
+
+interface SettingCardButtonProps extends SettingCardTitle {
+  onClick: MouseEventHandler;
+}
+
+export const SettingCardButton: React.FC<
+  PropsWithChildren<SettingCardButtonProps>
+> = ({ onClick, icon, title, children }) => (
+  <SettingCard>
+    <SummaryRowButton onClick={onClick} disableRipple>
+      <SummaryTitleContainer>
+        {icon}
+        <SummaryValue>{title}</SummaryValue>
+      </SummaryTitleContainer>
+      {children}
+    </SummaryRowButton>
+  </SettingCard>
+);

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

@@ -0,0 +1,49 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { useId } from 'react';
+import { Collapse } from '@mui/material';
+import type { SettingCardTitle } from './types';
+import { SettingCard } from './SettingCard';
+import {
+  SummaryRowButton,
+  SummaryValue,
+  SummaryTitleContainer,
+} from './SettingCard.style';
+import { useSettingsCardExpandable } from './SettingsAccordian';
+
+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 (
+    <SettingCard>
+      <SummaryRowButton
+        id={buttonId}
+        aria-expanded={expanded}
+        aria-controls={collapseId}
+        onClick={toggleExpanded}
+        disableRipple
+      >
+        <SummaryTitleContainer>
+          {icon}
+          <SummaryValue>{title}</SummaryValue>
+        </SummaryTitleContainer>
+        {!expanded && value}
+      </SummaryRowButton>
+      <Collapse
+        id={collapseId}
+        role="region"
+        aria-labelledby={buttonId}
+        in={expanded}
+      >
+        {children}
+      </Collapse>
+    </SettingCard>
+  );
+};

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/index.ts

@@ -0,0 +1,6 @@
+export * from './SettingCard';
+export * from './SettingCard.style';
+export * from './SettingCardButton';
+export * from './SettingCardExpandable';
+export * from './BadgedValue';
+export * from './SettingsAccordian';

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,30 @@
+import { Container } from '@mui/material';
+import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings';
+import { LanguageSetting } from './LanguageSetting';
+import { ResetSettingsButton } from './ResetSettingsButton';
+import { SendToWalletOptionSetting } from './SendToWalletOptionSetting';
+import { GasPriceSettings } from './GasPriceSettings';
+import { RoutePrioritySettings } from './RoutePrioritySettings';
+import { ThemeSettings } from './ThemeSettings';
+import { SlippageSettings } from './SlippageSettings';
+import { SettingsList, SettingsCardAccordion } from './SettingsCard';
+
+export const SettingsPage = () => {
+  return (
+    <Container disableGutters>
+      <SettingsList>
+        <SettingsCardAccordion>
+          <ThemeSettings />
+          <LanguageSetting />
+          <RoutePrioritySettings />
+          <GasPriceSettings />
+          <SlippageSettings />
+          <BridgeAndExchangeSettings type="Bridges" />
+          <BridgeAndExchangeSettings type="Exchanges" />
+          <SendToWalletOptionSetting />
+        </SettingsCardAccordion>
+      </SettingsList>
+      <ResetSettingsButton />
+    </Container>
+  );
+};

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

@@ -0,0 +1,93 @@
+import { alpha, styled } from '@mui/material/styles';
+import { Box, ButtonBase, InputBase } from '@mui/material';
+import type { Theme } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { getCardFieldsetBackgroundColor } from '../../../utils';
+
+export const SettingsFieldSet = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  backgroundColor: getCardFieldsetBackgroundColor(theme),
+  borderRadius: Math.max(
+    theme.shape.borderRadius,
+    theme.shape.borderRadiusSecondary,
+  ),
+  padding: theme.spacing(0.5),
+  gap: theme.spacing(0.5),
+  height: '3.5rem',
+}));
+
+const slippageControlSelected = (theme: Theme) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? theme.palette.background.default
+      : theme.palette.common.white,
+  borderRadius: theme.shape.borderRadiusSecondary,
+  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),
+}));