@lifi/widget 3.19.0-beta.2 → 3.19.0

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -1,8 +1,10 @@
-import ErrorIcon from '@mui/icons-material/Error'
-import TurnedIn from '@mui/icons-material/TurnedIn'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import {
+  Error as ErrorIcon,
+  TurnedIn,
+  WarningRounded,
+} from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
-import type { ChangeEvent, RefObject } from 'react'
+import type { ChangeEvent, MutableRefObject } from 'react'
 import { forwardRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -46,7 +48,7 @@ export const BookmarkAddressSheet = forwardRef<
 
   const handleCancel = () => {
     setError(undefined)
-    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
   }
 
   const validateWithAddressFromInput = async () => {
@@ -110,7 +112,7 @@ export const BookmarkAddressSheet = forwardRef<
         })
         return
       }
-      ;(ref as RefObject<BottomSheetBase>).current?.close()
+      ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
 
       onAddBookmark({
         name: validatedBookmark.name,

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,8 +1,10 @@
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import TurnedIn from '@mui/icons-material/TurnedIn'
+import {
+  ContentCopyRounded,
+  DeleteOutline,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedIn,
+} from '@mui/icons-material'
 import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

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

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,9 +1,11 @@
 import type { Account } from '@lifi/wallet-management'
 import { useAccount } from '@lifi/wallet-management'
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import Wallet from '@mui/icons-material/Wallet'
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+  Wallet,
+} from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,9 +1,11 @@
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
-import History from '@mui/icons-material/History'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import TurnedInNot from '@mui/icons-material/TurnedInNot'
+import {
+  ContentCopyRounded,
+  DeleteOutline,
+  History,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedInNot,
+} from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,6 +1,8 @@
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import MoreHoriz from '@mui/icons-material/MoreHoriz'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+} from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -13,6 +13,7 @@ import { InputCard } from '../../components/Card/InputCard.js'
 import { Input } from '../../components/Input.js'
 import type { PageContainerProps } from '../../components/PageContainer.js'
 import { PageContainer } from '../../components/PageContainer.js'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const AddressInput = styled(Input)(({ theme }) => ({
   padding: 0,
@@ -86,12 +87,12 @@ export const IconContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   width: 80,
   height: 80,
+  color: theme.palette.grey[300],
+  background: theme.palette.grey[800],
   borderRadius: '50%',
-  color: theme.vars.palette.grey[700],
-  background: theme.vars.palette.grey[200],
-  ...theme.applyStyles('dark', {
-    color: theme.vars.palette.grey[300],
-    background: theme.vars.palette.grey[800],
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[700],
+    background: theme.palette.grey[200],
   }),
 }))
 
@@ -118,7 +119,7 @@ export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
     : { minHeight: 440 }),
 }))
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
-  background: theme.vars.palette.background.default,
+  background: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
   bottom: 0,
@@ -140,10 +141,10 @@ export const EmptyContainer = styled(Box)(({ theme }) => ({
 export const ValidationAlert = styled(Alert)(({ theme }) => ({
   backgroundColor: 'transparent',
   padding: 0,
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   [`.${alertClasses.icon}`]: {
     padding: 0,
-    color: theme.vars.palette.error.main,
+    color: theme.palette.error.main,
   },
   [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
 }))
@@ -153,6 +154,6 @@ export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
 }))

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,8 +1,10 @@
 import { useAccount } from '@lifi/wallet-management'
-import ErrorIcon from '@mui/icons-material/Error'
-import History from '@mui/icons-material/History'
-import TurnedIn from '@mui/icons-material/TurnedIn'
-import Wallet from '@mui/icons-material/Wallet'
+import {
+  Error as ErrorIcon,
+  History,
+  TurnedIn,
+  Wallet,
+} from '@mui/icons-material'
 import { Box, Tooltip, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'
 import { useRef, useState } from 'react'

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,5 +1,4 @@
-import AirlineStops from '@mui/icons-material/AirlineStops'
-import SwapHoriz from '@mui/icons-material/SwapHoriz'
+import { AirlineStops, SwapHoriz } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { shallow } from 'zustand/shallow'

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,4 +1,4 @@
-import EvStation from '@mui/icons-material/EvStation'
+import { EvStation } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,4 +1,4 @@
-import Language from '@mui/icons-material/Language'
+import { Language } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'

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

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

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import InfoRounded from '@mui/icons-material/InfoRounded'
+import { InfoRounded } from '@mui/icons-material'
 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/Route'
+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'

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

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

@@ -1,5 +1,4 @@
-import Percent from '@mui/icons-material/Percent'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Percent, 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'

package/src/pages/SettingsPage/ThemeSettings.tsx

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

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -1,5 +1,4 @@
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import OpenInNew from '@mui/icons-material/OpenInNew'
+import { ContentCopyRounded, OpenInNew } from '@mui/icons-material'
 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/ReceiptLongRounded'
+import { ReceiptLongRounded } from '@mui/icons-material'
 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.vars.shape.borderRadius,
+            borderRadius: `${theme.shape.borderRadius}px`,
           })}
         />
         <Skeleton
