@lifi/widget 3.12.6-alpha.0 → 3.13.0

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>

package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -71,25 +71,43 @@ export const TransactionHistoryItem: React.FC<{
     >
       <Box
         sx={{
+          pt: 1.75,
+          px: 2,
           display: 'flex',
           flex: 1,
           justifyContent: 'space-between',
         }}
-        pt={1.75}
-        px={2}
       >
-        <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',
           })}
         </Typography>
       </Box>
-      <Box px={2} py={2}>
+      <Box
+        sx={{
+          px: 2,
+          py: 2,
+        }}
+      >
         <Token token={fromToken} />
-        <Box pl={2.375} py={0.5}>
+        <Box
+          sx={{
+            pl: 2.375,
+            py: 0.5,
+          }}
+        >
           <TokenDivider />
         </Box>
         <Token token={toToken} />

package/src/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -12,12 +12,12 @@ export const TransactionHistoryItemSkeleton = () => {
     >
       <Box
         sx={{
+          pt: 2,
+          px: 2,
           display: 'flex',
           flex: 1,
           justifyContent: 'space-between',
         }}
-        pt={2}
-        px={2}
       >
         <Skeleton
           variant="rectangular"
@@ -36,9 +36,19 @@ export const TransactionHistoryItemSkeleton = () => {
           })}
         />
       </Box>
-      <Box px={2} py={2}>
+      <Box
+        sx={{
+          px: 2,
+          py: 2,
+        }}
+      >
         <TokenSkeleton />
-        <Box pl={2.375} py={0.5}>
+        <Box
+          sx={{
+            pl: 2.375,
+            py: 0.5,
+          }}
+        >
           <TokenDivider />
         </Box>
         <TokenSkeleton />

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -106,19 +106,46 @@ const ExchangeRateBottomSheetContent: React.FC<
   ).toFixed(2)
 
   return (
-    <Box p={3} ref={ref}>
+    <Box
+      ref={ref}
+      sx={{
+        p: 3,
+      }}
+    >
       <CenterContainer>
         <IconCircle status="warning" mb={1}>
           <WarningRounded color="warning" />
         </IconCircle>
-        <Typography py={1} fontSize={18} fontWeight={700}>
+        <Typography
+          sx={{
+            py: 1,
+            fontSize: 18,
+            fontWeight: 700,
+          }}
+        >
           {t('warning.title.rateChanged')}
         </Typography>
       </CenterContainer>
-      <Typography py={1}>{t('warning.message.rateChanged')}</Typography>
-      <Box display="flex" justifyContent="space-between" mt={1}>
+      <Typography
+        sx={{
+          py: 1,
+        }}
+      >
+        {t('warning.message.rateChanged')}
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 1,
+        }}
+      >
         <Typography>{t('main.quotedAmount')}</Typography>
-        <Typography fontWeight={600}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
           {t('format.number', {
             value: formatTokenAmount(
               BigInt(data.oldToAmount),
@@ -128,9 +155,19 @@ const ExchangeRateBottomSheetContent: React.FC<
           {data?.toToken.symbol}
         </Typography>
       </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
         <Typography>{t('main.currentAmount')}</Typography>
-        <Typography fontWeight={600}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
           {t('format.number', {
             value: formatTokenAmount(
               BigInt(data?.newToAmount),
@@ -140,15 +177,37 @@ const ExchangeRateBottomSheetContent: React.FC<
           {data?.toToken.symbol}
         </Typography>
       </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
         <Typography>{t('main.rateChange')}</Typography>
-        <Typography fontWeight={600}>{rateChange}%</Typography>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
+          {rateChange}%
+        </Typography>
       </Box>
-      <Box display="flex" mt={3}>
+      <Box
+        sx={{
+          display: 'flex',
+          mt: 3,
+        }}
+      >
         <Button variant="text" onClick={onCancel} fullWidth>
           {t('button.cancel')}
         </Button>
-        <Box display="flex" p={1} />
+        <Box
+          sx={{
+            display: 'flex',
+            p: 1,
+          }}
+        />
         <Button variant="contained" onClick={onContinue} fullWidth>
           {t('button.continue')}
         </Button>

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -249,7 +249,12 @@ export const StatusBottomSheetContent: React.FC<
     (contractCompactComponent || contractSecondaryComponent)
 
   return (
-    <Box p={3} ref={ref}>
+    <Box
+      ref={ref}
+      sx={{
+        p: 3,
+      }}
+    >
       {!showContractComponent ? (
         <CenterContainer>
           <IconCircle status={status} mb={1}>
@@ -270,7 +275,13 @@ export const StatusBottomSheetContent: React.FC<
         </CenterContainer>
       ) : null}
       <CenterContainer>
-        <Typography py={1} fontSize={18} fontWeight={700}>
+        <Typography
+          sx={{
+            py: 1,
+            fontSize: 18,
+            fontWeight: 700,
+          }}
+        >
           {title}
         </Typography>
       </CenterContainer>
@@ -285,13 +296,25 @@ export const StatusBottomSheetContent: React.FC<
       )}
       {!showContractComponent ? (
         primaryMessage ? (
-          <Typography py={1}>{primaryMessage}</Typography>
+          <Typography
+            sx={{
+              py: 1,
+            }}
+          >
+            {primaryMessage}
+          </Typography>
         ) : (
           <MessageSkeleton />
         )
       ) : null}
       {secondaryMessage ? (
-        <Typography py={1}>{secondaryMessage}</Typography>
+        <Typography
+          sx={{
+            py: 1,
+          }}
+        >
+          {secondaryMessage}
+        </Typography>
       ) : null}
       <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
         {hasEnumFlag(status, RouteExecutionStatus.Done) ? (