@lifi/widget 1.27.1 → 1.28.0

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: 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/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/AppDrawer.style.d.ts

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

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