@lifi/widget 3.12.6-beta.0 → 3.13.0

package/src/components/Header/WalletMenu.tsx

@@ -30,7 +30,12 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
 
   return (
     <>
-      <Box display="flex" flexDirection="column">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
         {accounts.map((account) => {
           const chain = getChainById(account.chainId)
           const walletAddress = shortenAddress(account.address)
@@ -41,7 +46,13 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
 
           return (
             <MenuItem key={account.address} disableTouchRipple>
-              <Box flex={1} display="flex" alignItems="center">
+              <Box
+                sx={{
+                  flex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
                 {chain?.logoURI ? (
                   <Badge
                     overlap="circular"
@@ -73,7 +84,11 @@ export const WalletMenu = ({ onClose }: { onClose: () => void }) => {
                 )}
                 {walletAddress}
               </Box>
-              <Box ml={2}>
+              <Box
+                sx={{
+                  ml: 2,
+                }}
+              >
                 <IconButton size="medium" onClick={handleCopyAddress}>
                   <ContentCopyRounded />
                 </IconButton>

package/src/components/IconTypography.ts

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

package/src/components/ListItemButton.tsx

@@ -1,17 +1,26 @@
 import { ListItemButton as MuiListItemButton, styled } from '@mui/material'
 import { getContrastAlphaColor } from '../utils/colors.js'
 
-export const ListItemButton = styled(MuiListItemButton)(
-  ({ theme, disabled }) => {
-    const backgroundHoverColor = getContrastAlphaColor(theme, 0.04)
-    return {
-      borderRadius: theme.shape.borderRadius,
-      paddingLeft: theme.spacing(1.5),
-      height: 56,
-      '&:hover': {
-        backgroundColor: !disabled && backgroundHoverColor,
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+  const backgroundHoverColor = getContrastAlphaColor(theme, 0.04)
+  return {
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+      backgroundColor: backgroundHoverColor,
+    },
+    variants: [
+      {
+        props: ({ disabled }) => disabled,
+        style: {
+          opacity: 0.5,
+          cursor: 'auto',
+          '&:hover': {
+            backgroundColor: 'none',
+          },
+        },
       },
-      ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
-    }
+    ],
   }
-)
+})

package/src/components/NotFound.tsx

@@ -15,17 +15,28 @@ export const NotFound: React.FC = () => {
         padding: 3,
       }}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <Block fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('tooltip.notFound.title')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('tooltip.notFound.text')}
       </Typography>

package/src/components/PageContainer.ts

@@ -10,18 +10,22 @@ export interface PageContainerProps extends ContainerProps {
 export const PageContainer = styled(Container, {
   shouldForwardProp: (prop) =>
     !['halfGutters', 'topGutters', 'bottomGutters'].includes(prop as string),
-})<PageContainerProps>(
-  ({ theme, disableGutters, halfGutters, topGutters, bottomGutters }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    padding: disableGutters
-      ? 0
-      : theme.spacing(
-          topGutters ? 1 : 0,
-          halfGutters ? 1.5 : 3,
-          bottomGutters ? 3 : 0,
-          halfGutters ? 1.5 : 3
-        ),
-  })
-)
+})<PageContainerProps>(({ theme, halfGutters, topGutters, bottomGutters }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  padding: theme.spacing(
+    topGutters ? 1 : 0,
+    halfGutters ? 1.5 : 3,
+    bottomGutters ? 3 : 0,
+    halfGutters ? 1.5 : 3
+  ),
+  variants: [
+    {
+      props: ({ disableGutters }) => disableGutters,
+      style: {
+        padding: 0,
+      },
+    },
+  ],
+}))

package/src/components/PoweredBy/PoweredBy.tsx

@@ -19,10 +19,10 @@ export const PoweredBy: React.FC = () => {
 
   return (
     <Box
-      pt={1}
-      pb={2}
-      flex={1}
       sx={{
+        pt: 1,
+        pb: 2,
+        flex: 1,
         display: 'flex',
         alignItems: 'flex-end',
         justifyContent: 'flex-end',
@@ -36,14 +36,22 @@ export const PoweredBy: React.FC = () => {
           color="text.primary"
         >
           <Typography
-            color="text.secondary"
-            fontSize={12}
-            fontWeight={500}
-            px={0.5}
+            sx={{
+              color: 'text.secondary',
+              fontSize: 12,
+              fontWeight: 500,
+              px: 0.5,
+            }}
           >
             Powered by
           </Typography>
-          <Typography color="text.primary" fontSize={12} fontWeight={600}>
+          <Typography
+            sx={{
+              color: 'text.primary',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
             {poweredByConfig[poweredBy].text}
           </Typography>
         </Link>

package/src/components/ProgressToNextUpdate.tsx

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

package/src/components/RouteCard/RouteCard.tsx

@@ -48,9 +48,19 @@ export const RouteCard: React.FC<
   )
 
   const cardContent = (
-    <Box flex={1}>
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
       {subvariant !== 'refuel' && route.tags?.length ? (
-        <Box display="flex" alignItems="center" mb={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
           {tags?.length ? (
             <CardLabel type={active ? 'active' : undefined}>
               <CardLabelTypography>

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -22,25 +22,40 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
     getAccumulatedFeeCostsBreakdown(route)
   return (
     <Box
-      display="flex"
-      alignItems="center"
-      justifyContent={'space-between'}
-      flex={1}
-      mt={2}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1,
+        mt: 2,
+      }}
     >
       <TokenRate route={route} />
-      <Box display="flex" alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
-          <Box display="flex" mr={1.5} alignItems="center">
+          <Box
+            sx={{
+              display: 'flex',
+              mr: 1.5,
+              alignItems: 'center',
+            }}
+          >
             <IconTypography mr={0.5} fontSize={16}>
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
-              fontSize={14}
-              color="text.primary"
-              fontWeight={600}
-              lineHeight={1}
               data-value={combinedFeesUSD}
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
             >
               {t('format.currency', {
                 value: combinedFeesUSD,
@@ -49,15 +64,22 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
           </Box>
         </FeeBreakdownTooltip>
         <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-          <Box display="flex" alignItems="center">
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
             <IconTypography mr={0.5} fontSize={16}>
               <AccessTimeFilled fontSize="inherit" />
             </IconTypography>
             <Typography
-              fontSize={14}
-              color="text.primary"
-              fontWeight={600}
-              lineHeight={1}
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
             >
               {(executionTimeSeconds < 60
                 ? executionTimeSeconds

package/src/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -9,26 +9,45 @@ export const RouteCardEssentialsExpanded: React.FC<
 > = ({ route }) => {
   const { t } = useTranslation()
   return (
-    <Box flex={1} mt={2}>
-      <Box display="flex" alignItems="center">
+    <Box
+      sx={{
+        flex: 1,
+        mt: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <IconTypography ml={1} mr={3}>
           <Layers />
         </IconTypography>
         <Typography
-          fontSize={16}
-          color="text.primary"
-          fontWeight="600"
-          lineHeight={1.125}
+          sx={{
+            fontSize: 16,
+            color: 'text.primary',
+            fontWeight: '600',
+            lineHeight: 1.125,
+          }}
         >
           {route.steps.length}
         </Typography>
       </Box>
-      <Box mt={0.5} ml={7}>
+      <Box
+        sx={{
+          mt: 0.5,
+          ml: 7,
+        }}
+      >
         <Typography
-          fontSize={12}
-          color="text.secondary"
-          fontWeight="500"
-          lineHeight={1.125}
+          sx={{
+            fontSize: 12,
+            color: 'text.secondary',
+            fontWeight: '500',
+            lineHeight: 1.125,
+          }}
         >
           {t('tooltip.numberOfSteps')}
         </Typography>

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -11,9 +11,19 @@ export const RouteCardSkeleton: React.FC<
   const { subvariant } = useWidgetConfig()
 
   const cardContent = (
-    <Box flex={1}>
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
       {subvariant !== 'refuel' && subvariant !== 'custom' ? (
-        <Box display="flex" alignItems="center" mb={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
           <Skeleton
             variant="rectangular"
             width={112}
@@ -25,7 +35,13 @@ export const RouteCardSkeleton: React.FC<
         </Box>
       ) : null}
       <TokenSkeleton />
-      <Box mt={2} display="flex" justifyContent="space-between">
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
         <Skeleton variant="text" width={64} height={20} />
         <Skeleton variant="text" width={56} height={20} />
       </Box>

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -7,25 +7,36 @@ export const RouteNotFoundCard: React.FC = () => {
   return (
     <Box
       sx={{
+        py: 1.625,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flexDirection: 'column',
         flex: 1,
       }}
-      py={1.625}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <Route fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('info.title.routeNotFound')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('info.message.routeNotFound')}
       </Typography>

package/src/components/Routes/Routes.tsx

@@ -64,7 +64,11 @@ export const Routes: React.FC<CardProps> = (props) => {
           right: 8,
         }}
       />
-      <Box p={2}>
+      <Box
+        sx={{
+          p: 2,
+        }}
+      >
         {isLoading ? (
           <RouteCardSkeleton variant="cardless" />
         ) : !currentRoute ? (
@@ -74,7 +78,11 @@ export const Routes: React.FC<CardProps> = (props) => {
         )}
 
         <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
-          <Box mt={2}>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
             <ButtonTertiary onClick={handleCardClick} fullWidth>
               {t('button.showAll')}
             </ButtonTertiary>

package/src/components/Routes/RoutesExpanded.tsx

@@ -136,7 +136,14 @@ export const RoutesExpandedElement = () => {
         <Container enableColorScheme minimumHeight={isLoading}>
           <ScrollableContainer>
             <Header>
-              <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
+              <Typography
+                noWrap
+                sx={{
+                  fontSize: 18,
+                  fontWeight: '700',
+                  flex: 1,
+                }}
+              >
                 {title}
               </Typography>
               <ProgressToNextUpdate
@@ -148,7 +155,14 @@ export const RoutesExpandedElement = () => {
               />
             </Header>
             <PageContainer>
-              <Stack direction="column" spacing={2} flex={1} paddingBottom={3}>
+              <Stack
+                direction="column"
+                spacing={2}
+                sx={{
+                  flex: 1,
+                  paddingBottom: 3,
+                }}
+              >
                 {routeNotFound ? (
                   <RouteNotFoundCard />
                 ) : isLoading || (isFetching && !routesRef.current?.length) ? (

package/src/components/Select.tsx

@@ -9,13 +9,10 @@ import {
 
 export const Select = styled(MuiSelect, {
   shouldForwardProp: (prop) => prop !== 'dense',
-})<{ dense?: boolean }>(({ theme, dense }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.white
-      : theme.palette.background.paper,
+})<{ dense?: boolean }>(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
   [`.${inputBaseClasses.input}`]: {
-    padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+    padding: theme.spacing(2),
     display: 'flex',
     alignItems: 'center',
   },
@@ -29,4 +26,17 @@ export const Select = styled(MuiSelect, {
   [`.${outlinedInputClasses.notchedOutline}`]: {
     display: 'none',
   },
+  ...theme.applyStyles('light', {
+    backgroundColor: theme.palette.common.white,
+  }),
+  variants: [
+    {
+      props: ({ dense }) => dense,
+      style: {
+        [`.${inputBaseClasses.input}`]: {
+          padding: theme.spacing(1.625, 2, 1.5, 2),
+        },
+      },
+    },
+  ],
 }))

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

@@ -16,28 +16,54 @@ export const SelectTokenCardHeader = styled(CardHeader, {
   ({ theme, selected, compact }) => ({
     padding: theme.spacing(2),
     [`.${cardHeaderClasses.title}`]: {
-      color: selected
-        ? theme.palette.text.primary
-        : theme.palette.text.secondary,
+      color: theme.palette.text.secondary,
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 96 : 256,
+      width: 256,
       fontSize: compact && !selected ? 16 : 18,
-      fontWeight: selected ? 600 : 500,
+      fontWeight: 500,
       [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
+        width: 224,
       },
     },
     [`.${cardHeaderClasses.subheader}`]: {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 96 : 256,
+      width: 256,
       [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-        width: compact ? 96 : 224,
+        width: 224,
       },
     },
+    variants: [
+      {
+        props: ({ selected }) => selected,
+        style: {
+          [`.${cardHeaderClasses.title}`]: {
+            color: theme.palette.text.primary,
+            fontWeight: 600,
+          },
+        },
+      },
+      {
+        props: ({ compact }) => compact,
+        style: {
+          [`.${cardHeaderClasses.title}`]: {
+            width: 96,
+            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+              width: 96,
+            },
+          },
+          [`.${cardHeaderClasses.subheader}`]: {
+            width: 96,
+            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+              width: 96,
+            },
+          },
+        },
+      },
+    ],
   })
 )