@lifi/widget 3.12.6-beta.0 → 3.13.0

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -131,12 +131,14 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             startAdornment={
               startAdornmentLabel ? (
                 <Typography
-                  fontSize={14}
-                  fontWeight={600}
-                  lineHeight="16px"
-                  px={1.5}
-                  pt={isFirstFeaturedToken ? 0 : 1}
-                  pb={1}
+                  sx={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    lineHeight: '16px',
+                    px: 1.5,
+                    pt: isFirstFeaturedToken ? 0 : 1,
+                    pb: 1,
+                  }}
                 >
                   {startAdornmentLabel}
                 </Typography>

package/src/components/TransactionDetails.tsx

@@ -71,30 +71,48 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
 
   return (
     <Card selectionColor="secondary" {...props}>
-      <Box display="flex" alignItems="center" px={2} py={1.75}>
-        <Box display="flex" flex={1} alignItems="center" justifyContent="left">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          px: 2,
+          py: 1.75,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'left',
+          }}
+        >
           <TokenRate route={route} />
         </Box>
         <Collapse timeout={100} in={!cardExpanded} mountOnEnter>
           <FeeBreakdownTooltip gasCosts={gasCosts} feeCosts={feeCosts}>
             <Box
-              display="flex"
-              alignItems="center"
               onClick={toggleCard}
               // biome-ignore lint/a11y/useSemanticElements:
               role="button"
-              sx={{ cursor: 'pointer' }}
-              px={1}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                px: 1,
+                cursor: 'pointer',
+              }}
             >
               <IconTypography mr={0.5} fontSize={16}>
                 <LocalGasStationRounded fontSize="inherit" />
               </IconTypography>
               <Typography
-                fontSize={14}
-                color="text.primary"
-                fontWeight="600"
-                lineHeight={1.429}
                 data-value={combinedFeesUSD}
+                sx={{
+                  fontSize: 14,
+                  color: 'text.primary',
+                  fontWeight: '600',
+                  lineHeight: 1.429,
+                }}
               >
                 {t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -110,8 +128,19 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
         </CardIconButton>
       </Box>
       <Collapse timeout={225} in={cardExpanded} mountOnEnter>
-        <Box px={2} pb={2}>
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
+        <Box
+          sx={{
+            px: 2,
+            pb: 2,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mb: 0.5,
+            }}
+          >
             <Typography variant="body2">{t('main.fees.network')}</Typography>
             <FeeBreakdownTooltip gasCosts={gasCosts}>
               <Typography variant="body2">
@@ -122,7 +151,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             </FeeBreakdownTooltip>
           </Box>
           {feeCosts.length ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
               <Typography variant="body2">{t('main.fees.provider')}</Typography>
               <FeeBreakdownTooltip feeCosts={feeCosts}>
                 <Typography variant="body2">
@@ -134,7 +169,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
             </Box>
           ) : null}
           {showIntegratorFeeCollectionDetails ? (
-            <Box display="flex" justifyContent="space-between" mb={0.5}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                mb: 0.5,
+              }}
+            >
               <Typography variant="body2">
                 {feeConfig?.name
                   ? t('main.fees.integrator', { tool: feeConfig.name })
@@ -160,7 +201,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
               )}
             </Box>
           ) : null}
-          <Box display="flex" justifyContent="space-between" mb={0.5}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              mb: 0.5,
+            }}
+          >
             <Typography variant="body2">{t('main.priceImpact')}</Typography>
             <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
               <Typography variant="body2">
@@ -170,7 +217,13 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
           </Box>
           {!isRouteDone(route) ? (
             <>
-              <Box display="flex" justifyContent="space-between" mb={0.5}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  mb: 0.5,
+                }}
+              >
                 <Typography variant="body2">{t('main.maxSlippage')}</Typography>
                 <Tooltip title={t('tooltip.slippage')} sx={{ cursor: 'help' }}>
                   <Typography variant="body2">
@@ -180,7 +233,12 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   </Typography>
                 </Tooltip>
               </Box>
-              <Box display="flex" justifyContent="space-between">
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}
+              >
                 <Typography variant="body2">{t('main.minReceived')}</Typography>
                 <Tooltip
                   title={t('tooltip.minReceived')}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.12.6-beta.0'
+export const version = '3.13.0'

package/src/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -15,17 +15,28 @@ export const ActiveTransactionsEmpty: React.FC = () => {
         paddingY: 12,
       }}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <SwapHoriz fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('info.title.emptyActiveTransactions')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('info.message.emptyActiveTransactions')}
       </Typography>

package/src/pages/MainPage/MainPage.tsx

