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

package/cjs/components/Insurance/InsuranceCard.js

@@ -2,25 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsuranceCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
 const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const icons_1 = require("../../icons");
 const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const Switch_1 = require("../Switch");
-const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
-                                    ? t(`swap.tags.insurance`)
-                                    : t(`swap.tags.insured`) })] }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
-                            value: feeAmountUsd,
-                        }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: status === stores_1.RouteExecutionStatus.Idle
-                            ? 'Get 100% coverage for lost tokens.'
-                            : '100% coverage for lost tokens.' }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
-                            ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
-                            : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
-                                ? 'Learn more'
-                                : 'View coverage' }) })] })] }));
+    const [enabled, setEnabled] = (0, react_1.useState)(false);
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(status === stores_1.RouteExecutionStatus.Idle);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        onChange?.(checked);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
+                                    ? t('swap.tags.insurance')
+                                    : t('swap.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: handleSwitch, value: enabled })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                        value: feeAmountUsd,
+                                    }) }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, children: (0, jsx_runtime_1.jsx)(react_i18next_1.Trans, { children: status === stores_1.RouteExecutionStatus.Idle
+                                            ? t('swap.insurance.insure', {
+                                                amount: insuredAmount,
+                                                tokenSymbol: insuredTokenSymbol,
+                                            })
+                                            : t('swap.insurance.insured', {
+                                                amount: insuredAmount,
+                                                tokenSymbol: insuredTokenSymbol,
+                                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabled || status !== stores_1.RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            listStyleType: 'disc',
+                                            pl: 2,
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
+                                        ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
+                                        : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
+                                            ? t('button.learnMore')
+                                            : t('button.viewCoverage') }) })] })] }) })] }));
 };
 exports.InsuranceCard = InsuranceCard;

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -3,23 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsuranceCollapsed = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
 const InsuranceCard_1 = require("./InsuranceCard");
-const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
-    const [insuredRoute, setInsuredRoute] = (0, react_1.useState)();
+const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) => {
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
-    (0, hooks_1.useSwapRoutes)({
+    const { routes } = (0, hooks_1.useSwapRoutes)({
         insurableRoute: routeExecution?.route,
-        onSettled(data) {
-            if (data?.routes?.[0]) {
-                setInsuredRoute(data.routes[0]);
-            }
-        },
     });
-    const toggleInsurance = (_, checked) => {
+    const insuredRoute = routes?.[0];
+    const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {
                 setExecutableRoute(insuredRoute, insurableRouteId);
@@ -27,6 +22,9 @@ const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, fee
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
+    if (!insuredRoute) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === stores_1.RouteExecutionStatus.Idle, children: (0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { ...props, status: status, insuredAmount: (0, utils_1.formatTokenAmount)(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
 };
 exports.InsuranceCollapsed = InsuranceCollapsed;

package/cjs/components/Insurance/index.d.ts

@@ -1 +1,2 @@
 export * from './Insurance';
+export * from './types';

package/cjs/components/Insurance/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Insurance"), exports);
+__exportStar(require("./types"), exports);

package/cjs/components/Insurance/types.d.ts

@@ -1,16 +1,19 @@
-/// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { RouteExecutionStatus } from '../../stores';
-export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
-    insurableRouteId: string;
-    feeAmountUsd?: string;
+export interface InsuredAmount {
+    insuredAmount: string;
+    insuredTokenSymbol: string;
+}
+interface Insurance extends InsuredAmount {
+    feeAmountUsd: string;
     insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
+}
+export interface InsuranceProps extends Insurance, Omit<BoxProps, 'onChange'> {
+    insurableRouteId: string;
     onChange?: (routeId: string) => void;
 }
-export interface InsuranceCardProps {
-    feeAmountUsd?: string;
-    status?: RouteExecutionStatus;
-    insuranceCoverageId?: string;
-    onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+export interface InsuranceCardProps extends Insurance, Omit<BoxProps, 'onChange'> {
+    onChange?: (checked: boolean) => void;
 }
+export {};

package/cjs/components/NFT/NFT.js

@@ -9,7 +9,7 @@ const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const Token_1 = require("../Token");
 const NFT_style_1 = require("./NFT.style");
-const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, contract, ...props }) => {
+const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => {
@@ -24,6 +24,6 @@ const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, cont
             setValue(providers_1.SwapFormKey.ToContractGasLimit, contract.gasLimit);
         }
     }, [contract, setValue, token]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectonName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : ((0, jsx_runtime_1.jsx)(NFT_style_1.PreviewAvatar, { src: imageUrl })), (0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 2, children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 144, height: 21, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 27, variant: "text" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', (0, jsx_runtime_1.jsx)(material_1.Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, isLoading: isLoading, mt: 2 })] }));
 };
 exports.NFT = NFT;

package/cjs/components/NFT/types.d.ts

@@ -2,7 +2,7 @@ import type { TokenAmount } from '@lifi/sdk';
 import type { WidgetContract } from '../../types';
 export interface NFTProps {
     imageUrl?: string;
-    collectonName?: string;
+    collectionName?: string;
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;

package/cjs/components/PoweredBy/PoweredBy.js

@@ -8,7 +8,6 @@ const version_1 = require("../../config/version");
 const providers_1 = require("../../providers");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
-const LiFiLogo_1 = require("../LiFiLogo");
 const PoweredBy_style_1 = require("./PoweredBy.style");
 const PoweredBy = () => {
     const { hiddenUI } = (0, providers_1.useWidgetConfig)();
@@ -17,10 +16,10 @@ const PoweredBy = () => {
         pathname.includes(utils_1.navigationRoutes.toToken)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, py: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 1, pb: hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 3000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(LiFiLogo_1.LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] }) })) : null }));
+        }, children: !hiddenUI?.includes(types_1.HiddenUI.PoweredBy) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `v${version_1.version}`, placement: "top", enterDelay: 1000, arrow: true, children: (0, jsx_runtime_1.jsxs)(PoweredBy_style_1.Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
 };
 exports.PoweredBy = PoweredBy;

