@lifi/widget 3.0.2 → 3.1.1

package/_esm/utils/format.js

@@ -1,22 +1,26 @@
 import { formatUnits } from 'viem';
+const subscriptMap = ['₀', '₁', '₂', '₃', '₄', '₅', '₆', '₇', '₈', '₉'];
+export const precisionFormatter = new Intl.NumberFormat('en', {
+    notation: 'standard',
+    roundingPriority: 'morePrecision',
+    maximumSignificantDigits: 4,
+    maximumFractionDigits: 4,
+    useGrouping: false,
+});
 /**
  * Format token amount to at least 4 decimals.
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export const formatTokenAmount = (amount = 0n, decimals, decimalPlaces = 3) => {
+export function formatTokenAmount(amount = 0n, decimals) {
     const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
     const parsedAmount = parseFloat(formattedAmount);
     if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
         return '0';
     }
-    const absAmount = Math.abs(parsedAmount);
-    while (absAmount < 1 / 10 ** decimalPlaces) {
-        decimalPlaces++;
-    }
-    return parsedAmount.toFixed(decimalPlaces + 1);
-};
-export const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
+    return precisionFormatter.format(parsedAmount);
+}
+export function formatSlippage(slippage = '', defaultValue = '', returnInitial = false) {
     if (!slippage) {
         return slippage;
     }
@@ -37,8 +41,8 @@ export const formatSlippage = (slippage = '', defaultValue = '', returnInitial =
         return slippage;
     }
     return parsedSlippage.toString();
-};
-export const formatInputAmount = (amount, decimals = null, returnInitial = false) => {
+}
+export function formatInputAmount(amount, decimals = null, returnInitial = false) {
     if (!amount) {
         return amount;
     }
@@ -63,8 +67,8 @@ export const formatInputAmount = (amount, decimals = null, returnInitial = false
     integer = integer.replace(/^0+|-/, '');
     fraction = fraction.replace(/(0+)$/, '');
     return `${integer || (fraction ? '0' : '')}${fraction ? `.${fraction}` : ''}`;
-};
-export const formatTokenPrice = (amount, price) => {
+}
+export function formatTokenPrice(amount, price) {
     if (!amount || !price) {
         return 0;
     }
@@ -72,5 +76,39 @@ export const formatTokenPrice = (amount, price) => {
         return 0;
     }
     return parseFloat(amount) * parseFloat(price);
-};
+}
+/**
+ * Converts a number to a subscript format if it contains leading zeros in the fractional part.
+ *
+ * @param {number} value - The number to be converted.
+ * @param {Intl.NumberFormatOptions} options An object that contains one or more properties that specify comparison options.
+ * @returns {string} - The number formatted as a string, with subscripts for leading zeros if applicable.
+ */
+export function convertToSubscriptFormat(value, options) {
+    let formattedValue;
+    if (options) {
+        formattedValue = value.toLocaleString('en', options);
+    }
+    else {
+        formattedValue = precisionFormatter.format(value);
+    }
+    // Calculate the number of zeros after the decimal point
+    const d = Math.ceil(Math.log10(Math.abs(value)));
+    // If the value does not have significant leading zeros in the fractional part, return the formatted value as is
+    if (d > -3 || !value) {
+        return formattedValue;
+    }
+    // Calculate the number of leading zeros in the fractional part
+    const leadingZeros = Math.abs(d);
+    const fractionalPartExtractor = value > 0 ? 2 : 3;
+    // Extract the fractional part of the formatted value, excluding the leading zeros and "0." or "-0."
+    const fractionalPart = formattedValue.slice(leadingZeros + fractionalPartExtractor);
+    // Convert the number of leading zeros to their corresponding Unicode subscript characters
+    const subscript = leadingZeros
+        .toString()
+        .split('')
+        .map((digit) => subscriptMap[digit])
+        .join('');
+    return `${value > 0 ? '' : '-'}0.0${subscript}${fractionalPart}`;
+}
 //# sourceMappingURL=format.js.map

package/_esm/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","sourceRoot":"","sources":["../../utils/format.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../utils/format.ts"],"names":[],"mappings":"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"}

package/components/Card/CardIconButton.tsx

