@lifi/widget 3.19.0-beta.3 → 3.19.0

package/src/components/Card/CardLabel.tsx

@@ -1,9 +1,16 @@
-import { Box, Typography, styled } from '@mui/material'
+import {
+  Box,
+  Typography,
+  getContrastRatio,
+  lighten,
+  styled,
+} from '@mui/material'
+import { blend } from '../../utils/colors.js'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: 'secondary' | 'success' }>(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   padding: 0,
   display: 'flex',
   alignItems: 'center',
@@ -12,30 +19,67 @@ export const CardLabel = styled(Box, {
   minWidth: 24,
   userSelect: 'none',
   fontSize: '1rem',
-  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
-  color: theme.vars.palette.text.primary,
-  ...theme.applyStyles('dark', {
-    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,
+  backgroundColor: blend(
+    theme.palette.background.paper,
+    theme.palette.common.white,
+    0.16
+  ),
+  color: theme.palette.text.primary,
+  ...theme.applyStyles('light', {
+    backgroundColor: blend(
+      theme.palette.background.paper,
+      theme.palette.common.black,
+      0.12
+    ),
   }),
   variants: [
     {
       props: { variant: 'secondary' },
       style: {
-        color: theme.palette.getContrastText(theme.palette.secondary.main),
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.secondary.main,
+          0.8
+        ),
+        color:
+          getContrastRatio(
+            theme.palette.common.white,
+            blend(
+              theme.palette.background.paper,
+              theme.palette.secondary.main,
+              0.8
+            )
+          ) >= 3
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.secondary.main,
+          color:
+            getContrastRatio(
+              theme.palette.common.white,
+              theme.palette.secondary.main
+            ) >= 3
+              ? theme.palette.common.white
+              : theme.palette.common.black,
         }),
       },
     },
     {
       props: { variant: 'success' },
       style: {
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
-        color: theme.vars.palette.success.main,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
-          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.success.main,
+          0.24
+        ),
+        color: lighten(theme.palette.success.main, 0.24),
+        ...theme.applyStyles('light', {
+          backgroundColor: blend(
+            theme.palette.background.paper,
+            theme.palette.success.main,
+            0.16
+          ),
+          color: lighten(theme.palette.success.main, 0),
         }),
       },
     },

package/src/components/Card/CardTitle.tsx

@@ -8,10 +8,10 @@ export const CardTitle = styled(Typography, {
   fontWeight: 700,
   padding: theme.spacing(2, 2, 0, 2),
   textAlign: 'left',
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   '&:after': {
     content: 'none',
-    color: theme.vars.palette.error.main,
+    color: theme.palette.error.main,
   },
   variants: [
     {

package/src/components/ContractComponent/NFT/NFT.style.ts

@@ -1,8 +1,8 @@
 import { Avatar, styled } from '@mui/material'
 
 export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
+  background: theme.palette.background.paper,
   width: 96,
   height: 96,
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
 }))

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import type { DialogProps, Theme } from '@mui/material'
+import type { DialogProps, PaperProps, Theme } from '@mui/material'
 import { Dialog as MuiDialog } from '@mui/material'
 import type { PropsWithChildren } from 'react'
 import { useGetScrollableContainer } from '../hooks/useScrollableContainer.js'
@@ -10,16 +10,17 @@ export const modalProps = {
   },
 }
 
+export const paperProps: Partial<PaperProps> = {
+  sx: (theme: Theme) => ({
+    position: 'absolute',
+    backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+  }),
+}
+
 export const slotProps = {
-  paper: {
-    sx: (theme: Theme) => ({
-      position: 'absolute',
-      backgroundImage: 'none',
-      backgroundColor: theme.vars.palette.background.default,
-      borderTopLeftRadius: theme.vars.shape.borderRadius,
-      borderTopRightRadius: theme.vars.shape.borderRadius,
-    }),
-  },
   backdrop: {
     sx: {
       position: 'absolute',
@@ -41,6 +42,7 @@ export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
       open={open}
       onClose={onClose}
       sx={modalProps.sx}
+      PaperProps={paperProps}
       slotProps={slotProps}
     >
       {children}

package/src/components/Header/BackButton.tsx

@@ -1,4 +1,4 @@
-import ArrowBack from '@mui/icons-material/ArrowBack'
+import { ArrowBack } from '@mui/icons-material'
 import type { IconButtonProps } from '@mui/material'
 import { IconButton, useTheme } from '@mui/material'
 

package/src/components/Header/CloseDrawerButton.tsx

@@ -1,4 +1,4 @@
-import CloseRounded from '@mui/icons-material/CloseRounded'
+import { CloseRounded } from '@mui/icons-material'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useDrawer } from '../../AppDrawerContext.js'

package/src/components/Header/DisconnectIconButton.tsx

@@ -1,5 +1,5 @@
 import { type Account, useAccountDisconnect } from '@lifi/wallet-management'
-import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import { PowerSettingsNewRounded } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
 
 export const DisconnectIconButton = ({ account }: { account: Account }) => {

package/src/components/Header/Header.style.ts

@@ -7,14 +7,12 @@ import {
   styled,
 } from '@mui/material'
 import type { WidgetSubvariant } from '../../types/widget.js'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 import { avatarMask12 } from '../Avatar/utils.js'
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: 'transparent',
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'transparent',
-  }),
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   flexDirection: 'row',
   alignItems: 'center',
   position: 'relative',
@@ -26,7 +24,7 @@ export const Container = styled(Box, {
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.vars.palette.background.default,
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
@@ -48,22 +46,16 @@ export const Container = styled(Box, {
 export const WalletButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'subvariant',
 })<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({
-  color: theme.vars.palette.text.primary,
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
   padding: theme.spacing(1, 1.5),
   maxHeight: 40,
   fontSize: '0.875rem',
   fontWeight: 600,
-  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
-  backgroundColor: 'transparent',
+  borderRadius: theme.shape.borderRadius * 2,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  ...theme.applyStyles('dark', {
-    backgroundColor: 'transparent',
-    '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    },
-  }),
   [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
     fontSize: '24px',
   },

package/src/components/Header/SettingsButton.style.tsx

@@ -2,8 +2,13 @@ import {
   IconButton,
   Badge as MuiBadge,
   badgeClasses,
+  darken,
   styled,
 } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
 
 export const SettingsIconBadge = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',
@@ -27,31 +32,19 @@ export const SettingsIconButton = styled(IconButton, {
   switch (variant) {
     case 'info':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
+        backgroundColor: getInfoBackgroundColor(theme),
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.12) 80%, black)`,
+          backgroundColor: darken(getInfoBackgroundColor(theme), 0.2),
         },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.info.mainChannel} / 0.16) 80%, black)`,
-          },
-        }),
       }
     case 'warning':
       return {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
+        backgroundColor: getWarningBackgroundColor(theme),
         '&:hover': {
-          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,
+          backgroundColor: darken(getWarningBackgroundColor(theme), 0.2),
         },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-          '&:hover': {
-            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,
-          },
-        }),
       }
     default:
-      return {}
+      break
   }
 })

