@lifi/widget 3.19.2 → 3.20.0-beta.0

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

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

package/src/components/Messages/GasRefuelMessage.tsx

@@ -1,4 +1,4 @@
-import { EvStation } from '@mui/icons-material'
+import EvStation from '@mui/icons-material/EvStation'
 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'
+import EvStation from '@mui/icons-material/EvStation'
 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'
+import Wallet from '@mui/icons-material/Wallet'
 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'
+import Block from '@mui/icons-material/Block'
 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.palette.primary.main,
+    color: theme.vars.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.palette.grey[800],
-              ...theme.applyStyles('light', {
-                color: theme.palette.grey[300],
+              color: theme.vars.palette.grey[300],
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.grey[800],
               }),
             })}
           />
@@ -79,9 +79,9 @@ export const ProgressToNextUpdate: React.FC<
             value={value}
             sx={(theme) => ({
               opacity: value === 100 && !isLoading ? 0.5 : 1,
-              color: theme.palette.primary.light,
-              ...theme.applyStyles('light', {
-                color: theme.palette.primary.main,
+              color: theme.vars.palette.primary.main,
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.primary.light,
               }),
             })}
           />

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.shape.borderRadiusTertiary,
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
   zIndex: 1110,
 }))
 

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,4 +1,5 @@
-import { ArrowDownward, ArrowForward } from '@mui/icons-material'
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import ArrowForward from '@mui/icons-material/ArrowForward'
 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,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
 import type { MouseEventHandler } from 'react'
 import { useState } from 'react'

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,5 +1,6 @@
 import { isGaslessStep } from '@lifi/sdk'
