@lifi/widget 3.18.7 → 3.19.0-beta.1

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,