@lifi/widget 1.27.2 → 1.28.0

package/AppRoutes.js

@@ -34,20 +34,14 @@ export const AppRoutes = () => {
             path: navigationRoutes.toTokenNative,
             element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
         },
-        ...[
-            navigationRoutes.fromChain,
-            `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
-        ].map((path) => ({
-            path,
+        {
+            path: `${navigationRoutes.fromToken}?/${navigationRoutes.fromChain}`,
             element: _jsx(SelectChainPage, { formType: "from" }),
-        })),
-        ...[
-            navigationRoutes.toChain,
-            `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${navigationRoutes.toToken}?/${navigationRoutes.toChain}`,
             element: _jsx(SelectChainPage, { formType: "to" }),
-        })),
+        },
         {
             path: navigationRoutes.swapRoutes,
             element: _jsx(SwapRoutesPage, {}),
@@ -60,30 +54,18 @@ export const AppRoutes = () => {
             path: navigationRoutes.swapHistory,
             element: _jsx(SwapHistoryPage, {}),
         },
-        ...[
-            `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
-            `${navigationRoutes.swapExecution}/${navigationRoutes.swapDetails}`,
-            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.swapDetails}`,
-        ].map((path) => ({
-            path,
+        {
+            path: `${navigationRoutes.swapHistory}?/${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.swapDetails}`,
             element: _jsx(SwapDetailsPage, {}),
-        })),
-        ...[
-            navigationRoutes.selectWallet,
-            `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.selectWallet}`,
             element: _jsx(SelectWalletPage, {}),
-        })),
-        ...[
-            navigationRoutes.swapExecution,
-            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
-            `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.activeSwaps}?/${navigationRoutes.swapExecution}`,
             element: _jsx(SwapPage, {}),
-        })),
+        },
         {
             path: '*',
             element: _jsx(NotFound, {}),

package/README.md

@@ -74,7 +74,7 @@ export const WidgetPage = () => {
 
 ## Examples
 
-Visit our [playground](https://testing.li.finance) to see how you can customize your [LI.FI Widget](https://www.npmjs.com/package/@lifi/widget) experience.
+Visit our [playground](https://playground.li.fi) to see how you can customize your [LI.FI Widget](https://www.npmjs.com/package/@lifi/widget) experience.
 
 ## Documentation
 

package/cjs/AppRoutes.js

@@ -37,20 +37,14 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.toTokenNative,
             element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
         },
-        ...[
-            utils_1.navigationRoutes.fromChain,
-            `${utils_1.navigationRoutes.fromToken}/${utils_1.navigationRoutes.fromChain}`,
-        ].map((path) => ({
-            path,
+        {
+            path: `${utils_1.navigationRoutes.fromToken}?/${utils_1.navigationRoutes.fromChain}`,
             element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
-        })),
-        ...[
-            utils_1.navigationRoutes.toChain,
-            `${utils_1.navigationRoutes.toToken}/${utils_1.navigationRoutes.toChain}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${utils_1.navigationRoutes.toToken}?/${utils_1.navigationRoutes.toChain}`,
             element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
-        })),
+        },
         {
             path: utils_1.navigationRoutes.swapRoutes,
             element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
@@ -63,30 +57,18 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.swapHistory,
             element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
         },
-        ...[
-            `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
-            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.swapDetails}`,
-            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.swapDetails}`,
-        ].map((path) => ({
-            path,
+        {
+            path: `${utils_1.navigationRoutes.swapHistory}?/${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.swapExecution}?/${utils_1.navigationRoutes.swapDetails}`,
             element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
-        })),
-        ...[
-            utils_1.navigationRoutes.selectWallet,
-            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
-            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.swapExecution}?/${utils_1.navigationRoutes.selectWallet}`,
             element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
-        })),
-        ...[
-            utils_1.navigationRoutes.swapExecution,
-            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}`,
-            `${utils_1.navigationRoutes.activeSwaps}/${utils_1.navigationRoutes.swapExecution}`,
-        ].map((path) => ({
-            path,
+        },
+        {
+            path: `${utils_1.navigationRoutes.swapRoutes}?/${utils_1.navigationRoutes.activeSwaps}?/${utils_1.navigationRoutes.swapExecution}`,
             element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),
-        })),
+        },
         {
             path: '*',
             element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContractComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const providers_1 = require("../../providers");
+const Card_1 = require("../Card");
+const ContractComponent = (props) => {
+    const { contractComponent } = (0, providers_1.useWidgetConfig)();
+    if (!contractComponent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, Object.assign({ flex: 1 }, props, { children: contractComponent })));
+};
+exports.ContractComponent = ContractComponent;

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

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

package/cjs/components/ContractComponent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ContractComponent"), exports);

package/cjs/components/Header/NavigationHeader.js

@@ -47,8 +47,16 @@ const NavigationHeader = () => {
                 return t(`header.swap`);
             case utils_1.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 ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ReceiptLongRounded, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {

package/cjs/components/Header/WalletHeader.js

@@ -66,5 +66,5 @@ const ConnectedButton = () => {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, Object.assign({ endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.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 })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), t(`button.disconnectWallet`)] }))] }))] }));
+                }, onClick: handleClick }, { children: walletAddress })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNewRounded, {}), t(`button.disconnectWallet`)] }))] }))] }));
 };

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

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

package/cjs/components/NFT/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/cjs/components/NFT/NFT.style.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewAvatar = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.PreviewAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.shape.borderRadius,
+}));

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

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

package/cjs/components/NFT/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NFT"), exports);
+__exportStar(require("./types"), exports);

package/cjs/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/cjs/components/NFT/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -22,7 +22,17 @@ const SelectChainAndToken = (props) => {
     const disabledReverse = variant === 'refuel' ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromToken)) ||
         (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToToken));
-    const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    const nftVariant = variant === 'nft';
+    const isCompact = fromChain &&
+        toChain &&
+        fromToken &&
+        toToken &&
+        !prefersNarrowView &&
+        !nftVariant;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, m: !disabledReverse ? -1.125 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null }))) : null, !nftVariant ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] })));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -31,9 +31,12 @@ 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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : 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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };
 exports.SelectTokenButton = SelectTokenButton;

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