@lifi/widget 2.0.0-beta.1 → 2.0.0-beta.10

package/components/SmallAvatar.d.ts

@@ -33,4 +33,4 @@ export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").Sty
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const SmallAvatarSkeleton: () => JSX.Element;
+export declare const SmallAvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/components/Step/CircularProgress.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/components/Step/Step.js

@@ -5,7 +5,8 @@ import { Card, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
 import { Token } from '../../components/Token';
 import { useChains } from '../../hooks';
-import { shortenWalletAddress } from '../../utils';
+import { useWidgetConfig } from '../../providers';
+import { shortenAddress } from '../../utils';
 import { DestinationWalletAddress } from './DestinationWalletAddress';
 import { GasStepProcess } from './GasStepProcess';
 import { StepProcess } from './StepProcess';
@@ -13,6 +14,7 @@ import { StepTimer } from './StepTimer';
 export const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
+    const { variant } = useWidgetConfig();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -20,17 +22,25 @@ export const Step = ({ step, fromToken, toToken, toAddress }) => {
                 const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
                 const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
                 if (hasCrossStep && hasSwapStep) {
-                    return t('swap.stepSwapAndBridge');
+                    return variant === 'nft'
+                        ? t('swap.stepBridgeAndBuy')
+                        : t('swap.stepSwapAndBridge');
                 }
                 if (hasCrossStep) {
-                    return t('swap.stepBridge');
+                    return variant === 'nft'
+                        ? t('swap.stepBridgeAndBuy')
+                        : t('swap.stepBridge');
                 }
-                return t('swap.stepSwap');
+                return variant === 'nft'
+                    ? t('swap.stepSwapAndBuy')
+                    : t('swap.stepSwap');
             default:
-                return t('swap.stepSwap');
+                return variant === 'nft'
+                    ? t('swap.stepSwapAndBuy')
+                    : t('swap.stepSwap');
         }
     };
-    const formattedToAddress = shortenWalletAddress(toAddress);
+    const formattedToAddress = shortenAddress(toAddress);
     const toAddressLink = toAddress
         ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
         : undefined;

package/components/Step/StepList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { Route } from '@lifi/sdk';
-export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;
+export declare const getStepList: (route?: Route) => import("react/jsx-runtime").JSX.Element[] | undefined;

package/components/StepActions/StepActions.js

@@ -15,27 +15,13 @@ import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export const StepActions = ({ step, dense, ...other }) => {
     const { t } = useTranslation();
-    const { variant, contractTool } = useWidgetConfig();
+    const { variant } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = useState(false);
     const handleExpand = (e) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    const customStep = variant === 'nft'
-        ? step.includedSteps?.find((step) => step.type === 'custom')
-        : undefined;
     const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    if (customStep && contractTool) {
-        const toolDetails = {
-            key: contractTool.name,
-            name: contractTool.name,
-            logoURI: contractTool.logoURI,
-        };
-        customStep.toolDetails = toolDetails;
-        if (dense) {
-            step.toolDetails = toolDetails;
-        }
-    }
     return (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
                             tool: step.toolDetails.name,
                         }) }), hasCollapsedSteps ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), hasCollapsedSteps ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step, variant: variant }) })) : (_jsx(IncludedSteps, { step: step, variant: variant }))] }));
@@ -64,15 +50,13 @@ export const StepDetailsContent = ({ step, variant }) => {
     if (sameTokenProtocolStep) {
         fromAmount = Big(step.estimate.fromAmount)
             .div(10 ** step.action.fromToken.decimals)
-            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals))
+            .toString();
     }
     else {
         fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);
     }
