@lifi/widget 1.17.2 → 1.18.0

package/cjs/components/SwapRoutes/SwapRoutes.style.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    ref?: import("react").Ref<unknown> | undefined;
+    children?: import("react").ReactNode;
+    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
+    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
+    divider?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CollapseContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "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>, {}, {}>;
+export declare const ScrollableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "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>, {}, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "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>, {}, {}>;
+export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "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>, {}, {}>;

package/cjs/components/SwapRoutes/SwapRoutes.style.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.Container = exports.ScrollableContainer = exports.CollapseContainer = exports.Stack = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const AppContainer_1 = require("../AppContainer");
+exports.Stack = (0, styles_1.styled)(material_1.Stack)(({ theme }) => ({
+    alignItems: 'stretch',
+    display: 'flex',
+    flex: 1,
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+    borderRight: `solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+    width: 'calc(100% - 48px)',
+}));
+exports.CollapseContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    height: AppContainer_1.maxHeight,
+}));
+exports.ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
+    overflowY: 'auto',
+    height: '100%',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+});
+exports.Container = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    overflow: 'auto',
+    width: 436,
+    maxHeight: AppContainer_1.maxHeight,
+    marginLeft: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+}));
+exports.Header = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    backgroundColor: (0, styles_1.alpha)(theme.palette.background.default, 0.84),
+    backdropFilter: 'blur(12px)',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(1.5, 3),
+    position: 'sticky',
+    top: 0,
+    zIndex: 1200,
+}));

package/cjs/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SwapRoutesExpanded: () => JSX.Element;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRoutesExpanded = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const ProgressToNextUpdate_1 = require("../ProgressToNextUpdate");
+const SwapRouteCard_1 = require("../SwapRouteCard");
+const SwapRoutes_style_1 = require("./SwapRoutes.style");
+const SwapRoutesExpanded = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { containerStyle } = (0, providers_1.useWidgetConfig)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const cleanedPathname = pathname.endsWith('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
+    const hasPath = utils_1.navigationRoutesValues.includes(path);
+    const handleRouteClick = (route) => {
+        setExecutableRoute(route);
+        navigate(utils_1.navigationRoutes.swapExecution, {
+            state: { routeId: route.id },
+        });
+    };
+    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
+    const expanded = Boolean(currentRoute || isLoading || isFetching || isFetched) && !hasPath;
+    const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded;
+    return ((0, jsx_runtime_1.jsx)(SwapRoutes_style_1.CollapseContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ appear: true, timeout: 225, in: expanded, orientation: "horizontal" }, { children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ appear: true, timeout: 225, in: expanded }, { children: (0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Container, Object.assign({ sx: containerStyle }, { children: (0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.ScrollableContainer, { children: [(0, jsx_runtime_1.jsxs)(SwapRoutes_style_1.Header, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "700", flex: 1, noWrap: true }, { children: t('swap.routes') })), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1, paddingX: 3, paddingBottom: 3 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { variant: "extended" }, index)))) : (routes === null || routes === void 0 ? void 0 : routes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, variant: "extended" }, route.id)))) }))] }) })) })) })) }));
+};
+exports.SwapRoutesExpanded = SwapRoutesExpanded;

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

@@ -0,0 +1,2 @@
+export * from './SwapRoutes';
+export * from './SwapRoutesExpanded';

package/cjs/components/SwapRoutes/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("./SwapRoutes"), exports);
+__exportStar(require("./SwapRoutesExpanded"), exports);

package/cjs/components/Token/Token.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { TokenAmount } from '@lifi/sdk';
+import type { Step, TokenAmount } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 export declare const Token: React.FC<{
     token: TokenAmount;
     connected?: boolean;
+    step?: Step;
 } & BoxProps>;

package/cjs/components/Token/Token.js

@@ -17,19 +17,23 @@ const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
+const SmallAvatar_1 = require("../SmallAvatar");
 const TextFitter_1 = require("../TextFitter");
 const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
 const Token = (_a) => {
     var _b;
-    var { token, connected } = _a, other = __rest(_a, ["token", "connected"]);
+    var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1 }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 32, textStyle: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
-                    tokenSymbol: token.symbol,
-                    chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
-                }) }))] })));
+                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                            tokenSymbol: token.symbol,
+                            chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                        }) })), step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1 }, { children: "\u2022" })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                        border: 0,
+                                        marginBottom: -0.25,
+                                    } }, { children: step.toolDetails.name[0] })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))) : null] }))] })));
 };
 exports.Token = Token;

package/cjs/components/Token/Token.style.js

@@ -21,6 +21,8 @@ exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
+    display: 'flex',
+    alignItems: 'flex-start',
 }));
 exports.TokenDivider = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     height: 12,

package/cjs/config/theme.js

@@ -28,6 +28,17 @@ const palette = {
         main: '#297EFF',
     },
 };
+const paletteLight = {
+    text: {
+        primary: '#000000',
+        secondary: '#747474',
+    },
+};
+const paletteDark = {
+    background: {
+        paper: '#212121',
+    },
+};
 const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 6,
@@ -47,27 +58,7 @@ const createTheme = (mode, theme = {}) => {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: (0, styles_1.lighten)((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
                 dark: (0, styles_1.darken)((_t = (_s = (_r = theme.palette) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s.main) !== null && _t !== void 0 ? _t : palette.secondary.main, 0.2),
-            } }), (mode === 'light'
-            ? {
-                text: {
-                    primary: '#000',
-                    secondary: '#52575b',
-                },
-                grey: {
-                    100: '#F4F5F6',
-                    200: '#EFF1F2',
-                    300: '#E3E7E9',
-                    400: '#C6C9CD',
-                    500: '#AEB3B7',
-                    600: '#798086',
-                    700: '#57595C',
-                },
-            }
-            : {
-                background: {
-                    paper: '#212121',
-                },
-            })),
+            } }), (mode === 'light' ? paletteLight : paletteDark)),
         shape: Object.assign(Object.assign({}, shape), theme.shape),
         breakpoints: {
             values: {
@@ -99,6 +90,11 @@ const createTheme = (mode, theme = {}) => {
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                    }, text: {
+                        backgroundColor: (0, styles_1.alpha)(primaryMainColor, 0.08),
+                        '&:hover': {
+                            backgroundColor: (0, styles_1.alpha)(primaryMainColor, 0.12),
+                        },
                     }, contained: {
                         '&:hover': {
                             color: (0, styles_1.getContrastRatio)(colors_1.common.white, primaryMainColor) >= 3
@@ -121,10 +117,10 @@ const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            color: primaryLightColor,
+                            backgroundColor: paletteDark.background.paper,
+                            color: colors_1.common.white,
                             '&:hover': {
-                                backgroundColor: (0, styles_1.alpha)(primaryLightColor, 0.08),
-                                borderColor: primaryLightColor,
+                                backgroundColor: (0, styles_1.lighten)(paletteDark.background.paper, 0.02),
                             },
                         },
                     }

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.17.2';
+exports.version = '1.18.0';

package/cjs/hooks/useChains.js

@@ -14,7 +14,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const providers_1 = require("../providers");
-const chains_1 = require("../stores/chains");
+const stores_1 = require("../stores");
 const useChains = () => {
     const { disabledChains, chains } = (0, providers_1.useWidgetConfig)();
     const lifi = (0, providers_1.useLiFi)();
@@ -22,7 +22,7 @@ const useChains = () => {
     const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
         const availableChains = yield lifi.getChains();
         const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
-        const chainOrder = chains_1.useChainOrderStore
+        const chainOrder = stores_1.useChainOrderStore
             .getState()
             .initializeChains(filteredChains.map((chain) => chain.id));
         const [fromChainValue, toChainValue] = getValues([

package/cjs/hooks/useNavigateBack.js

@@ -6,12 +6,19 @@ const react_router_dom_1 = require("react-router-dom");
 const useNavigateBack = () => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const navigateBack = (0, react_1.useCallback)(() => {
-        if (window.history.state && window.history.state.idx > 0) {
-            navigate(-1);
-        }
-        else {
-            navigate(window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) || '/', { replace: true });
-        }
+        // https://github.com/remix-run/react-router/pull/9112
+        //
+        // if (window.history.length > 2) {
+        navigate(-1);
+        // } else {
+        //   navigate(
+        //     window.location.pathname.substring(
+        //       0,
+        //       window.location.pathname.lastIndexOf('/'),
+        //     ) || '/',
+        //     { replace: true },
+        //   );
+        // }
     }, [navigate]);
     return { navigateBack, navigate };
 };

package/cjs/hooks/useRouteExecution.js

@@ -23,10 +23,10 @@ const useRouteExecution = (routeId, executeInBackground) => {
     const { account, switchChain } = (0, providers_1.useWallet)();
     const resumedAfterMount = (0, react_1.useRef)(false);
     const emitter = (0, useWidgetEvents_1.useWidgetEvents)();
-    const routeExecution = (0, stores_1.useRouteStore)((state) => state.routes[routeId]);
-    const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
+    const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[routeId]);
+    const [updateRoute, restartRoute, deleteRoute] = (0, stores_1.useRouteExecutionStore)((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow_1.default);
     const updateCallback = (updatedRoute) => {
-        const routeExecution = stores_1.useRouteStore.getState().routes[updatedRoute.id];
+        const routeExecution = stores_1.useRouteExecutionStore.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
         }
@@ -147,7 +147,7 @@ const useRouteExecution = (routeId, executeInBackground) => {
     (0, react_1.useEffect)(() => {
         return () => {
             var _a;
-            const route = (_a = stores_1.useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            const route = (_a = stores_1.useRouteExecutionStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
             if (!route || !(0, stores_1.isRouteActive)(route)) {
                 return;
             }

package/cjs/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -13,6 +13,7 @@ const ActiveSwapsEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
 };
 exports.ActiveSwapsEmpty = ActiveSwapsEmpty;

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

package/cjs/pages/MainPage/MainPage.js

@@ -4,12 +4,14 @@ exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
+const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
+const SwapRoutes_1 = require("../../components/SwapRoutes");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
-const SwapRoutes_1 = require("./SwapRoutes");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/pages/MainPage/MainSwapButton.js

@@ -11,13 +11,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainSwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
-const MainSwapButton = () => {
+exports.MainSwapButton = (0, react_1.forwardRef)((_, ref) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
@@ -31,6 +32,5 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
-};
-exports.MainSwapButton = MainSwapButton;
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid, ref: ref }));
+});

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -8,16 +8,17 @@ const ChainSelect_1 = require("../../components/ChainSelect");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
 const SearchTokenInput_1 = require("./SearchTokenInput");
+const minTokenListHeight = 330;
 const SelectTokenPage = ({ formType }) => {
     (0, hooks_1.useScrollableOverflowHidden)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
-    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
         var _a, _b;
-        setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
+        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: headerHeight, onClick: navigateBack, formType: formType })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/cjs/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/cjs/pages/SettingsPage/SettingsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element;

package/cjs/pages/SettingsPage/SlippageInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -30,7 +30,7 @@ const SwapDetailsPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
+    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -13,6 +13,7 @@ const SwapHistoryEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
 };
 exports.SwapHistoryEmpty = SwapHistoryEmpty;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapHistoryPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable consistent-return */
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -10,21 +11,23 @@ const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
-const route_1 = require("../../stores/route");
+const routes_1 = require("../../stores/routes");
 const SwapHistoryEmpty_1 = require("./SwapHistoryEmpty");
 const SwapHistoryItem_1 = require("./SwapHistoryItem");
 const SwapHistoryPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
-    const swaps = (0, route_1.useSwapHistory)(account.address);
-    const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
+    const swaps = (0, routes_1.useSwapHistory)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);
     }, []);
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
-    }, [toggleDialog]);
+        if (swaps.length) {
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+        }
+    }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
     }

package/cjs/pages/SwapPage/SwapPage.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapPage = 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_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -57,6 +58,9 @@ const SwapPage = () => {
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                            minWidth: 48,
+                            marginLeft: 1,
+                        } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) }))) : null] }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -33,6 +33,6 @@ const SwapRoutesPage = () => {
             .setAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
     const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0 }, route.id)))) })));
 };
 exports.SwapRoutesPage = SwapRoutesPage;