@lifi/widget 3.19.2 → 3.20.0-beta.0

package/src/components/StepActions/StepActions.style.tsx

@@ -3,7 +3,6 @@ import {
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
-  alpha,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
@@ -18,9 +17,9 @@ export const StepConnector = styled(MuiStepConnector, {
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: alpha(theme.palette.common.white, 0.16),
-    ...theme.applyStyles('light', {
-      borderColor: alpha(theme.palette.common.black, 0.12),
+    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+    ...theme.applyStyles('dark', {
+      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
     }),
   },
 }))
@@ -49,16 +48,19 @@ export const StepLabelTypography = styled(Typography)(({ theme }) => ({
   fontSize: 12,
   fontWeight: 500,
   lineHeight: 1.325,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   padding: theme.spacing(0.5, 0),
 }))
 
 export const StepContent = styled(Box, {
   shouldForwardProp: (prop) => !['last'].includes(prop as string),
 })<{ last: boolean }>(({ theme }) => ({
-  borderLeft: `2px solid ${alpha(theme.palette.common.white, 0.16)}`,
   margin: theme.spacing(0, 0, 0, 2.375),
   paddingLeft: theme.spacing(4.375),
+  borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+  ...theme.applyStyles('dark', {
+    borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+  }),
   variants: [
     {
       props: ({ last }) => last,
@@ -68,12 +70,9 @@ export const StepContent = styled(Box, {
       },
     },
   ],
-  ...theme.applyStyles('light', {
-    borderLeft: `2px solid ${alpha(theme.palette.common.black, 0.12)}`,
-  }),
 }))
 
 export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
-  color: theme.palette.text.primary,
+  color: theme.vars.palette.text.primary,
   backgroundColor: 'transparent',
 }))

package/src/components/StepActions/StepActions.tsx

@@ -1,6 +1,8 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import type { StepIconProps } from '@mui/material'
 import {
   Badge,

package/src/components/Switch.tsx

@@ -1,9 +1,4 @@
-import {
-  Switch as MuiSwitch,
-  alpha,
-  styled,
-  switchClasses,
-} from '@mui/material'
+import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'
 
 export const Switch = styled(MuiSwitch)(({ theme }) => ({
   width: 42,
@@ -15,9 +10,9 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
     transitionDuration: theme.transitions.duration.standard,
     [`&.${switchClasses.checked}`]: {
       transform: 'translateX(18px)',
-      color: theme.palette.common.white,
+      color: theme.vars.palette.common.white,
       [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         opacity: 1,
         border: 0,
       },
@@ -26,20 +21,17 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
       },
     },
     [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color: theme.palette.primary.main,
+      color: theme.vars.palette.primary.main,
       border: '6px solid',
-      borderColor: theme.palette.common.white,
+      borderColor: theme.vars.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color: alpha(theme.palette.common.white, 0.12),
-      ...theme.applyStyles('light', {
-        color: alpha(theme.palette.common.black, 0.12),
-      }),
+      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
     },
     [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-      opacity: 0.3,
-      ...theme.applyStyles('light', {
-        opacity: 0.7,
+      opacity: 0.7,
+      ...theme.applyStyles('dark', {
+        opacity: 0.3,
       }),
     },
   },
@@ -50,13 +42,10 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
   },
   [`.${switchClasses.track}`]: {
     borderRadius: 24 / 2,
-    backgroundColor: alpha(theme.palette.common.white, 0.16),
     opacity: 1,
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
-    ...theme.applyStyles('light', {
-      backgroundColor: alpha(theme.palette.common.black, 0.16),
-    }),
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
   },
 }))

package/src/components/Tabs/Tabs.style.tsx

@@ -2,7 +2,6 @@ import type { TabProps } from '@mui/material'
 import {
   Tab as MuiTab,
   Tabs as MuiTabs,
-  alpha,
   styled,
   tabClasses,
   tabsClasses,
@@ -22,15 +21,15 @@ export const Tabs = styled(MuiTabs)(({ theme }) => ({
 }))
 
 export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor: alpha(theme.palette.common.white, 0.08),
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   [`.${tabsClasses.indicator}`]: {
-    backgroundColor: alpha(theme.palette.common.black, 0.56),
-    ...theme.applyStyles('light', {
-      backgroundColor: theme.palette.background.paper,
-    }),
+    backgroundColor: theme.vars.palette.background.paper,
   },
-  ...theme.applyStyles('light', {
-    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  ...theme.applyStyles('dark', {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    [`.${tabsClasses.indicator}`]: {
+      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+    },
   }),
 }))
 
@@ -40,14 +39,8 @@ export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
   textTransform: 'none',
   fontSize: '1rem',
   fontWeight: 700,
-  color: theme.palette.common.white,
+  color: theme.vars.palette.common.onBackground,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.common.white,
-    ...theme.applyStyles('light', {
-      color: theme.palette.common.black,
-    }),
+    color: theme.vars.palette.common.onBackground,
   },
-  ...theme.applyStyles('light', {
-    color: theme.palette.common.black,
-  }),
 }))

package/src/components/TextFitter/TextFitter.tsx

@@ -75,7 +75,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
       //     : height
       // }
       preserveAspectRatio={preserveAspectRatio}
-      fill={theme.palette.text.primary}
+      fill={theme.vars.palette.text.primary}
       ref={ref}
     >
       <title>{children}</title>

package/src/components/Timer/TimerContent.tsx

@@ -1,4 +1,4 @@
-import { AccessTimeFilled } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import { Tooltip } from '@mui/material'
 import { Box } from '@mui/system'
 import type { FC, PropsWithChildren } from 'react'