-    const showToAmount = step.type !== 'custom' &&
-        step.tool !== 'custom' &&
-        variant !== 'nft' &&
-        !sameTokenProtocolStep;
+    const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
     return (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {

package/components/SwapButton/SwapButton.js

@@ -25,14 +25,26 @@ export const SwapButton = ({ onClick, hasRoute, text, disabled, loading, }) => {
     const getButtonText = () => {
         if (account.isActive) {
             if (!hasRoute) {
-                return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
+                switch (variant) {
+                    case 'nft':
+                        return t(`button.buy`);
+                    case 'refuel':
+                        return t(`button.getGas`);
+                    default:
+                        return t(`button.swap`);
+                }
             }
             if (text) {
                 return text;
             }
-            return variant !== 'refuel'
-                ? t(`button.reviewSwap`)
-                : t(`button.reviewGasSwap`);
+            switch (variant) {
+                case 'nft':
+                    return t(`button.reviewPurchase`);
+                case 'refuel':
+                    return t(`button.reviewGasSwap`);
+                default:
+                    return t(`button.reviewSwap`);
+            }
         }
         return t(`button.connectWallet`);
     };

package/components/SwapInput/FormPriceHelperText.js

@@ -4,7 +4,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
-import { formatTokenPrice } from '../../utils';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, }) => {
     const { t } = useTranslation();
     const [amount, chainId, tokenAddress] = useWatch({
@@ -22,6 +22,6 @@ export const FormPriceHelperText = ({ formType, }) => {
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: token?.amount,
+                    value: formatTokenAmount(token?.amount),
                 })}` })) : null] }));
 };

package/components/SwapInput/SwapInput.js

@@ -4,7 +4,7 @@ import { useController } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
-import { formatAmount } from '../../utils';
+import { formatInputAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { FitInputText } from './FitInputText';
 import { FormPriceHelperText } from './FormPriceHelperText';
@@ -21,12 +21,12 @@ export const SwapInput = ({ formType, ...props }) => {
     const ref = useRef(null);
     const handleChange = (event) => {
         const { value } = event.target;
-        const formattedAmount = formatAmount(value, true);
+        const formattedAmount = formatInputAmount(value, true);
         onChange(formattedAmount);
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        const formattedAmount = formatAmount(value);
+        const formattedAmount = formatInputAmount(value);
         onChange(formattedAmount);
         onBlur();
     };

package/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
-export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;
+export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/SwapInput/SwapInputEndAdornment.js

@@ -21,7 +21,7 @@ export const SwapInputEndAdornment = ({ formType }) => {
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
         const chain = getChainById(chainId);
-        let maxAmount;
+        let maxAmount = token?.amount;
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
@@ -33,7 +33,7 @@ export const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || token?.amount || '', {
+        setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || '', {
             shouldTouch: true,
         });
     };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Collapse } from '@mui/material';
-import { useState } from 'react';
+import { Box, Collapse, Tooltip, Typography } from '@mui/material';
+import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
+import { formatTokenAmount } from '../../utils';
 import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
@@ -22,8 +23,23 @@ export const SwapRouteCard = ({ route, active, variant = 'default', expanded, ..
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
-                            ? 'insurance-icon'
-                            : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? (_jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : Fragment;
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? (_jsxs(Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? (_jsx(InsuranceTooltip, { insuredAmount: formatTokenAmount(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: _jsxs(CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? (_jsx(CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? (_jsx(RecommendedTagTooltip, { children: _jsx(CardLabel, { type: active ? 'active' : undefined, children: _jsx(CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [_jsx(Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) }), _jsx(SwapRouteCardEssentials, { route: route })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
+const InsuranceTooltip = ({ insuredAmount, insuredTokenSymbol, children }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", children: t('swap.insurance.insure', {
+                        amount: insuredAmount,
+                        tokenSymbol: insuredTokenSymbol,
+                    }) }), _jsxs(Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [_jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.slippageError') })] })] }), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};
+const RecommendedTooltip = ({ children, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -15,7 +15,7 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = getGasCostsBreakdown(route);
     const feeCosts = getFeeCostsBreakdown(route, false);
-    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 11, children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 11, children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return (_jsxs(Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [_jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [gas.amount?.toFixed(9), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }, `${gas.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(EvStationIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), _jsx(Tooltip, { title: _jsxs(Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => (_jsxs(Typography, { fontSize: 12, fontWeight: "500", children: [fee.amount?.toFixed(9), " ", fee.token.symbol, " (", t(`format.currency`, { value: fee.amountUSD }), ")"] }, `${fee.token.address}${index}`)))] }), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(MonetizationOnIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), _jsx(Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: _jsxs(Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [_jsx(IconTypography, { children: _jsx(AccessTimeIcon, { fontSize: "small" }) }), _jsx(Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -4,7 +4,7 @@ import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = ({ variant, ...other }) => {
     const { variant: widgetVariant } = useWidgetConfig();
-    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
+    const cardContent = (_jsxs(Box, { flex: 1, children: [widgetVariant !== 'refuel' && widgetVariant !== 'nft' ? (_jsx(Box, { display: "flex", alignItems: "center", mb: 2, children: _jsx(Skeleton, { variant: "rectangular", width: 112, height: 24, sx: (theme) => ({
                         borderRadius: `${theme.shape.borderRadius}px`,
                     }) }) })) : null, _jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { mr: 2, children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) }), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] }), _jsxs(Box, { ml: 6, display: "flex", alignItems: "center", children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16 }), _jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })] })] }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 64, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), _jsx(Skeleton, { variant: "text", width: 32, height: 20 })] })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : (_jsx(Card, { indented: true, ...other, children: cardContent }));

