@lifi/widget 3.12.6-alpha.0 → 3.13.0

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}

package/src/types/widget.ts

@@ -141,7 +141,8 @@ export interface CalculateFeeParams {
   toTokenAddress: string
   fromAddress?: string
   toAddress?: string
-  fromAmount: bigint
+  fromAmount?: bigint
+  toAmount?: bigint
   slippage: number
 }
 

package/tsconfig.json

@@ -7,7 +7,9 @@
     "outDir": "dist/esm",
     "rootDir": "./src",
     "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "NodeNext",
+    "skipLibCheck": true
   },
-  "include": ["./src/**/*", "./src/**/*.json"]
+  "include": ["./src/**/*", "./src/**/*.json"],
+  "references": [{ "path": "../wallet-management" }]
 }