@lifi/widget 3.0.0-alpha.8 → 3.0.0-beta.0

package/pages/SettingsPage/LanguageSetting.tsx

@@ -1,11 +1,12 @@
-import LanguageIcon from '@mui/icons-material/Language';
+import { Language } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useLanguages } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
-import { navigationRoutes } from '../../utils';
-import { SettingCardButton, SummaryValue } from './SettingsCard';
+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();
@@ -22,12 +23,12 @@ export const LanguageSetting: React.FC = () => {
   };
 
   return (
-    <SettingCardButton
+    <CardButton
       onClick={handleClick}
-      icon={<LanguageIcon />}
+      icon={<Language />}
       title={t(`language.title`)}
     >
-      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
-    </SettingCardButton>
+      <CardValue>{selectedLanguageDisplayName}</CardValue>
+    </CardButton>
   );
 };

package/pages/SettingsPage/ResetSettingsButton.style.tsx

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

package/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import InfoRounded from '@mui/icons-material/InfoRounded';
+import { InfoRounded } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -9,9 +9,9 @@ import {
 } 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 { 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();
@@ -32,7 +32,7 @@ export const ResetSettingsButton: React.FC = () => {
   }
 
   return (
-    <Box px={3} mb={1}>
+    <Box mt={2}>
       <ResetButtonContainer>
         <Box display="flex" marginBottom="12px">
           <InfoRounded

package/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,12 +1,14 @@
-import { Orders } from '@lifi/sdk';
-import RouteIcon from '@mui/icons-material/Route';
+import type { Order } from '@lifi/sdk';
+import { Route } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs';
-import { useSettingMonitor } from '../../hooks';
-import { useSettings, useSettingsStore } from '../../stores';
-import { BadgedValue, SettingCardExpandable } from './SettingsCard';
+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';
 
-type SupportedRoute = (typeof Orders)[number];
+const Priorities: Order[] = ['CHEAPEST', 'FASTEST'];
 
 export const RoutePrioritySettings: React.FC = () => {
   const { t } = useTranslation();
@@ -17,7 +19,7 @@ export const RoutePrioritySettings: React.FC = () => {
 
   const handleRoutePriorityChange = (
     _: React.SyntheticEvent,
-    routePriority: SupportedRoute,
+    routePriority: Order,
   ) => {
     setValue('routePriority', routePriority);
   };
@@ -29,10 +31,10 @@ export const RoutePrioritySettings: React.FC = () => {
           {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}
         </BadgedValue>
       }
-      icon={<RouteIcon />}
+      icon={<Route />}
       title={t(`settings.routePriority`)}
     >
-      <Tabs
+      <CardTabs
         value={currentRoutePriority}
         aria-label="tabs"
         indicatorColor="primary"
@@ -40,17 +42,17 @@ export const RoutePrioritySettings: React.FC = () => {
         orientation="vertical"
         sx={{ mt: 1.5 }}
       >
-        {Orders.map((order) => {
+        {Priorities.map((priority) => {
           return (
             <Tab
-              key={order}
-              label={t(`main.tags.${order.toLowerCase()}` as any)}
-              value={order}
+              key={priority}
+              label={t(`main.tags.${priority.toLowerCase()}` as any)}
+              value={priority}
               disableRipple
             />
           );
         })}
-      </Tabs>
+      </CardTabs>
     </SettingCardExpandable>
   );
 };

package/pages/SettingsPage/SettingsCard/BadgedValue.tsx

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

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

@@ -1,46 +1,11 @@
-import { Box, ButtonBase, Badge as MuiBadge, Typography } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
+import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material';
 
 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',

package/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -1,14 +1,14 @@
+import { Collapse } from '@mui/material';
 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 { Card } from '../../../components/Card/Card.js';
 import {
-  SummaryRowButton,
-  SummaryValue,
-  SummaryTitleContainer,
-} from './SettingCard.style';
-import { useSettingsCardExpandable } from './SettingsAccordian';
+  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;
@@ -22,20 +22,21 @@ export const SettingCardExpandable: React.FC<
   const collapseId = useId();
 
   return (
-    <SettingCard>
-      <SummaryRowButton
+    <Card sx={{ p: 1 }}>
+      <CardRowButton
         id={buttonId}
         aria-expanded={expanded}
         aria-controls={collapseId}
         onClick={toggleExpanded}
         disableRipple
+        sx={{ p: 1 }}
       >
-        <SummaryTitleContainer>
+        <CardTitleContainer>
           {icon}
-          <SummaryValue>{title}</SummaryValue>
-        </SummaryTitleContainer>
+          <CardValue>{title}</CardValue>
+        </CardTitleContainer>
         {!expanded && value}
-      </SummaryRowButton>
+      </CardRowButton>
       <Collapse
         id={collapseId}
         role="region"
@@ -44,6 +45,6 @@ export const SettingCardExpandable: React.FC<
       >
         {children}
       </Collapse>
-    </SettingCard>
+    </Card>
   );
 };

package/pages/SettingsPage/SettingsPage.tsx

@@ -1,17 +1,22 @@
-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';
+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 (
-    <Container disableGutters>
+    <PageContainer bottomGutters>
       <SettingsList>
         <SettingsCardAccordion>
           <ThemeSettings />
@@ -21,10 +26,9 @@ export const SettingsPage = () => {
           <SlippageSettings />
           <BridgeAndExchangeSettings type="Bridges" />
           <BridgeAndExchangeSettings type="Exchanges" />
-          <SendToWalletOptionSetting />
         </SettingsCardAccordion>
       </SettingsList>
       <ResetSettingsButton />
-    </Container>
+    </PageContainer>
   );
 };

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

@@ -1,16 +1,20 @@
-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';
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  alpha,
+  inputBaseClasses,
+  styled,
+} from '@mui/material';
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   display: 'flex',
-  backgroundColor: getCardFieldsetBackgroundColor(theme),
-  borderRadius: Math.max(
-    theme.shape.borderRadius,
-    theme.shape.borderRadiusSecondary,
-  ),
+  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',
@@ -18,16 +22,17 @@ export const SettingsFieldSet = styled(Box)(({ theme }) => ({
 
 const slippageControlSelected = (theme: Theme) => ({
   backgroundColor:
-    theme.palette.mode === 'dark'
-      ? theme.palette.background.default
-      : theme.palette.common.white,
-  borderRadius: theme.shape.borderRadiusSecondary,
+    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,

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,21 +1,23 @@
-import PercentIcon from '@mui/icons-material/Percent';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+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';
-import { useSettings, useSettingsStore } from '../../../stores';
-import { formatSlippage } from '../../../utils';
-import { BadgedValue, SettingCardExpandable } from '../SettingsCard';
+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';
-
-const slippageDefault = '0.5';
+} from './SlippageSettings.style.js';
 
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -24,10 +26,10 @@ export const SlippageSettings: React.FC = () => {
   const { slippage } = useSettings(['slippage']);
   const setValue = useSettingsStore((state) => state.setValue);
   const defaultValue = useRef(slippage);
-  const [focused, setFocused] = useState<'input' | 'button' | undefined>();
+  const [focused, setFocused] = useState<'input' | 'button'>();
 
   const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
+    setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current));
   };
 
   const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -35,7 +37,7 @@ export const SlippageSettings: React.FC = () => {
 
     setValue(
       'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current, true),
+      formatSlippage(value || defaultSlippage, defaultValue.current, true),
     );
   };
 
@@ -46,12 +48,12 @@ export const SlippageSettings: React.FC = () => {
 
     setValue(
       'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current),
+      formatSlippage(value || defaultSlippage, defaultValue.current),
     );
   };
 
   const customInputValue =
-    !slippage || slippage === slippageDefault ? '' : slippage;
+    !slippage || slippage === defaultSlippage ? '' : slippage;
 
   const badgeColor = isSlippageOutsideRecommendedLimits
     ? 'warning'
@@ -67,13 +69,13 @@ export const SlippageSettings: React.FC = () => {
           showBadge={!!badgeColor}
         >{`${slippage}%`}</BadgedValue>
       }
-      icon={<PercentIcon />}
+      icon={<Percent />}
       title={t(`settings.slippage`)}
     >
       <Box mt={1.5}>
         <SettingsFieldSet>
           <SlippageDefaultButton
-            selected={slippageDefault === slippage && focused !== 'input'}
+            selected={defaultSlippage === slippage && focused !== 'input'}
             onFocus={() => {
               setFocused('button');
             }}
@@ -83,10 +85,10 @@ export const SlippageSettings: React.FC = () => {
             onClick={handleDefaultClick}
             disableRipple
           >
-            {slippageDefault}
+            {defaultSlippage}
           </SlippageDefaultButton>
           <SlippageCustomInput
-            selected={slippageDefault !== slippage && focused !== 'button'}
+            selected={defaultSlippage !== slippage && focused !== 'button'}
             placeholder={focused === 'input' ? '' : t('settings.custom')}
             inputProps={{
               inputMode: 'decimal',
@@ -102,7 +104,7 @@ export const SlippageSettings: React.FC = () => {
         </SettingsFieldSet>
         {isSlippageOutsideRecommendedLimits && (
           <SlippageLimitsWarningContainer>
-            <WarningRoundedIcon color="warning" />
+            <WarningRounded color="warning" />
             <Typography fontSize={13} fontWeight={400}>
               {t('warning.message.slippageOutsideRecommendedLimits')}
             </Typography>

package/pages/SettingsPage/ThemeSettings.tsx

@@ -1,19 +1,18 @@
-import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import NightlightIcon from '@mui/icons-material/Nightlight';
+import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from '../../components/Tabs';
-import { useWidgetConfig } from '../../providers';
-import { useAppearance } from '../../stores';
-import type { Appearance } from '../../types';
-import { HiddenUI } from '../../types';
-import { SettingCardExpandable, SummaryValue } from './SettingsCard';
+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: LightModeIcon,
-  dark: NightlightIcon,
-  auto: BrightnessAutoIcon,
+  light: LightMode,
+  dark: Nightlight,
+  auto: BrightnessAuto,
 };
 
 interface ThemeTabProps {
@@ -55,11 +54,11 @@ export const ThemeSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      value={<SummaryValue>{t(`button.${appearance}`)} </SummaryValue>}
+      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}
       icon={<ThemeIcon />}
       title={t('settings.theme')}
     >
-      <Tabs
+      <CardTabs
         value={appearance}
         aria-label="tabs"
         indicatorColor="primary"
@@ -78,7 +77,7 @@ export const ThemeSettings: React.FC = () => {
             />
           );
         })}
-      </Tabs>
+      </CardTabs>
     </SettingCardExpandable>
   );
 };

package/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useWidgetEvents } from '../../hooks/';
-import { WidgetEvent } from '../../types/events';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
 
 interface ContactSupportButtonProps {
   supportId?: string;