@lifi/widget 2.0.0 → 2.1.0

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -7,7 +7,6 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
-const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const routes_1 = require("../../stores/routes");
@@ -17,6 +16,7 @@ const TransactionHistoryPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
     const transactions = (0, routes_1.useTransactionHistory)(account.address);
+    const headerStoreContext = (0, stores_1.useHeaderStoreContext)();
     const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
@@ -24,9 +24,9 @@ const TransactionHistoryPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (transactions.length) {
-            return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+            return headerStoreContext.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
         }
-    }, [transactions.length, toggleDialog]);
+    }, [transactions.length, toggleDialog, headerStoreContext]);
     if (!transactions.length) {
         return (0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {});
     }

package/cjs/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -47,12 +47,13 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
+    const oldAmount = (0, big_js_1.default)(data?.oldToAmount || 1);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),
                             }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
-                                .div((0, big_js_1.default)(data?.oldToAmount || 0))
+                                .div(oldAmount.eq(0) ? (0, big_js_1.default)(1) : oldAmount)
                                 .minus(1)
                                 .mul(100)
                                 .round(2, big_js_1.default.roundUp)

package/cjs/pages/TransactionPage/StatusBottomSheet.style.js

@@ -13,7 +13,11 @@ const getStatusColor = (status, theme) => {
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial:
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded:
         case 'warning':
-            return { color: theme.palette.warning.main, alpha: 0.48, darken: 0.32 };
+            return {
+                color: theme.palette.warning.main,
+                alpha: 0.48,
+                darken: theme.palette.mode === 'light' ? 0.32 : 0,
+            };
         default:
             return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
     }

package/cjs/pages/TransactionPage/TransactionPage.js

@@ -10,7 +10,6 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const ContractComponent_1 = require("../../components/ContractComponent");
 const GasMessage_1 = require("../../components/GasMessage");
-const Header_1 = require("../../components/Header");
 const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
@@ -31,6 +30,7 @@ const TransactionPage = () => {
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { subvariant, insurance, contractComponent, contractSecondaryComponent, } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
+    const headerStoreContext = (0, stores_1.useHeaderStoreContext)();
     const stateRouteId = state?.routeId;
     const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
@@ -45,13 +45,13 @@ const TransactionPage = () => {
     (0, react_1.useEffect)(() => {
         if (route && subvariant !== 'nft') {
             const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-            return Header_1.useHeaderStore
+            return headerStoreContext
                 .getState()
                 .setTitle(status === stores_1.RouteExecutionStatus.Idle
                 ? t(`button.review${transactionType}`)
                 : t(`header.${transactionType.toLowerCase()}`));
         }
-    }, [route, status, subvariant, t]);
+    }, [headerStoreContext, route, status, subvariant, t]);
     if (!route) {
         return null;
     }