@@ -50,7 +50,13 @@ export const MainPage: React.FC = () => {
       <SendToWalletButton sx={marginSx} />
       <GasRefuelMessage mb={2} />
       <MainMessages mb={2} />
-      <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>
+      <Box
+        sx={{
+          display: 'flex',
+          mb: showPoweredBy ? 1 : 3,
+          gap: 1.5,
+        }}
+      >
         <ReviewButton />
         <SendToWalletExpandButton />
       </Box>

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -41,13 +41,27 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
 
   return (
     <FullPageContainer disableGutters>
-      <Box pb={2} px={3} ref={headerRef}>
+      <Box
+        ref={headerRef}
+        sx={{
+          pb: 2,
+          px: 3,
+        }}
+      >
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box mt={!hideChainSelect ? 2 : 0}>
+        <Box
+          sx={{
+            mt: !hideChainSelect ? 2 : 0,
+          }}
+        >
           <SearchTokenInput />
         </Box>
       </Box>
-      <Box height={minListHeight}>
+      <Box
+        sx={{
+          height: minListHeight,
+        }}
+      >
         <TokenList
           parentRef={listParentRef}
           height={tokenListHeight}

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -148,7 +148,12 @@ export const BookmarkAddressSheet = forwardRef<
         {validatedWallet ? (
           <SheetAddressContainer>
             {validatedWallet?.name ? (
-              <Typography fontWeight={600} mb={0.5}>
+              <Typography
+                sx={{
+                  fontWeight: 600,
+                  mb: 0.5,
+                }}
+              >
                 {validatedWallet?.name}
               </Typography>
             ) : null}

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -58,7 +58,12 @@ export const ConfirmAddressSheet = forwardRef<
         <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
         <SheetAddressContainer>
           {validatedBookmark?.name ? (
-            <Typography fontWeight={600} mb={0.5}>
+            <Typography
+              sx={{
+                fontWeight: 600,
+                mb: 0.5,
+              }}
+            >
               {validatedBookmark?.name}
             </Typography>
           ) : null}

package/src/pages/SendToWallet/EmptyListIndicator.tsx

@@ -11,7 +11,13 @@ export const EmptyListIndicator = ({
 }: EmptyListIndicatorProps) => (
   <EmptyContainer>
     <IconContainer>{icon}</IconContainer>
-    <Typography fontSize={14} fontWeight={700} color="text.secondary">
+    <Typography
+      sx={{
+        fontSize: 14,
+        fontWeight: 700,
+        color: 'text.secondary',
+      }}
+    >
       {children}
     </Typography>
   </EmptyContainer>

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -87,15 +87,13 @@ export const IconContainer = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   width: 80,
   height: 80,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[700]
-      : theme.palette.grey[300],
-  background:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[200]
-      : theme.palette.grey[800],
+  color: theme.palette.grey[300],
+  background: theme.palette.grey[800],
   borderRadius: '50%',
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[700],
+    background: theme.palette.grey[200],
+  }),
 }))
 
 export const SheetTitle = styled(Typography)(() => ({
@@ -120,7 +118,6 @@ export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
     ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
     : { minHeight: 440 }),
 }))