-import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material'
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 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'
+import Layers from '@mui/icons-material/Layers'
 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.shape.borderRadius}px`,
+              borderRadius: theme.vars.shape.borderRadius,
             })}
           />
         </Box>

package/src/components/RouteCard/RouteNotFoundCard.tsx

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

package/src/components/Routes/Routes.tsx

@@ -77,7 +77,7 @@ export const Routes: React.FC<CardProps> = (props) => {
           <RouteCard route={currentRoute} variant="cardless" active />
         )}
 
-        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
           <Box
             sx={{
               mt: 2,

package/src/components/Routes/RoutesExpanded.style.ts

@@ -33,7 +33,7 @@ interface ContainerProps extends ScopedCssBaselineProps {
 export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => ({
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   overflow: 'auto',
   width: 436,
   marginLeft: theme.spacing(3),
@@ -52,7 +52,7 @@ export const Container = styled(ScopedCssBaseline, {
 }))
 
 export const Header = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   backdropFilter: 'blur(12px)',
   display: 'flex',
   justifyContent: 'space-between',

package/src/components/Search/SearchInput.style.tsx

@@ -24,7 +24,7 @@ export const StickySearchInputContainer = styled(Box, {
   paddingBottom: theme.spacing(2),
   paddingLeft: theme.spacing(3),
   paddingRight: theme.spacing(3),
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   ...(theme.header?.position === 'fixed'
     ? {
         position: 'fixed',

package/src/components/Search/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { Search } from '@mui/icons-material'
+import Search from '@mui/icons-material/Search'
 import { FormControl, InputAdornment } from '@mui/material'
 import type { FocusEventHandler, FormEventHandler } from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'

package/src/components/Search/SearchNotFound.style.tsx

@@ -22,7 +22,7 @@ export const NotFoundContainer = styled(Box, {
 
 export const NotFoundMessage = styled(Typography)(({ theme }) => ({
   fontSize: 14,
-  color: theme.palette.text.secondary,
+  color: theme.vars.palette.text.secondary,
   textAlign: 'center',
   flex: 1,
   marginTop: theme.spacing(2),

package/src/components/Search/SearchNotFound.tsx

@@ -1,4 +1,4 @@
-import { SearchOff } from '@mui/icons-material'
+import SearchOff from '@mui/icons-material/SearchOff'
 import {
   NotFoundContainer,
   NotFoundIconContainer,

package/src/components/Select.tsx

@@ -10,7 +10,7 @@ import {
 export const Select = styled(MuiSelect, {
   shouldForwardProp: (prop) => prop !== 'dense',
 })<{ dense?: boolean }>(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.vars.palette.common.white,
   [`.${inputBaseClasses.input}`]: {
     padding: theme.spacing(2),
     display: 'flex',
@@ -18,7 +18,7 @@ export const Select = styled(MuiSelect, {
   },
   [`.${selectClasses.icon}`]: {
     right: 10,
-    color: theme.palette.text.primary,
+    color: theme.vars.palette.text.primary,
   },
   [`.${listItemIconClasses.root}`]: {
     minWidth: 38,
@@ -26,8 +26,8 @@ export const Select = styled(MuiSelect, {
   [`.${outlinedInputClasses.notchedOutline}`]: {
     display: 'none',
   },
-  ...theme.applyStyles('light', {
-    backgroundColor: theme.palette.common.white,
+  ...theme.applyStyles('dark', {
+    backgroundColor: theme.vars.palette.background.paper,
   }),
   variants: [
     {

package/src/components/SelectChainAndToken.tsx

@@ -43,7 +43,11 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
       sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
       {...props}
     >
-      <SelectTokenButton formType="from" compact={isCompact} />
+      <SelectTokenButton
+        formType="from"
+        compact={isCompact}
+        hiddenReverse={hiddenReverse}
+      />
       {!hiddenToToken ? (
         !hiddenReverse ? (
           <ReverseTokensButton vertical={!isCompact} />
@@ -52,7 +56,11 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
         )
       ) : null}
       {!hiddenToToken ? (
-        <SelectTokenButton formType="to" compact={isCompact} />
+        <SelectTokenButton
+          formType="to"
+          compact={isCompact}
+          hiddenReverse={hiddenReverse}
+        />
       ) : null}
     </Box>
   )

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -1,8 +1,6 @@
 import {
   CardContent as MuiCardContent,
   cardHeaderClasses,
-  darken,
-  lighten,
   styled,
 } from '@mui/material'
 import type { FormType } from '../../stores/form/types.js'
@@ -16,7 +14,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
   ({ theme, selected, compact }) => ({
     padding: theme.spacing(2),
     [`.${cardHeaderClasses.title}`]: {
-      color: theme.palette.text.secondary,
+      color: theme.vars.palette.text.secondary,
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -41,7 +39,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
         props: ({ selected }) => selected,
         style: {
           [`.${cardHeaderClasses.title}`]: {
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             fontWeight: 600,
           },
         },
@@ -83,32 +81,36 @@ export const SelectTokenCard = styled(Card)(({ theme }) => {
 
 export const CardContent = styled(MuiCardContent, {
   shouldForwardProp: (prop) => prop !== 'formType' && prop !== 'compact',
-})<{ formType: FormType; compact: boolean }>(({ theme, formType, compact }) => {
-  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
-  const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
-  const horizontal = compact ? direction : '50%'
-  const vertical = compact ? '50%' : direction
-  return {
-    padding: 0,
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-    '&:last-child': {
-      paddingBottom: 0,
-    },
-    ...(cardVariant !== 'outlined' && {
-      backgroundColor: theme.palette.background.paper,
-      mask: `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
-    }),
-    ...(cardVariant === 'filled' && {
-      '&:hover': {
-        cursor: 'pointer',
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.paper, 0.02)
-            : lighten(theme.palette.background.paper, 0.02),
+})<{ formType: FormType; compact: boolean; mask?: boolean }>(
+  ({ theme, formType, compact, mask = true }) => {
+    const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+    const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
+    const horizontal = compact ? direction : '50%'
+    const vertical = compact ? '50%' : direction
+    return {
+      padding: 0,
+      transition: theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+      }),
+      '&:last-child': {
+        paddingBottom: 0,
       },
-    }),
+      ...(cardVariant !== 'outlined' && {
+        backgroundColor: theme.vars.palette.background.paper,
+        mask: mask
+          ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
+          : 'none',
+      }),
+      ...(cardVariant === 'filled' && {
+        '&:hover': {
+          cursor: 'pointer',
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
+          ...theme.applyStyles('dark', {
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
+          }),
+        },
+      }),
+    }
   }
