@lifi/widget 1.27.1 → 1.28.0

package/cjs/components/StepActions/StepActions.js

@@ -11,25 +11,43 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = void 0;
+exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const SmallAvatar_1 = require("../SmallAvatar");
 const StepActions_style_1 = require("./StepActions.style");
 const StepActions = (_a) => {
-    var _b;
+    var _b, _c;
     var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
-    const StepDetailsLabel = step.type === 'cross' ||
-        (step.type === 'lifi' &&
-            step.includedSteps.some((step) => step.type === 'cross'))
-        ? exports.CrossStepDetailsLabel
-        : exports.SwapStepDetailsLabel;
+    const { variant, contractTool } = (0, providers_1.useWidgetConfig)();
+    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+        ? exports.CustomStepDetailsLabel
+        : step.type === 'cross' ||
+            (step.type === 'lifi' &&
+                step.includedSteps.some((step) => step.type === 'cross'))
+            ? exports.CrossStepDetailsLabel
+            : exports.SwapStepDetailsLabel;
     const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
+    const customStep = variant === 'nft'
+        ? (_c = step.includedSteps) === null || _c === void 0 ? void 0 : _c.find((step) => step.type === 'custom')
+        : undefined;
+    if (customStep && contractTool) {
+        const toolDetails = {
+            key: contractTool.name,
+            name: contractTool.name,
+            logoURI: contractTool.logoURI,
+        };
+        customStep.toolDetails = toolDetails;
+        if (!isFullView) {
+            step.toolDetails = toolDetails;
+        }
+    }
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
         var _a;
@@ -40,19 +58,30 @@ const StepActions = (_a) => {
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) : step.toolDetails.name[0] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, Object.assign({ orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => ((0, jsx_runtime_1.jsxs)(material_1.Step, Object.assign({ expanded: true }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) })), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step }) })] }), step.id))) }))) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6 }, { children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step })] })))] })));
+                            : step.toolDetails.name }))] })), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, Object.assign({ orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, Object.assign({ expanded: true }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'custom' && variant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) })), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant }) })] }), step.id))) }))) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6 }, { children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, variant: variant })] })))] })));
 };
 exports.StepActions = StepActions;
-const StepDetailsContent = ({ step }) => {
+const StepDetailsContent = ({ step, variant }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
-            }), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
-            }), ' ', (_h = (_g = (_f = step.execution) === null || _f === void 0 ? void 0 : _f.toToken) === null || _g === void 0 ? void 0 : _g.symbol) !== null && _h !== void 0 ? _h : step.action.toToken.symbol] })));
+            }), ' ', step.action.fromToken.symbol, !((step.type === 'custom' || step.tool === 'custom') &&
+                variant === 'nft') ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                        value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, (_e = (_d = (_c = step.execution) === null || _c === void 0 ? void 0 : _c.toToken) === null || _d === void 0 ? void 0 : _d.decimals) !== null && _e !== void 0 ? _e : step.action.toToken.decimals),
+                    }), ' ', (_h = (_g = (_f = step.execution) === null || _f === void 0 ? void 0 : _f.toToken) === null || _g === void 0 ? void 0 : _g.symbol) !== null && _h !== void 0 ? _h : step.action.toToken.symbol] })) : null] })));
 };
 exports.StepDetailsContent = StepDetailsContent;
+const CustomStepDetailsLabel = ({ step, variant, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    if (!variant) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t(`swap.${variant}StepDetails`, {
+            tool: step.toolDetails.name,
+        }) })));
+};
+exports.CustomStepDetailsLabel = CustomStepDetailsLabel;
 const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();

package/cjs/components/StepActions/StepActions.style.d.ts

