@lifi/widget 3.19.0-beta.3 → 3.19.0

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>
 }

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 { SplitSubvariant } from '../../types/widget.js'
+import type { Appearance, SplitSubvariant } from '../../types/widget.js'
 
 export type ValueSetter<S> = <K extends keyof S>(
   key: K,
@@ -19,6 +19,7 @@ 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/useAppearance.ts

@@ -0,0 +1,15 @@
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import type { Appearance } from '../../types/widget.js'
+import { useSettingsStore } from './useSettingsStore.js'
+
+export const useAppearance = (): [
+  Appearance,
+  (appearance: Appearance) => void,
+] => {
+  const { setValue } = useSettingsActions()
+  const appearance = useSettingsStore((state) => state.appearance)
+  const setAppearance = (appearance: Appearance) => {
+    setValue('appearance', appearance)
+  }
+  return [appearance, setAppearance]
+}

package/src/stores/settings/useSettingsStore.ts

@@ -17,6 +17,7 @@ export const defaultConfigurableSettings: Pick<
 }
 
 export const defaultSettings: SettingsProps = {
+  appearance: 'auto',
   gasPrice: 'normal',
   enabledAutoRefuel: true,
   disabledBridges: [],
@@ -125,8 +126,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
           }
         }),
       reset: (bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = defaultSettings
         set(() => ({
-          ...defaultSettings,
+          ...restDefaultSettings,
           ...defaultConfigurableSettings,
         }))
         get().initializeTools('Bridges', bridges, true)
@@ -136,7 +138,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
     }),
     {
       name: 'li.fi-widget-settings',
-      version: 5,
+      version: 4,
       partialize: (state) => {
         const {
           disabledBridges,
@@ -163,6 +165,9 @@ 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,6 +1,7 @@
 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,33 +2,26 @@ import { tabsClasses } from '@mui/material'
 import type { WidgetTheme } from '../types/widget.js'
 
 export const azureLightTheme: WidgetTheme = {
-  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',
-        },
-      },
+  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',
     },
   },
   shape: {
@@ -43,6 +36,9 @@ export const azureLightTheme: WidgetTheme = {
     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
     borderRadius: '16px',
   },
+  playground: {
+    background: '#f3f5f8',
+  },
   components: {
     MuiCard: {
       defaultProps: { variant: 'filled' },