@lifi/widget 3.12.6-beta.0 → 3.13.0

package/src/components/AppContainer.tsx

@@ -16,30 +16,32 @@ import { ElementId, createElementId } from '../utils/elements.js'
 
 export const AppExpandedContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => ({
+})<{ variant?: WidgetVariant }>(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'start',
   flex: 1,
   height:
-    variant === 'drawer'
-      ? 'none'
-      : theme.container?.display === 'flex'
-        ? '100%'
-        : theme.container?.maxHeight
-          ? 'auto'
-          : theme.container?.height || 'auto',
+    theme.container?.display === 'flex'
+      ? '100%'
+      : theme.container?.maxHeight
+        ? 'auto'
+        : theme.container?.height || 'auto',
+  variants: [
+    {
+      props: {
+        variant: 'drawer',
+      },
+      style: {
+        height: 'none',
+      },
+    },
+  ],
 }))
 
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
-})<{ variant?: WidgetVariant }>(({ theme, variant }) => {
-  const container = { ...theme.container }
-
-  if (variant === 'drawer') {
-    container.height = '100%'
-  }
-
+})<{ variant?: WidgetVariant }>(({ theme }) => {
   return {
     position: 'relative',
     boxSizing: 'content-box',
@@ -50,15 +52,24 @@ export const RelativeContainer = styled(Box, {
     overflow: 'auto',
     flex: 1,
     zIndex: 0,
-    ...container,
+    ...theme.container,
     maxHeight:
-      variant === 'drawer'
-        ? 'none'
-        : theme.container?.display === 'flex' && !theme.container?.height
-          ? '100%'
-          : theme.container?.maxHeight
-            ? theme.container?.maxHeight
-            : theme.container?.height || defaultMaxHeight,
+      theme.container?.display === 'flex' && !theme.container?.height
+        ? '100%'
+        : theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || defaultMaxHeight,
+    variants: [
+      {
+        props: {
+          variant: 'drawer',
+        },
+        style: {
+          maxHeight: 'none',
+          height: '100%',
+        },
+      },
+    ],
   }
 })
 

package/src/components/Avatar/Avatar.style.tsx

@@ -36,27 +36,27 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    background:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: root?.height,
     width: root?.width,
     color: theme.palette.text.secondary,
     mask: avatarMask16,
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
+    }),
   }
 })
 
 export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
   return {
-    background:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
+    background: theme.palette.grey[800],
     borderRadius: '50%',
     height: 16,
     width: 16,
+    ...theme.applyStyles('light', {
+      background: theme.palette.grey[300],
+    }),
   }
 })
 

package/src/components/Card/Card.tsx

@@ -10,45 +10,68 @@ export interface CardProps extends MuiCardProps {
 export const Card = styled(MuiCard, {
   shouldForwardProp: (prop) =>
     !['type', 'indented', 'selectionColor'].includes(prop as string),
-})<CardProps>(({ theme, indented, selectionColor, type }) => {
+})<CardProps>(({ theme }) => {
   return {
-    padding: indented ? theme.spacing(2) : 0,
-    ...(type === 'selected' &&
-      selectionColor === 'primary' && {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? lighten(theme.palette.primary.main, 0.95)
-            : darken(theme.palette.primary.main, 0.65),
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: theme.palette.primary.main,
-        '&:hover': {
-          backgroundColor:
-            theme.palette.mode === 'light'
-              ? lighten(theme.palette.primary.main, 0.9)
-              : darken(theme.palette.primary.main, 0.6),
+    padding: 0,
+    variants: [
+      {
+        props: ({ indented }) => indented,
+        style: {
+          padding: theme.spacing(2),
         },
-      }),
-    ...(type === 'selected' &&
-      selectionColor === 'secondary' && {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? lighten(theme.palette.secondary.main, 0.85)
-            : darken(theme.palette.secondary.main, 0.76),
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: alpha(theme.palette.secondary.main, 0.2),
-        '&:hover': {
-          backgroundColor:
-            theme.palette.mode === 'light'
-              ? lighten(theme.palette.secondary.main, 0.8)
-              : darken(theme.palette.secondary.main, 0.72),
+      },
+      {
+        props: {
+          selectionColor: 'primary',
+          type: 'selected',
         },
-      }),
-    ...(type === 'error' && {
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: theme.palette.error.main,
-    }),
+        style: {
+          backgroundColor: darken(theme.palette.primary.main, 0.65),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.palette.primary.main,
+          '&:hover': {
+            backgroundColor: darken(theme.palette.primary.main, 0.6),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.primary.main, 0.9),
+            }),
+          },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.primary.main, 0.95),
+          }),
+        },
+      },
+      {
+        props: {
+          selectionColor: 'secondary',
+          type: 'selected',
+        },
+        style: {
+          backgroundColor: darken(theme.palette.secondary.main, 0.76),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: alpha(theme.palette.secondary.main, 0.2),
+          '&:hover': {
+            backgroundColor: darken(theme.palette.secondary.main, 0.72),
+            ...theme.applyStyles('light', {
+              backgroundColor: lighten(theme.palette.secondary.main, 0.8),
+            }),
+          },
+          ...theme.applyStyles('light', {
+            backgroundColor: lighten(theme.palette.secondary.main, 0.85),
+          }),
+        },
+      },
+      {
+        props: {
+          type: 'error',
+        },
+        style: {
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.palette.error.main,
+        },
+      },
+    ],
   }
 })