-
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
   background: theme.palette.background.default,
   display: 'flex',

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -255,7 +255,11 @@ export const SendToWalletPage = () => {
           onClick={handleRecentWalletsClick}
         >
           {!!recentWallets.length && (
-            <Typography color="text.secondary">
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
               {recentWallets.length}
             </Typography>
           )}
@@ -266,7 +270,11 @@ export const SendToWalletPage = () => {
           onClick={handleConnectedWalletsClick}
         >
           {!!connectedWallets.length && (
-            <Typography color="text.secondary">
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
               {connectedWallets.length}
             </Typography>
           )}
@@ -277,7 +285,13 @@ export const SendToWalletPage = () => {
           onClick={handleBookmarkedWalletsClick}
         >
           {!!bookmarks.length && (
-            <Typography color="text.secondary">{bookmarks.length}</Typography>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {bookmarks.length}
+            </Typography>
           )}
         </CardButton>
       </Box>

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -5,7 +5,6 @@ export const ResetButtonContainer = styled(Box)(({ theme }) => ({
   background: getContrastAlphaColor(theme, 0.04),
   borderRadius: '16px',
   padding: '16px',
-
   svg: {
     fill: getContrastAlphaColor(theme, 0.4),
   },

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -32,15 +32,30 @@ export const ResetSettingsButton: React.FC = () => {
   }
 
   return (
-    <Box mt={2}>
+    <Box
+      sx={{
+        mt: 2,
+      }}
+    >
       <ResetButtonContainer>
-        <Box display="flex" marginBottom="12px">
+        <Box
+          sx={{
+            display: 'flex',
+            marginBottom: '12px',
+          }}
+        >
           <InfoRounded
             sx={{
               marginRight: '8px',
             }}
           />
-          <Box fontSize={14}>{t('settings.resetSettings')}</Box>
+          <Box
+            sx={{
+              fontSize: 14,
+            }}
+          >
+            {t('settings.resetSettings')}
+          </Box>
         </Box>
         <Button onClick={toggleDialog} fullWidth>
           {t('button.resetSettings')}

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -10,14 +10,14 @@ import {
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   display: 'flex',
-  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),
   borderRadius: theme.shape.borderRadius,
   padding: theme.spacing(0.5),
   gap: theme.spacing(0.5),
   height: '3.5rem',
+  ...theme.applyStyles('light', {
+    backgroundColor: alpha(theme.palette.common.black, 0.04),
+  }),
 }))
 
 const slippageControlSelected = (theme: Theme) => ({
@@ -69,7 +69,6 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
     return {
       height: '100%',
       width: '100%',
-
       [`.${inputBaseClasses.input}`]: {
         height: '100%',
         width: '100%',

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -82,7 +82,11 @@ export const SlippageSettings: React.FC = () => {
       icon={<Percent />}
       title={t('settings.slippage')}
     >
-      <Box mt={1.5}>
+      <Box
+        sx={{
+          mt: 1.5,
+        }}
+      >
         <SettingsFieldSet>
           <SlippageDefaultButton
             selected={defaultSlippage === slippage && focused !== 'input'}
@@ -115,7 +119,12 @@ export const SlippageSettings: React.FC = () => {
         {isSlippageOutsideRecommendedLimits && (
           <SlippageLimitsWarningContainer>
             <WarningRounded color="warning" />
-            <Typography fontSize={13} fontWeight={400}>
+            <Typography
+              sx={{
+                fontSize: 13,
+                fontWeight: 400,
+              }}
+            >
               {t('warning.message.slippageOutsideRecommendedLimits')}
             </Typography>
           </SlippageLimitsWarningContainer>

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -82,17 +82,25 @@ export const TransactionDetailsPage: React.FC = () => {
     <PageContainer bottomGutters>
       <Box
         sx={{
+          pb: 1,
           display: 'flex',
           justifyContent: 'space-between',
         }}
-        pb={1}
       >
-        <Typography fontSize={12}>
+        <Typography
+          sx={{
+            fontSize: 12,
+          }}
+        >
           {startedAt.toLocaleString(i18n.language, {
             dateStyle: 'long',
           })}
         </Typography>
-        <Typography fontSize={12}>
+        <Typography
+          sx={{
+            fontSize: 12,
+          }}
+        >
           {startedAt.toLocaleString(i18n.language, {
             timeStyle: 'short',
           })}
@@ -111,7 +119,11 @@ export const TransactionDetailsPage: React.FC = () => {
         />
       ) : null}
       <TransferIdCard transferId={supportId} />
-      <Box mt={2}>
+      <Box
+        sx={{
+          mt: 2,
+        }}
+      >
         <ContactSupportButton supportId={supportId} />
       </Box>
     </PageContainer>

package/src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx

@@ -8,38 +8,54 @@ export const TransactionDetailsSkeleton = () => {
     <PageContainer>
       <Box
         sx={{
+          pb: 1,
+          pt: 0.75,
           display: 'flex',
           flex: 1,
           justifyContent: 'space-between',
         }}
-        pb={1}
-        pt={0.75}
       >
         <Skeleton width={96} height={20} variant="text" />
         <Skeleton width={40} height={20} variant="text" />
       </Box>
       <Card sx={{ paddingX: 2, marginBottom: 3 }}>
-        <Box pt={2.5}>
+        <Box
+          sx={{
+            pt: 2.5,
+          }}
+        >
           <Skeleton width={64} height={12} variant="rounded" />
         </Box>
-        <Box py={1}>
+        <Box
+          sx={{
+            py: 1,
+          }}
+        >
           {/* Token skeleton */}
-          <Box py={1}>
+          <Box
+            sx={{
+              py: 1,
+            }}
+          >
             <TokenSkeleton />
           </Box>
           {/* Bridge skeleton */}
-          <Box py={1}>
+          <Box
+            sx={{
+              py: 1,
+            }}
+          >
             <TokenSkeleton disableDescription />
           </Box>
           {/* Steps skeleton */}
           {Array.from({ length: 3 }).map((_, key) => (
             <Box
+              key={key}
               sx={{
+                py: 1,
                 display: 'flex',
                 alignItems: 'center',
               }}
-              py={1}
-              key={key}
             >
               <Skeleton
                 variant="rounded"
@@ -60,7 +76,11 @@ export const TransactionDetailsSkeleton = () => {
             </Box>
           ))}
           {/* Receiving Token skeleton */}
-          <Box py={1}>
+          <Box
+            sx={{
+              py: 1,
+            }}
+          >
             <TokenSkeleton />
           </Box>
         </Box>

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -55,10 +55,12 @@ export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
       </Box>
       <Typography
         variant="body2"
-        pt={1}
-        pb={2}
-        px={2}
-        sx={{ wordBreak: 'break-all' }}
+        sx={{
+          pt: 1,
+          pb: 2,
+          px: 2,
+          wordBreak: 'break-all',
+        }}
       >
         {transferId}
       </Typography>

package/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -15,17 +15,28 @@ export const TransactionHistoryEmpty: React.FC = () => {
         paddingY: 12,
       }}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <ReceiptLongRounded fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('info.title.emptyTransactionHistory')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('info.message.emptyTransactionHistory')}
       </Typography>