@@ -17,4 +17,4 @@ export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
     variant?: "square" | "circular" | "rounded" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,6 +1,11 @@
 import type { Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
+import type { WidgetVariant } from '../../types';
 export interface StepActionsProps extends BoxProps {
     step: Step;
     dense?: boolean;
 }
+export interface StepDetailsLabelProps {
+    step: Step;
+    variant?: Extract<WidgetVariant, 'nft'>;
+}

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

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import type { BoxProps } from '@mui/material';
 import type { SwapFormTypeProps } from '../../providers';
-export declare const SwapInput: React.FC<SwapFormTypeProps>;
+export declare const SwapInput: React.FC<SwapFormTypeProps & BoxProps>;

package/cjs/components/SwapInput/SwapInput.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,7 +25,8 @@ const FormPriceHelperText_1 = require("./FormPriceHelperText");
 const SwapInput_style_1 = require("./SwapInput.style");
 const SwapInputEndAdornment_1 = require("./SwapInputEndAdornment");
 const SwapInputStartAdornment_1 = require("./SwapInputStartAdornment");
-const SwapInput = ({ formType }) => {
+const SwapInput = (_a) => {
+    var { formType } = _a, props = __rest(_a, ["formType"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = (0, react_hook_form_1.useController)({
@@ -34,8 +46,8 @@ const SwapInput = ({ formType }) => {
         onBlur();
     };
     const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromAmount);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: (0, jsx_runtime_1.jsx)(SwapInputStartAdornment_1.SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? ((0, jsx_runtime_1.jsx)(SwapInputEndAdornment_1.SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: (0, jsx_runtime_1.jsx)(SwapInputStartAdornment_1.SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? ((0, jsx_runtime_1.jsx)(SwapInputEndAdornment_1.SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { formType: formType })] })), (0, jsx_runtime_1.jsx)(FitInputText_1.FitInputText, { ref: ref, formType: formType })] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { formType: formType })] })), (0, jsx_runtime_1.jsx)(FitInputText_1.FitInputText, { ref: ref, formType: formType })] })));
 };
 exports.SwapInput = SwapInput;

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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
+    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/cjs/components/SwapInput/SwapInputAdornment.style.d.ts

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -37,7 +37,9 @@ const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ 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))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    const token = widgetVariant === 'nft'
+        ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount });
+    const cardContent = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ 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))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
     return widgetVariant === 'refuel' ? (cardContent) : ((0, jsx_runtime_1.jsx)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: cardContent })));
 };
 exports.SwapRouteCard = SwapRouteCard;

package/cjs/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -17,7 +17,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/cjs/components/Token/Token.d.ts

@@ -2,7 +2,7 @@
 import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 interface TokenProps {
-    token: TokenAmount;
+    token?: TokenAmount;
     connected?: boolean;
     step?: Step;
     disableDescription?: boolean;

package/cjs/components/Token/Token.js

@@ -23,34 +23,34 @@ const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
 const Token = (_a) => {
     var { token } = _a, other = __rest(_a, ["token"]);
-    if (!token.priceUSD || !token.logoURI) {
+    if (!(token === null || token === void 0 ? void 0 : token.priceUSD) || !token.logoURI) {
         return (0, jsx_runtime_1.jsx)(exports.TokenFallback, Object.assign({ token: token }, other));
     }
     return (0, jsx_runtime_1.jsx)(exports.TokenBase, Object.assign({ token: token }, other));
 };
 exports.Token = Token;
 const TokenFallback = (_a) => {
-    var { token, connected, step, disableDescription } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription"]);
-    const { token: chainToken, isLoading } = (0, hooks_1.useToken)(token.chainId, token.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading }, other)));
+    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
+    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
+    return ((0, jsx_runtime_1.jsx)(exports.TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading || isLoadingToken }, other)));
 };
 exports.TokenFallback = TokenFallback;
 const TokenBase = (_a) => {
     var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { chain } = (0, hooks_1.useChain)(token.chainId);
-    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token.amount, token.decimals);
-    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = (0, hooks_1.useChain)(token === null || token === void 0 ? void 0 : token.chainId);
+    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token === null || token === void 0 ? void 0 : token.amount, token === null || token === void 0 ? void 0 : token.decimals);
+    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token === null || token === void 0 ? void 0 : token.priceUSD);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 32, variant: "text" })) : ((0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
                         } }, { children: t('format.number', {
                             value: formattedTokenAmount,
-                        }) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
+                        }) })))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
                             value: formattedTokenPrice,
-                        }) })), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
-                            tokenSymbol: token.symbol,
+                        }) }))), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? (isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                            tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
                             chainName: chain === null || chain === void 0 ? void 0 : chain.name,
-                        }) }))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                        }) })))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                         border: 0,
                                         marginBottom: -0.25,
                                     } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: true }, { children: step.toolDetails.name }))] }))) : null] }))] })));

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -2,18 +2,20 @@
 import type { Chain, Token } from '@lifi/sdk';
 import type { SxProps, Theme } from '@mui/material';
 export declare const TokenAvatarFallback: React.FC<{
-    token: Token;
+    token?: Token;
+    isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarBase: React.FC<{
-    token: Token;
+    token?: Token;
     chain?: Chain;
     isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
-    token: Token;
+    token?: Token;
     chain?: Chain;
+    isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatarDefault: React.FC<{

package/cjs/components/TokenAvatar/TokenAvatar.js

@@ -6,21 +6,22 @@ const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
 const SmallAvatar_1 = require("../SmallAvatar");
 const TokenAvatar_style_1 = require("./TokenAvatar.style");
-const TokenAvatarFallback = ({ token, sx }) => {
-    const { chain } = (0, hooks_1.useChain)(token.chainId);
-    const { token: chainToken, isLoading } = (0, hooks_1.useToken)(token.chainId, token.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading, chain: chain, sx: sx }));
+const TokenAvatarFallback = ({ token, isLoading, sx }) => {
+    const { chain } = (0, hooks_1.useChain)(token === null || token === void 0 ? void 0 : token.chainId);
+    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
+    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
 };
 exports.TokenAvatarFallback = TokenAvatarFallback;
 const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 32, height: 32, variant: "circular" })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) })));
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 32, height: 32, variant: "circular" })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token === null || token === void 0 ? void 0 : token.logoURI, alt: token === null || token === void 0 ? void 0 : token.symbol }, { children: (_a = token === null || token === void 0 ? void 0 : token.symbol) === null || _a === void 0 ? void 0 : _a[0] }))) })));
 };
 exports.TokenAvatarBase = TokenAvatarBase;
