@lifi/widget 1.27.2 → 1.28.1

package/components/NFT/NFT.d.ts

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

package/components/NFT/NFT.js

@@ -0,0 +1,37 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Skeleton, Typography } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey } from '../../providers';
+import { Token } from '../Token';
+import { PreviewAvatar } from './NFT.style';
+export const NFT = (_a) => {
+    var { imageUrl, isLoading, collectonName, assetName, owner, token, contract } = _a, props = __rest(_a, ["imageUrl", "isLoading", "collectonName", "assetName", "owner", "token", "contract"]);
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    useEffect(() => {
+        if (token) {
+            setValue(SwapFormKey.ToChain, token.chainId);
+            setValue(SwapFormKey.ToToken, token.address);
+            setValue(SwapFormKey.ToAmount, token.amount);
+        }
+        if (contract) {
+            setValue(SwapFormKey.ToContractAddress, contract.address);
+            setValue(SwapFormKey.ToContractCallData, contract.callData);
+            setValue(SwapFormKey.ToContractGasLimit, contract.gasLimit);
+        }
+    }, [contract, setValue, token]);
+    return (_jsxs(Box, Object.assign({ p: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex" }, { children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, Object.assign({ ml: 2 }, { children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary" }, { children: collectonName }))), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 600 }, { children: assetName }))), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, Object.assign({ fontSize: 14, color: "text.secondary" }, { children: [t('swap.ownedBy'), ' ', _jsx(Link, Object.assign({ href: owner.url, target: "_blank", underline: "none", color: "primary" }, { children: owner.name }))] }))) : null] }))] })), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] })));
+};

package/components/NFT/NFT.style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const PreviewAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    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" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/NFT/NFT.style.js

@@ -0,0 +1,8 @@
+import { Avatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.shape.borderRadius,
+}));

package/components/NFT/index.d.ts

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

package/components/NFT/index.js

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

package/components/NFT/types.d.ts

@@ -0,0 +1,15 @@
+import type { TokenAmount } from '@lifi/sdk';
+import type { WidgetContract } from '../../types';
+export interface NFTProps {
+    imageUrl?: string;
+    collectonName?: string;
+    assetName?: string;
+    isLoading?: boolean;
+    owner?: NFTOwner;
+    token?: TokenAmount;
+    contract?: WidgetContract;
+}
+export interface NFTOwner {
+    name?: string;
+    url?: string;
+}

package/components/NFT/types.js

@@ -0,0 +1 @@
+export {};

package/components/Select.d.ts

@@ -1,3 +1,3 @@
-export declare const Select: import("@emotion/styled").StyledComponent<import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const Select: import("@emotion/styled").StyledComponent<(import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) & {
     dense?: boolean | undefined;
 }, {}, {}>;

package/components/SelectChainAndToken.js

@@ -19,6 +19,16 @@ export const SelectChainAndToken = (props) => {
     const disabledReverse = variant === 'refuel' ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromToken)) ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToToken));
-    const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), _jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })), _jsx(SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    const nftVariant = variant === 'nft';
+    const isCompact = fromChain &&
+        toChain &&
+        fromToken &&
+        toToken &&
+        !prefersNarrowView &&
+        !nftVariant;
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? (_jsx(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null }))) : null, !nftVariant ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] })));
 };

package/components/SelectTokenButton/SelectTokenButton.js

@@ -28,8 +28,11 @@ export const SelectTokenButton = ({ formType, compact }) => {
     };
     const isSelected = !!(chain && token);
     const onClick = !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(tokenKey)) ? handleClick : undefined;
