@lifi/widget 3.12.6-alpha.0 → 3.13.0

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,
+            },
+          },
+        },
+      },
+    ],
   })
 )
 

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

@@ -28,7 +28,14 @@ import { SendToWalletCardHeader } from './SendToWallet.style.js'
 export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig()
+  const {
+    disabledUI,
+    hiddenUI,
+    toAddress,
+    toAddresses,
+    subvariant,
+    subvariantOptions,
+  } = useWidgetConfig()
   const { showSendToWallet } = useSendToWalletStore()
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
@@ -114,6 +121,11 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const isOpenCollapse =
     requiredToAddress || (showSendToWallet && !hiddenToAddress)
 
+  const title =
+    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
+      ? t('header.depositTo')
+      : t('header.sendToWallet')
+
   return (
     <Collapse
       timeout={collapseTransitionTime.current}
@@ -127,10 +139,14 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
         onClick={disabledForChanges ? undefined : handleOnClick}
         sx={{ width: '100%', ...props.sx }}
       >
-        <CardTitle required={requiredToAddress}>
-          {t('header.sendToWallet')}
-        </CardTitle>
-        <Box display="flex" justifyContent="center" alignItems="center">
+        <CardTitle required={requiredToAddress}>{title}</CardTitle>
+        <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

@@ -58,8 +58,8 @@ export const Step: React.FC<{
       default:
         return subvariant === 'custom'
           ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
           : t('main.stepSwap')
     }
   }
@@ -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],
+  }),
 }))