package/src/components/Header/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import Settings from '@mui/icons-material/Settings'
+import { Settings } from '@mui/icons-material'
 import { Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/TransactionHistoryButton.tsx

@@ -1,4 +1,4 @@
-import ReceiptLong from '@mui/icons-material/ReceiptLong'
+import { ReceiptLong } from '@mui/icons-material'
 import { IconButton, Tooltip } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'

package/src/components/Header/WalletHeader.tsx

@@ -4,8 +4,7 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import Wallet from '@mui/icons-material/Wallet'
+import { ExpandMore, Wallet } from '@mui/icons-material'
 import { Avatar, Badge } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/Header/WalletMenu.style.tsx

@@ -8,19 +8,19 @@ import {
 
 export const WalletMenuContainer = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.vars.shape.borderRadius,
-    color: theme.vars.palette.text.primary,
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.text.primary,
     boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
     padding: theme.spacing(2),
     [`& .${menuClasses.list}`]: {
       padding: 0,
     },
     [`& .${menuItemClasses.root}`]: {
-      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      borderRadius: theme.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 0, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.vars.palette.text.primary,
+        color: theme.palette.text.primary,
       },
       ':hover': {
         background: 'none',

package/src/components/Header/WalletMenu.tsx

@@ -3,9 +3,11 @@ import {
   useAccount,
   useWalletMenu,
 } from '@lifi/wallet-management'
-import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
-import PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'
+import {
+  ContentCopyRounded,
+  OpenInNewRounded,
+  PowerSettingsNewRounded,
+} from '@mui/icons-material'
 import { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'

package/src/components/IconTypography.ts

@@ -1,9 +1,9 @@
-import { Box, styled } from '@mui/material'
+import { Box, alpha, styled } from '@mui/material'
 
 export const IconTypography = styled(Box)(({ theme }) => ({
-  color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+  color: alpha(theme.palette.common.white, 0.4),
   lineHeight: 0,
-  ...theme.applyStyles('dark', {
-    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,
+  ...theme.applyStyles('light', {
+    color: alpha(theme.palette.common.black, 0.32),
   }),
 }))

package/src/components/ListItemButton.tsx

@@ -1,12 +1,14 @@
 import { ListItemButton as MuiListItemButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../utils/colors.js'
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04)
   return {
-    borderRadius: theme.vars.shape.borderRadius,
+    borderRadius: theme.shape.borderRadius,
     paddingLeft: theme.spacing(1.5),
     height: 56,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: backgroundHoverColor,
     },
     variants: [
       {

package/src/components/Menu.tsx

@@ -8,18 +8,18 @@ import {
 
 export const Menu = styled(MuiMenu)(({ theme }) => ({
   [`& .${menuClasses.paper}`]: {
-    borderRadius: theme.vars.shape.borderRadius,
+    borderRadius: theme.shape.borderRadius,
     boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
     padding: theme.spacing(2),
     [`& .${menuClasses.list}`]: {
       padding: 0,
     },
     [`& .${menuItemClasses.root}`]: {
-      borderRadius: theme.vars.shape.borderRadiusSecondary,
+      borderRadius: theme.shape.borderRadiusSecondary,
       padding: theme.spacing(1, 2, 1, 1),
       [`& .${svgIconClasses.root}`]: {
         fontSize: 20,
-        color: theme.vars.palette.text.primary,
+        color: theme.palette.text.primary,
         marginRight: theme.spacing(1.5),
       },
     },

package/src/components/Messages/AccountNotDeployedMessage.tsx

@@ -1,4 +1,4 @@
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/AlertMessage.style.tsx

@@ -1,4 +1,8 @@
-import { Box, styled } from '@mui/material'
+import { Box, alpha, darken, lighten, styled } from '@mui/material'
+import {
+  getInfoBackgroundColor,
+  getWarningBackgroundColor,
+} from '../../utils/colors.js'
 import type { Severity } from './types.js'
 
 interface AlertSeverityProps {
@@ -8,25 +12,19 @@ interface AlertSeverityProps {
 export const AlertMessageCard = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'severity',
 })<AlertSeverityProps>(({ theme }) => ({
-  borderRadius: theme.vars.shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   position: 'relative',
   whiteSpace: 'pre-line',
   width: '100%',
   paddingBottom: theme.spacing(2),
-  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-  ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,
-  }),
+  backgroundColor: getInfoBackgroundColor(theme),
   variants: [
     {
       props: {
         severity: 'warning',
       },
       style: {
-        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-        }),
+        backgroundColor: getWarningBackgroundColor(theme),
       },
     },
   ],
@@ -40,21 +38,21 @@ export const AlertMessageCardTitle = styled(Box, {
   paddingRight: theme.spacing(2),
   paddingTop: theme.spacing(2),
   gap: theme.spacing(1),
-  color: theme.vars.palette.info.main,
-  ...theme.applyStyles('dark', {
-    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,
-  }),
+  color: lighten(theme.palette.info.main, 0.24),
   variants: [
     {
       props: {
         severity: 'warning',
       },
       style: {
-        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
-        ...theme.applyStyles('dark', {
-          color: theme.vars.palette.warning.main,
-        }),
+        color:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.warning.main, 0.36)
+            : alpha(theme.palette.warning.main, 1),
       },
     },
   ],
+  ...theme.applyStyles('light', {
+    color: theme.palette.info.main,
+  }),
 }))

package/src/components/Messages/FundsSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { WarningRounded } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from './AlertMessage.js'

package/src/components/Messages/GasRefuelMessage.style.ts

@@ -1,20 +1,20 @@
-import { styled, switchClasses } from '@mui/material'
+import { alpha, styled, switchClasses } from '@mui/material'
 import { Switch } from '../Switch.js'
 
 export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
   [`.${switchClasses.switchBase}`]: {
     [`&.${switchClasses.checked}`]: {
       [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.vars.palette.info.main,
-        ...theme.applyStyles('dark', {
-          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+        backgroundColor: alpha(theme.palette.info.main, 0.84),
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.info.main,
         }),
       },
     },
     [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color: theme.vars.palette.info.main,
-      ...theme.applyStyles('dark', {
-        color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,
+      color: alpha(theme.palette.info.main, 0.84),
+      ...theme.applyStyles('light', {
+        color: theme.palette.info.main,
       }),
     },
   },

package/src/components/Messages/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import EvStation from '@mui/icons-material/EvStation'
+import { EvStation } from '@mui/icons-material'
 import type { BoxProps } from '@mui/material'
 import { Box, Collapse, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'

package/src/components/Messages/GasSufficiencyMessage.tsx

@@ -1,4 +1,4 @@
-import EvStation from '@mui/icons-material/EvStation'
+import { EvStation } from '@mui/icons-material'
 import { type BoxProps, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'

package/src/components/Messages/ToAddressRequiredMessage.tsx

@@ -1,4 +1,4 @@
-import Wallet from '@mui/icons-material/Wallet'
+import { Wallet } from '@mui/icons-material'
 import type { BoxProps } from '@mui/material'
 import { Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'

package/src/components/NotFound.tsx

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

package/src/components/PoweredBy/PoweredBy.style.ts

@@ -5,6 +5,6 @@ export const Link = styled(MuiLink)(({ theme }) => ({
   alignItems: 'center',
   border: 'none',
   ':hover': {
-    color: theme.vars.palette.primary.main,
+    color: theme.palette.primary.main,
   },
 }))

package/src/components/ProgressToNextUpdate.tsx

@@ -67,9 +67,9 @@ export const ProgressToNextUpdate: React.FC<
             value={100}
             sx={(theme) => ({
               position: 'absolute',
-              color: theme.vars.palette.grey[300],
-              ...theme.applyStyles('dark', {
-                color: theme.vars.palette.grey[800],
+              color: theme.palette.grey[800],
+              ...theme.applyStyles('light', {
+                color: theme.palette.grey[300],
               }),
             })}
           />
@@ -79,9 +79,9 @@ export const ProgressToNextUpdate: React.FC<
             value={value}
             sx={(theme) => ({
               opacity: value === 100 && !isLoading ? 0.5 : 1,
-              color: theme.vars.palette.primary.main,
-              ...theme.applyStyles('dark', {
-                color: theme.vars.palette.primary.light,
+              color: theme.palette.primary.light,
+              ...theme.applyStyles('light', {
+                color: theme.palette.primary.main,
               }),
             })}
           />

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -8,7 +8,7 @@ export const IconCard = styled(Card)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  borderRadius: theme.shape.borderRadiusTertiary,
   zIndex: 1110,
 }))
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,5 +1,4 @@
-import ArrowDownward from '@mui/icons-material/ArrowDownward'
-import ArrowForward from '@mui/icons-material/ArrowForward'
+import { ArrowDownward, ArrowForward } from '@mui/icons-material'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useToAddressReset } from '../../hooks/useToAddressReset.js'

package/src/components/RouteCard/RouteCard.tsx

@@ -1,7 +1,6 @@
 import type { TokenAmount } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,6 +1,5 @@
 import { isGaslessStep } from '@lifi/sdk'
-import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
-import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
+import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
 import { Box, Tooltip, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'

package/src/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,4 +1,4 @@
-import Layers from '@mui/icons-material/Layers'
+import { Layers } from '@mui/icons-material'
 import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { IconTypography } from '../IconTypography.js'

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -29,7 +29,7 @@ export const RouteCardSkeleton: React.FC<
             width={112}
             height={24}
             sx={(theme) => ({
-              borderRadius: theme.vars.shape.borderRadius,
+              borderRadius: `${theme.shape.borderRadius}px`,
             })}
           />
         </Box>