@lifi/widget 3.19.0-beta.2 → 3.19.0

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -8,6 +8,7 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -25,7 +26,7 @@ export const SelectTokenButton: React.FC<
 > = ({ formType, compact }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, subvariant } = useWidgetConfig()
+  const { disabledUI, subvariant, hiddenUI } = useWidgetConfig()
   const swapOnly = useSwapOnly()
   const tokenKey = FormKeyHelper.getTokenKey(formType)
   const [chainId, tokenAddress] = useFieldValues(
@@ -50,7 +51,8 @@ export const SelectTokenButton: React.FC<
   const defaultPlaceholder =
     formType === 'to' && subvariant === 'refuel'
       ? t('main.selectChain')
-      : formType === 'to' && swapOnly
+      : (formType === 'to' && swapOnly) ||
+          hiddenUI?.includes(HiddenUI.ChainSelect)
         ? t('main.selectToken')
         : t('main.selectChainAndToken')
   const cardTitle: string =

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.vars.palette.text.secondary,
+    color: theme.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.vars.palette.text.primary,
+          color: theme.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/CloseRounded'
+import { CloseRounded } from '@mui/icons-material'
 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/Wallet'
+import { Wallet } from '@mui/icons-material'
 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.vars?.palette?.text.primary,
+  color: theme.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.vars.palette.background.default,
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: 'relative',
     top: 0,

package/src/components/Skeleton/WidgetSkeleton.tsx

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

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

@@ -3,6 +3,7 @@ import type { Theme } from '@mui/material'
 import {
   Box,
   CircularProgress as MuiCircularProgress,
+  alpha,
   circularProgressClasses,
   keyframes,
   styled,
@@ -15,16 +16,16 @@ const getStatusColor = (
 ) => {
   switch (status) {
     case 'ACTION_REQUIRED':
-      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
+      return alpha(theme.palette.info.main, 0.12)
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
+        return alpha(theme.palette.warning.main, 0.48)
       }
-      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
+      return alpha(theme.palette.success.main, 0.12)
     case 'FAILED':
-      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
+      return alpha(theme.palette.error.main, 0.12)
     default:
-      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
   }
 }
 
@@ -34,7 +35,7 @@ export const CircularIcon = styled(Box, {
   ({ theme, status, substatus }) => ({
     backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
       ? getStatusColor(theme, status, substatus)
-      : theme.vars.palette.background.paper,
+      : theme.palette.background.paper,
     borderStyle: 'solid',
     borderColor: getStatusColor(theme, status, substatus),
     borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
@@ -67,11 +68,10 @@ 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.vars.palette.primary.main};
-  ${({ theme }) =>
-    theme.applyStyles('dark', {
-      color: theme.vars.palette.primary.light,
-    })}
+  color: ${({ theme }) =>
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.main
+      : theme.palette.primary.light};
   animation-duration: 3s;
   position: absolute;
   .${circularProgressClasses.circle} {

package/src/components/Step/CircularProgress.tsx

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

package/src/components/Step/DestinationWalletAddress.tsx

@@ -1,6 +1,5 @@
 import type { LiFiStepExtended } from '@lifi/sdk'
-import LinkRounded from '@mui/icons-material/LinkRounded'
-import Wallet from '@mui/icons-material/Wallet'
+import { LinkRounded, Wallet } from '@mui/icons-material'
 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/OpenInNewRounded'
+import { OpenInNewRounded } from '@mui/icons-material'
 import { Box, Link, Typography } from '@mui/material'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useProcessMessage } from '../../hooks/useProcessMessage.js'

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

@@ -3,6 +3,7 @@ import {
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
   Typography,
+  alpha,
   stepConnectorClasses,
   stepLabelClasses,
   styled,
@@ -17,9 +18,9 @@ export const StepConnector = styled(MuiStepConnector, {
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-    ...theme.applyStyles('dark', {
-      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    borderColor: alpha(theme.palette.common.white, 0.16),
+    ...theme.applyStyles('light', {
+      borderColor: alpha(theme.palette.common.black, 0.12),
     }),
   },
 }))
@@ -48,19 +49,16 @@ export const StepLabelTypography = styled(Typography)(({ theme }) => ({
   fontSize: 12,
   fontWeight: 500,
   lineHeight: 1.325,
-  color: theme.vars.palette.text.secondary,
+  color: theme.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,
@@ -70,9 +68,12 @@ 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.vars.palette.text.primary,
+  color: theme.palette.text.primary,
   backgroundColor: 'transparent',
 }))

package/src/components/StepActions/StepActions.tsx

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

package/src/components/Switch.tsx

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

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

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

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,

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.2'
+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/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>