package/cjs/components/SelectChainAndToken.js

@@ -10,7 +10,7 @@ const providers_1 = require("../providers");
 const types_1 = require("../types");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI, variant } = (0, providers_1.useWidgetConfig)();
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
@@ -19,20 +19,21 @@ const SelectChainAndToken = (props) => {
             providers_1.SwapFormKey.ToToken,
         ],
     });
-    const disabledReverse = variant === 'refuel' ||
+    const hiddenReverse = variant === 'refuel' ||
         disabledUI?.includes(types_1.DisabledUI.FromToken) ||
-        disabledUI?.includes(types_1.DisabledUI.ToToken);
-    const nftVariant = variant === 'nft';
+        disabledUI?.includes(types_1.DisabledUI.ToToken) ||
+        hiddenUI?.includes(types_1.HiddenUI.ToToken);
+    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(types_1.HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&
         toToken &&
         !prefersNarrowView &&
-        !nftVariant;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        !hiddenToToken;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -16,6 +16,7 @@ const SelectTokenButton = ({ formType, compact }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const swapOnly = (0, hooks_1.useSwapOnly)();
     const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType), tokenKey],
@@ -32,10 +33,12 @@ const SelectTokenButton = ({ formType, compact }) => {
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
     const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t(`header.selectChain`)
-        : t(`swap.selectChainAndToken`);
+        ? t('swap.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('swap.selectToken')
+            : t('swap.selectChainAndToken');
     const cardTitle = formType === 'from' && variant === 'nft'
-        ? t(`swap.payWith`)
+        ? t(`header.payWith`)
         : t(`swap.${formType}`);
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { flex: 1, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };

package/cjs/components/SendToWallet/SendToWallet.js

@@ -15,7 +15,7 @@ const SendToWallet_style_1 = require("./SendToWallet.style");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { trigger, getValues, clearErrors } = (0, react_hook_form_1.useFormContext)();
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { disabledUI, hiddenUI, requiredUI, toAddress } = (0, providers_1.useWidgetConfig)();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
@@ -33,7 +33,7 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
                     if (!value) {
                         return true;
                     }
-                    const address = await provider?.resolveName(value);
+                    const address = await account.signer?.provider?.resolveName(value);
                     return ((0, address_1.isAddress)(address || value) ||
                         t('swap.error.title.walletAddressInvalid'));
                 }

package/cjs/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/cjs/components/Step/CircularProgress.d.ts

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

package/cjs/components/Step/Step.js

@@ -8,6 +8,7 @@ const Card_1 = require("../../components/Card");
 const StepActions_1 = require("../../components/StepActions");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const DestinationWalletAddress_1 = require("./DestinationWalletAddress");
 const GasStepProcess_1 = require("./GasStepProcess");
@@ -16,6 +17,7 @@ const StepTimer_1 = require("./StepTimer");
 const Step = ({ step, fromToken, toToken, toAddress }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
     const getCardTitle = () => {
         switch (step.type) {
@@ -23,17 +25,25 @@ 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 = (0, utils_1.shortenWalletAddress)(toAddress);
+    const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);
     const toAddressLink = toAddress
         ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
         : undefined;

package/cjs/components/Step/StepList.d.ts

@@ -1,2 +1,2 @@
 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/cjs/components/StepActions/StepActions.js

@@ -18,27 +18,13 @@ const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
 const StepActions = ({ step, dense, ...other }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, contractTool } = (0, providers_1.useWidgetConfig)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const [cardExpanded, setCardExpanded] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { children: (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
                             tool: step.toolDetails.name,
                         }) }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, variant: variant }))] }));
