@lifi/widget 3.19.2 → 3.20.0-beta.1

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

@@ -1,11 +1,10 @@
 import { Box, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: getContrastAlphaColor(theme, 0.04),
+  background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   borderRadius: '16px',
   padding: '16px',
   svg: {
-    fill: getContrastAlphaColor(theme, 0.4),
+    fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
   },
 }))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { InfoRounded } from '@mui/icons-material'
+import InfoRounded from '@mui/icons-material/InfoRounded'
 import {
   Box,
   Button,

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk'
-import { Route } from '@mui/icons-material'
+import Route from '@mui/icons-material/Route'
 import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'

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

@@ -3,30 +3,30 @@ 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,
+  borderRadius: theme.vars.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),
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
   }),
 }))
 
 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)}`,
+  backgroundColor: theme.vars.palette.background.paper,
+  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,
+  }),
+  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })
 
 interface SlippageDefaultProps {
@@ -35,10 +35,11 @@ interface SlippageDefaultProps {
 
 export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
+    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelected(theme),
+            ...slippageControlSelectedStyles,
           },
         }
       : {}
@@ -49,7 +50,7 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
       fontSize: '1rem',
       fontWeight: 700,
       '&:focus': {
-        ...slippageControlSelected(theme),
+        ...slippageControlSelectedStyles,
       },
       ...selectedStyle,
     }
@@ -58,10 +59,11 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
 
 export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
+    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelected(theme),
+            ...slippageControlSelectedStyles,
           },
         }
       : {}
@@ -80,7 +82,7 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
           opacity: 1,
         },
         '&:focus': {
-          ...slippageControlSelected(theme),
+          ...slippageControlSelectedStyles,
         },
         ...selectedStyle,
       },

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

@@ -1,4 +1,5 @@
-import { Percent, WarningRounded } from '@mui/icons-material'
+import Percent from '@mui/icons-material/Percent'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Typography, debounce } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -1,10 +1,11 @@
-import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material'
-import { Tooltip } from '@mui/material'
+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 { 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'
@@ -12,7 +13,7 @@ import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
 const themeIcons = {
   light: LightMode,
   dark: Nightlight,
-  auto: BrightnessAuto,
+  system: BrightnessAuto,
 }
 
 interface ThemeTabProps {
@@ -36,27 +37,29 @@ const ThemeTab: React.FC<ThemeTabProps> = ({
 
 export const ThemeSettings: React.FC = () => {
   const { t } = useTranslation()
-  const [appearance, setAppearance] = useAppearance()
+  const { mode, setMode } = useColorScheme()
   const { hiddenUI } = useWidgetConfig()
 
   if (hiddenUI?.includes(HiddenUI.Appearance)) {
     return null
   }
 
+  const appearance = mode ?? 'system'
+
   const ThemeIcon = themeIcons[appearance]
 
   const handleThemeChange = (
     _: React.SyntheticEvent,
     appearance: Appearance
   ) => {
-    setAppearance(appearance)
+    setMode(appearance)
   }
 
   return (
     <SettingCardExpandable
       value={<CardValue>{t(`button.${appearance}`)} </CardValue>}
       icon={<ThemeIcon />}
-      title={t('settings.theme')}
+      title={t('settings.appearance')}
     >
       <CardTabs
         value={appearance}

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -1,4 +1,5 @@
-import { ContentCopyRounded, OpenInNew } from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNew from '@mui/icons-material/OpenInNew'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/Card/Card.js'

package/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -1,4 +1,4 @@
-import { ReceiptLongRounded } from '@mui/icons-material'
+import ReceiptLongRounded from '@mui/icons-material/ReceiptLongRounded'
 import { Container, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 

package/src/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -24,7 +24,7 @@ export const TransactionHistoryItemSkeleton = () => {
           width={96}
           height={16}
           sx={(theme) => ({
-            borderRadius: `${theme.shape.borderRadius}px`,
+            borderRadius: theme.vars.shape.borderRadius,
           })}
         />
         <Skeleton
@@ -32,7 +32,7 @@ export const TransactionHistoryItemSkeleton = () => {
           width={64}
           height={16}
           sx={(theme) => ({
-            borderRadius: `${theme.shape.borderRadius}px`,
+            borderRadius: theme.vars.shape.borderRadius,
           })}
         />
       </Box>

package/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,6 +1,7 @@
-import { Wallet, WarningRounded } from '@mui/icons-material'
+import Wallet from '@mui/icons-material/Wallet'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -32,7 +33,7 @@ export const ConfirmToAddressSheet = forwardRef<
   ConfirmToAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,7 +1,7 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import {
   forwardRef,
   useCallback,
@@ -37,19 +37,17 @@ export const ExchangeRateBottomSheet = forwardRef<
   const resolverRef = useRef<(value: boolean) => void>(null)
 
   const handleContinue = () => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true)
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)
     onContinue?.()
   }
 
   const handleCancel = useCallback(() => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
-      false
-    )
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)
     onCancel?.()
   }, [onCancel, ref])
 
   const handleClose = useCallback(() => {
-    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(
       false,
       false
     )

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,5 +1,5 @@
 import type { Theme } from '@mui/material'
-import { Box, alpha, darken, styled } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 
 type StatusColor = RouteExecutionStatus | 'warning'
@@ -7,19 +7,31 @@ type StatusColor = RouteExecutionStatus | 'warning'
 const getStatusColor = (status: StatusColor, theme: Theme) => {
   switch (status) {
     case RouteExecutionStatus.Done:
-      return { color: theme.palette.success.main, alpha: 0.12, darken: 0 }
+      return {
+        color: theme.vars.palette.success.mainChannel,
+        alpha: 0.12,
+        darken: 0,
+      }
     case RouteExecutionStatus.Failed:
-      return { color: theme.palette.error.main, alpha: 0.12, darken: 0 }
+      return {
+        color: theme.vars.palette.error.mainChannel,
+        alpha: 0.12,
+        darken: 0,
+      }
     case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
     case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
     case 'warning':
       return {
-        color: theme.palette.warning.main,
+        color: theme.vars.palette.warning.mainChannel,
         alpha: 0.48,
         darken: theme.palette.mode === 'light' ? 0.32 : 0,
       }
     default:
-      return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 }
+      return {
+        color: theme.vars.palette.primary.mainChannel,
+        alpha: 0.12,
+        darken: 0,
+      }
   }
 }
 
@@ -38,7 +50,7 @@ export const IconCircle = styled(Box, {
     darken: darkenValue,
   } = getStatusColor(status, theme)
   return {
-    backgroundColor: alpha(color, alphaValue),
+    backgroundColor: `rgba(${color} / ${alphaValue})`,
     borderRadius: '50%',
     width: 64,
     height: 64,
@@ -46,7 +58,7 @@ export const IconCircle = styled(Box, {
     position: 'relative',
     placeItems: 'center',
     '& > svg': {
-      color: darken(color, darkenValue),
+      color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
       width: 32,
       height: 32,
     },

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,9 +1,7 @@
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material'
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Skeleton, Typography } from '@mui/material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,8 +1,8 @@
 import type { Route } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { WarningRounded } from '@mui/icons-material'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { Box, Button, Typography } from '@mui/material'
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -24,7 +24,7 @@ export const TokenValueBottomSheet = forwardRef<
   TokenValueBottomSheetProps
 >(({ route, onContinue, onCancel }, ref) => {
   const handleCancel = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
     onCancel?.()
   }
 

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,5 +1,5 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
-import { Delete } from '@mui/icons-material'
+import Delete from '@mui/icons-material/Delete'
 import { Box, Button, Tooltip } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,7 +1,8 @@
-import type { PaletteMode } from '@mui/material'
-import { ThemeProvider as MuiThemeProvider, useMediaQuery } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
-import { useAppearance } from '../../stores/settings/useAppearance.js'
+import {
+  ThemeProvider as MuiThemeProvider,
+  useColorScheme,
+} from '@mui/material'
+import { useEffect, useMemo } from 'react'
 import { createTheme } from '../../themes/createTheme.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 
@@ -9,34 +10,26 @@ export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
-  const [appearance, setAppearance] = useAppearance()
-  const [mode, setMode] = useState<PaletteMode>(
-    (colorSchemeMode ?? appearance === 'auto')
-      ? prefersDarkMode
-        ? 'dark'
-        : 'light'
-      : appearance
-  )
+  const { setMode } = useColorScheme()
 
-  useEffect(() => {
-    if (appearance === 'auto') {
-      setMode(prefersDarkMode ? 'dark' : 'light')
-    } else {
-      setMode(appearance)
-    }
-  }, [appearance, prefersDarkMode])
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: setAppearance is stable
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setMode is stable
   useEffect(() => {
     if (colorSchemeMode) {
-      setAppearance(colorSchemeMode)
+      setMode(colorSchemeMode)
     }
   }, [colorSchemeMode])
 
-  const theme = useMemo(
-    () => createTheme(mode, themeConfig),
-    [mode, themeConfig]
+  const theme = useMemo(() => createTheme(themeConfig), [themeConfig])
+
+  return (
+    <MuiThemeProvider
+      theme={theme}
+      defaultMode={colorSchemeMode ?? 'system'}
+      modeStorageKey="li.fi-widget-mode"
+      colorSchemeStorageKey="li.fi-widget-color-scheme"
+      disableTransitionOnChange
+    >
+      {children}
+    </MuiThemeProvider>
   )
-  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
 }

package/src/stores/settings/types.ts

@@ -2,7 +2,7 @@ import type { Order } from '@lifi/sdk'
 import type { PropsWithChildren } from 'react'
 import type { StoreApi } from 'zustand'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
-import type { Appearance, SplitSubvariant } from '../../types/widget.js'
+import type { SplitSubvariant } from '../../types/widget.js'
 
 export type ValueSetter<S> = <K extends keyof S>(
   key: K,
@@ -19,7 +19,6 @@ export const SettingsToolTypes = ['Bridges', 'Exchanges'] as const
 export type SettingsToolType = (typeof SettingsToolTypes)[number]
 
 export interface SettingsProps {
-  appearance: Appearance
   gasPrice?: string
   language?: string
   routePriority?: Order

package/src/stores/settings/useSettingsStore.ts

@@ -17,7 +17,6 @@ export const defaultConfigurableSettings: Pick<
 }
 
 export const defaultSettings: SettingsProps = {
-  appearance: 'auto',
   gasPrice: 'normal',
   enabledAutoRefuel: true,
   disabledBridges: [],
@@ -126,9 +125,8 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
           }
         }),
       reset: (bridges, exchanges) => {
-        const { appearance, ...restDefaultSettings } = defaultSettings
         set(() => ({
-          ...restDefaultSettings,
+          ...defaultSettings,
           ...defaultConfigurableSettings,
         }))
         get().initializeTools('Bridges', bridges, true)
@@ -138,7 +136,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
     }),
     {
       name: 'li.fi-widget-settings',
-      version: 4,
+      version: 5,
       partialize: (state) => {
         const {
           disabledBridges,
@@ -165,9 +163,6 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
         return state
       },
       migrate: (persistedState: any, version) => {
-        if (version === 0 && persistedState.appearance === 'system') {
-          persistedState.appearance = defaultSettings.appearance
-        }
         if (version === 1) {
           persistedState.slippage = defaultConfigurableSettings.slippage
         }

package/src/stores/settings/utils/getStateValues.ts

@@ -1,7 +1,6 @@
 import type { SettingsProps, SettingsState } from '../types.js'
 
 export const getStateValues = (state: SettingsState): SettingsProps => ({
-  appearance: state.appearance,
   gasPrice: state.gasPrice,
   language: state.language,
   routePriority: state.routePriority,

package/src/themes/azureLight.ts

@@ -2,26 +2,33 @@ import { tabsClasses } from '@mui/material'
 import type { WidgetTheme } from '../types/widget.js'
 
 export const azureLightTheme: WidgetTheme = {
-  palette: {
-    primary: {
-      main: '#006Eff',
-    },
-    secondary: {
-      main: '#FFC800',
-    },
-    background: {
-      default: '#ffffff',
-      paper: '#f8f8fa',
-    },
-    text: {
-      primary: '#00070F',
-      secondary: '#6A7481',
-    },
-    grey: {
-      200: '#EEEFF2',
-      300: '#D5DAE1',
-      700: '#555B62',
-      800: '#373F48',
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#006Eff',
+        },
+        secondary: {
+          main: '#FFC800',
+        },
+        background: {
+          default: '#ffffff',
+          paper: '#f8f8fa',
+        },
+        text: {
+          primary: '#00070F',
+          secondary: '#6A7481',
+        },
+        grey: {
+          200: '#EEEFF2',
+          300: '#D5DAE1',
+          700: '#555B62',
+          800: '#373F48',
+        },
+        playground: {
+          main: '#f3f5f8',
+        },
+      },
     },
   },
   shape: {
@@ -36,9 +43,6 @@ export const azureLightTheme: WidgetTheme = {
     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
     borderRadius: '16px',
   },
-  playground: {
-    background: '#f3f5f8',
-  },
   components: {
     MuiCard: {
       defaultProps: { variant: 'filled' },