package/components/SwapRoutes/SwapRoutes.js

@@ -25,7 +25,7 @@ export const SwapRoutes = (props) => {
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
     const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
     const showAll = !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1;
-    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+    return (_jsxs(Card, { ...props, children: [_jsx(CardTitle, { children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const SwapRoutesExpanded: () => JSX.Element;
-export declare const SwapRoutesExpandedElement: () => JSX.Element;
+export declare const SwapRoutesExpanded: () => import("react/jsx-runtime").JSX.Element;
+export declare const SwapRoutesExpandedElement: () => import("react/jsx-runtime").JSX.Element;

package/components/SwapRoutes/SwapRoutesExpanded.js

@@ -19,7 +19,7 @@ export const SwapRoutesExpandedElement = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const setExecutableRoute = useSetExecutableRoute();
-    const { containerStyle } = useWidgetConfig();
+    const { variant, containerStyle } = useWidgetConfig();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const currentRoute = routes?.[0];
@@ -33,5 +33,5 @@ export const SwapRoutesExpandedElement = () => {
     };
     const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched);
     const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
-    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
+    return (_jsx(Collapse, { timeout: timeout.enter, in: expanded, orientation: "horizontal", children: _jsx(Grow, { timeout: timeout.enter, in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(Container, { sx: containerStyle, enableColorScheme: true, children: _jsxs(ScrollableContainer, { children: [_jsxs(Header, { children: [_jsx(Typography, { fontSize: 18, fontWeight: "700", flex: 1, noWrap: true, children: variant === 'nft' ? t('swap.fromAmount') : t('header.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), _jsx(Stack, { direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3, children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || (isFetching && !routes?.length) ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (routes?.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: routes?.length <= 2 }, route.id)))) })] }) }) }) }));
 };

package/components/SwapRoutes/SwapRoutesExpanded.style.js

@@ -8,6 +8,7 @@ export const CollapseContainer = styled(Box)(({ theme }) => ({
 export const ScrollableContainer = styled(Box)({
     overflowY: 'auto',
     height: '100%',
+    width: '100%',
     flex: 1,
     display: 'flex',
     flexDirection: 'column',

package/components/Token/Token.js

@@ -13,7 +13,7 @@ export const Token = ({ token, ...other }) => {
     }
     return _jsx(TokenBase, { token: token, ...other });
 };
-export const TokenFallback = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
+export const TokenFallback = ({ token, isLoading, ...other }) => {
     const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
     return (_jsx(TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
 };

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-import type { Chain, Token } from '@lifi/sdk';
+import type { Chain, StaticToken } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 export declare const TokenAvatarFallback: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarBase: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
-    token?: Token;
+    token?: StaticToken;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;

package/components/TokenList/TokenList.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useRef } from 'react';
 import { useWatch } from 'react-hook-form';
-import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
+import { useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
-import { useTokenSelect } from './useTokenSelect';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
+import { useTokenSelect } from './useTokenSelect';
 export const TokenList = ({ formType, height, onClick, }) => {
     const parentRef = useRef(null);
     const { account } = useWallet();
@@ -14,8 +14,11 @@ export const TokenList = ({ formType, height, onClick, }) => {
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const [tokenSearchFilter] = useDebouncedWatch([SwapFormKey.TokenSearchFilter], 320);
+    const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
-    let filteredTokens = (tokensWithBalance ?? chainTokens ?? []);
+    let filteredTokens = (tokensWithBalance ??
+        chainTokens ??
+        []);
     const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
     filteredTokens = tokenSearchFilter
         ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
@@ -27,12 +30,14 @@ export const TokenList = ({ formType, height, onClick, }) => {
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-    const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    const isLoading = isTokensLoading ||
+        isChainLoading ||
+        (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = useTokenSelect(formType, onClick);
-    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
+    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };

package/components/TokenList/TokenList.style.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+import type { StyledComponent } from '@emotion/styled';
+import type { ButtonProps, LinkProps } from '@mui/material';
+export declare const ListItemButton: StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -18,7 +20,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListItem: import("@emotion/styled").StyledComponent<{
+export declare const ListItem: StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
     components?: {
@@ -36,3 +38,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LinkButton: StyledComponent<ButtonProps & LinkProps>;

package/components/TokenList/TokenList.style.js

@@ -1,7 +1,7 @@
-import { ListItem as MuiListItem } from '@mui/material';
+import { Button, ListItem as MuiListItem, buttonClasses } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { listItemTextClasses } from '@mui/material/ListItemText';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
 export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
     paddingLeft: theme.spacing(1.5),
@@ -26,3 +26,22 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
         whiteSpace: 'nowrap',
     },
 }));
+export const LinkButton = styled(Button)(({ theme }) => ({
+    lineHeight: 1,
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    padding: theme.spacing(0.375, 0.75),
+    color: 'inherit',
+    backgroundColor: 'unset',
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? alpha(theme.palette.common.black, 0.04)
+            : alpha(theme.palette.common.white, 0.08),
+    },
+    [`.${buttonClasses.endIcon}`]: {
+        marginLeft: theme.spacing(0.25),
+    },
+    [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '0.75rem',
+    },
+}));

package/components/TokenList/TokenListItem.d.ts

@@ -2,5 +2,5 @@
 import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 export declare const TokenListItem: React.FC<TokenListItemProps>;
 export declare const TokenListItemButton: React.FC<TokenListItemButtonProps>;
-export declare const TokenListItemSkeleton: () => JSX.Element;
+export declare const TokenListItemSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const TokenAmountSkeleton: React.FC;

package/components/TokenList/TokenListItem.js

@@ -1,21 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Typography, } from '@mui/material';
-import { memo } from 'react';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
+import { Avatar, Box, Link, ListItemAvatar, ListItemText, Skeleton, Slide, Typography, } from '@mui/material';
+import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice } from '../../utils';
-import { ListItem, ListItemButton } from './TokenList.style';
-export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
+import { formatTokenAmount, formatTokenPrice, shortenAddress, } from '../../utils';
+import { LinkButton, ListItem, ListItemButton } from './TokenList.style';
+export const TokenListItem = memo(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return (_jsxs(ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
+        }, children: [startAdornment, _jsx(TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
 });
-export const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+export const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoading, }) => {
     const { t } = useTranslation();
     const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
-    return (_jsxs(ListItemButton, { onClick: onClick, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
-                            value: token.amount,
+    const container = useRef(null);
+    const timeoutId = useRef();
+    const [showAddress, setShowAddress] = useState(false);
+    const onMouseEnter = () => {
+        timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+    };
+    const onMouseLeave = () => {
+        clearTimeout(timeoutId.current);
+        if (showAddress) {
+            setShowAddress(false);
+        }
+    };
+    return (_jsxs(ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), _jsx(ListItemText, { primary: token.symbol, secondaryTypographyProps: {
+                    component: 'div',
+                    sx: {
+                        overflow: 'auto',
+                        marginLeft: -0.75,
+                    },
+                }, secondary: _jsxs(Box, { position: "relative", height: 18, ref: container, children: [_jsx(Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, children: _jsx(Box, { pl: 0.75, children: token.name }) }), _jsx(Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, mountOnEnter: true, children: _jsx(LinkButton, { size: "small", LinkComponent: Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: _jsx(OpenInNewIcon, {}), children: shortenAddress(token.address) }) })] }) }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? (_jsx(Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+                            value: formatTokenAmount(token.amount),
                         }) })) : null, tokenPrice ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,
                         }) })) : null] }))) : null] }));

package/components/TokenList/VirtualizedTokenList.js

@@ -4,7 +4,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TokenListItem, TokenListItemSkeleton } from './TokenListItem';
-export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
+export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, chain, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = useTranslation();
     const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
     const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
@@ -32,7 +32,7 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
             }
             return size;
         },
-        getItemKey: (index) => tokens[index].address ?? index,
+        getItemKey: (index) => `${tokens[index].address}-${index}`,
     });
     useEffect(() => {
         if (getVirtualItems().length) {
@@ -46,7 +46,7 @@ export const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollEleme
     }
     return (_jsx(List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
                     item.index !== tokensLastIndex ? (_jsx(Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));