@0xsquid/ui 0.19.5 → 0.20.1-beta.0

package/dist/esm/index.js

@@ -2617,24 +2617,41 @@ const mainImageSizeClassMap = {
     md: 'tw-w-10 tw-h-10',
 };
 const loadingSkeletonClassName = 'tw-bg-grey-500';
-function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
+var ImageState;
+(function (ImageState) {
+    ImageState[ImageState["LOADING"] = 0] = "LOADING";
+    ImageState[ImageState["LOADED"] = 1] = "LOADED";
+    ImageState[ImageState["ERROR"] = 2] = "ERROR";
+})(ImageState || (ImageState = {}));
+function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, placeholderImageUrl, }) {
+    const imageUrl = (_imageUrl === null || _imageUrl === void 0 ? void 0 : _imageUrl.trim()) || placeholderImageUrl;
     const [imagesLoadState, setImageLoadState] = useState({
-        badgeLoaded: false,
-        mainImageLoaded: false,
+        badge: ImageState.LOADING,
+        mainImage: ImageState.LOADING,
     });
     const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
     const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
-    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsx("img", { src: imageUrl, alt: "", onLoad: () => {
+    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
+                (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: imageUrl, alt: "", onError: () => {
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.ERROR })));
+                }, onLoad: () => {
                     // update state when image is fully loaded
-                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.LOADED })));
                 }, className: cn(mainImageClassName, 
                 // hide main image while it is loading, and display it when it is loaded
-                imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [!imagesLoadState.badgeLoaded && (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
+                imagesLoadState.mainImage === ImageState.LOADED
+                    ? 'tw-block'
+                    : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [imagesLoadState.badge !== ImageState.LOADED &&
+                        (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: badgeImageClassName })) : (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: badgeUrl, alt: "", onError: () => {
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.ERROR })));
+                        }, onLoad: () => {
                             // update state when badge image is fully loaded
-                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.LOADED })));
                         }, className: cn(badgeImageClassName, 
                         // hide badge image while it is loading, and display it when it is loaded
-                        imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
+                        imagesLoadState.badge === ImageState.LOADED
+                            ? 'tw-block'
+                            : 'tw-hidden') })] })) : null] })) : null;
 }
 
 /******************************************************************************
@@ -3055,92 +3072,6 @@ const themeTypesKeys = {
     },
 };
 
-function PlusIcon() {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
-}
-
-const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
-const themeKeyVariantMap = {
-    primary: 'grey-800',
-    accent: 'royal-500',
-};
-const buttonTextClassNameMap = {
-    primary: 'tw-text-grey-300',
-    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
-};
-const emptyChainIconTextClassNameMap = {
-    primary: 'tw-text-grey-100',
-    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
-};
-function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, }) {
-    var _a;
-    const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
-    const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
-    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
-    const bgGradient = useMemo(() => {
-        if (!chain || isLoading) {
-            return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
-        }
-        if (!token) {
-            return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
-        }
-        return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
-    }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
-    const ButtonTag = isLoading ? 'div' : 'button';
-    return (jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
-                    ? 'tw-w-[90px]'
-                    : 'tw-w-full tw-max-w-[72px]'), style: {
-                    backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
-                            backgroundColor: tokenBgColor,
-                        } }), jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
-                    backgroundColor: tokenBgColor,
-                    color: token === null || token === void 0 ? void 0 : token.textColor,
-                }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
-                            ? token.symbol
-                            : !isLoading && 'Select token' }), !isLoading && jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
-}
-
-const CSS_VARS = {
-    MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
-    DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
-    COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
-    EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
-    FADE_IN_DURATION: '--squid-animation-fade-in-duration',
-    FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
-    SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
-    SCALE_AND_FADE_DOWN_DURATION: '--squid-animation-scale-and-fade-down-duration',
-    TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
-    SHOW_MODAL_DURATION: '--squid-animation-show-modal-duration',
-    HIDE_MODAL_DURATION: '--squid-animation-hide-modal-duration',
-    SLIDE_TO_TOP_DURATION: '--squid-animation-slide-to-top-duration',
-    SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
-    BLUR_IN_DURATION: '--squid-animation-blur-in-duration',
-    BLUR_OUT_DURATION: '--squid-animation-blur-out-duration',
-};
-const ANIMATION_DURATIONS = {
-    SHOW_ROUTE: 300,
-    HIDE_ROUTE: 300,
-    CHANGE_SWAP_STEP: 300,
-    SHOW_MODAL: 400,
-    HIDE_MODAL: 400,
-    BOOST_BUTTON: 500,
-};
-const ANIMATION_TIMINGS = {
-    EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
-    COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
-    CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
-    SHOW_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
-    HIDE_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
-};
-const MEDIA_QUERIES = {
-    MOBILE_LG: {
-        media: '(min-width: 480px)',
-        key: 'mobile-lg',
-        value: '480px',
-    },
-};
-
 function SearchIcon() {
     return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
@@ -16701,12 +16632,73 @@ AppContainer.Content = (props) => (jsx(motion.div, Object.assign({ transformTemp
     }, layout: "position", layoutDependency: useContext(LayoutDependencyContext), layoutId: "app-container-content" }, props)));
 const elementKey = (child) => isValidElement(child) ? child.key : null;
 
+const CSS_VARS = {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
+    DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
+    COLLAPSE_ROUTE_DURATION: '--squid-animation-collapse-to-bottom-duration',
+    EXPAND_ROUTE_DURATION: '--squid-animation-expand-to-top-duration',
+    FADE_IN_DURATION: '--squid-animation-fade-in-duration',
+    FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
+    SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
+    SCALE_AND_FADE_DOWN_DURATION: '--squid-animation-scale-and-fade-down-duration',
+    TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
+    SHOW_MODAL_DURATION: '--squid-animation-show-modal-duration',
+    HIDE_MODAL_DURATION: '--squid-animation-hide-modal-duration',
+    SLIDE_TO_TOP_DURATION: '--squid-animation-slide-to-top-duration',
+    SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
+    BLUR_IN_DURATION: '--squid-animation-blur-in-duration',
+    BLUR_OUT_DURATION: '--squid-animation-blur-out-duration',
+};
+const ANIMATION_DURATIONS = {
+    SHOW_ROUTE: 300,
+    HIDE_ROUTE: 300,
+    CHANGE_SWAP_STEP: 300,
+    SHOW_MODAL: 400,
+    HIDE_MODAL: 400,
+    BOOST_BUTTON: 500,
+};
+const ANIMATION_TIMINGS = {
+    EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
+    COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
+    CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
+    SHOW_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
+    HIDE_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
+};
+const MEDIA_QUERIES = {
+    MOBILE_LG: {
+        media: '(min-width: 480px)',
+        key: 'mobile-lg',
+        value: '480px',
+    },
+};
+
+function BoostButton({ boostMode, canToggleBoostMode = true, boostIndicatorRef, }) {
+    return (jsx("div", { className: "tw-w-[106.5px] tw-pr-squid-xxs mobile-lg:tw-w-[140px]", children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-full tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce mobile-lg:-tw-left-[3px]", children: [jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+                                boxShadow: generateMarkerLines(40),
+                            } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-2px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
+                    } })] }) }));
+}
+function generateMarkerLines(count) {
+    const halfCount = Math.ceil(count / 2);
+    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `-${(index + 1) * 6}px 0 currentColor`;
+    });
+    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `${(index + 1) * 6}px 0 currentColor`;
+    });
+    const allShadows = [...rightShadows, ...leftShadows];
+    return allShadows.join(', ');
+}
+
 function Chip(_a) {
     var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
     return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode = true, tooltip, }) {
     const boostIndicatorRef = useRef(null);
     function handleToggleBoostMode() {
         if (!boostIndicatorRef.current || !canToggleBoostMode)
@@ -16723,9 +16715,9 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsx("div", { className: "mobile-lg:tw-w-[190px] tw-w-[157px]", children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+    return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-[157px] mobile-lg:tw-w-[190px] tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, canToggleBoostMode: canToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
                         ? 'tw-bg-grey-300'
-                        : 'tw-bg-status-positive') })] }) }));
+                        : 'tw-bg-status-positive') })] }) })));
 }
 
 function Join({ children, glue }) {
@@ -16837,8 +16829,8 @@ function EthereumIcon() {
 }
 
 function FeeButton(_a) {
-    var { feeInUsd = '0', chipLabel = 'Fee', className } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className"]);
-    return (jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
+    var { feeInUsd = '0', chipLabel = 'Fee', className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
+    return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })) })));
 }
 
 function EmojiSadIcon({ className, size = '20', }) {
@@ -16858,7 +16850,8 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, flipButton, }) {
+function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }) {
+    var _a;
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -16871,10 +16864,8 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
     return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-full tw-items-center tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500 mobile-lg:tw-w-card-large', state === 'error'
             ? 'tw-px-squid-m mobile-lg:tw-px-squid-l'
-            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: isLoading ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
-                            ? flipButton.disabledMessage
-                            : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
-                                    'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, Object.assign({}, feeButton)) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: isLoading ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, Object.assign({}, flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m", childrenClassName: "tw-rounded-squid-m", children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: flipButton === null || flipButton === void 0 ? void 0 : flipButton.onClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
+                                    'group-hover/flip-button:tw-rotate-180') }) }) }))) }), jsx("div", { className: detailClassName, children: jsx(Boost, { tooltip: boostButton === null || boostButton === void 0 ? void 0 : boostButton.tooltip, estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: (_a = boostButton === null || boostButton === void 0 ? void 0 : boostButton.boostMode) !== null && _a !== void 0 ? _a : 'normal', onToggleBoostMode: boostButton === null || boostButton === void 0 ? void 0 : boostButton.onClick, canToggleBoostMode: state === 'loading' ? false : boostButton === null || boostButton === void 0 ? void 0 : boostButton.canToggleBoostMode }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -17074,7 +17065,7 @@ const collapsedListItemClassMap = {
     large: 'tw-w-[80px]',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
     const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17107,7 +17098,7 @@ function ListItem(_a) {
     const itemProps = isInteractive ? props : {};
     return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : 'tw-w-full', className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
+            : 'tw-w-full', className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
                             ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
@@ -17493,11 +17484,11 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
                     ? 'tw-px-squid-m'
                     : 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
-                                ? action.labelOrIcon
-                                : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
-                                ? null
-                                : action.labelOrIcon, onClick: action.onClick }, action.id))) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Tooltip, Object.assign({}, action.tooltip, { childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
+                                    ? action.labelOrIcon
+                                    : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
+                                    ? null
+                                    : action.labelOrIcon, onClick: action.onClick }) }), action.id))) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 const createStoreImpl = (createState) => {
@@ -18086,21 +18077,27 @@ function LogoContainer({ children }) {
     return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = 'from', onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = false, }) {
-    var _a, _b;
-    const isWalletButtonInteractive = !isLoading && !!onWalletButtonClick;
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = 'from', onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, }) {
+    var _a, _b, _c;
+    const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
     const WalletButtonTag = isWalletButtonInteractive ? 'button' : 'div';
     const isFetching = isFetchingProp || isLoading;
-    return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-overflow-hidden tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? onWalletButtonClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), !isLoading && (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] }))] }) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, isLoading: isLoading, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
-                    decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
-                    symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
+    return (jsxs("section", { className: "tw-relative tw-h-[211px] tw-max-h-[211px] tw-w-full tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-h-[205px] mobile-lg:tw-max-h-[205px] mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn('-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600', isWalletButtonInteractive && 'hover:tw-bg-material-light-thin', isLoading && 'tw-opacity-50'), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), !isLoading && (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                            ? 'tw-text-grey-300'
+                                            : 'tw-text-royal-400', children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                            ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
+                                            : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                            ? 'tw-text-grey-600'
+                                            : 'tw-text-royal-400' })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
+                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
+                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
                     price: tokenPrice,
                 }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: '0.001',
                     usd: '0.01',
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive && !isLoading })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24205,6 +24202,153 @@ function Toast({ headerContent, actionsContent, description, chipLabel, title, }
     return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
+const gapBetweenTooltipAndContainer = 10;
+const tooltipWidthClassMap = {
+    max: 'tw-w-max',
+    container: 'tw-w-full',
+};
+const tooltipThresholdPaddingMap = {
+    xxs: '5px',
+    xs: '10px',
+    s: '15px',
+    m: '20px',
+    l: '30px',
+    xl: '40px',
+    xxl: '60px',
+};
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, containerRef: containerRefProp, }) {
+    const containerRefState = useContainerStore((state) => state.containerRef);
+    const containerRef = (containerRefProp === null || containerRefProp === void 0 ? void 0 : containerRefProp.current)
+        ? containerRefProp
+        : containerRefState;
+    const [tooltipPositionStyle, setTooltipPositionStyle] = useState({});
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const [isTooltipVisibleDelayed, setIsTooltipVisibleDelayed] = useState(false);
+    const tooltipRef = useRef(null);
+    const tooltipTriggerRef = useRef(null);
+    const delayTimeoutRef = useRef(null);
+    useEffect(() => {
+        const adjustTooltipPosition = () => {
+            if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) ||
+                !tooltipRef.current ||
+                !tooltipTriggerRef.current) {
+                // if any of the refs is not defined, we can't calculate the position
+                // so we just try to center the tooltip
+                return setTooltipPositionStyle({
+                    bottom: '100%',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    paddingBottom: tooltipThresholdPaddingMap[threshold],
+                });
+            }
+            // get the bounding rects of the container, tooltip and trigger
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const tooltipRect = tooltipRef.current.getBoundingClientRect();
+            const tooltipTriggerRect = tooltipTriggerRef.current.getBoundingClientRect();
+            // check if the tooltip fits below the trigger
+            const tooltipFitsBelow = containerRect.bottom - tooltipTriggerRect.bottom > tooltipRect.height;
+            // check if the tooltip fits above the trigger
+            const tooltipFitsAbove = tooltipTriggerRect.top - containerRect.top > tooltipRect.height;
+            // get the y position of the center of the tooltip trigger
+            const triggerMiddleY = tooltipTriggerRect.y + tooltipTriggerRect.height / 2;
+            // get the x position of the center of the tooltip trigger
+            const triggerMiddleX = tooltipTriggerRect.x + tooltipTriggerRect.width / 2;
+            let tooltipYPosition = 'top';
+            if (tooltipFitsAbove) {
+                tooltipYPosition = 'top';
+            }
+            else if (tooltipFitsBelow) {
+                tooltipYPosition = 'bottom';
+            }
+            else if (
+            // if the tooltip doesn't fit above or below the trigger,
+            // we just place it where there's more space available
+            triggerMiddleY - containerRect.top >
+                containerRect.bottom - triggerMiddleY) {
+                tooltipYPosition = 'top';
+            }
+            else {
+                tooltipYPosition = 'bottom';
+            }
+            const top = tooltipYPosition === 'top'
+                ? -tooltipRect.height
+                : tooltipTriggerRect.height;
+            const paddingStyles = tooltipYPosition === 'top'
+                ? {
+                    paddingBottom: tooltipThresholdPaddingMap[threshold],
+                }
+                : {
+                    paddingTop: tooltipThresholdPaddingMap[threshold],
+                };
+            let left = tooltipTriggerRect.width / 2 - tooltipRect.width / 2;
+            const tooltipLeftSideX = triggerMiddleX - tooltipRect.width / 2 - gapBetweenTooltipAndContainer;
+            const tooltipRightSideX = triggerMiddleX + tooltipRect.width / 2 + gapBetweenTooltipAndContainer;
+            const tooltipOverflowsContainerLeft = tooltipLeftSideX < containerRect.left;
+            const tooltipOverflowsContainerRight = tooltipRightSideX > containerRect.right;
+            // if the tooltip is too far to the left, we need to move it to the right the amount of pixels overflowing the container + the gap between the tooltip and the container
+            if (tooltipOverflowsContainerLeft) {
+                left =
+                    -(tooltipTriggerRect.left - containerRect.left) +
+                        gapBetweenTooltipAndContainer;
+            }
+            else if (tooltipOverflowsContainerRight) {
+                left =
+                    -(containerRect.right - tooltipTriggerRect.right) +
+                        gapBetweenTooltipAndContainer;
+            }
+            setTooltipPositionStyle(Object.assign(Object.assign({ top }, (tooltipOverflowsContainerLeft
+                ? { left }
+                : tooltipOverflowsContainerRight
+                    ? { right: left }
+                    : // if the tooltip doesn't overflow the container, we just center it
+                        {
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                        })), paddingStyles));
+        };
+        adjustTooltipPosition();
+        const timeoutId = setTimeout(() => {
+            adjustTooltipPosition();
+        }, 300);
+        window.addEventListener('resize', adjustTooltipPosition);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', adjustTooltipPosition);
+        };
+    }, [
+        containerRef,
+        tooltipContent,
+        threshold,
+        tooltipWidth,
+        displayDelayMs,
+        isTooltipVisible,
+    ]);
+    const handleMouseEnter = useCallback((e) => {
+        var _a;
+        if (e.target === tooltipRef.current ||
+            ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        setIsTooltipVisible(true);
+        if (delayTimeoutRef.current) {
+            clearTimeout(delayTimeoutRef.current);
+        }
+        delayTimeoutRef.current = setTimeout(() => {
+            setIsTooltipVisibleDelayed(true);
+        }, displayDelayMs);
+    }, [displayDelayMs, tooltipRef, delayTimeoutRef]);
+    const handleMouseLeave = useCallback(() => {
+        setIsTooltipVisible(false);
+        setIsTooltipVisibleDelayed(false);
+        if (delayTimeoutRef.current) {
+            clearTimeout(delayTimeoutRef.current);
+        }
+    }, [delayTimeoutRef]);
+    return (jsxs("div", { className: cn('tw-relative', containerClassName), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx("div", { ref: tooltipTriggerRef, className: childrenClassName, children: children }), tooltipContent ? (jsx(Menu, { style: tooltipPositionStyle, menuRef: tooltipRef, containerClassName: cn('tw-absolute tw-flex tw-items-center tw-justify-center', isTooltipVisibleDelayed
+                    ? '!tw-opacity-100 tw-z-40 tw-visible'
+                    : 'tw-opacity-0 -tw-z-40 tw-select-none tw-pointer-events-none tw-invisible', tooltipWidthClassMap[tooltipWidth], tooltipClassName), children: tooltipContent })) : null] }));
+}
+
 const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs';
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
@@ -24219,7 +24363,7 @@ var InputMode;
 function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
     token: '0.001',
     usd: '0.01',
-}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive = false, }) {
+}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
     var _a;
     const [inputValue, setInputValue] = useState('');
     const [inputMode, setInputMode] = useState(InputMode.TOKEN);
@@ -24317,6 +24461,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     };
     const { isTokenAmountVerySmall, isUsdAmountVerySmall } = getRawAmounts(inputValue);
     const amountFormatted = useMemo(() => {
+        var _a;
         if (inputValue === '')
             return '0';
         if (inputMode === InputMode.TOKEN) {
@@ -24324,13 +24469,19 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                 return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
             else {
-                return formatAmount(amountUsd !== null && amountUsd !== void 0 ? amountUsd : '0');
+                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : '0');
             }
         }
         else {
             return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
-    }, [inputValue, inputMode, token.price, direction, amountUsd]);
+    }, [
+        inputValue,
+        inputMode,
+        token.price,
+        direction,
+        inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
+    ]);
     const AmountChip = isInteractive ? 'button' : 'div';
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
@@ -24341,15 +24492,21 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [balance]);
     return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m", onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
-                            ? interactiveChipClassName
-                            : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                        ? undefined
+                        : inputMode === InputMode.TOKEN
+                            ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
+                            : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
+                                ? interactiveChipClassName
+                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                                                    ? formatIfVerySmall.token
+                                                    : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token
-                                                : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
-                                            ? formatIfVerySmall.token
-                                            : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0 ? 'tw-opacity-0' : '' }), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable
-                            ? interactiveChipClassName
-                            : notInteractiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balanceFormatted }), jsx(Chip, { label: "Max" })] })] }))] }));
+                                                : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0
+                                                ? 'tw-opacity-0'
+                                                : '' }), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }) }))), jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable
+                                ? interactiveChipClassName
+                                : notInteractiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balanceFormatted }), jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
 function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
@@ -24451,172 +24608,50 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                     : 'tw-bg-grey-500') })] }));
 }
 
-const gapBetweenTooltipAndContainer = 10;
-const tooltipWidthClassMap = {
-    max: 'tw-w-max',
-    container: 'tw-w-full',
+function PlusIcon() {
+    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+
+const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
+const themeKeyVariantMap = {
+    primary: 'grey-800',
+    accent: 'royal-500',
 };
-const tooltipThresholdPaddingMap = {
-    xxs: '5px',
-    xs: '10px',
-    s: '15px',
-    m: '20px',
-    l: '30px',
-    xl: '40px',
-    xxl: '60px',
+const buttonTextClassNameMap = {
+    primary: 'tw-text-grey-300',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
 };
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, displayDelayMs = 0, containerRef: containerRefProp, }) {
-    const containerRefState = useContainerStore((state) => state.containerRef);
-    const containerRef = (containerRefProp === null || containerRefProp === void 0 ? void 0 : containerRefProp.current)
-        ? containerRefProp
-        : containerRefState;
-    const [tooltipPositionStyle, setTooltipPositionStyle] = useState({});
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-    const [isTooltipVisibleDelayed, setIsTooltipVisibleDelayed] = useState(false);
-    const tooltipRef = useRef(null);
-    const tooltipTriggerRef = useRef(null);
-    const delayTimeoutRef = useRef(null);
-    useEffect(() => {
-        const adjustTooltipPosition = () => {
-            if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) ||
-                !tooltipRef.current ||
-                !tooltipTriggerRef.current) {
-                // if any of the refs is not defined, we can't calculate the position
-                // so we just try to center the tooltip
-                return setTooltipPositionStyle({
-                    bottom: '100%',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    paddingBottom: tooltipThresholdPaddingMap[threshold],
-                });
-            }
-            // get the bounding rects of the container, tooltip and trigger
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const tooltipRect = tooltipRef.current.getBoundingClientRect();
-            const tooltipTriggerRect = tooltipTriggerRef.current.getBoundingClientRect();
-            // check if the tooltip fits below the trigger
-            const tooltipFitsBelow = containerRect.bottom - tooltipTriggerRect.bottom > tooltipRect.height;
-            // check if the tooltip fits above the trigger
-            const tooltipFitsAbove = tooltipTriggerRect.top - containerRect.top > tooltipRect.height;
-            // get the y position of the center of the tooltip trigger
-            const triggerMiddleY = tooltipTriggerRect.y + tooltipTriggerRect.height / 2;
-            // get the x position of the center of the tooltip trigger
-            const triggerMiddleX = tooltipTriggerRect.x + tooltipTriggerRect.width / 2;
-            let tooltipYPosition = 'top';
-            if (tooltipFitsAbove) {
-                tooltipYPosition = 'top';
-            }
-            else if (tooltipFitsBelow) {
-                tooltipYPosition = 'bottom';
-            }
-            else if (
-            // if the tooltip doesn't fit above or below the trigger,
-            // we just place it where there's more space available
-            triggerMiddleY - containerRect.top >
-                containerRect.bottom - triggerMiddleY) {
-                tooltipYPosition = 'top';
-            }
-            else {
-                tooltipYPosition = 'bottom';
-            }
-            const top = tooltipYPosition === 'top'
-                ? -tooltipRect.height
-                : tooltipTriggerRect.height;
-            const paddingStyles = tooltipYPosition === 'top'
-                ? {
-                    paddingBottom: tooltipThresholdPaddingMap[threshold],
-                }
-                : {
-                    paddingTop: tooltipThresholdPaddingMap[threshold],
-                };
-            let left = tooltipTriggerRect.width / 2 - tooltipRect.width / 2;
-            const tooltipLeftSideX = triggerMiddleX - tooltipRect.width / 2 - gapBetweenTooltipAndContainer;
-            const tooltipRightSideX = triggerMiddleX + tooltipRect.width / 2 + gapBetweenTooltipAndContainer;
-            const tooltipOverflowsContainerLeft = tooltipLeftSideX < containerRect.left;
-            const tooltipOverflowsContainerRight = tooltipRightSideX > containerRect.right;
-            // if the tooltip is too far to the left, we need to move it to the right the amount of pixels overflowing the container + the gap between the tooltip and the container
-            if (tooltipOverflowsContainerLeft) {
-                left =
-                    -(tooltipTriggerRect.left - containerRect.left) +
-                        gapBetweenTooltipAndContainer;
-            }
-            else if (tooltipOverflowsContainerRight) {
-                left =
-                    -(containerRect.right - tooltipTriggerRect.right) +
-                        gapBetweenTooltipAndContainer;
-            }
-            setTooltipPositionStyle(Object.assign(Object.assign({ top }, (tooltipOverflowsContainerLeft
-                ? { left }
-                : tooltipOverflowsContainerRight
-                    ? { right: left }
-                    : // if the tooltip doesn't overflow the container, we just center it
-                        {
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                        })), paddingStyles));
-        };
-        adjustTooltipPosition();
-        const timeoutId = setTimeout(() => {
-            adjustTooltipPosition();
-        }, 300);
-        window.addEventListener('resize', adjustTooltipPosition);
-        return () => {
-            clearTimeout(timeoutId);
-            window.removeEventListener('resize', adjustTooltipPosition);
-        };
-    }, [
-        containerRef,
-        tooltipContent,
-        threshold,
-        tooltipWidth,
-        displayDelayMs,
-        isTooltipVisible,
-    ]);
-    const handleMouseEnter = useCallback((e) => {
-        var _a;
-        if (e.target === tooltipRef.current ||
-            ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            return;
-        }
-        setIsTooltipVisible(true);
-        if (delayTimeoutRef.current) {
-            clearTimeout(delayTimeoutRef.current);
+const emptyChainIconTextClassNameMap = {
+    primary: 'tw-text-grey-100',
+    accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
+};
+function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, tooltip, }) {
+    var _a;
+    const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
+    const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
+    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
+    const bgGradient = useMemo(() => {
+        if (!chain || isLoading) {
+            return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
-        delayTimeoutRef.current = setTimeout(() => {
-            setIsTooltipVisibleDelayed(true);
-        }, displayDelayMs);
-    }, [displayDelayMs, tooltipRef, delayTimeoutRef]);
-    const handleMouseLeave = useCallback(() => {
-        setIsTooltipVisible(false);
-        setIsTooltipVisibleDelayed(false);
-        if (delayTimeoutRef.current) {
-            clearTimeout(delayTimeoutRef.current);
+        if (!token) {
+            return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
         }
-    }, [delayTimeoutRef]);
-    return (jsxs("div", { className: cn('tw-relative', containerClassName), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx("div", { ref: tooltipTriggerRef, className: childrenClassName, children: children }), tooltipContent ? (jsx(Menu, { style: tooltipPositionStyle, menuRef: tooltipRef, containerClassName: cn('tw-absolute tw-flex tw-items-center tw-justify-center', isTooltipVisibleDelayed
-                    ? '!tw-opacity-100 tw-z-40 tw-visible'
-                    : 'tw-opacity-0 -tw-z-40 tw-select-none tw-pointer-events-none tw-invisible', tooltipWidthClassMap[tooltipWidth], tooltipClassName), children: tooltipContent })) : null] }));
-}
-
-function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
-    return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, containerClassName: "tw-pr-squid-xxs mobile-lg:tw-w-[140px] tw-w-[106.5px]", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-full tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
-                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
-                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-relative -tw-left-[20px] tw-flex tw-h-full tw-w-[140px] tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce mobile-lg:-tw-left-[3px]", children: [jsx("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-[70px] tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
-                                boxShadow: generateMarkerLines(40),
-                            } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-2px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
-                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
-                    } })] }) }));
-}
-function generateMarkerLines(count) {
-    const halfCount = Math.ceil(count / 2);
-    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `-${(index + 1) * 6}px 0 currentColor`;
-    });
-    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `${(index + 1) * 6}px 0 currentColor`;
-    });
-    const allShadows = [...rightShadows, ...leftShadows];
-    return allShadows.join(', ');
+        return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
+    }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
+    const ButtonTag = isLoading ? 'div' : 'button';
+    return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", children: jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
+                        ? 'tw-w-[90px]'
+                        : 'tw-w-full tw-max-w-[72px]'), style: {
+                        backgroundImage: bgGradient,
+                    }, children: jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                                backgroundColor: tokenBgColor,
+                            } }), jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
+                        backgroundColor: tokenBgColor,
+                        color: token === null || token === void 0 ? void 0 : token.textColor,
+                    }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
+                                ? token.symbol
+                                : !isLoading && 'Select token' }), !isLoading && jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }) })));
 }
 
 function FilterIcon() {
@@ -24668,10 +24703,16 @@ function MainView({ isLoading }) {
                     {
                         labelOrIcon: jsx(ClockOutlineIcon, {}),
                         id: 'history',
+                        tooltip: {
+                            tooltipContent: 'Swap history',
+                        },
                     },
                     {
                         labelOrIcon: jsx(SettingsGearIcon, {}),
                         id: 'settings',
+                        tooltip: {
+                            tooltipContent: 'Swap preferences',
+                        },
                     },
                 ] }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
@@ -24682,11 +24723,45 @@ function MainView({ isLoading }) {
                     bgColor: '#627eea',
                     textColor: '#fff',
                     decimals: 18,
-                }, priceImpactPercentage: '0.3', balance: '4.57', address: "so-so.eth" }), jsx(DetailsToolbar, { canToggleBoostMode: false, flipButton: {
+                }, priceImpactPercentage: '0.3', balance: '4.57', walletButton: {
+                    address: 'so-so.eth',
+                    onClick: () => { },
+                    tooltip: {
+                        tooltipContent: 'Connect wallet',
+                    },
+                }, assetsButton: {
+                    tooltip: {
+                        tooltipContent: 'Select token',
+                    },
+                }, balanceButton: {
+                    tooltip: {
+                        tooltipContent: 'Max balance',
+                    },
+                }, inputModeButton: {
+                    usdModeTooltip: {
+                        tooltipContent: 'Enter token amount',
+                    },
+                    tokenModeTooltip: {
+                        tooltipContent: 'Enter in USD',
+                    },
+                } }), jsx(DetailsToolbar, { flipButton: {
                     isDisabled: true,
-                    disabledMessage: 'Not enough USDC to flip the swap',
-                    tooltipDisplayDelayMs: 0,
-                }, boostDisabledMessage: "Boost not supported for this route", isLoading: isLoading, isEmpty: isLoading }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
+                    tooltip: {
+                        tooltipContent: 'Not enough USDC to flip the swap',
+                        displayDelayMs: 0,
+                    },
+                }, boostButton: {
+                    canToggleBoostMode: false,
+                    tooltip: {
+                        tooltipContent: 'Boost not supported for this route',
+                    },
+                }, feeButton: {
+                    feeInUsd: '0.4',
+                    onClick: () => { },
+                    tooltip: {
+                        tooltipContent: 'View fees',
+                    },
+                }, isLoading: isLoading, isEmpty: isLoading }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg',
                     bgColor: '#e84142',
                 }, token: {
@@ -24695,7 +24770,28 @@ function MainView({ isLoading }) {
                     bgColor: '#2775ca',
                     textColor: '#fff',
                     decimals: 6,
-                }, priceImpactPercentage: isLoading ? undefined : '7.2', balance: '2854', address: "so-so.eth", amount: isLoading ? undefined : '100' }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: isLoading ? 'tertiary' : 'primary', size: "lg", label: "Swap", isLoading: isLoading }) })] }));
+                }, priceImpactPercentage: isLoading ? undefined : '7.2', balance: '2854', walletButton: {
+                    address: 'so-so.eth',
+                    onClick: () => { },
+                    tooltip: {
+                        tooltipContent: 'Connect wallet',
+                    },
+                }, amount: isLoading ? undefined : '100', assetsButton: {
+                    tooltip: {
+                        tooltipContent: 'Select token',
+                    },
+                }, balanceButton: {
+                    tooltip: {
+                        tooltipContent: 'Max balance',
+                    },
+                }, inputModeButton: {
+                    usdModeTooltip: {
+                        tooltipContent: 'Enter token amount',
+                    },
+                    tokenModeTooltip: {
+                        tooltipContent: 'Enter in USD',
+                    },
+                } }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: isLoading ? 'tertiary' : 'primary', size: "lg", label: "Swap", isLoading: isLoading }) })] }));
 }
 
 function PunkIcon({ size = '16' }) {
@@ -60118,4 +60214,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };