@lifi/widget 3.12.6-beta.0 → 3.13.0

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -3,26 +3,26 @@ import { CardHeader } from '../Card/CardHeader.js'
 
 export const SendToWalletCardHeader = styled(CardHeader, {
   shouldForwardProp: (prop) => !['selected'].includes(prop as string),
-})<{ selected?: boolean }>(({ theme, selected }) => ({
+})<{ selected?: boolean }>(({ theme }) => ({
   width: '100%',
   [`.${cardHeaderClasses.title}`]: {
-    color: selected ? theme.palette.text.primary : theme.palette.text.secondary,
+    color: theme.palette.text.secondary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    fontWeight: selected ? 600 : 500,
-    width: selected ? 224 : 254,
+    fontWeight: 500,
+    width: 254,
     [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
+      width: 224,
     },
   },
   [`.${cardHeaderClasses.subheader}`]: {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    width: selected ? 224 : 254,
+    width: 254,
     [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
-      width: selected ? 192 : 224,
+      width: 224,
     },
   },
   [`.${cardHeaderClasses.action}`]: {
@@ -31,4 +31,25 @@ export const SendToWalletCardHeader = styled(CardHeader, {
   [`.${cardHeaderClasses.action} > button`]: {
     fontSize: 16,
   },
+  variants: [
+    {
+      props: ({ selected }) => selected,
+      style: {
+        [`.${cardHeaderClasses.title}`]: {
+          color: theme.palette.text.primary,
+          fontWeight: 600,
+          width: 224,
+          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+            width: 192,
+          },
+        },
+        [`.${cardHeaderClasses.subheader}`]: {
+          width: 224,
+          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+            width: 192,
+          },
+        },
+      },
+    },
+  ],
 }))

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -140,7 +140,13 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
         sx={{ width: '100%', ...props.sx }}
       >
         <CardTitle required={requiredToAddress}>{title}</CardTitle>
-        <Box display="flex" justifyContent="center" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
           <SendToWalletCardHeader
             avatar={
               <AccountAvatar

package/src/components/Step/DestinationWalletAddress.tsx

@@ -13,7 +13,12 @@ export const DestinationWalletAddress: React.FC<{
   const { t } = useTranslation()
   const isDone = step.execution?.status === 'DONE'
   return (
-    <Box px={2} py={1}>
+    <Box
+      sx={{
+        px: 2,
+        py: 1,
+      }}
+    >
       <Box
         sx={{
           display: 'flex',
@@ -29,7 +34,14 @@ export const DestinationWalletAddress: React.FC<{
             }}
           />
         </CircularIcon>
-        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
+        <Typography
+          sx={{
+            mx: 2,
+            flex: 1,
+            fontSize: 14,
+            fontWeight: 400,
+          }}
+        >
           {isDone
             ? t('main.sentToAddress', {
                 address: toAddress,

package/src/components/Step/Step.tsx

@@ -82,7 +82,11 @@ export const Step: React.FC<{
           <StepTimer step={step} />
         </CardTitle>
       </Box>
-      <Box py={1}>
+      <Box
+        sx={{
+          py: 1,
+        }}
+      >
         {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
         <StepActions step={step} px={2} py={1} dense />
         {step.execution?.process.map((process, index) => (

package/src/components/Step/StepProcess.tsx

@@ -14,7 +14,12 @@ export const StepProcess: React.FC<{
   const { getTransactionLink } = useExplorer()
 
   return (
-    <Box px={2} py={1}>
+    <Box
+      sx={{
+        px: 2,
+        py: 1,
+      }}
+    >
       <Box
         sx={{
           display: 'flex',
@@ -23,10 +28,12 @@ export const StepProcess: React.FC<{
       >
         <CircularProgress process={process} />
         <Typography
-          mx={2}
-          flex={1}
-          fontSize={14}
-          fontWeight={process.error ? 600 : 400}
+          sx={{
+            mx: 2,
+            flex: 1,
+            fontSize: 14,
+            fontWeight: process.error ? 600 : 400,
+          }}
         >
           {title}
         </Typography>
@@ -54,10 +61,12 @@ export const StepProcess: React.FC<{
       </Box>
       {message ? (
         <Typography
-          ml={7}
-          fontSize={14}
-          fontWeight={500}
-          color="text.secondary"
+          sx={{
+            ml: 7,
+            fontSize: 14,
+            fontWeight: 500,
+            color: 'text.secondary',
+          }}
         >
           {message}
         </Typography>

package/src/components/Step/StepTimer.tsx

@@ -111,11 +111,15 @@ const StepTimerContent: FC<PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation()
   return (
     <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-      <Box component="span" display="flex" alignItems="center" height={14}>
-        <IconTypography
-          component="span"
-          sx={{ marginRight: 0.5, fontSize: 16 }}
-        >
+      <Box
+        component="span"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          height: 14,
+        }}
+      >
+        <IconTypography as="span" sx={{ marginRight: 0.5, fontSize: 16 }}>
           <AccessTimeFilled fontSize="inherit" />
         </IconTypography>
         <Box

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

@@ -18,10 +18,10 @@ export const StepConnector = styled(MuiStepConnector, {
   [`.${stepConnectorClasses.line}`]: {
     minHeight: 8,
     borderLeftWidth: 2,
-    borderColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.12)
-        : alpha(theme.palette.common.white, 0.16),
+    borderColor: alpha(theme.palette.common.white, 0.16),
+    ...theme.applyStyles('light', {
+      borderColor: alpha(theme.palette.common.black, 0.12),
+    }),
   },
 }))
 
@@ -55,16 +55,22 @@ export const StepLabelTypography = styled(Typography)(({ theme }) => ({
 
 export const StepContent = styled(Box, {
   shouldForwardProp: (prop) => !['last'].includes(prop as string),
-})<{ last: boolean }>(({ theme, last }) => ({
-  borderLeft: last
-    ? 'none'
-    : `2px solid ${
-        theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 0.16)
-      }`,
+})<{ last: boolean }>(({ theme }) => ({
+  borderLeft: `2px solid ${alpha(theme.palette.common.white, 0.16)}`,
   margin: theme.spacing(0, 0, 0, 2.375),
-  paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),
+  paddingLeft: theme.spacing(4.375),
+  variants: [
+    {
+      props: ({ last }) => last,
+      style: {
+        borderLeft: 'none',
+        paddingLeft: theme.spacing(4.625),
+      },
+    },
+  ],
+  ...theme.applyStyles('light', {
+    borderLeft: `2px solid ${alpha(theme.palette.common.black, 0.12)}`,
+  }),
 }))
 
 export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({

package/src/components/StepActions/StepActions.tsx

@@ -58,7 +58,12 @@ export const StepActions: React.FC<StepActionsProps> = ({
 
   return (
     <Box {...other}>
-      <Box display="flex" alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
         <Badge
           overlap="circular"
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
@@ -72,8 +77,19 @@ export const StepActions: React.FC<StepActionsProps> = ({
             {toolDetails.name[0]}
           </StepAvatar>
         </Badge>
-        <Box flex={1}>
-          <Typography fontSize={18} fontWeight={600} lineHeight={1.3334} ml={2}>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: 18,
+              fontWeight: 600,
+              lineHeight: 1.3334,
+              ml: 2,
+            }}
+          >
             {toolDetails.name?.includes('LI.FI')
               ? toolDetails.name
               : t('main.stepDetails', {
@@ -146,7 +162,11 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
   }
 
   return (
-    <Box mt={1}>
+    <Box
+      sx={{
+        mt: 1,
+      }}
+    >
       <Stepper
         orientation="vertical"
         connector={<StepConnector />}
@@ -212,12 +232,14 @@ export const StepDetailsContent: React.FC<{
 
   return (
     <Typography
-      fontSize={12}
-      lineHeight={1}
-      fontWeight="500"
-      color="text.secondary"
-      alignItems="center"
-      display="flex"
+      sx={{
+        fontSize: 12,
+        lineHeight: 1,
+        fontWeight: '500',
+        color: 'text.secondary',
+        alignItems: 'center',
+        display: 'flex',
+      }}
     >
       {!showToAmount ? (
         <>

package/src/components/StepActions/StepFees.tsx

@@ -31,11 +31,16 @@ export const StepFees: React.FC<
 
   return (
     <Typography
-      fontSize={12}
-      fontWeight="500"
-      color="text.secondary"
-      lineHeight={1.3334}
       {...other}
+      sx={[
+        {
+          fontSize: 12,
+          fontWeight: '500',
+          color: 'text.secondary',
+          lineHeight: 1.3334,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
     >
       {t('format.currency', { value: fees })}{' '}
       {isDone ? t('main.fees.paid') : t('main.fees.estimated')}

package/src/components/Switch.tsx

@@ -31,13 +31,16 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
       borderColor: theme.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color:
-        theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 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: theme.palette.mode === 'light' ? 0.7 : 0.3,
+      opacity: 0.3,
+      ...theme.applyStyles('light', {
+        opacity: 0.7,
+      }),
     },
   },
   [`.${switchClasses.thumb}`]: {
@@ -47,13 +50,13 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
   },
   [`.${switchClasses.track}`]: {
     borderRadius: 24 / 2,
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.16)
-        : alpha(theme.palette.common.white, 0.16),
+    backgroundColor: alpha(theme.palette.common.white, 0.16),
     opacity: 1,
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
+    ...theme.applyStyles('light', {
+      backgroundColor: alpha(theme.palette.common.black, 0.16),
+    }),
   },
 }))

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

@@ -22,16 +22,16 @@ export const Tabs = styled(MuiTabs)(({ theme }) => ({
 }))
 
 export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.04)
-      : alpha(theme.palette.common.white, 0.08),
+  backgroundColor: alpha(theme.palette.common.white, 0.08),
   [`.${tabsClasses.indicator}`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.background.paper
-        : alpha(theme.palette.common.black, 0.56),
+    backgroundColor: alpha(theme.palette.common.black, 0.56),
+    ...theme.applyStyles('light', {
+      backgroundColor: theme.palette.background.paper,
+    }),
   },
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  }),
 }))
 
 export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
@@ -40,14 +40,14 @@ export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
   textTransform: 'none',
   fontSize: '1rem',
   fontWeight: 700,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white,
+  color: theme.palette.common.white,
   [`&.${tabClasses.selected}`]: {
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white,
+    color: theme.palette.common.white,
+    ...theme.applyStyles('light', {
+      color: theme.palette.common.black,
+    }),
   },
+  ...theme.applyStyles('light', {
+    color: theme.palette.common.black,
+  }),
 }))

package/src/components/ToAddressRequiredMessage.tsx

@@ -25,7 +25,13 @@ export const ToAddressRequiredMessage: React.FC<
       <Box {...props}>
         <AlertMessage
           title={
-            <Typography variant="body2" px={1} color="text.primary">
+            <Typography
+              variant="body2"
+              sx={{
+                px: 1,
+                color: 'text.primary',
+              }}
+            >
               {t('info.message.toAddressIsRequired')}
             </Typography>
           }

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

@@ -9,22 +9,28 @@ export const TextSecondaryContainer = styled(Box)(() => ({
 
 export const TextSecondary = styled(Typography, {
   shouldForwardProp: (prop: string) => !['dot'].includes(prop),
-})<{ dot?: boolean }>(({ theme, dot }) => ({
+})<{ dot?: boolean }>(({ theme }) => ({
   fontSize: 12,
   lineHeight: 1,
   fontWeight: 500,
-  color: dot
-    ? alpha(theme.palette.text.secondary, 0.56)
-    : theme.palette.text.secondary,
+  color: theme.palette.text.secondary,
   whiteSpace: 'nowrap',
+  variants: [
+    {
+      props: ({ dot }) => dot,
+      style: {
+        color: alpha(theme.palette.text.secondary, 0.56),
+      },
+    },
+  ],
 }))
 
 export const TokenDivider = styled(Box)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',
-  borderColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800],
+  borderColor: theme.palette.grey[800],
+  ...theme.applyStyles('light', {
+    borderColor: theme.palette.grey[300],
+  }),
 }))

package/src/components/Token/Token.tsx

@@ -98,15 +98,36 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
   ) : null
 
   return (
-    <Box flex={1} display="flex" alignItems="center" {...other}>
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
       <TokenAvatar
         token={token}
         chain={chain}
         isLoading={isLoading}
         sx={{ marginRight: 2 }}
       />
-      <Box flex={1}>
-        <Box mb={0.5} height={24} display="flex" alignItems="center">
+      <Box
+        sx={{
+          flex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            mb: 0.5,
+            height: 24,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
           <TextFitter
             height={30}
             textStyle={{
@@ -118,7 +139,7 @@ export const TokenBase: FC<TokenProps & BoxProps> = ({
             })}
           </TextFitter>
         </Box>
-        <TextSecondaryContainer component="span">
+        <TextSecondaryContainer as="span">
           <TextSecondary>
             {t('format.currency', {
               value: tokenPrice,
@@ -175,7 +196,14 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
   children,
 }) => {
   return (
-    <Box flex={1} position="relative" overflow="hidden" height={16}>
+    <Box
+      sx={{
+        flex: 1,
+        position: 'relative',
+        overflow: 'hidden',
+        height: 16,
+      }}
+    >
       <Grow
         in={!stepVisible && !disableDescription}
         style={{
@@ -184,7 +212,13 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
         appear={false}
         timeout={225}
       >
-        <Box display="flex" alignItems="center" height={16}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
           {children as ReactElement}
         </Box>
       </Grow>
@@ -196,8 +230,19 @@ const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
         appear={false}
         timeout={225}
       >
-        <Box display="flex" alignItems="center" height={16}>
-          <Box mr={0.75} height={16}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
+          <Box
+            sx={{
+              mr: 0.75,
+              height: 16,
+            }}
+          >
             <SmallAvatar
               src={step?.toolDetails.logoURI}
               alt={step?.toolDetails.name}
@@ -218,12 +263,30 @@ export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
   ...other
 }) => {
   return (
-    <Box flex={1} {...other}>
-      <Box display="flex" flex={1} alignItems="center">
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          alignItems: 'center',
+        }}
+      >
         <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />
-        <Box flex={1}>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
           <Skeleton width={112} height={24} variant="text" />
-          <TextSecondaryContainer component="span">
+          <TextSecondaryContainer as="span">
             <Skeleton
               width={48}
               height={12}

package/src/components/TokenList/TokenListItem.tsx

@@ -112,7 +112,13 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
           component: 'div',
         }}
         secondary={
-          <Box position="relative" height={20} ref={container}>
+          <Box
+            ref={container}
+            sx={{
+              position: 'relative',
+              height: 20,
+            }}
+          >
             <Slide
               direction="down"
               in={!showAddress}
@@ -122,7 +128,13 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               }}
               appear={false}
             >
-              <Box pt={0.25}>{token.name}</Box>
+              <Box
+                sx={{
+                  pt: 0.25,
+                }}
+              >
+                {token.name}
+              </Box>
             </Slide>
             <Slide
               direction="up"
@@ -134,8 +146,18 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               appear={false}
               mountOnEnter
             >
-              <Box display="flex">
-                <Box display="flex" alignItems="center" pt={0.125}>
+              <Box
+                sx={{
+                  display: 'flex',
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    pt: 0.125,
+                  }}
+                >
                   {shortenAddress(tokenAddress)}
                 </Box>
                 <IconButton
@@ -159,7 +181,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
         ) : (
           <Box sx={{ textAlign: 'right' }}>
             {token.amount ? (
-              <Typography fontWeight={600} noWrap>
+              <Typography
+                noWrap
+                sx={{
+                  fontWeight: 600,
+                }}
+              >
                 {t('format.number', {
                   value: formatTokenAmount(token.amount, token.decimals),
                 })}
@@ -167,10 +194,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             ) : null}
             {tokenPrice ? (
               <Typography
-                fontWeight={500}
-                fontSize={12}
-                color="text.secondary"
                 data-price={token.priceUSD}
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 12,
+                  color: 'text.secondary',
+                }}
               >
                 {t('format.currency', {
                   value: tokenPrice,