@@ -68,6 +68,10 @@ const TransactionPage = () => {
         tokenValueBottomSheetRef.current?.close();
         executeRoute();
         setValue(providers_1.FormKey.FromAmount, '');
+        if (subvariant === 'nft') {
+            setValue(providers_1.FormKey.FromToken, '');
+            setValue(providers_1.FormKey.ToToken, '');
+        }
     };
     const handleStartClick = async () => {
         if (status === stores_1.RouteExecutionStatus.Idle) {
@@ -116,7 +120,7 @@ const TransactionPage = () => {
     const getInsuranceCoverageId = () => route.steps[0].execution?.process
         .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
         .find((process) => process.txHash)?.txHash ?? route.fromAddress;
-    return ((0, jsx_runtime_1.jsxs)(TransactionPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+    return ((0, jsx_runtime_1.jsxs)(TransactionPage_style_1.Container, { children: [(0, Step_1.getStepList)(route, subvariant), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
                 status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,

package/cjs/stores/StoreProvider.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const header_1 = require("./header");
 const routes_1 = require("./routes");
 const settings_1 = require("./settings");
 const StoreProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(header_1.HeaderStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }) }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/header/index.d.ts

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

package/cjs/stores/header/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("./useHeaderStore"), exports);

package/cjs/{components/Header → stores/header}/types.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export interface HeaderState {
+import type { StoreApi, UseBoundStore } from 'zustand';
+export type HeaderStore = UseBoundStore<StoreApi<HeaderState>>;
+export interface HeaderStateBase {
     element?: React.ReactNode | null;
     title?: string;
 }
-export interface HeaderStore extends HeaderState {
+export interface HeaderState extends HeaderStateBase {
     setAction(element?: React.ReactNode | null): () => void;
     setTitle(title?: string): () => void;
     removeAction(): void;

package/cjs/stores/header/useHeaderStore.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PersistStoreProps, PersistStoreProviderProps } from '../types';
+import type { HeaderState, HeaderStore } from './types';
+export declare const HeaderStoreContext: import("react").Context<HeaderStore | null>;
+export declare function HeaderStoreProvider({ children, ...props }: PersistStoreProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderStore<T>(selector: (state: HeaderState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useHeaderStoreContext(): HeaderStore;
+export declare const createHeaderStore: ({ namePrefix }: PersistStoreProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<HeaderState>>;

package/cjs/stores/header/useHeaderStore.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHeaderStore = exports.useHeaderStoreContext = exports.useHeaderStore = exports.HeaderStoreProvider = exports.HeaderStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+exports.HeaderStoreContext = (0, react_1.createContext)(null);
+function HeaderStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current) {
+        storeRef.current = (0, exports.createHeaderStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.HeaderStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.HeaderStoreProvider = HeaderStoreProvider;
+function useHeaderStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.HeaderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${HeaderStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useHeaderStore = useHeaderStore;
+function useHeaderStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.HeaderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${HeaderStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useHeaderStoreContext = useHeaderStoreContext;
+const createHeaderStore = ({ namePrefix }) => (0, zustand_1.create)((set, get) => ({
+    setAction: (element) => {
+        set(() => ({
+            element,
+        }));
+        return get().removeAction;
+    },
+    setTitle: (title) => {
+        set(() => ({
+            title,
+        }));
+        return get().removeTitle;
+    },
+    removeAction: () => {
+        set(() => ({
+            element: null,
+        }));
+    },
+    removeTitle: () => {
+        set(() => ({
+            title: undefined,
+        }));
+    },
+}));
+exports.createHeaderStore = createHeaderStore;

package/cjs/stores/index.d.ts

@@ -1,4 +1,5 @@
+export * from './StoreProvider';
 export * from './chains';
+export * from './header';
 export * from './routes';
 export * from './settings';
-export * from './StoreProvider';

package/cjs/stores/index.js

@@ -14,7 +14,8 @@ 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("./StoreProvider"), exports);
 __exportStar(require("./chains"), exports);
+__exportStar(require("./header"), exports);
 __exportStar(require("./routes"), exports);
 __exportStar(require("./settings"), exports);
-__exportStar(require("./StoreProvider"), exports);

package/cjs/stores/routes/utils.d.ts

@@ -4,4 +4,5 @@ export declare const isRoutePartiallyDone: (route: Route) => boolean;
 export declare const isRouteRefunded: (route: Route) => boolean;
 export declare const isRouteFailed: (route: Route) => boolean;
 export declare const isRouteActive: (route?: Route) => boolean;
+export declare const doesRouteHaveCustomTool: (route: Route) => boolean;
 export declare const getUpdatedProcess: (currentRoute: Route, updatedRoute: Route) => Process | undefined;

package/cjs/stores/routes/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteRefunded = exports.isRoutePartiallyDone = exports.isRouteDone = void 0;
+exports.getUpdatedProcess = exports.doesRouteHaveCustomTool = exports.isRouteActive = exports.isRouteFailed = exports.isRouteRefunded = exports.isRoutePartiallyDone = exports.isRouteDone = void 0;
 const microdiff_1 = require("microdiff");
 const isRouteDone = (route) => {
     return route.steps.every((step) => step.execution?.status === 'DONE');
@@ -28,6 +28,10 @@ const isRouteActive = (route) => {
     return !isDone && !isFailed && alreadyStarted;
 };
 exports.isRouteActive = isRouteActive;
+const doesRouteHaveCustomTool = (route) => {
+    return route.steps.some((step) => step.tool === 'custom' || step.toolDetails.key === 'custom');
+};
+exports.doesRouteHaveCustomTool = doesRouteHaveCustomTool;
 const getUpdatedProcess = (currentRoute, updatedRoute) => {
     const processDiff = (0, microdiff_1.default)(currentRoute, updatedRoute).find((diff) => diff.path.includes('process'));
     if (!processDiff) {

package/cjs/types/events.d.ts

@@ -4,7 +4,8 @@ export declare enum WidgetEvent {
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
     RouteExecutionFailed = "routeExecutionFailed",
-    RouteHighValueLoss = "routeHighValueLoss"
+    RouteHighValueLoss = "routeHighValueLoss",
+    RouteContactSupport = "routeContactSupport"
 }
 export type WidgetEvents = {
     routeExecutionStarted: Route;
@@ -12,7 +13,11 @@ export type WidgetEvents = {
     routeExecutionCompleted: Route;
     routeExecutionFailed: RouteExecutionUpdate;
     routeHighValueLoss: RouteHighValueLossUpdate;
+    routeContactSupport: RouteContactSupport;
 };
+export interface RouteContactSupport {
+    supportId?: string;
+}
 export interface RouteHighValueLossUpdate {
     fromAmountUsd: string;
     gasCostUSD?: string;

package/cjs/types/events.js

@@ -8,4 +8,5 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
     WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
+    WidgetEvent["RouteContactSupport"] = "routeContactSupport";
 })(WidgetEvent || (exports.WidgetEvent = WidgetEvent = {}));

package/components/Header/NavigationHeader.js

@@ -7,18 +7,18 @@ import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
+import { useHeaderStore } from '../../stores';
 import { HiddenUI } from '../../types';
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
-import { useHeaderStore } from './useHeaderStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
     const { subvariant, hiddenUI } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
-    const { element, title } = useHeaderStore();
+    const { element, title } = useHeaderStore((state) => state);
     const { pathname } = useLocation();
     const cleanedPathname = pathname.endsWith('/')
         ? pathname.slice(0, -1)

package/components/Header/index.d.ts

@@ -1,2 +1 @@
 export * from './Header';
-export * from './useHeaderStore';

package/components/Header/index.js

@@ -1,2 +1 @@
 export * from './Header';
-export * from './useHeaderStore';

package/components/Step/StepList.d.ts

@@ -1,2 +1,3 @@
 import type { Route } from '@lifi/sdk';
-export declare const getStepList: (route?: Route) => import("react/jsx-runtime").JSX.Element[] | undefined;
+import type { WidgetSubvariant } from '../../types';
+export declare const getStepList: (route?: Route, subvariant?: WidgetSubvariant) => import("react/jsx-runtime").JSX.Element[] | undefined;

package/components/Step/StepList.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { StepDivider } from '../../components/StepDivider';
 import { Step } from './Step';
-export const getStepList = (route) => route?.steps.map((step, index, steps) => {
+export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
     const lastIndex = steps.length - 1;
     const fromToken = index === 0
         ? { ...step.action.fromToken, amount: step.action.fromAmount }
@@ -10,7 +10,9 @@ export const getStepList = (route) => route?.steps.map((step, index, steps) => {
     const toToken = index === lastIndex
         ? {
             ...(step.execution?.toToken ?? step.action?.toToken),
-            amount: step.execution?.toAmount ?? step.estimate.toAmount,
+            amount: step.execution?.toAmount ?? subvariant === 'nft'
+                ? route.toAmount
+                : step.estimate.toAmount,
         }
         : undefined;
     const toAddress = index === lastIndex && route.fromAddress !== route.toAddress

package/components/StepActions/StepActions.js

@@ -22,8 +22,12 @@ export const StepActions = ({ step, dense, ...other }) => {
         setCardExpanded((expanded) => !expanded);
     };
     const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
-                            tool: step.toolDetails.name,
+    // FIXME: step transaction request overrides step tool details, but not included step tool details
+    const toolDetails = subvariant === 'nft'
+        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
+        : step.toolDetails;
+    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: toolDetails.logoURI, alt: toolDetails.name, children: toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
+                            tool: toolDetails.name,
                         }) }), hasCollapsedSteps ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), hasCollapsedSteps ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step, subvariant: subvariant }) })) : (_jsx(IncludedSteps, { step: step, subvariant: subvariant }))] }));
 };
 export const IncludedSteps = ({ step, subvariant }) => {
@@ -72,8 +76,13 @@ export const CustomStepDetailsLabel = ({ step, subvariant, }) => {
     if (!subvariant) {
         return null;
     }
+    // FIXME: step transaction request overrides step tool details, but not included step tool details
+    const toolDetails = subvariant === 'nft' &&
+        step.includedSteps?.length > 0
+        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
+        : step.toolDetails;
     return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`main.${subvariant}StepDetails`, {
-            tool: step.toolDetails.name,
+            tool: toolDetails.name,
         }) }));
 };
 export const CrossStepDetailsLabel = ({ step }) => {

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useRoutes.js

@@ -114,8 +114,6 @@ export const useRoutes = ({ insurableRoute } = {}) => {
                 toFallbackAddress: toWalletAddress,
                 slippage: formattedSlippage,
             }, { signal });
-            contractCallQuote.estimate.toAmount = toTokenAmount;
-            contractCallQuote.estimate.toAmountMin = toTokenAmount;
             contractCallQuote.action.toToken = toToken;
             const customStep = subvariant === 'nft'
                 ? contractCallQuote.includedSteps?.find((step) => step.type === 'custom')
@@ -138,8 +136,8 @@ export const useRoutes = ({ insurableRoute } = {}) => {
                 fromAddress: contractCallQuote.action.fromAddress,
                 toChainId: contractCallQuote.action.toChainId,
                 toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
-                toAmount: contractCallQuote.estimate.toAmount || toTokenAmount,
-                toAmountMin: contractCallQuote.estimate.toAmountMin || toTokenAmount,
+                toAmount: toTokenAmount,
+                toAmountMin: toTokenAmount,
                 toToken: toToken,
                 toAddress: toWalletAddress,
                 gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,

package/i18n/en.json

@@ -69,9 +69,9 @@
     "message": {
       "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the transaction.",
       "emptyActiveTransactions": "Transactions in progress will appear here. Once completed, find them in transaction history.",
-      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please try search again or choose another chain.",
+      "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "routeNotFound": "Try another token combination."
+      "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
     },
     "title": {
       "autoRefuel": "Get gas",