package/src/components/Token/Token.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, alpha, styled } from '@mui/material'
+import { Box, Typography, styled } from '@mui/material'
 
 export const TextSecondaryContainer = styled(Box)(() => ({
   display: 'flex',
@@ -13,13 +13,13 @@ export const TextSecondary = styled(Typography, {
   fontSize: 12,
   lineHeight: 1,
   fontWeight: 500,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   whiteSpace: 'nowrap',
   variants: [
     {
       props: ({ dot }) => dot,
       style: {
-        color: alpha(theme.palette.text.secondary, 0.56),
+        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
       },
     },
   ],
@@ -29,8 +29,8 @@ export const TokenDivider = styled(Box)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
-  borderColor: theme.palette.grey[800],
-  ...theme.applyStyles('light', {
-    borderColor: theme.palette.grey[300],
+  borderColor: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
   }),
 }))

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/TokenList/TokenListItem.tsx

@@ -1,5 +1,5 @@
 import { ChainType } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import {
   Avatar,
   Box,
@@ -107,8 +107,10 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       </ListItemAvatar>
       <ListItemText
         primary={token.symbol}
-        secondaryTypographyProps={{
-          component: 'div',
+        slotProps={{
+          secondary: {
+            component: 'div',
+          },
         }}
         secondary={
           <Box

package/src/components/TokenList/types.ts

@@ -1,11 +1,11 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import type { Account } from '@lifi/wallet-management'
-import type { MouseEventHandler, MutableRefObject } from 'react'
+import type { MouseEventHandler, RefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
 export interface TokenListProps {
-  parentRef: MutableRefObject<HTMLElement | null>
+  parentRef: RefObject<HTMLElement | null>
   formType: FormType
   height: number
   onClick?(): void
@@ -14,7 +14,7 @@ export interface TokenListProps {
 export interface VirtualizedTokenListProps {
   account: Account
   tokens: TokenAmount[]
-  scrollElementRef: MutableRefObject<HTMLElement | null>
+  scrollElementRef: RefObject<HTMLElement | null>
   isLoading: boolean
   isBalanceLoading: boolean
   chainId?: number

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

@@ -1,10 +1,8 @@
 import type { RouteExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import {
-  ExpandLess,
-  ExpandMore,
-  LocalGasStationRounded,
-} from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import type { CardProps } from '@mui/material'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'

package/src/config/version.ts

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

package/src/hooks/useSetContentHeight.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react'
+import type { RefObject } from 'react'
 import { useLayoutEffect } from 'react'
 import { getRelativeContainer } from '../utils/elements.js'
 import { useDefaultElementId } from './useDefaultElementId.js'
@@ -8,7 +8,7 @@ import { useDefaultElementId } from './useDefaultElementId.js'
 //   CSS changes in those components can have implications for the functionality in this hook
 
 export const useSetContentHeight = (
-  ref: MutableRefObject<HTMLElement | null>,
+  ref: RefObject<HTMLElement | null>,
   dependency?: unknown
 ) => {
   const elementId = useDefaultElementId()

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/index.ts

@@ -17,9 +17,10 @@ export { useFieldValues } from './stores/form/useFieldValues.js'
 export * from './stores/bookmarks/types.js'
 export { azureLightTheme } from './themes/azureLight.js'
 export { jumperTheme } from './themes/jumper.js'
-export * from './themes/palettes.js'
 export { watermelonLightTheme } from './themes/watermelonLight.js'
 export { windows95Theme } from './themes/windows95.js'
+export * from './themes/palettes.js'
+export * from './themes/types.js'
 export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

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

package/src/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,4 +1,4 @@
-import { DeleteOutline } from '@mui/icons-material'
+import DeleteOutline from '@mui/icons-material/DeleteOutline'
 import type { IconButtonProps } from '@mui/material'
 import {
   Button,

package/src/pages/LanguagesPage.tsx

@@ -1,4 +1,4 @@
-import { Check } from '@mui/icons-material'
+import Check from '@mui/icons-material/Check'
 import { List } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { ListItemText } from '../components/ListItemText.js'

package/src/pages/SelectEnabledToolsPage.tsx

@@ -1,10 +1,8 @@
 import type { ToolsResponse } from '@lifi/sdk'
-import {
-  Check,
-  CheckBoxOutlineBlankOutlined,
-  CheckBoxOutlined,
-  IndeterminateCheckBoxOutlined,
-} from '@mui/icons-material'
+import Check from '@mui/icons-material/Check'
+import CheckBoxOutlineBlankOutlined from '@mui/icons-material/CheckBoxOutlineBlankOutlined'
+import CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined'
+import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'
 import {
   Avatar,
   IconButton,

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

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

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,10 +1,8 @@
-import {
-  ContentCopyRounded,
-  DeleteOutline,
-  MoreHoriz,
-  OpenInNewRounded,
-  TurnedIn,
-} from '@mui/icons-material'
+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 { 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,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'
@@ -33,7 +34,7 @@ export const ConfirmAddressSheet = forwardRef<
   ConfirmAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+    ;(ref as RefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

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

package/src/pages/SendToWallet/RecentWalletsPage.tsx

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

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,8 +1,6 @@
-import {
-  ContentCopyRounded,
-  MoreHoriz,
-  OpenInNewRounded,
-} from '@mui/icons-material'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 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,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/SendToWallet/SendToWalletPage.tsx

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

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,4 +1,5 @@
-import { AirlineStops, SwapHoriz } from '@mui/icons-material'
+import AirlineStops from '@mui/icons-material/AirlineStops'
+import SwapHoriz from '@mui/icons-material/SwapHoriz'
 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'
+import EvStation from '@mui/icons-material/EvStation'
 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'
+import Language from '@mui/icons-material/Language'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'