@@ -69,15 +55,13 @@ const StepDetailsContent = ({ step, variant }) => {
     if (sameTokenProtocolStep) {
         fromAmount = (0, big_js_1.default)(step.estimate.fromAmount)
             .div(10 ** step.action.fromToken.decimals)
-            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals))
+            .toString();
     }
     else {
         fromAmount = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
                 value: fromAmount,
             }), ' ', step.action.fromToken.symbol, showToAmount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {

package/cjs/components/SwapButton/SwapButton.js

@@ -28,14 +28,26 @@ 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/cjs/components/SwapInput/FormPriceHelperText.js

@@ -25,7 +25,7 @@ const FormPriceHelperText = ({ formType, }) => {
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: token?.amount,
+                    value: (0, utils_1.formatTokenAmount)(token?.amount),
                 })}` })) : null] }));
 };
 exports.FormPriceHelperText = FormPriceHelperText;

package/cjs/components/SwapInput/SwapInput.js

@@ -24,12 +24,12 @@ const SwapInput = ({ formType, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     const handleChange = (event) => {
         const { value } = event.target;
-        const formattedAmount = (0, utils_1.formatAmount)(value, true);
+        const formattedAmount = (0, utils_1.formatInputAmount)(value, true);
         onChange(formattedAmount);
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        const formattedAmount = (0, utils_1.formatAmount)(value);
+        const formattedAmount = (0, utils_1.formatInputAmount)(value);
         onChange(formattedAmount);
         onBlur();
     };

package/cjs/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,2 +1,2 @@
 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/cjs/components/SwapInput/SwapInputEndAdornment.js

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

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -9,6 +9,7 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
 const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
@@ -25,9 +26,24 @@ const SwapRouteCard = ({ route, active, variant = 'default', expanded, ...other
     const token = widgetVariant === 'nft'
         ? { ...route.fromToken, amount: route.fromAmount }
         : { ...route.toToken, amount: route.toAmount };
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
-                            ? 'insurance-icon'
-                            : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
+    const RecommendedTagTooltip = route.tags?.[0] === 'RECOMMENDED' ? RecommendedTooltip : react_1.Fragment;
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [widgetVariant !== 'refuel' && (insurable || route.tags?.length) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mb: 2, children: [insurable ? ((0, jsx_runtime_1.jsx)(InsuranceTooltip, { insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, children: (0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: route.tags?.length && !cardExpanded
+                                ? 'insurance-icon'
+                                : 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), cardExpanded || !route.tags?.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: t(`swap.tags.insurable`) })) : null] }) })) : null, route.tags?.length ? ((0, jsx_runtime_1.jsx)(RecommendedTagTooltip, { children: (0, jsx_runtime_1.jsx)(Card_1.CardLabel, { type: active ? 'active' : undefined, children: (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { children: t(`swap.tags.${route.tags[0].toLowerCase()}`) }) }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: !cardExpanded ? route.steps[0] : undefined }), !expanded ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) }), (0, jsx_runtime_1.jsx)(SwapRouteCardEssentials_1.SwapRouteCardEssentials, { route: route })] }));
     return widgetVariant === 'refuel' || variant === 'cardless' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true, ...other, children: cardContent }));
 };
 exports.SwapRouteCard = SwapRouteCard;
+const InsuranceTooltip = ({ insuredAmount, insuredTokenSymbol, children }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", children: t('swap.insurance.insure', {
+                        amount: insuredAmount,
+                        tokenSymbol: insuredTokenSymbol,
+                    }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        listStyleType: 'disc',
+                        pl: 2,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.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 } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('tooltip.recommended'), placement: "top", enterDelay: 400, arrow: true, children: children }));
+};

package/cjs/components/SwapRouteCard/SwapRouteCardEssentials.js

@@ -18,7 +18,7 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCostUSD = parseFloat(route.gasCostUSD ?? '') || 0.01;
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
     const feeCosts = (0, utils_1.getFeeCostsBreakdown)(route, false);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: 'space-between', flex: 1, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas, index) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, { value: gasCostUSD }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: [t(`tooltip.additionalProviderFee`), feeCosts.map((fee, index) => ((0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(MonetizationOn_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t(`format.currency`, {
                                 value: feeCosts.reduce((sum, feeCost) => sum + feeCost.amountUSD, 0),
                             }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", mr: dense ? 0 : 2, children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconTypography, { children: (0, jsx_runtime_1.jsx)(AccessTimeFilled_1.default, { fontSize: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1, children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

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

package/cjs/components/SwapRoutes/SwapRoutes.js

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

package/cjs/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,2 +1,2 @@
-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;