@lifi/widget 3.12.6-beta.0 → 3.13.0

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) ? (

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -51,49 +51,116 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
   const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
   const toAmountUSD = Number.parseFloat(route.toAmountUSD)
   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.highValueLoss')}
         </Typography>
       </CenterContainer>
-      <Typography py={1}>{t('warning.message.highValueLoss')}</Typography>
-      <Box display="flex" justifyContent="space-between" mt={1}>
+      <Typography
+        sx={{
+          py: 1,
+        }}
+      >
+        {t('warning.message.highValueLoss')}
+      </Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 1,
+        }}
+      >
         <Typography>{t('main.sending')}</Typography>
-        <Typography fontWeight={600}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
           {t('format.currency', { value: route.fromAmountUSD })}
         </Typography>
       </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
         <Typography>{t('main.fees.network')}</Typography>
         <FeeBreakdownTooltip gasCosts={gasCosts}>
-          <Typography fontWeight={600}>
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
             {t('format.currency', { value: gasCostUSD })}
           </Typography>
         </FeeBreakdownTooltip>
       </Box>
       {feeCostUSD ? (
-        <Box display="flex" justifyContent="space-between" mt={0.25}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            mt: 0.25,
+          }}
+        >
           <Typography>{t('main.fees.provider')}</Typography>
           <FeeBreakdownTooltip feeCosts={feeCosts}>
-            <Typography fontWeight={600}>
+            <Typography
+              sx={{
+                fontWeight: 600,
+              }}
+            >
               {t('format.currency', { value: feeCostUSD })}
             </Typography>
           </FeeBreakdownTooltip>
         </Box>
       ) : null}
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
         <Typography>{t('main.receiving')}</Typography>
-        <Typography fontWeight={600}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
           {t('format.currency', { value: route.toAmountUSD })}
         </Typography>
       </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 0.25,
+        }}
+      >
         <Typography>{t('main.valueLoss')}</Typography>
-        <Typography fontWeight={600}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
           {calculateValueLossPercentage(
             fromAmountUSD,
             toAmountUSD,
@@ -103,11 +170,21 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
           %
         </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/TransactionPage.tsx

@@ -188,7 +188,12 @@ export const TransactionPage: React.FC = () => {
       status === RouteExecutionStatus.Failed ? (
         <>
           <GasMessage mt={2} route={route} />
-          <Box mt={2} display="flex">
+          <Box
+            sx={{
+              mt: 2,
+              display: 'flex',
+            }}
+          >
             <StartTransactionButton
               text={getButtonText()}
               onClick={handleStartClick}