@lifi/widget 3.19.0-beta.3 → 3.19.0

package/src/components/Timer/TimerContent.tsx

@@ -1,4 +1,4 @@
-import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
+import { AccessTimeFilled } from '@mui/icons-material'
 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, styled } from '@mui/material'
+import { Box, Typography, alpha, 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.vars.palette.text.secondary,
+  color: theme.palette.text.secondary,
   whiteSpace: 'nowrap',
   variants: [
     {
       props: ({ dot }) => dot,
       style: {
-        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
+        color: alpha(theme.palette.text.secondary, 0.56),
       },
     },
   ],
@@ -29,8 +29,8 @@ export const TokenDivider = styled(Box)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
-  borderColor: theme.vars.palette.grey[300],
-  ...theme.applyStyles('dark', {
-    borderColor: theme.vars.palette.grey[800],
+  borderColor: theme.palette.grey[800],
+  ...theme.applyStyles('light', {
+    borderColor: theme.palette.grey[300],
   }),
 }))

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

@@ -1,5 +1,6 @@
 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)(() => ({
@@ -18,9 +19,9 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
     color: 'inherit',
     backgroundColor: 'unset',
     minWidth: 'unset',
-    borderRadius: theme.vars.shape.borderRadiusTertiary,
+    borderRadius: theme.shape.borderRadiusTertiary,
     '&:hover': {
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: getContrastAlphaColor(theme, 0.04),
     },
     svg: {
       fontSize: 14,

package/src/components/TokenList/TokenList.tsx

@@ -53,11 +53,7 @@ export const TokenList: FC<TokenListProps> = ({
         .filter(
           (token) =>
             token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol
-              .toUpperCase()
-              // Replace ₮ with T for USD₮0
-              .replaceAll('₮', 'T')
-              .includes(searchFilter) ||
+            token.symbol.toUpperCase().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/OpenInNewRounded'
+import { OpenInNewRounded } from '@mui/icons-material'
 import {
   Avatar,
   Box,
@@ -107,10 +107,8 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       </ListItemAvatar>
       <ListItemText
         primary={token.symbol}
-        slotProps={{
-          secondary: {
-            component: 'div',
-          },
+        secondaryTypographyProps={{
+          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, RefObject } from 'react'
+import type { MouseEventHandler, MutableRefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
 export interface TokenListProps {
-  parentRef: RefObject<HTMLElement | null>
+  parentRef: MutableRefObject<HTMLElement | null>
   formType: FormType
   height: number
   onClick?(): void
@@ -14,7 +14,7 @@ export interface TokenListProps {
 export interface VirtualizedTokenListProps {
   account: Account
   tokens: TokenAmount[]
-  scrollElementRef: RefObject<HTMLElement | null>
+  scrollElementRef: MutableRefObject<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.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   cursor: 'pointer',
   '&:hover': {
     opacity: 1,

package/src/components/TransactionDetails.tsx

@@ -1,8 +1,10 @@
 import type { RouteExtended } from '@lifi/sdk'
 import { isGaslessStep } from '@lifi/sdk'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
+import {
+  ExpandLess,
+  ExpandMore,
+  LocalGasStationRounded,
+} from '@mui/icons-material'
 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.0-beta.3'
+export const version = '3.19.0'

package/src/hooks/useRoutes.ts

@@ -227,10 +227,10 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           : allowedExchanges
 
         const calculatedFee = await feeConfig?.calculateFee?.({
-          fromChainId,
-          toChainId,
-          fromTokenAddress,
-          toTokenAddress,
+          fromChain: fromChain!,
+          toChain: toChain!,
+          fromToken: fromToken!,
+          toToken: toToken!,
           fromAddress,
           toAddress,
           fromAmount,

package/src/hooks/useSetContentHeight.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react'
+import type { MutableRefObject } 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: RefObject<HTMLElement | null>,
+  ref: MutableRefObject<HTMLElement | null>,
   dependency?: unknown
 ) => {
   const elementId = useDefaultElementId()

package/src/i18n/en.json

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

package/src/index.ts

@@ -17,10 +17,9 @@ 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/SwapHoriz'
+import { SwapHoriz } from '@mui/icons-material'
 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/DeleteOutline'
+import { DeleteOutline } from '@mui/icons-material'
 import type { IconButtonProps } from '@mui/material'
 import {
   Button,

package/src/pages/LanguagesPage.tsx

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

package/src/pages/SelectEnabledToolsPage.tsx

@@ -1,8 +1,10 @@
 import type { ToolsResponse } from '@lifi/sdk'
-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 {
+  Check,
+  CheckBoxOutlineBlankOutlined,
+  CheckBoxOutlined,
+  IndeterminateCheckBoxOutlined,
+} from '@mui/icons-material'
 import {
   Avatar,
   IconButton,

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -12,6 +12,7 @@ import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
+import { HiddenUI } from '../../types/widget.js'
 import { SearchTokenInput } from './SearchTokenInput.js'
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
@@ -26,7 +27,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   const swapOnly = useSwapOnly()
 
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, hiddenUI } = useWidgetConfig()
   const { t } = useTranslation()
   const title =
     formType === 'from'
@@ -37,7 +38,8 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   useHeader(title)
 
-  const hideChainSelect = swapOnly && formType === 'to'
+  const hideChainSelect =
+    (swapOnly && formType === 'to') || hiddenUI?.includes(HiddenUI.ChainSelect)
 
   return (
     <FullPageContainer disableGutters>

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

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

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,8 +1,10 @@
-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 {
+  ContentCopyRounded,
+  DeleteOutline,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedIn,
+} from '@mui/icons-material'
 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,7 +1,6 @@
-import Wallet from '@mui/icons-material/Wallet'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Wallet, WarningRounded } from '@mui/icons-material'
 import { Button, Typography } from '@mui/material'
-import type { RefObject } from 'react'
+import type { MutableRefObject } from 'react'
 import { forwardRef, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -34,7 +33,7 @@ export const ConfirmAddressSheet = forwardRef<
   ConfirmAddressSheetProps
 >((props, ref) => {
   const handleClose = () => {
-    ;(ref as RefObject<BottomSheetBase>).current?.close()
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
   }
 
   return (

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

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

package/src/pages/SendToWallet/RecentWalletsPage.tsx

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

package/src/pages/SendToWallet/SendToWalletPage.tsx

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

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

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

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,10 +1,11 @@
 import { Box, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  background: getContrastAlphaColor(theme, 0.04),
   borderRadius: '16px',
   padding: '16px',
   svg: {
-    fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+    fill: getContrastAlphaColor(theme, 0.4),
   },
 }))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -1,4 +1,4 @@
-import InfoRounded from '@mui/icons-material/InfoRounded'
+import { InfoRounded } from '@mui/icons-material'
 import {
   Box,
   Button,

package/src/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk'
-import Route from '@mui/icons-material/Route'
+import { Route } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'

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',
-  borderRadius: theme.vars.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.08),
+  borderRadius: theme.shape.borderRadius,
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-  ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
   }),
 }))
 
 const slippageControlSelected = (theme: Theme) => ({
-  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)`,
+  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)}`,
 })
 
 interface SlippageDefaultProps {
@@ -35,11 +35,10 @@ interface SlippageDefaultProps {
 
 export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...slippageControlSelected(theme),
           },
         }
       : {}
@@ -50,7 +49,7 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
       fontSize: '1rem',
       fontWeight: 700,
       '&:focus': {
-        ...slippageControlSelectedStyles,
+        ...slippageControlSelected(theme),
       },
       ...selectedStyle,
     }
@@ -59,11 +58,10 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
 
 export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...slippageControlSelected(theme),
           },
         }
       : {}
@@ -82,7 +80,7 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
           opacity: 1,
         },
         '&:focus': {
-          ...slippageControlSelectedStyles,
+          ...slippageControlSelected(theme),
         },
         ...selectedStyle,
       },

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,5 +1,4 @@
-import Percent from '@mui/icons-material/Percent'
-import WarningRounded from '@mui/icons-material/WarningRounded'
+import { Percent, WarningRounded } from '@mui/icons-material'
 import { Box, Typography, debounce } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'