@lifi/widget 3.12.6-alpha.0 → 3.13.0

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}

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

@@ -26,7 +26,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -35,7 +35,7 @@ export const RouteCard: React.FC<
   }
 
   const token: TokenAmount =
-    subvariant === 'custom'
+    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) }
   const impactToken: TokenAmount | undefined =
@@ -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

@@ -16,7 +16,8 @@ import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
 export const Routes: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant, useRecommendedRoute } = useWidgetConfig()
+  const { subvariant, subvariantOptions, useRecommendedRoute } =
+    useWidgetConfig()
   const {
     routes,
     isLoading,
@@ -42,11 +43,16 @@ export const Routes: React.FC<CardProps> = (props) => {
   const showAll =
     !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.receive')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <Card {...props}>
-      <CardTitle>
-        {subvariant === 'custom' ? t('header.youPay') : t('header.receive')}
-      </CardTitle>
+      <CardTitle>{title}</CardTitle>
       <ProgressToNextUpdate
         updatedAt={dataUpdatedAt || new Date().getTime()}
         timeToUpdate={refetchTime}
@@ -58,7 +64,11 @@ export const Routes: React.FC<CardProps> = (props) => {
           right: 8,
         }}
       />
-      <Box p={2}>
+      <Box
+        sx={{
+          p: 2,
+        }}
+      >
         {isLoading ? (
           <RouteCardSkeleton variant="cardless" />
         ) : !currentRoute ? (
@@ -68,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

@@ -64,7 +64,7 @@ export const RoutesExpanded = () => {
 export const RoutesExpandedElement = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const routesRef = useRef<Route[]>()
   const emitter = useWidgetEvents()
   const routesActiveRef = useRef(false)
@@ -118,6 +118,13 @@ export const RoutesExpandedElement = () => {
     emitter.emit(WidgetEvent.WidgetExpanded, expanded)
   }, [emitter, expanded])
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.deposit')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <RoutesExpandedCollapse
       timeout={timeout.enter}
@@ -129,10 +136,15 @@ export const RoutesExpandedElement = () => {
         <Container enableColorScheme minimumHeight={isLoading}>
           <ScrollableContainer>
             <Header>
-              <Typography fontSize={18} fontWeight="700" flex={1} noWrap>
-                {subvariant === 'custom'
-                  ? t('header.youPay')
-                  : t('header.receive')}
+              <Typography
+                noWrap
+                sx={{
+                  fontSize: 18,
+                  fontWeight: '700',
+                  flex: 1,
+                }}
+              >
+                {title}
               </Typography>
               <ProgressToNextUpdate
                 updatedAt={dataUpdatedAt || new Date().getTime()}
@@ -143,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) ? (