@@ -8,5 +8,6 @@ export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
     '&:hover': {
       backgroundColor: getContrastAlphaColor(theme, 0.08),
     },
+    fontSize: '1rem',
   };
 });

package/components/Card/CardLabel.tsx

@@ -1,15 +1,9 @@
-import {
-  Box,
-  Typography,
-  getContrastRatio,
-  lighten,
-  styled,
-} from '@mui/material';
+import { Box, Typography, getContrastRatio, styled } from '@mui/material';
 import { blend } from '../../utils/colors.js';
 
 export const CardLabel = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'type',
-})<{ type?: 'active' | 'insurance' | 'insurance-icon' }>(({ theme, type }) => {
+})<{ type?: 'active' }>(({ theme, type }) => {
   const backgroundColor =
     type === 'active'
       ? theme.palette.mode === 'light'
@@ -19,35 +13,25 @@ export const CardLabel = styled(Box, {
             theme.palette.secondary.main,
             0.8,
           )
-      : type?.includes('insurance')
+      : theme.palette.mode === 'light'
         ? blend(
             theme.palette.background.paper,
-            theme.palette.success.main,
-            theme.palette.mode === 'light' ? 0.12 : 0.24,
+            theme.palette.common.black,
+            0.12,
           )
-        : theme.palette.mode === 'light'
-          ? blend(
-              theme.palette.background.paper,
-              theme.palette.common.black,
-              0.12,
-            )
-          : blend(
-              theme.palette.background.paper,
-              theme.palette.common.white,
-              0.16,
-            );
+        : blend(
+            theme.palette.background.paper,
+            theme.palette.common.white,
+            0.16,
+          );
   return {
     backgroundColor,
     borderRadius: theme.shape.borderRadius,
-    color: type?.includes('insurance')
-      ? lighten(
-          theme.palette.success.main,
-          theme.palette.mode === 'light' ? 0 : 0.24,
-        )
-      : getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
+    color:
+      getContrastRatio(theme.palette.common.white, backgroundColor) >= 3
         ? theme.palette.common.white
         : theme.palette.common.black,
-    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+    padding: 0,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

package/components/ChainSelect/ChainSelect.tsx

@@ -64,15 +64,7 @@ export const ChainSelect = ({ formType }: FormTypeProps) => {
             />
           ))
         : chainsToShow?.map((chain: EVMChain) => (
-            <Tooltip
-              key={chain.id}
-              title={chain.name}
-              placement="top"
-              enterDelay={400}
-              enterNextDelay={100}
-              disableInteractive
-              arrow
-            >
+            <Tooltip key={chain.id} title={chain.name} enterNextDelay={100}>
               <ChainCard
                 component="button"
                 onClick={() => setCurrentChain(chain.id)}

package/components/FeeBreakdownTooltip.tsx

@@ -0,0 +1,66 @@
+import type { Route } from '@lifi/sdk';
+import { Box, Tooltip, Typography } from '@mui/material';
+import type { TFunction } from 'i18next';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import type { FeesBreakdown } from '../utils/fees.js';
+import { getFeeCostsBreakdown, getGasCostsBreakdown } from '../utils/fees.js';
+
+export interface FeeBreakdownTooltipProps {
+  route: Route;
+  gasCosts?: FeesBreakdown[];
+  feeCosts?: FeesBreakdown[];
+  children: ReactElement<any, any>;
+}
+
+export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
+  route,
+  gasCosts,
+  feeCosts,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const _gasCosts = gasCosts ?? getGasCostsBreakdown(route);
+  const _feeCosts = feeCosts ?? getFeeCostsBreakdown(route, false);
+  return (
+    <Tooltip
+      title={
+        <Box>
+          {_gasCosts.length ? (
+            <Box>
+              {t('main.fees.network')}
+              {getFeeBreakdownTypography(_gasCosts, t)}
+            </Box>
+          ) : null}
+          {_feeCosts.length ? (
+            <Box mt={0.5}>
+              {t('main.fees.provider')}
+              {getFeeBreakdownTypography(_feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      }
+      sx={{ cursor: 'help' }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export const getFeeBreakdownTypography = (
+  fees: FeesBreakdown[],
+  t: TFunction,
+) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="inherit"
+      key={`${fee.token.address}${index}`}
+    >
+      {t(`format.currency`, { value: fee.amountUSD })} (
+      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ));

package/components/GasMessage/GasRefuelMessage.tsx

@@ -39,7 +39,7 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
             flexGrow={1}
           >
             <Typography variant="body2" fontWeight={700}>
-              {t(`info.title.autoRefuel`)}
+              {t(`info.title.autoRefuel`, { chainName: chain?.name ?? '' })}
             </Typography>
             <InfoMessageSwitch
               checked={enabledAutoRefuel}

package/components/Header/CloseDrawerButton.tsx

@@ -21,7 +21,7 @@ export const CloseDrawerButton = ({ header }: CloseDrawerButtonProps) => {
   const showInWalletHeader = header === 'wallet' && subvariant !== 'split';
 
   return showInNavigationHeader || showInWalletHeader ? (
-    <Tooltip title={t('button.close')} enterDelay={400} arrow>
+    <Tooltip title={t('button.close')}>
       <IconButton size="medium" onClick={closeDrawer}>
         <CloseRounded />
       </IconButton>

package/components/Header/SettingsButton.tsx

@@ -27,7 +27,7 @@ export const SettingsButton = () => {
     : t(`header.settings`);
 
   return (
-    <Tooltip title={tooltipMessage} enterDelay={400} arrow>
+    <Tooltip title={tooltipMessage}>
       <SettingsIconButton
         size="medium"
         onClick={() => navigate(navigationRoutes.settings)}

package/components/Header/TransactionHistoryButton.tsx

@@ -9,7 +9,7 @@ export const TransactionHistoryButton = () => {
   const { navigate } = useNavigateBack();
 
   return (
-    <Tooltip title={t(`header.transactionHistory`)} enterDelay={400} arrow>
+    <Tooltip title={t(`header.transactionHistory`)}>
       <IconButton
         size="medium"
         onClick={() => navigate(navigationRoutes.transactionHistory)}

package/components/IconTypography.ts

@@ -0,0 +1,9 @@
+import { Typography, alpha, styled } from '@mui/material';
+
+export const IconTypography = styled(Typography)(({ theme }) => ({
+  color:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.32)
+      : alpha(theme.palette.common.white, 0.4),
+  lineHeight: 0,
+}));

package/components/PoweredBy/PoweredBy.tsx

@@ -14,7 +14,7 @@ export const PoweredBy: React.FC = () => {
         justifyContent: 'flex-end',
       }}
     >
-      <Tooltip title={`v${version}`} placement="top" enterDelay={1000} arrow>
+      <Tooltip title={`v${version}`} enterDelay={1000}>
         <Link
           href="https://li.fi"
           target="_blank"

package/components/ProgressToNextUpdate.tsx

@@ -52,9 +52,6 @@ export const ProgressToNextUpdate: React.FC<
             components={[<br />]}
           />
         }
-        placement="top"
-        enterDelay={400}
-        arrow
       >
         <Box
           sx={{

package/components/RouteCard/RouteCard.style.ts

@@ -1,12 +1,4 @@
-import { Box, Typography, alpha, styled } from '@mui/material';
-
-export const IconTypography = styled(Typography)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.32)
-      : alpha(theme.palette.common.white, 0.4),
-  lineHeight: 0,
-}));
+import { Box, styled } from '@mui/material';
 
 export const TokenContainer = styled(Box)(({ theme }) => ({
   display: 'flex',

package/components/RouteCard/RouteCard.tsx

@@ -1,17 +1,14 @@
 import type { TokenAmount } from '@lifi/sdk';
-import { ExpandLess, ExpandMore, VerifiedUser } from '@mui/icons-material';
-import type { TooltipProps } from '@mui/material';
-import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Box, Collapse } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { formatTokenAmount } from '../../utils/format.js';
 import type { CardProps } from '../Card/Card.js';
 import { Card } from '../Card/Card.js';
 import { CardIconButton } from '../Card/CardIconButton.js';
 import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js';
-import type { InsuredAmount } from '../Insurance/types.js';
 import { StepActions } from '../StepActions/StepActions.js';
 import { Token } from '../Token/Token.js';
 import { TokenContainer } from './RouteCard.style.js';
@@ -37,12 +34,14 @@ export const RouteCard: React.FC<
     setCardExpanded((expanded) => !expanded);
   };
 
-  const insurable = route.insurance?.state === 'INSURABLE';
-
   const token: TokenAmount =
     subvariant === 'custom'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) };
+  const impactToken: TokenAmount | undefined =
+    subvariant !== 'custom'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : undefined;
 
   const tags = route.tags?.filter(
     (tag) => tag === 'CHEAPEST' || tag === 'FASTEST',
@@ -50,7 +49,7 @@ export const RouteCard: React.FC<
 
   const cardContent = (
     <Box flex={1}>
-      {subvariant !== 'refuel' && (insurable || route.tags?.length) ? (
+      {subvariant !== 'refuel' && route.tags?.length ? (
         <Box display="flex" alignItems="center" mb={2}>
           {tags?.length ? (
             <CardLabel type={active ? 'active' : undefined}>
@@ -59,33 +58,22 @@ export const RouteCard: React.FC<
               </CardLabelTypography>
             </CardLabel>
           ) : null}
-          {insurable ? (
-            <InsuranceTooltip
-              insuredAmount={formatTokenAmount(
-                BigInt(route.toAmountMin),
-                route.toToken.decimals,
-              )}
-              insuredTokenSymbol={route.toToken.symbol}
-            >
-              <CardLabel type={'insurance'}>
-                <VerifiedUser fontSize="inherit" />
-                <CardLabelTypography type="icon">
-                  {t(`main.tags.insurable`)}
-                </CardLabelTypography>
-              </CardLabel>
-            </InsuranceTooltip>
-          ) : null}
         </Box>
       ) : null}
       <TokenContainer>
         <Token
           token={token}
+          impactToken={impactToken}
           step={route.steps[0]}
           stepVisible={!cardExpanded}
         />
         {!defaulExpanded ? (
           <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? <ExpandLess /> : <ExpandMore />}
+            {cardExpanded ? (
+              <ExpandLess fontSize="inherit" />
+            ) : (
+              <ExpandMore fontSize="inherit" />
+            )}
           </CardIconButton>
         ) : null}
       </TokenContainer>
@@ -95,9 +83,7 @@ export const RouteCard: React.FC<
         ))}
         <RouteCardEssentialsExpanded route={route} />
       </Collapse>
-      <Collapse timeout={225} in={!cardExpanded} mountOnEnter unmountOnExit>
-        <RouteCardEssentials route={route} />
-      </Collapse>
+      <RouteCardEssentials route={route} />
     </Box>
   );
 
@@ -114,45 +100,3 @@ export const RouteCard: React.FC<
     </Card>
   );
 };
-
-const InsuranceTooltip: React.FC<
-  InsuredAmount & Pick<TooltipProps, 'children'>
-> = ({ insuredAmount, insuredTokenSymbol, children }) => {
-  const { t } = useTranslation();
-  return (
-    <Tooltip
-      title={
-        <Box component="span">
-          <Typography fontSize={12} fontWeight="500">
-            <Trans
-              i18nKey="insurance.insure"
-              values={{
-                amount: insuredAmount,
-                tokenSymbol: insuredTokenSymbol,
-              }}
-              components={[<strong />]}
-            />
-          </Typography>
-          <Box
-            sx={{
-              listStyleType: 'disc',
-              pl: 2,
-            }}
-          >
-            <Typography fontSize={12} fontWeight="500" display="list-item">
-              {t('insurance.bridgeExploits')}
-            </Typography>
-            <Typography fontSize={12} fontWeight="500" display="list-item">
-              {t('insurance.slippageError')}
-            </Typography>
-          </Box>
-        </Box>
-      }
-      placement="top"
-      enterDelay={400}
-      arrow
-    >
-      {children}
-    </Tooltip>
-  );
-};

package/components/RouteCard/RouteCardEssentials.tsx

@@ -1,14 +1,11 @@
-import { AccessTimeFilled, MonetizationOn } from '@mui/icons-material';
+import { AccessTimeFilled, LocalGasStationRounded } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
-import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import {
-  getFeeCostsBreakdown,
-  getGasCostsBreakdown,
-} from '../../utils/fees.js';
-import { IconTypography } from './RouteCard.style.js';
-import type { FeesBreakdown, RouteCardEssentialsProps } from './types.js';
+import { getFeeCostsBreakdown } from '../../utils/fees.js';
+import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js';
+import { IconTypography } from '../IconTypography.js';
+import { TokenRate } from '../TokenRate.js';
+import type { RouteCardEssentialsProps } from './types.js';
 
 export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
   route,
@@ -19,83 +16,57 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
       .map((step) => step.estimate.executionDuration)
       .reduce((duration, x) => duration + x, 0) / 60,
   );
-  const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
-  const gasCosts = getGasCostsBreakdown(route);
+  const gasCostUSD = parseFloat(route.gasCostUSD || '0');
   const feeCosts = getFeeCostsBreakdown(route, false);
   const fees =
     gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
   return (
-    <Box display="flex" justifyContent={'space-between'} flex={1} mt={2}>
-      <Tooltip
-        title={
-          <Box component="span">
-            {t('main.fees.networkEstimated')}
-            {getFeeBreakdownTypography(gasCosts, t)}
-            {feeCosts.length ? (
-              <Box mt={1}>
-                {t('main.fees.providerEstimated')}
-                {getFeeBreakdownTypography(feeCosts, t)}
-              </Box>
-            ) : null}
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent={'space-between'}
+      flex={1}
+      mt={2}
+    >
+      <TokenRate route={route} />
+      <Box display="flex" alignItems="center">
+        <FeeBreakdownTooltip route={route} feeCosts={feeCosts}>
+          <Box display="flex" mr={1.5} alignItems="center">
+            <IconTypography mr={0.5} fontSize={16}>
+              <LocalGasStationRounded fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              fontSize={14}
+              color="text.primary"
+              fontWeight="500"
+              lineHeight={1}
+            >
+              {t(`format.currency`, {
+                value: fees,
+              })}
+            </Typography>
+          </Box>
+        </FeeBreakdownTooltip>
+        <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
+          <Box display="flex" alignItems="center">
+            <IconTypography mr={0.5} fontSize={16}>
+              <AccessTimeFilled fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              fontSize={14}
+              color="text.primary"
+              fontWeight="500"
+              lineHeight={1}
+            >
+              {executionTimeMinutes.toLocaleString(i18n.language, {
+                style: 'unit',
+                unit: 'minute',
+                unitDisplay: 'narrow',
+              })}
+            </Typography>
           </Box>
-        }
-        placement="top"
-        enterDelay={400}
-        arrow
-      >
-        <Box display="flex" alignItems="center">
-          <IconTypography mr={0.5}>
-            <MonetizationOn fontSize="small" />
-          </IconTypography>
-          <Typography
-            fontSize={14}
-            color="text.primary"
-            fontWeight="500"
-            lineHeight={1}
-          >
-            {t(`format.currency`, {
-              value: fees,
-            })}
-          </Typography>
-        </Box>
-      </Tooltip>
-      <Tooltip
-        title={t(`tooltip.estimatedTime`)}
-        placement="top"
-        enterDelay={400}
-        arrow
-      >
-        <Box display="flex" alignItems="center">
-          <IconTypography mr={0.5}>
-            <AccessTimeFilled fontSize="small" />
-          </IconTypography>
-          <Typography
-            fontSize={14}
-            color="text.primary"
-            fontWeight="500"
-            lineHeight={1}
-          >
-            {new Intl.NumberFormat(i18n.language, {
-              style: 'unit',
-              unit: 'minute',
-              unitDisplay: 'narrow',
-            }).format(executionTimeMinutes)}
-          </Typography>
-        </Box>
-      </Tooltip>
+        </Tooltip>
+      </Box>
     </Box>
   );
 };
-
-const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
-  fees.map((fee, index) => (
-    <Typography
-      fontSize={12}
-      fontWeight="500"
-      key={`${fee.token.address}${index}`}
-    >
-      {t(`format.currency`, { value: fee.amountUSD })} (
-      {parseFloat(formatUnits(fee.amount, fee.token.decimals))?.toFixed(9)}{' '}
-      {fee.token.symbol})
-    </Typography>
-  ));