-    const defaultTitle = formType === 'to' && variant === 'refuel'
+    const defaultPlaceholder = formType === 'to' && variant === 'refuel'
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
-    return (_jsxs(Card, Object.assign({ flex: 1, onClick: onClick }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    const cardTitle = formType === 'from' && variant === 'nft'
+        ? t(`swap.payWith`)
+        : t(`swap.${formType}`);
+    return (_jsxs(Card, Object.assign({ flex: 1, onClick: onClick }, { children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };

package/components/StepActions/StepActions.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import type { Step } from '@lifi/sdk';
-import type { StepActionsProps } from './types';
+import type { WidgetVariant } from '../../types';
+import type { StepActionsProps, StepDetailsLabelProps } from './types';
 export declare const StepActions: React.FC<StepActionsProps>;
 export declare const StepDetailsContent: React.FC<{
     step: Step;
+    variant?: WidgetVariant;
 }>;
-export declare const CrossStepDetailsLabel: React.FC<{
-    step: Step;
-}>;
-export declare const SwapStepDetailsLabel: React.FC<{
-    step: Step;
-}>;
+export declare const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps>;
+export declare const CrossStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;
+export declare const SwapStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;

package/components/StepActions/StepActions.js

@@ -9,24 +9,42 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
 import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { LiFiToolLogo } from '../../icons';
+import { useWidgetConfig } from '../../providers';
 import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export 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'))
-        ? CrossStepDetailsLabel
-        : SwapStepDetailsLabel;
+    const { variant, contractTool } = useWidgetConfig();
+    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+        ? CustomStepDetailsLabel
+        : step.type === 'cross' ||
+            (step.type === 'lifi' &&
+                step.includedSteps.some((step) => step.type === 'cross'))
+            ? CrossStepDetailsLabel
+            : 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;
@@ -37,16 +55,26 @@ export const StepActions = (_a) => {
     };
     return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
+                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] })))] })));
 };
-export const StepDetailsContent = ({ step }) => {
+export const StepDetailsContent = ({ step, variant }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslation();
     return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
                 value: formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals),
-            }), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
-                value: 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') ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                        value: 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] })));
+};
+export const CustomStepDetailsLabel = ({ step, variant, }) => {
+    const { t } = useTranslation();
+    if (!variant) {
+        return null;
+    }
+    return (_jsx(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t(`swap.${variant}StepDetails`, {
+            tool: step.toolDetails.name,
+        }) })));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;

package/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/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/components/SwapInput/SwapInput.js

@@ -1,3 +1,14 @@
+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;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useController } from 'react-hook-form';
@@ -11,7 +22,8 @@ import { FormPriceHelperText } from './FormPriceHelperText';
 import { FormControl, Input } from './SwapInput.style';
 import { SwapInputEndAdornment } from './SwapInputEndAdornment';
 import { SwapInputStartAdornment } from './SwapInputStartAdornment';
