@lifi/widget 1.27.1 → 1.28.0

package/cjs/types/widget.d.ts

@@ -1,10 +1,10 @@
 import type { Signer } from '@ethersproject/abstract-signer';
 import type { ChainKey, ConfigUpdate, Order, RouteOptions, Token } from '@lifi/sdk';
-import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
+import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
-export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
+export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel' | 'nft';
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -21,9 +21,10 @@ export declare enum HiddenUI {
 export type HiddenUIType = `${HiddenUI}`;
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
-    palette?: Pick<PaletteOptions, 'grey' | 'background' | 'text' | 'secondary' | 'primary'>;
+    palette?: Pick<PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text'>;
     shape?: Shape;
     typography?: TypographyOptions;
+    components?: Pick<Components<Omit<Theme, 'components'>>, 'MuiAvatar'>;
 };
 export interface WidgetWalletManagement {
     connect(): Promise<Signer>;
@@ -36,10 +37,14 @@ export interface WidgetWalletManagement {
 export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'> {
     defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
 }
+export interface WidgetContractTool {
+    logoURI: string;
+    name: string;
+}
 export interface WidgetContract {
-    address: string;
-    callData: string;
-    gasLimit: string;
+    address?: string;
+    callData?: string;
+    gasLimit?: string;
     approvalAddress?: string;
     outputToken?: string;
     fallbackAddress?: string;
@@ -55,6 +60,7 @@ export interface WidgetConfig {
     contract?: WidgetContract;
     contractComponent?: ReactNode;
     contractCompactComponent?: ReactNode;
+    contractTool?: WidgetContractTool;
     fee?: number;
     integrator?: string;
     referrer?: string;

package/cjs/types/widget.js

@@ -11,7 +11,9 @@ var DisabledUI;
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
+    // FromAmount = 'fromAmount',
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
+    // ToToken = 'toToken',
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));

package/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -39,7 +39,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 export declare const ShowAllButton: 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/components/Card/Card.d.ts

@@ -18,7 +18,7 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "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<Theme> & {
     variant?: CardVariant | undefined;
-    selectionColor?: "secondary" | "primary" | undefined;
+    selectionColor?: "primary" | "secondary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;

package/components/ChainSelect/ChainSelect.style.d.ts

@@ -8,7 +8,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "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> & {
     variant?: ("default" | "error" | "selected") | undefined;
-    selectionColor?: "secondary" | "primary" | undefined;
+    selectionColor?: "primary" | "secondary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;

package/components/ContractComponent/ContractComponent.d.ts

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

package/components/ContractComponent/ContractComponent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetConfig } from '../../providers';
+import { Card } from '../Card';
+export const ContractComponent = (props) => {
+    const { contractComponent } = useWidgetConfig();
+    if (!contractComponent) {
+        return null;
+    }
+    return (_jsx(Card, Object.assign({ flex: 1 }, props, { children: contractComponent })));
+};

package/components/ContractComponent/index.d.ts

@@ -0,0 +1 @@
+export * from './ContractComponent';

package/components/ContractComponent/index.js

@@ -0,0 +1 @@
+export * from './ContractComponent';

package/components/Header/Header.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes" | "color" | "position"> & {
     classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
-    color?: "inherit" | "transparent" | "default" | "secondary" | "primary" | undefined;
+    color?: "inherit" | "transparent" | "default" | "primary" | "secondary" | undefined;
     enableColorOnDark?: boolean | undefined;
     position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
@@ -21,7 +21,7 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 export declare const WalletButton: 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/components/Header/NavigationHeader.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon } from '@mui/icons-material';
+import { ArrowBack as ArrowBackIcon, ReceiptLongRounded as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from '../../utils';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
@@ -44,8 +44,16 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
             case navigationRoutes.swapDetails:
                 return t(`header.swapDetails`);
-            default:
-                return variant !== 'refuel' ? t(`header.swap`) : t(`header.gas`);
+            default: {
+                switch (variant) {
+                    case 'nft':
+                        return t(`header.checkout`);
+                    case 'refuel':
+                        return t(`header.gas`);
+                    default:
+                        return t(`header.swap`);
+                }
+            }
         }
     };
     return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) })) }))) : null, _jsx(Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {

package/components/Header/WalletHeader.js

@@ -62,5 +62,5 @@ const ConnectedButton = () => {
     });
     return (_jsxs(_Fragment, { children: [_jsx(WalletButton, Object.assign({ endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, Object.assign({ src: chain === null || chain === void 0 ? void 0 : chain.logoURI, alt: chain === null || chain === void 0 ? void 0 : chain.key, sx: { width: 24, height: 24 } }, { children: chain === null || chain === void 0 ? void 0 : chain.name[0] })), sx: {
                     marginRight: -1.25,
-                }, onClick: handleClick }, { children: walletAddress })), _jsxs(Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] })), _jsxs(MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [_jsx(PowerSettingsIcon, {}), t(`button.disconnectWallet`)] }))] }))] }));
+                }, onClick: handleClick }, { children: walletAddress })), _jsxs(Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true }, { children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] })), _jsxs(MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true }, { children: [_jsx(PowerSettingsIcon, {}), t(`button.disconnectWallet`)] }))] }))] }));
 };

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/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -2,7 +2,7 @@
 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/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/SendToWallet/SendToWallet.style.d.ts

@@ -2,7 +2,7 @@
 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/components/SmallAvatar.d.ts

@@ -13,7 +13,7 @@ export declare const SmallAvatar: 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>, {}, {}>;
 export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledComponent<{
     animation?: false | "pulse" | "wave" | undefined;
     children?: import("react").ReactNode;

package/components/Step/StepProcess.style.d.ts

@@ -2,7 +2,7 @@
 export declare const LinkButton: 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/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/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/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/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/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/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/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;