package/src/components/Card/CardLabel.tsx

@@ -3,54 +3,80 @@ import { blend } from '../../utils/colors.js'
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' }>(({ theme, type }) => {
-  const backgroundColor =
-    type === 'active'
-      ? theme.palette.mode === 'light'
-        ? theme.palette.secondary.main
-        : blend(
-            theme.palette.background.paper,
-            theme.palette.secondary.main,
-            0.8
-          )
-      : theme.palette.mode === 'light'
-        ? blend(
-            theme.palette.background.paper,
-            theme.palette.common.black,
-            0.12
-          )
-        : blend(
-            theme.palette.background.paper,
+})<{ type?: 'active' }>(({ theme }) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 24,
+  minWidth: 24,
+  userSelect: 'none',
+  fontSize: '1rem',
+  marginRight: theme.spacing(1),
+  backgroundColor: blend(
+    theme.palette.background.paper,
+    theme.palette.common.white,
+    0.16
+  ),
+  color: theme.palette.text.primary,
+  ...theme.applyStyles('light', {
+    backgroundColor: blend(
+      theme.palette.background.paper,
+      theme.palette.common.black,
+      0.12
+    ),
+  }),
+  variants: [
+    {
+      props: { type: 'active' },
+      style: {
+        backgroundColor: blend(
+          theme.palette.background.paper,
+          theme.palette.secondary.main,
+          0.8
+        ),
+        color:
+          getContrastRatio(
             theme.palette.common.white,
-            0.16
-          )
-  return {
-    backgroundColor,
-    borderRadius: theme.shape.borderRadius,
-    color:
-      getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-    padding: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 24,
-    minWidth: 24,
-    userSelect: 'none',
-    fontSize: '1rem',
-    marginRight: theme.spacing(1),
-  }
-})
+            blend(
+              theme.palette.background.paper,
+              theme.palette.secondary.main,
+              0.8
+            )
+          ) >= 3
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.secondary.main,
+          color:
+            getContrastRatio(
+              theme.palette.common.white,
+              theme.palette.secondary.main
+            ) >= 3
+              ? theme.palette.common.white
+              : theme.palette.common.black,
+        }),
+      },
+    },
+  ],
+}))
 
 export const CardLabelTypography = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'icon' }>(({ theme, type }) => ({
-  padding:
-    type === 'icon'
-      ? theme.spacing(0.75, 0, 0.75, 0.75)
-      : theme.spacing(0.75, 1.5),
+})<{ type?: 'icon' }>(({ theme }) => ({
+  padding: theme.spacing(0.75, 1.5),
   fontSize: 12,
   lineHeight: 1,
   fontWeight: '600',
+  variants: [
+    {
+      props: {
+        type: 'icon',
+      },
+      style: {
+        padding: theme.spacing(0.75, 0, 0.75, 0.75),
+      },
+    },
+  ],
 }))

package/src/components/Card/CardTitle.tsx

@@ -2,7 +2,7 @@ import { Typography, styled } from '@mui/material'
 
 export const CardTitle = styled(Typography, {
   shouldForwardProp: (prop) => !['required'].includes(prop as string),
-})<{ required?: boolean }>(({ theme, required }) => ({
+})<{ required?: boolean }>(({ theme }) => ({
   fontSize: 14,
   lineHeight: 1,
   fontWeight: 700,
@@ -10,7 +10,17 @@ export const CardTitle = styled(Typography, {
   textAlign: 'left',
   color: theme.palette.text.primary,
   '&:after': {
-    content: required ? '" *"' : 'none',
+    content: 'none',
     color: theme.palette.error.main,
   },
+  variants: [
+    {
+      props: ({ required }) => required,
+      style: {
+        '&:after': {
+          content: '" *"',
+        },
+      },
+    },
+  ],
 }))

package/src/components/ChainSelect/ChainSelect.tsx

@@ -90,7 +90,13 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
               placeItems: 'center',
             }}
           >
-            <Typography fontWeight={500}>+{chainsToHide}</Typography>
+            <Typography
+              sx={{
+                fontWeight: 500,
+              }}
+            >
+              +{chainsToHide}
+            </Typography>
           </Box>
         </ChainCard>
       ) : null}