-export const SwapInput = ({ formType }) => {
+export const SwapInput = (_a) => {
+    var { formType } = _a, props = __rest(_a, ["formType"]);
     const { t } = useTranslation();
     const amountKey = SwapFormKeyHelper.getAmountKey(formType);
     const { field: { onChange, onBlur, value }, } = useController({
@@ -31,7 +43,7 @@ export const SwapInput = ({ formType }) => {
         onBlur();
     };
     const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromAmount);
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
+    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: _jsx(SwapInputStartAdornment, { formType: formType }), endAdornment: !disabled ? (_jsx(SwapInputEndAdornment, { formType: formType })) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] })), _jsx(FitInputText, { ref: ref, formType: formType })] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: value, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { formType: formType })] })), _jsx(FitInputText, { ref: ref, formType: formType })] })));
 };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -34,7 +34,9 @@ export const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    const cardContent = (_jsxs(Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] }))) : null, _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(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 ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(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 = (_jsxs(Box, Object.assign({ flex: 1 }, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] }))) : null, _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: token, step: variant === 'stretched' ? route.steps[0] : undefined, disableDescription: variant === 'dense' && widgetVariant !== 'refuel' }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
     return widgetVariant === 'refuel' ? (cardContent) : (_jsx(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: cardContent })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {

package/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/components/Token/Token.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
 import { formatTokenAmount, formatTokenPrice } from '../../utils';
@@ -20,32 +20,32 @@ import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
 export 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 _jsx(TokenFallback, Object.assign({ token: token }, other));
     }
     return _jsx(TokenBase, Object.assign({ token: token }, other));
 };
 export const TokenFallback = (_a) => {
-    var { token, connected, step, disableDescription } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription"]);
-    const { token: chainToken, isLoading } = useToken(token.chainId, token.address);
-    return (_jsx(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 } = useToken(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
+    return (_jsx(TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading || isLoadingToken }, other)));
 };
 export const TokenBase = (_a) => {
     var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
     const { t } = useTranslation();
-    const { chain } = useChain(token.chainId);
-    const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);
-    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token.priceUSD);
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = useChain(token === null || token === void 0 ? void 0 : token.chainId);
+    const formattedTokenAmount = formatTokenAmount(token === null || token === void 0 ? void 0 : token.amount, token === null || token === void 0 ? void 0 : token.decimals);
+    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token === null || token === void 0 ? void 0 : token.priceUSD);
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? (_jsx(Skeleton, { width: 112, height: 32, variant: "text" })) : (_jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
                         } }, { children: t('format.number', {
                             value: formattedTokenAmount,
-                        }) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
+                        }) })))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [isLoading ? (_jsx(Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`format.currency`, {
                             value: formattedTokenPrice,
-                        }) })), !disableDescription ? (_jsx(TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? (_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
-                            tokenSymbol: token.symbol,
+                        }) }))), !disableDescription ? (_jsx(TextSecondary, Object.assign({ connected: connected, px: 0.5, dot: true }, { children: "\u2022" }))) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(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 ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                        }) })))) : null, step ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                         border: 0,
                                         marginBottom: -0.25,
                                     } }, { children: step.toolDetails.name[0] })) })), _jsx(TextSecondary, Object.assign({ connected: true }, { children: step.toolDetails.name }))] }))) : null] }))] })));

package/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/components/TokenAvatar/TokenAvatar.js

@@ -3,19 +3,20 @@ import { Avatar, Badge, Skeleton } from '@mui/material';
 import { useChain, useToken } from '../../hooks';
 import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
 import { AvatarDefault, AvatarDefaultContainer } from './TokenAvatar.style';
-export const TokenAvatarFallback = ({ token, sx }) => {
-    const { chain } = useChain(token.chainId);
-    const { token: chainToken, isLoading } = useToken(token.chainId, token.address);
-    return (_jsx(TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading, chain: chain, sx: sx }));
+export const TokenAvatarFallback = ({ token, isLoading, sx }) => {
+    const { chain } = useChain(token === null || token === void 0 ? void 0 : token.chainId);
+    const { token: chainToken, isLoading: isLoadingToken } = useToken(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
+    return (_jsx(TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
 };
 export const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : (_jsx(SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) })));
+    var _a;
+    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : (_jsx(SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(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] }))) })));
 };
-export const TokenAvatar = ({ token, chain, sx }) => {
-    if (!chain || !token.logoURI) {
-        return _jsx(TokenAvatarFallback, { token: token, sx: sx });
+export const TokenAvatar = ({ token, chain, isLoading, sx }) => {
+    if (!chain || !(token === null || token === void 0 ? void 0 : token.logoURI)) {
+        return _jsx(TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
     }
-    return _jsx(TokenAvatarBase, { token: token, chain: chain, sx: sx });
+    return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
 };
 export const TokenAvatarDefault = ({ sx }) => {
     return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefault, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarDefaultContainer, { children: _jsx(AvatarDefault, { width: 28, height: 28 }) }) })));

package/components/TokenList/TokenList.style.js

@@ -1,5 +1,6 @@
 import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { listItemTextClasses } from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
@@ -23,4 +24,9 @@ export const ListItem = styled(MuiListItem)(({ theme }) => ({
     [`.${listItemSecondaryActionClasses.root}`]: {
         right: theme.spacing(3),
     },
+    [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
 }));

package/components/TokenList/VirtualizedTokenList.js

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

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.27.2';
+export const version = '1.28.1';

package/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>>;
 };