-})
+)

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -22,8 +22,9 @@ import {
 export const SelectTokenButton: React.FC<
   FormTypeProps & {
     compact: boolean
+    hiddenReverse?: boolean
   }
-> = ({ formType, compact }) => {
+> = ({ formType, compact, hiddenReverse }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
@@ -61,7 +62,7 @@ export const SelectTokenButton: React.FC<
       : t(`main.${formType}`)
   return (
     <SelectTokenCard component="button" onClick={onClick}>
-      <CardContent formType={formType} compact={compact}>
+      <CardContent formType={formType} compact={compact} mask={!hiddenReverse}>
         <CardTitle>{cardTitle}</CardTitle>
         {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
           <SelectTokenCardHeader
@@ -80,17 +81,15 @@ export const SelectTokenButton: React.FC<
               )
             }
             title={isSelected ? token.symbol : defaultPlaceholder}
-            titleTypographyProps={{
-              title: isSelected ? token.symbol : defaultPlaceholder,
+            slotProps={{
+              title: {
+                title: isSelected ? token.symbol : defaultPlaceholder,
+              },
+              subheader: {
+                title: isSelected ? chain.name : undefined,
+              },
             }}
             subheader={isSelected ? chain.name : null}
-            subheaderTypographyProps={
-              isSelected
-                ? {
-                    title: chain.name,
-                  }
-                : undefined
-            }
             selected={isSelected}
             compact={compact}
           />

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -6,7 +6,7 @@ export const SendToWalletCardHeader = styled(CardHeader, {
 })<{ selected?: boolean }>(({ theme }) => ({
   width: '100%',
   [`.${cardHeaderClasses.title}`]: {
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -36,7 +36,7 @@ export const SendToWalletCardHeader = styled(CardHeader, {
       props: ({ selected }) => selected,
       style: {
         [`.${cardHeaderClasses.title}`]: {
-          color: theme.palette.text.primary,
+          color: theme.vars.palette.text.primary,
           fontWeight: 600,
           width: 224,
           [theme.breakpoints.down(theme.breakpoints.values.sm)]: {

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import { CloseRounded } from '@mui/icons-material'
+import CloseRounded from '@mui/icons-material/CloseRounded'
 import { Box, Collapse } from '@mui/material'
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

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

package/src/components/Skeleton/WidgetSkeleton.style.tsx

@@ -6,7 +6,7 @@ export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
   flexDirection: 'row',
   justifyContent: 'flex-end',
   alignItems: 'center',
-  color: theme.palette?.text.primary,
+  color: theme.vars?.palette?.text.primary,
   paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
 }))
 
@@ -71,7 +71,7 @@ export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.vars.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: 'relative',
     top: 0,

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -71,19 +71,22 @@ export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
   const configTheme = config?.theme
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const appearanceMode =
-    !appearance || appearance === 'auto'
+    !appearance || appearance === 'system'
       ? prefersDarkMode
         ? 'dark'
         : 'light'
       : appearance
 
-  const theme = useMemo(
-    () => createTheme(appearanceMode, configTheme),
-    [appearanceMode, configTheme]
-  )
+  const theme = useMemo(() => createTheme(configTheme), [configTheme])
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider
+      theme={theme}
+      defaultMode={appearanceMode}
+      modeStorageKey="li.fi-widget-mode"
+      colorSchemeStorageKey="li.fi-widget-color-scheme"
+      disableTransitionOnChange
+    >
       <AppExpandedContainer>
         <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
           <SkeletonHeaderContainer>

package/src/components/Step/CircularProgress.style.tsx

@@ -3,7 +3,6 @@ import type { Theme } from '@mui/material'
 import {
   Box,
   CircularProgress as MuiCircularProgress,
-  alpha,
   circularProgressClasses,
   keyframes,
   styled,
@@ -16,16 +15,16 @@ const getStatusColor = (
 ) => {
   switch (status) {
     case 'ACTION_REQUIRED':
-      return alpha(theme.palette.info.main, 0.12)
+      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return alpha(theme.palette.warning.main, 0.48)
+        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
       }
-      return alpha(theme.palette.success.main, 0.12)
+      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
     case 'FAILED':
-      return alpha(theme.palette.error.main, 0.12)
+      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
     default:
-      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
   }
 }
 
@@ -35,7 +34,7 @@ export const CircularIcon = styled(Box, {
   ({ theme, status, substatus }) => ({
     backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? getStatusColor(theme, status, substatus)
-      : theme.palette.background.paper,
+      : theme.vars.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
     borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
@@ -68,10 +67,11 @@ const circleAnimation = keyframes`
 // This `styled()` function invokes keyframes. `styled-components` only supports keyframes
 // in string templates. Do not convert these styles in JS object as it will break.
 export const CircularProgressPending = styled(MuiCircularProgress)`
-  color: ${({ theme }) =>
-    theme.palette.mode === 'light'
-      ? theme.palette.primary.main
-      : theme.palette.primary.light};
+  color: ${({ theme }) => theme.vars.palette.primary.main};
+  ${({ theme }) =>
+    theme.applyStyles('dark', {
+      color: theme.vars.palette.primary.light,
+    })}
   animation-duration: 3s;
   position: absolute;
   .${circularProgressClasses.circle} {

package/src/components/Step/CircularProgress.tsx

@@ -1,11 +1,8 @@
 import type { Process } from '@lifi/sdk'
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material'
-import { darken } from '@mui/material'
+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 {
   CircularIcon,
   CircularProgressPending,
@@ -32,7 +29,7 @@ export function CircularProgress({ process }: { process: Process }) {
           sx={(theme) => ({
             position: 'absolute',
             fontSize: '1.5rem',
-            color: darken(theme.palette.warning.main, 0.32),
+            color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 68%, black)`,
           })}
         />
       ) : process.status === 'DONE' ? (

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,5 +1,6 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import { LinkRounded, Wallet } from '@mui/icons-material'
+import LinkRounded from '@mui/icons-material/LinkRounded'
+import Wallet from '@mui/icons-material/Wallet'
 import { Box, Link, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { CardIconButton } from '../Card/CardIconButton.js'

package/src/components/Step/StepProcess.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, Process } from '@lifi/sdk'
-import { OpenInNewRounded } from '@mui/icons-material'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, Link, Typography } from '@mui/material'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'