@lifi/widget 3.0.1 → 3.1.0

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/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>
-  ));

package/components/RouteCard/RouteCardEssentialsExpanded.tsx

@@ -1,100 +1,18 @@
-import { AccessTimeFilled, Layers, MonetizationOn } from '@mui/icons-material';
+import { Layers } from '@mui/icons-material';
 import { Box, 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 { IconTypography } from '../IconTypography.js';
+import type { RouteCardEssentialsProps } from './types.js';
 
 export const RouteCardEssentialsExpanded: React.FC<
   RouteCardEssentialsProps
 > = ({ route }) => {
-  const { t, i18n } = useTranslation();
-  const executionTimeMinutes = Math.ceil(
-    route.steps
-      .map((step) => step.estimate.executionDuration)
-      .reduce((duration, x) => duration + x, 0) / 60,
-  );
-  const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
-  const gasCosts = getGasCostsBreakdown(route);
-  const feeCosts = getFeeCostsBreakdown(route, false);
-  const fees =
-    gasCostUSD + feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0);
+  const { t } = useTranslation();
   return (
     <Box flex={1} mt={2}>
-      <Box>
-        <Box display="flex" alignItems="center">
-          <IconTypography ml={1} mr={3}>
-            <MonetizationOn />
-          </IconTypography>
-          <Typography
-            fontSize={16}
-            color="text.primary"
-            fontWeight="600"
-            lineHeight={1.125}
-          >
-            {t(`format.currency`, {
-              value: fees,
-            })}
-          </Typography>
-        </Box>
-        <Box mt={0.5} ml={7}>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            fontWeight="500"
-            lineHeight={1.125}
-          >
-            {t('main.fees.networkEstimated')}
-          </Typography>
-          {getFeeBreakdownTypography(gasCosts, t)}
-          {feeCosts.length ? (
-            <Box mt={0.5}>
-              <Typography
-                fontSize={12}
-                color="text.secondary"
-                fontWeight="500"
-                lineHeight={1.125}
-              >
-                {t('main.fees.providerEstimated')}
-              </Typography>
-              {getFeeBreakdownTypography(feeCosts, t)}
-            </Box>
-          ) : null}
-        </Box>
-      </Box>
-      <Box mt={2}>
-        <Box display="flex" alignItems="center">
-          <IconTypography ml={1} mr={3}>
-            <Layers />
-          </IconTypography>
-          <Typography
-            fontSize={16}
-            color="text.primary"
-            fontWeight="600"
-            lineHeight={1.125}
-          >
-            {route.steps.length}
-          </Typography>
-        </Box>
-        <Box mt={0.5} ml={7}>
-          <Typography
-            fontSize={12}
-            color="text.secondary"
-            fontWeight="500"
-            lineHeight={1.125}
-          >
-            {t(`tooltip.numberOfSteps`)}
-          </Typography>
-        </Box>
-      </Box>
-      <Box display="flex" alignItems="center" mt={2}>
+      <Box display="flex" alignItems="center">
         <IconTypography ml={1} mr={3}>
-          <AccessTimeFilled />
+          <Layers />
         </IconTypography>
         <Typography
           fontSize={16}
@@ -102,27 +20,19 @@ export const RouteCardEssentialsExpanded: React.FC<
           fontWeight="600"
           lineHeight={1.125}
         >
-          {new Intl.NumberFormat(i18n.language, {
-            style: 'unit',
-            unit: 'minute',
-            unitDisplay: 'long',
-          }).format(executionTimeMinutes)}
+          {route.steps.length}
+        </Typography>
+      </Box>
+      <Box mt={0.5} ml={7}>
+        <Typography
+          fontSize={12}
+          color="text.secondary"
+          fontWeight="500"
+          lineHeight={1.125}
+        >
+          {t(`tooltip.numberOfSteps`)}
         </Typography>
       </Box>
     </Box>
   );
 };
-
-const getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>
-  fees.map((fee, index) => (
-    <Typography
-      fontSize={12}
-      fontWeight="500"
-      color="text.secondary"
-      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/RouteCard/types.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk';
+import type { Route } from '@lifi/sdk';
 
 export interface RouteCardProps {
   route: Route;
@@ -14,9 +14,3 @@ export interface RouteCardEssentialsProps {
 export interface RouteCardSkeletonProps {
   variant?: 'default' | 'cardless';
 }
-
-export interface FeesBreakdown {
-  amount: bigint;
-  amountUSD: number;
-  token: Token;
-}

package/components/Routes/RoutesExpanded.tsx

@@ -11,7 +11,6 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
 import { WidgetEvent } from '../../types/events.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { PageContainer } from '../PageContainer.js';
@@ -59,7 +58,6 @@ export const RoutesExpanded = () => {
 export const RoutesExpandedElement = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const setExecutableRoute = useSetExecutableRoute();
   const { subvariant } = useWidgetConfig();
   const routesRef = useRef<Route[]>();
   const emitter = useWidgetEvents();
@@ -71,15 +69,16 @@ export const RoutesExpandedElement = () => {
     isFetched,
     dataUpdatedAt,
     refetchTime,
-    refetch,
     fromChain,
+    refetch,
+    setReviewableRoute,
   } = useRoutes();
   const { account } = useAccount({ chainType: fromChain?.chainType });
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
 
   const handleRouteClick = (route: Route) => {
-    setExecutableRoute(route);
+    setReviewableRoute(route);
     navigate(navigationRoutes.transactionExecution, {
       state: { routeId: route.id },
     });

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -41,12 +41,7 @@ export const SendToWalletExpandButton: React.FC = () => {
   };
 
   return (
-    <Tooltip
-      title={t('main.sendToWallet')}
-      placement="bottom-end"
-      enterDelay={400}
-      arrow
-    >
+    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
       <Button
         variant={isActive ? 'contained' : 'text'}
         onClick={handleClick}

package/components/Step/Step.tsx

@@ -17,8 +17,9 @@ export const Step: React.FC<{
   step: LiFiStepExtended;
   fromToken?: TokenAmount;
   toToken?: TokenAmount;
+  impactToken?: TokenAmount;
   toAddress?: string;
-}> = ({ step, fromToken, toToken, toAddress }) => {
+}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   const { subvariant } = useWidgetConfig();
@@ -89,7 +90,15 @@ export const Step: React.FC<{
             toAddressLink={toAddressLink}
           />
         ) : null}
-        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
+        {toToken ? (
+          <Token
+            token={toToken}
+            impactToken={impactToken}
+            enableImpactTokenTooltip
+            px={2}
+            py={1}
+          />
+        ) : null}
       </Box>
     </Card>
   );