@@ -32,7 +32,7 @@ export const TransactionHistoryItemSkeleton = () => {
           width={64}
           height={16}
           sx={(theme) => ({
-            borderRadius: theme.vars.shape.borderRadius,
+            borderRadius: `${theme.shape.borderRadius}px`,
           })}
         />
       </Box>

package/src/pages/TransactionPage/ConfirmToAddressSheet.tsx

@@ -1,7 +1,6 @@
-import Wallet from '@mui/icons-material/Wallet'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Wallet, WarningRounded } from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { MutableRefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -33,7 +32,7 @@ export const ConfirmToAddressSheet = forwardRef<
   ConfirmToAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    ;(ref as MutableRefObject<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/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { Box, Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { MutableRefObject } from 'react'
 import {
   forwardRef,
   useCallback,
@@ -37,17 +37,19 @@ export const ExchangeRateBottomSheet = forwardRef<
   const resolverRef = useRef<(value: boolean) => void>(null)
 
   const handleContinue = () => {
-    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(true)
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true)
     onContinue?.()
   }
 
   const handleCancel = useCallback(() => {
-    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(false)
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false
+    )
     onCancel?.()
   }, [onCancel, ref])
 
   const handleClose = useCallback(() => {
-    ;(ref as RefObject<ExchangeRateBottomSheetBase>).current?.close(
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
       false,
       false
     )

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

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

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,7 +1,9 @@
-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 {
+  Done,
+  ErrorRounded,
+  InfoRounded,
+  WarningRounded,
+} from '@mui/icons-material'
 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/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { Box, Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { MutableRefObject } 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 RefObject<BottomSheetBase>).current?.close()
+    ;(ref as MutableRefObject<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/Delete'
+import { Delete } from '@mui/icons-material'
 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,8 +1,7 @@
-import {
-  ThemeProvider as MuiThemeProvider,
-  useColorScheme,
-} from '@mui/material'
-import { useEffect, useMemo } from 'react'
+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 { createTheme } from '../../themes/createTheme.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 
@@ -10,26 +9,34 @@ export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()
-  const { setMode } = useColorScheme()
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const [appearance, setAppearance] = useAppearance()
+  const [mode, setMode] = useState<PaletteMode>(
+    (colorSchemeMode ?? appearance === 'auto')
+      ? prefersDarkMode
+        ? 'dark'
+        : 'light'
+      : appearance
+  )
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: setMode is stable
+  useEffect(() => {
+    if (appearance === 'auto') {
+      setMode(prefersDarkMode ? 'dark' : 'light')
+    } else {
+      setMode(appearance)
+    }
+  }, [appearance, prefersDarkMode])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setAppearance is stable
   useEffect(() => {
     if (colorSchemeMode) {
-      setMode(colorSchemeMode)
+      setAppearance(colorSchemeMode)
     }
   }, [colorSchemeMode])
 
-  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>
+  const theme = useMemo(
+    () => createTheme(mode, themeConfig),
+    [mode, themeConfig]
   )
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
 }