-const TokenAvatar = ({ token, chain, sx }) => {
-    if (!chain || !token.logoURI) {
-        return (0, jsx_runtime_1.jsx)(exports.TokenAvatarFallback, { token: token, sx: sx });
+const TokenAvatar = ({ token, chain, isLoading, sx }) => {
+    if (!chain || !(token === null || token === void 0 ? void 0 : token.logoURI)) {
+        return (0, jsx_runtime_1.jsx)(exports.TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
     }
-    return (0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: token, chain: chain, sx: sx });
+    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
 };
 exports.TokenAvatar = TokenAvatar;
 const TokenAvatarDefault = ({ sx }) => {

package/cjs/components/TokenList/TokenList.style.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
+const ListItemText_1 = require("@mui/material/ListItemText");
 const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
@@ -26,4 +27,9 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${ListItemText_1.listItemTextClasses.primary}, & .${ListItemText_1.listItemTextClasses.secondary}`]: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
 }));

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -39,8 +39,10 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
         getItemKey: (index) => { var _a; return (_a = tokens[index].address) !== null && _a !== void 0 ? _a : index; },
     });
     (0, react_1.useEffect)(() => {
-        scrollToIndex(0, { align: 'start' });
-    }, [scrollToIndex, chainId]);
+        if (getVirtualItems().length) {
+            scrollToIndex(0, { align: 'start' });
+        }
+    }, [scrollToIndex, chainId, getVirtualItems]);
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ disablePadding: true }, { children: Array.from({ length: 3 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key

package/cjs/config/theme.js

@@ -45,7 +45,7 @@ const shape = {
     borderRadiusSecondary: 6,
 };
 const createTheme = (mode, theme = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     const primaryMainColor = (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : palette.primary.main;
     const primaryLightColor = (0, styles_1.lighten)((_f = (_e = (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : palette.primary.main, 0.5);
     const primaryDarkColor = (0, styles_1.darken)((_j = (_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h.main) !== null && _j !== void 0 ? _j : palette.primary.main, 0.2);
@@ -150,14 +150,12 @@ const createTheme = (mode, theme = {}) => {
                     },
                 },
             },
-            MuiAvatar: {
-                styleOverrides: {
+            MuiAvatar: Object.assign({ styleOverrides: {
                     root: {
                         height: 32,
                         width: 32,
                     },
-                },
-            },
+                } }, (_w = theme.components) === null || _w === void 0 ? void 0 : _w.MuiAvatar),
             MuiListItemAvatar: {
                 styleOverrides: {
                     root: {

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.27.1";
+export declare const version = "1.28.0";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.27.1';
+exports.version = '1.28.0';

package/cjs/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,12 @@
+import type { Route } from '@lifi/sdk';
 export declare const useSwapRoutes: () => {
-    routes: import("@lifi/sdk").Route[] | undefined;
+    routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse, any>>;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/sdk").RoutesResponse | {
+        routes: Route[];
+    }, any>>;
 };

package/cjs/hooks/useSwapRoutes.js

@@ -15,6 +15,7 @@ const sdk_1 = require("@lifi/sdk");
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
+const uuid_1 = require("uuid");
 const _1 = require(".");
 const providers_1 = require("../providers");
 const stores_1 = require("../stores");
@@ -31,36 +32,47 @@ const useSwapRoutes = () => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
+    const [fromChainId, fromTokenAddress, toAddress, toTokenAmount, toChainId, toContractAddress, toContractCallData, toContractGasLimit, toTokenAddress,] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToAddress,
+            providers_1.SwapFormKey.ToAmount,
             providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.ToContractAddress,
+            providers_1.SwapFormKey.ToContractCallData,
+            providers_1.SwapFormKey.ToContractGasLimit,
             providers_1.SwapFormKey.ToToken,
-            providers_1.SwapFormKey.ToAddress,
         ],
     });
-    const [fromTokenAmount] = (0, _1.useDebouncedWatch)([providers_1.SwapFormKey.FromAmount], 320);
     const { token: fromToken } = (0, _1.useToken)(fromChainId, fromTokenAddress);
     const { token: toToken } = (0, _1.useToken)(toChainId, toTokenAddress);
-    const isEnabled = 
-    // Boolean(account.address) &&
-    !isNaN(fromChainId) &&
+    const hasAmount = (!isNaN(fromTokenAmount) && Number(fromTokenAmount) > 0) ||
+        (!isNaN(toTokenAmount) && Number(toTokenAmount) > 0);
+    const contractCallQuoteEnabled = variant === 'nft'
+        ? Boolean(toContractAddress && toContractCallData && toContractGasLimit)
+        : true;
+    const isEnabled = !isNaN(fromChainId) &&
         !isNaN(toChainId) &&
         Boolean(fromToken === null || fromToken === void 0 ? void 0 : fromToken.address) &&
         Boolean(toToken === null || toToken === void 0 ? void 0 : toToken.address) &&
-        !isNaN(fromTokenAmount) &&
-        Number(fromTokenAmount) > 0 &&
-        !Number.isNaN(slippage);
+        !Number.isNaN(slippage) &&
+        hasAmount &&
+        contractCallQuoteEnabled;
     const queryKey = [
         'routes',
         account.address,
         fromChainId,
         fromToken === null || fromToken === void 0 ? void 0 : fromToken.address,
         fromTokenAmount,
+        toAddress,
         toChainId,
         toToken === null || toToken === void 0 ? void 0 : toToken.address,
-        toAddress,
+        toTokenAmount,
+        toContractAddress,
+        toContractCallData,
+        toContractGasLimit,
         slippage,
         enabledBridges,
         enabledExchanges,
@@ -72,20 +84,58 @@ const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toAddress, toChainId, toTokenAddress, toTokenAmount, toContractAddress, toContractCallData, toContractGasLimit, slippage, enabledBridges, enabledExchanges, routePriority, variant, allowSwitchChain,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d, _e;
         let toWalletAddress;
         try {
             toWalletAddress =
                 (_c = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _c !== void 0 ? _c : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
         }
-        catch (_e) {
+        catch (_f) {
             toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
         }
-        const fromAmount = (0, big_js_1.default)(fromTokenAmount)
+        const fromAmount = (0, big_js_1.default)(fromTokenAmount || 0)
             .mul(Math.pow(10, ((_d = fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) !== null && _d !== void 0 ? _d : 0)))
             .toString();
+        // const toAmount = Big(toTokenAmount || 0)
+        //   .mul(10 ** (toToken?.decimals ?? 0))
+        //   .toString();
         const formattedSlippage = parseFloat(slippage) / 100;
+        if (variant === 'nft') {
+            const contractCallQuote = yield lifi.getContractCallQuote({
+                fromAddress,
+                fromChain: fromChainId,
+                fromToken: fromTokenAddress,
+                toAmount: toTokenAmount,
+                toChain: toChainId,
+                toToken: toTokenAddress,
+                toContractAddress,
+                toContractCallData,
+                toContractGasLimit,
+                // toFallbackAddress: toAddress,
+                slippage: formattedSlippage,
+            }, { signal });
+            contractCallQuote.estimate.toAmount = toTokenAmount;
+            contractCallQuote.estimate.toAmountMin = toTokenAmount;
+            contractCallQuote.action.toToken = toToken;
+            const route = {
+                id: (0, uuid_1.v4)(),
+                fromChainId: contractCallQuote.action.fromChainId,
+                fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
+                fromAmount: contractCallQuote.action.fromAmount,
+                fromToken: contractCallQuote.action.fromToken,
+                fromAddress: contractCallQuote.action.fromAddress,
+                toChainId: contractCallQuote.action.toChainId,
+                toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
+                toAmount: toTokenAmount,
+                toAmountMin: toTokenAmount,
+                toToken: toToken,
+                toAddress: toAddress,
+                gasCostUSD: (_e = contractCallQuote.estimate.gasCosts) === null || _e === void 0 ? void 0 : _e[0].amountUSD,
+                steps: [contractCallQuote],
+            };
+            return { routes: [route] };
+        }
         return lifi.getRoutes({
             fromChainId,
             fromAmount,

package/cjs/hooks/useToken.d.ts

@@ -1,4 +1,4 @@
-export declare const useToken: (chainId: number, tokenAddress: string) => {
+export declare const useToken: (chainId?: number, tokenAddress?: string) => {
     token: import("..").Token | undefined;
     isLoading: boolean;
 };

package/cjs/hooks/useTokenSearch.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenSearch: (chainId: number, token: string, enabled?: boolean) => {
+export declare const useTokenSearch: (chainId?: number, token?: string, enabled?: boolean) => {
     token: Token | undefined;
     isLoading: boolean;
 };