@lifi/widget 3.19.0-beta.0 → 3.19.0-beta.2

package/src/components/Token/Token.tsx

@@ -159,7 +159,10 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
             enableImpactTokenTooltip ? (
               <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
                 <TextSecondary>
-                  {t('format.percent', { value: priceImpact })}
+                  {t('format.percent', {
+                    value: priceImpact,
+                    usePlusSign: true,
+                  })}
                 </TextSecondary>
               </Tooltip>
             ) : (
@@ -168,7 +171,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
                   maximumFractionDigits: 9,
                 })}
               >
-                {t('format.percent', { value: priceImpact })}
+                {t('format.percent', { value: priceImpact, usePlusSign: true })}
               </TextSecondary>
             )
           ) : null}

package/src/components/TokenList/TokenList.style.tsx

@@ -1,6 +1,5 @@
 import type { IconButtonProps, LinkProps } from '@mui/material'
 import { IconButton as MuiIconButton, styled } from '@mui/material'
-import { getContrastAlphaColor } from '../../utils/colors.js'
 import { ListItem as ListItemBase } from '../ListItem/ListItem.js'
 
 export const ListItem = styled(ListItemBase)(() => ({
@@ -19,9 +18,9 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
     color: 'inherit',
     backgroundColor: 'unset',
     minWidth: 'unset',
-    borderRadius: theme.shape.borderRadiusTertiary,
+    borderRadius: theme.vars.shape.borderRadiusTertiary,
     '&:hover': {
-      backgroundColor: getContrastAlphaColor(theme, 0.04),
+      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
     },
     svg: {
       fontSize: 14,

package/src/components/TokenList/TokenList.tsx

@@ -53,7 +53,11 @@ export const TokenList: FC<TokenListProps> = ({
         .filter(
           (token) =>
             token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.symbol
+              .toUpperCase()
+              // Replace ₮ with T for USD₮0
+              .replaceAll('₮', 'T')
+              .includes(searchFilter) ||
             token.address.toUpperCase().includes(searchFilter)
         )
         .sort(filteredTokensComparator(searchFilter))

package/src/components/TokenRate/TokenRate.style.ts

@@ -4,7 +4,7 @@ export const TokenRateTypography = styled(Typography)(({ theme }) => ({
   fontSize: 14,
   lineHeight: 1.429,
   fontWeight: 500,
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   cursor: 'pointer',
   '&:hover': {
     opacity: 1,

package/src/components/TransactionDetails.tsx

@@ -230,7 +230,10 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {t('format.percent', { value: priceImpact })}
+                {t('format.percent', {
+                  value: priceImpact,
+                  usePlusSign: true,
+                })}
               </Typography>
             </Tooltip>
           </Box>

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.19.0-beta.0'
+export const version = '3.19.0-beta.2'

package/src/hooks/useRoutes.ts

@@ -420,11 +420,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         const initialRoutes = routesResult?.routes ?? []
 
         if (shouldUseRelayerQuote && initialRoutes.length) {
-          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           setIntermediateRoutes(queryKey, initialRoutes)
+          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           // Return early if we're only using main routes
         } else if (shouldUseMainRoutes) {
           // If we don't need relayer quote, return the initial routes
+          emitter.emit(WidgetEvent.AvailableRoutes, initialRoutes)
           return initialRoutes
         }
 

package/src/i18n/en.json

@@ -47,6 +47,7 @@
     "startSwapping": "Start swapping",
     "swap": "Swap",
     "swapReview": "Review swap",
+    "system": "System",
     "tryAgain": "Try again",
     "viewCoverage": "View coverage",
     "viewOnExplorer": "View on explorer"
@@ -308,7 +309,7 @@
     "searchExchanges": "Search by exchange name"
   },
   "settings": {
-    "theme": "Theme",
+    "appearance": "Appearance",
     "enabledBridges": "Bridges",
     "enabledExchanges": "Exchanges",
     "gasPrice": {

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

@@ -13,7 +13,6 @@ 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,
@@ -87,12 +86,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%',
-  ...theme.applyStyles('light', {
-    color: theme.palette.grey[700],
-    background: theme.palette.grey[200],
+  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],
   }),
 }))
 
@@ -119,7 +118,7 @@ export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
     : { minHeight: 440 }),
 }))
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
-  background: theme.palette.background.default,
+  background: theme.vars.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
   bottom: 0,
@@ -141,10 +140,10 @@ export const EmptyContainer = styled(Box)(({ theme }) => ({
 export const ValidationAlert = styled(Alert)(({ theme }) => ({
   backgroundColor: 'transparent',
   padding: 0,
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   [`.${alertClasses.icon}`]: {
     padding: 0,
-    color: theme.palette.error.main,
+    color: theme.vars.palette.error.main,
   },
   [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
 }))
@@ -154,6 +153,6 @@ export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme, 0.04),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   },
 }))

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.04)`,
   },
 }))

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/ThemeSettings.tsx

@@ -1,12 +1,11 @@
 import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
 import LightMode from '@mui/icons-material/LightMode'
 import Nightlight from '@mui/icons-material/Nightlight'
-import { Tooltip } from '@mui/material'
+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'
@@ -14,7 +13,7 @@ import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
 const themeIcons = {
   light: LightMode,
   dark: Nightlight,
-  auto: BrightnessAuto,
+  system: BrightnessAuto,
 }
 
 interface ThemeTabProps {
@@ -38,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/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/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

@@ -81,6 +81,7 @@ export const StatusBottomSheetContent: React.FC<
     subvariantOptions,
     contractSecondaryComponent,
     contractCompactComponent,
+    feeConfig,
   } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 
@@ -246,6 +247,9 @@ export const StatusBottomSheetContent: React.FC<
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
     (contractCompactComponent || contractSecondaryComponent)
 
+  const VcComponent =
+    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined
+
   return (
     <Box
       ref={ref}
@@ -314,6 +318,7 @@ export const StatusBottomSheetContent: React.FC<
           {secondaryMessage}
         </Typography>
       ) : null}
+      {VcComponent ? <VcComponent route={route} /> : null}
       <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
         {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
           <Button variant="text" onClick={handleSeeDetails} fullWidth>

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,