package/src/components/ContractComponent/NFT/NFTBase.tsx

@@ -14,8 +14,16 @@ export const NFTBase: React.FC<NFTProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <Box p={2}>
-      <Box display="flex">
+    <Box
+      sx={{
+        p: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+        }}
+      >
         {isLoading ? (
           <Skeleton
             width={96}
@@ -26,25 +34,44 @@ export const NFTBase: React.FC<NFTProps> = ({
         ) : (
           <PreviewAvatar src={imageUrl} />
         )}
-        <Box ml={2}>
+        <Box
+          sx={{
+            ml: 2,
+          }}
+        >
           {isLoading ? (
             <Skeleton width={144} height={21} variant="text" />
           ) : (
-            <Typography fontSize={14} color="text.secondary">
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
               {collectionName}
             </Typography>
           )}
           {isLoading ? (
             <Skeleton width={112} height={27} variant="text" />
           ) : (
-            <Typography fontSize={18} fontWeight={600}>
+            <Typography
+              sx={{
+                fontSize: 18,
+                fontWeight: 600,
+              }}
+            >
               {assetName}
             </Typography>
           )}
           {isLoading ? (
             <Skeleton width={128} height={21} variant="text" />
           ) : owner ? (
-            <Typography fontSize={14} color="text.secondary">
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
               {t('main.ownedBy')}{' '}
               <Link
                 href={owner.url}

package/src/components/FeeBreakdownTooltip.tsx

@@ -28,7 +28,11 @@ export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
             </Box>
           ) : null}
           {feeCosts?.length ? (
-            <Box mt={0.5}>
+            <Box
+              sx={{
+                mt: 0.5,
+              }}
+            >
               {t('main.fees.provider')}
               {getFeeBreakdownTypography(feeCosts, t)}
             </Box>
@@ -48,10 +52,12 @@ export const getFeeBreakdownTypography = (
 ) =>
   fees.map((fee, index) => (
     <Typography
-      fontSize={12}
-      fontWeight="500"
       color="inherit"
       key={`${fee.token.address}${index}`}
+      sx={{
+        fontSize: 12,
+        fontWeight: '500',
+      }}
     >
       {t('format.currency', { value: fee.amountUSD })} (
       {t('format.number', {

package/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -10,7 +10,13 @@ export const FundsSufficiencyMessage = () => {
       severity="warning"
       icon={<WarningRounded />}
       title={
-        <Typography variant="body2" px={1} color="text.primary">
+        <Typography
+          variant="body2"
+          sx={{
+            px: 1,
+            color: 'text.primary',
+          }}
+        >
           {t('warning.message.insufficientFunds')}
         </Typography>
       }

package/src/components/GasMessage/GasMessage.style.ts

@@ -5,17 +5,17 @@ export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
   [`.${switchClasses.switchBase}`]: {
     [`&.${switchClasses.checked}`]: {
       [`& + .${switchClasses.track}`]: {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? theme.palette.info.main
-            : alpha(theme.palette.info.main, 0.84),
+        backgroundColor: alpha(theme.palette.info.main, 0.84),
+        ...theme.applyStyles('light', {
+          backgroundColor: theme.palette.info.main,
+        }),
       },
     },
     [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color:
-        theme.palette.mode === 'light'
-          ? theme.palette.info.main
-          : alpha(theme.palette.info.main, 0.84),
+      color: alpha(theme.palette.info.main, 0.84),
+      ...theme.applyStyles('light', {
+        color: theme.palette.info.main,
+      }),
     },
   },
 }))

package/src/components/GasMessage/GasRefuelMessage.tsx

@@ -34,12 +34,19 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
         icon={<EvStation />}
         title={
           <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            flexGrow={1}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexGrow: 1,
+            }}
           >
-            <Typography variant="body2" fontWeight={700}>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: 700,
+              }}
+            >
               {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}
             </Typography>
             <InfoMessageSwitch
@@ -56,7 +63,13 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
           unmountOnExit
           mountOnEnter
         >
-          <Typography variant="body2" px={2} pt={1}>
+          <Typography
+            variant="body2"
+            sx={{
+              px: 2,
+              pt: 1,
+            }}
+          >
             {t('info.message.autoRefuel', {
               chainName: chain?.name,
             })}

package/src/components/GasMessage/GasSufficiencyMessage.tsx

@@ -18,16 +18,34 @@ export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
       severity="warning"
       icon={<EvStation />}
       title={
-        <Typography variant="body2" fontWeight={700}>
+        <Typography
+          variant="body2"
+          sx={{
+            fontWeight: 700,
+          }}
+        >
           {t('warning.title.insufficientGas')}
         </Typography>
       }
     >
-      <Typography variant="body2" px={2} pt={1}>
+      <Typography
+        variant="body2"
+        sx={{
+          px: 2,
+          pt: 1,
+        }}
+      >
         {t('warning.message.insufficientGas')}
       </Typography>
       {insufficientGas?.map((item, index) => (
-        <Typography key={index} variant="body2" px={2} pt={0.5}>
+        <Typography
+          key={index}
+          variant="body2"
+          sx={{
+            px: 2,
+            pt: 0.5,
+          }}
+        >
           {t('main.tokenOnChainAmount', {
             amount: formatUnits(
               item.insufficientAmount ?? 0n,

package/src/components/Header/NavigationHeader.tsx

@@ -40,16 +40,22 @@ export const NavigationHeader: React.FC = () => {
           <BackButton onClick={navigateBack} />
         ) : null}
         {splitSubvariant ? (
-          <Box flex={1}>
+          <Box
+            sx={{
+              flex: 1,
+            }}
+          >
             <SplitWalletMenuButton />
           </Box>
         ) : (
           <Typography
-            fontSize={hasPath ? 18 : 24}
             align={hasPath ? 'center' : 'left'}
-            fontWeight="700"
-            flex={1}
             noWrap
+            sx={{
+              fontSize: hasPath ? 18 : 24,
+              fontWeight: '700',
+              flex: 1,
+            }}
           >
             {title}
           </Typography>
@@ -71,7 +77,19 @@ export const NavigationHeader: React.FC = () => {
               </HeaderControlsContainer>
             }
           />
-          <Route path="*" element={element || <Box width={28} height={40} />} />
+          <Route
+            path="*"
+            element={
+              element || (
+                <Box
+                  sx={{
+                    width: 28,
+                    height: 40,
+                  }}
+                />
+              )
+            }
+          />
         </Routes>
       </HeaderAppBar>
       {splitSubvariant ? <NavigationTabs /> : null}