@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

package/src/components/SelectChainAndToken.tsx

@@ -24,7 +24,7 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
   const showReverseButton = !hiddenToToken && !hiddenFromToken
 
   return (
-    <Box sx={{ display: 'flex' }} {...props}>
+    <Box {...props} sx={{ display: 'flex', ...props.sx }}>
       {!hiddenFromToken ? (
         <SelectTokenButton formType="from" hiddenReverse={hiddenReverse} />
       ) : null}

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

@@ -18,14 +18,14 @@ const getStatusColor = (
     case 'ACTION_REQUIRED':
     case 'MESSAGE_REQUIRED':
     case 'RESET_REQUIRED':
-      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`
     case 'DONE':
       if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`
+        return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`
       }
-      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`
     case 'FAILED':
-      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
+      return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`
     default:
       return null
   }

package/src/components/Step/Step.tsx

@@ -87,18 +87,18 @@ export const Step: React.FC<{
           flex: 1,
         }}
       >
-        <CardTitle flex={1}>{getCardTitle()}</CardTitle>
-        <CardTitle sx={{ fontWeight: 600 }}>
+        <CardTitle sx={{ flex: 1 }}>{getCardTitle()}</CardTitle>
+        <Box sx={{ p: 2, pb: 0, fontSize: 14, fontWeight: 600 }}>
           <StepTimer step={step} />
-        </CardTitle>
+        </Box>
       </Box>
       <Box
         sx={{
           py: 1,
         }}
       >
-        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
-        <StepActions step={step} px={2} py={1} dense />
+        {fromToken ? <Token token={fromToken} sx={{ px: 2, py: 1 }} /> : null}
+        <StepActions step={step} sx={{ px: 2, py: 1 }} dense />
         {prepareActions(step.execution?.actions ?? []).map(
           (actionsGroup, index) => (
             <StepAction key={index} step={step} actionsGroup={actionsGroup} />
@@ -128,8 +128,7 @@ export const Step: React.FC<{
             token={toToken}
             impactToken={impactToken}
             enableImpactTokenTooltip
-            px={2}
-            py={1}
+            sx={{ px: 2, py: 1 }}
           />
         ) : null}
       </Box>

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

@@ -20,9 +20,9 @@ export const StepConnector: React.FC<
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+    borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
     ...theme.applyStyles('dark', {
-      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+      borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
     }),
   },
 }))
@@ -66,9 +66,9 @@ export const StepContent: React.FC<
 })<{ last?: boolean }>(({ theme }) => ({
   margin: theme.spacing(0, 0, 0, 2.375),
   paddingLeft: theme.spacing(4.375),
-  borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+  borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
   ...theme.applyStyles('dark', {
-    borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
   }),
   variants: [
     {

package/src/components/Switch.tsx

@@ -29,7 +29,7 @@ export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(
       borderColor: theme.vars.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
     },
     [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
       opacity: 0.7,
@@ -49,6 +49,6 @@ export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
   },
 }))

package/src/components/Tabs/NavigationTabs.tsx

@@ -26,9 +26,9 @@ export const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =
       height: '100%',
       width: '100%',
       borderRadius: theme.vars.shape.borderRadius,
-      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
       ...theme.applyStyles('dark', {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
       }),
     },
   }))

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

@@ -24,14 +24,14 @@ const Tabs = styled(MuiTabs)(({ theme }) => ({
 export const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(
   Tabs
 )(({ theme }) => ({
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   [`.${tabsClasses.indicator}`]: {
     backgroundColor: theme.vars.palette.background.paper,
   },
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     [`.${tabsClasses.indicator}`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
     },
   }),
 }))

package/src/components/Timer/TimerContent.tsx

@@ -17,6 +17,7 @@ export const TimerContent: FC<PropsWithChildren> = ({ children }) => {
         }}
       >
         <IconTypography
+          component="span"
           sx={{ marginRight: 0.5, fontSize: 16, display: 'inline-flex' }}
         >
           <AccessTimeFilled fontSize="inherit" />

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

@@ -25,7 +25,7 @@ export const TextSecondary: React.FC<
     {
       props: ({ dot }) => dot,
       style: {
-        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,
       },
     },
   ],

package/src/components/Token/Token.tsx

@@ -151,7 +151,7 @@ const TokenBase: FC<TokenProps & BoxProps> = ({
             })}
           </TextSecondary>
           {impactToken ? (
-            <TextSecondary px={0.5} dot>
+            <TextSecondary sx={{ px: 0.5 }} dot>
               &#x2022;
             </TextSecondary>
           ) : null}
@@ -176,7 +176,7 @@ const TokenBase: FC<TokenProps & BoxProps> = ({
             )
           ) : null}
           {!disableDescription ? (
-            <TextSecondary px={0.5} dot>
+            <TextSecondary sx={{ px: 0.5 }} dot>
               &#x2022;
             </TextSecondary>
           ) : null}

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -75,10 +75,12 @@ export const TokenDetailsSheetContent: React.ForwardRefExoticComponent<
               ) : (
                 <>
                   <Typography
-                    fontWeight={700}
-                    fontSize="24px"
-                    lineHeight="24px"
-                    color="text.primary"
+                    sx={{
+                      fontWeight: 700,
+                      fontSize: '24px',
+                      lineHeight: '24px',
+                      color: 'text.primary',
+                    }}
                   >
                     {token?.symbol || noDataLabel}
                   </Typography>

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

@@ -36,7 +36,7 @@ export const IconButton: React.FC<
   minWidth: 'unset',
   borderRadius: theme.vars.shape.borderRadiusTertiary,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
   svg: {
     fontSize: 14,

package/src/components/TransactionCard/ActiveTransactionCard.style.tsx

@@ -24,7 +24,7 @@ export const StatusRow: React.FC<React.ComponentProps<typeof Box>> = styled(
   gap: theme.spacing(1),
   padding: theme.spacing(1),
   borderRadius: theme.vars.shape.borderRadiusTertiary,
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 }))
 
 export const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =

package/src/components/TransactionCard/ActiveTransactionCard.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended } from '@lifi/sdk'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import { Box, Tooltip, Typography } from '@mui/material'
 import type { JSX, MouseEvent } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/components/TransactionDetails.tsx

@@ -113,7 +113,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 cursor: 'pointer',
               }}
             >
-              <IconTypography mr={0.5} fontSize={16}>
+              <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0-beta.13'
+export const version = '4.0.0-beta.17'

package/src/hooks/useAvailableChains.ts

@@ -18,6 +18,7 @@ const supportedChainTypes = [
   ChainType.SVM,
   ChainType.UTXO,
   ChainType.MVM,
+  ChainType.TVM,
 ]
 
 export const useAvailableChains = (

package/src/hooks/useExplorer.ts

@@ -6,6 +6,13 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
+const explorerPathOverrides: Partial<
+  Record<ChainType | ChainId, { txPath: string; addressPath: string }>
+> = {
+  [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
+  [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+}
+
 type TransactionLinkProps = { chain?: Chain | number } & (
   | {
       txHash: string
@@ -35,11 +42,15 @@ export const useExplorer = (): {
           resolvedChain.metamask.blockExplorerUrls[0])
         : explorerUrls?.internal?.[0]) || internalExplorerUrl
 
-    const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+    const baseUrl =
+      typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+
+    const overrides =
+      explorerPathOverrides[resolvedChain?.id as ChainId] ??
+      explorerPathOverrides[resolvedChain?.chainType as ChainType]
 
-    const defaultTxPath = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
-    const defaultAddressPath =
-      resolvedChain?.id === ChainId.SUI ? 'coin' : 'address'
+    const defaultTxPath = overrides?.txPath ?? 'tx'
+    const defaultAddressPath = overrides?.addressPath ?? 'address'
     const txPath =
       typeof explorerUrl === 'string'
         ? defaultTxPath
@@ -50,7 +61,7 @@ export const useExplorer = (): {
         : explorerUrl.addressPath || defaultAddressPath
 
     return {
-      url: sanitiseBaseUrl(url),
+      url: sanitiseBaseUrl(baseUrl),
       txPath,
       addressPath,
       resolvedChain,

package/src/hooks/useTokens.ts

@@ -48,6 +48,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
@@ -90,6 +91,7 @@ export const useTokens = (
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
+        ChainType.TVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(

package/src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount } from '@lifi/wallet-management'
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined'
 import { Button } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/MainPage/MainPage.tsx

@@ -49,14 +49,14 @@ export const MainPage: React.FC = () => {
       {custom ? (
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
-      <SelectChainAndToken mb={2} />
+      <SelectChainAndToken sx={marginSx} />
       {!custom || subvariantOptions?.custom === 'deposit' ? (
         <AmountInput formType="from" sx={marginSx} />
       ) : null}
       {!wideVariant ? <Routes sx={marginSx} /> : null}
       <SendToWalletButton sx={marginSx} />
-      {showGasRefuelMessage ? <GasRefuelMessage mb={2} /> : null}
-      <MainWarningMessages mb={2} />
+      {showGasRefuelMessage ? <GasRefuelMessage sx={marginSx} /> : null}
+      <MainWarningMessages sx={marginSx} />
       <Box
         sx={{
           display: 'flex',

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -69,7 +69,12 @@ export const RoutesPage = (): JSX.Element => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack className="long-list" direction="column" spacing={2} flex={1}>
+    <Stack
+      className="long-list"
+      direction="column"
+      spacing={2}
+      sx={{ flex: 1 }}
+    >
       {routeNotFound ? (
         <RouteNotFoundCard />
       ) : isLoading && !routes?.length ? (

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -1,5 +1,5 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import { Button, ListItemAvatar, ListItemText } from '@mui/material'

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,5 +1,5 @@
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
 import History from '@mui/icons-material/History'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'

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

@@ -3,10 +3,10 @@ import type React from 'react'
 
 export const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
   styled(Box)(({ theme }) => ({
-    background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
     borderRadius: '16px',
     padding: '16px',
     svg: {
-      fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
     },
   }))

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

@@ -16,18 +16,18 @@ export const SettingsFieldSet: React.FC<
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
   }),
 }))
 
 const settingsControlSelected = (theme: Theme) => ({
   backgroundColor: theme.vars.palette.background.paper,
-  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   ...theme.applyStyles('dark', {
-    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,
   }),
   borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })

package/src/pages/TransactionDetailsPage/ActionRow.style.tsx

@@ -8,7 +8,7 @@ export const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =
     gap: theme.spacing(1),
     padding: theme.spacing(1),
     borderRadius: theme.vars.shape.borderRadiusTertiary,
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   }))
 
 export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
@@ -19,7 +19,7 @@ export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
     width: 24,
     height: 24,
     borderRadius: '50%',
-    backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,
   }))
 
 export const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =

package/src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx

@@ -20,6 +20,6 @@ export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
   textDecoration: 'none',
   color: theme.vars.palette.text.primary,
   '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
   },
 }))

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -112,7 +112,7 @@ const ExchangeRateBottomSheetContent: React.FC<
       }}
     >
       <CenterContainer>
-        <IconCircle status="warning" mb={1}>
+        <IconCircle status="warning" sx={{ mb: 1 }}>
           <WarningRounded color="warning" />
         </IconCircle>
         <Typography

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -9,14 +9,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
   switch (status) {
     case RouteExecutionStatus.Done:
       return {
-        color: theme.vars.palette.success.mainChannel,
+        color: theme.vars.palette.success.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
       }
     case RouteExecutionStatus.Failed:
       return {
-        color: theme.vars.palette.error.mainChannel,
+        color: theme.vars.palette.error.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -25,14 +25,14 @@ const getStatusColor = (status: StatusColor, theme: Theme) => {
     case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
     case 'warning':
       return {
-        color: theme.vars.palette.warning.mainChannel,
+        color: theme.vars.palette.warning.main,
         alpha: 0.48,
         lightDarken: 0.32,
         darkDarken: 0,
       }
     default:
       return {
-        color: theme.vars.palette.primary.mainChannel,
+        color: theme.vars.palette.primary.main,
         alpha: 0.12,
         lightDarken: 0,
         darkDarken: 0,
@@ -57,7 +57,7 @@ export const IconCircle: React.FC<
     const statusConfig = getStatusColor(status, theme)
 
     return {
-      backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
+      backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,
       borderRadius: '50%',
       width: 72,
       height: 72,
@@ -65,13 +65,13 @@ export const IconCircle: React.FC<
       position: 'relative',
       placeItems: 'center',
       '& > svg': {
-        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
+        color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,
         width: 36,
         height: 36,
       },
       ...theme.applyStyles('dark', {
         '& > svg': {
-          color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+          color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,
           width: 36,
           height: 36,
         },

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -219,7 +219,7 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
     >
       {!showContractComponent ? (
         <CenterContainer>
-          <IconCircle status={status} mb={1}>
+          <IconCircle status={status} sx={{ mb: 1 }}>
             {status === RouteExecutionStatus.Idle ? (
               <InfoRounded color="primary" />
             ) : null}

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -1,8 +1,14 @@
 import type { Route } from '@lifi/sdk'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Typography } from '@mui/material'
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+} from '@mui/material'
 import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
-import { forwardRef, useRef } from 'react'
+import { forwardRef, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
@@ -44,6 +50,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   onCancel,
   onContinue,
 }) => {
+  const [accepted, setAccepted] = useState(false)
   const { t } = useTranslation()
   const ref = useRef<HTMLElement>(null)
   useSetContentHeight(ref)
@@ -59,7 +66,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
       }}
     >
       <CenterContainer>
-        <IconCircle status="warning" mb={1}>
+        <IconCircle status="warning" sx={{ mb: 1 }}>
           <WarningRounded color="warning" />
         </IconCircle>
         <Typography
@@ -173,10 +180,20 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
           %
         </Typography>
       </Box>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.highValueLoss')}
+        sx={{ mt: 1 }}
+      />
       <Box
         sx={{
           display: 'flex',
-          mt: 3,
+          mt: 1,
         }}
       >
         <Button variant="text" onClick={onCancel} fullWidth>
@@ -188,7 +205,12 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
             p: 1,
           }}
         />
-        <Button variant="contained" onClick={onContinue} fullWidth>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
           {t('button.continue')}
         </Button>
       </Box>

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -2,7 +2,7 @@ import type { ExchangeRateUpdateParams } from '@lifi/sdk'
 import Delete from '@mui/icons-material/Delete'
 import { Box, Button, Tooltip } from '@mui/material'
 import { useLocation, useNavigate } from '@tanstack/react-router'
-import { type JSX, useEffect, useMemo, useRef, useState } from 'react'
+import { type JSX, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
@@ -106,13 +106,6 @@ export const TransactionPage = (): JSX.Element | null => {
 
   useHeader(getHeaderTitle(), headerAction)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
-  useEffect(() => {
-    if (status === RouteExecutionStatus.Idle) {
-      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)
-    }
-  }, [])
-
   if (!route) {
     return null
   }
@@ -221,7 +214,7 @@ export const TransactionPage = (): JSX.Element | null => {
       {status === RouteExecutionStatus.Idle ||
       status === RouteExecutionStatus.Failed ? (
         <>
-          <WarningMessages mt={2} route={route} allowInteraction />
+          <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />
           <Box
             sx={{
               mt: 2,