@0xsquid/ui 0.19.0 → 0.19.1

package/dist/cjs/index.js

@@ -2986,24 +2986,25 @@ const buttonVariantClassMap = {
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
 const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
+const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
-    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size] }), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+    var { label, disabled, size, variant, icon, link, isLoading = false } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading"]);
+    const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
-                jsxRuntime.jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+                jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "small", children: label })) : !label && icon ? (
                 // icon only
-                icon) : (
+                isLoading ? null : (icon)) : (
                 // icon and label
                 jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
-    disabled && buttonDisabledClass, 
+    disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // custom classes from props
     props.className);
     if (link) {
         return (jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
     }
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsxRuntime.jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
@@ -3111,28 +3112,33 @@ 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', }) {
-    var _a, _b;
+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 = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
     const bgGradient = React.useMemo(() => {
-        if (!chain) {
+        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]);
-    return (jsxRuntime.jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.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" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
+    const ButtonTag = isLoading ? 'div' : 'button';
+    return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.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" }) }), jsxRuntime.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: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), chain && token ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                             backgroundColor: tokenBgColor,
-                        } }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.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, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer 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 && 'tw-pl-[7px]'), style: {
+                        } }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.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, jsxRuntime.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: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, children: [jsxRuntime.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 && jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 const CSS_VARS = {
@@ -16896,16 +16902,16 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     const state = React.useMemo(() => {
         if (errorMessage)
             return 'error';
-        if (isLoading)
-            return 'loading';
         if (isEmpty)
             return 'empty';
+        if (isLoading)
+            return 'loading';
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[157px] mobile-lg:tw-w-[190px]', detailStateClassMap[state]);
     return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+            : 'tw-px-squid-xs mobile-lg:tw-px-squid-m', isEmpty ? 'tw-justify-center' : 'tw-justify-between'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button$1, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: isLoading ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.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: jsxRuntime.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: jsxRuntime.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') }) }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
@@ -17522,12 +17528,12 @@ function ModalContentDivider() {
     return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, }) {
     return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
                     ? 'tw-px-squid-m'
                     : 'tw-pl-squid-m tw-pr-squid-m mobile-lg:tw-pl-squid-l'), children: [displayBackButton ? (jsxRuntime.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", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.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) => (jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.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) => (jsxRuntime.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
@@ -18120,9 +18126,11 @@ function LogoContainer({ children }) {
     return (jsxRuntime.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 = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
+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;
-    return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.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: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
+    const WalletButtonTag = isLoading ? 'div' : 'button';
+    const isFetching = isFetchingProp || isLoading;
+    return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsxs(WalletButtonTag, { onClick: isLoading ? undefined : onWalletButtonClick, 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', isLoading ? 'tw-opacity-50' : 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), !isLoading && (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] }))] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chain: chain, token: token, isLoading: isLoading, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.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: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.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 : '',
                     price: tokenPrice,
@@ -18131,7 +18139,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
                 }, 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 })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24243,6 +24251,7 @@ const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-roun
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
+const loadingClassName = 'tw-opacity-50';
 var InputMode;
 (function (InputMode) {
     InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
@@ -24373,7 +24382,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [balance]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive ? (jsxRuntime.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 && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.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]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && 'tw-opacity-50'), children: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue }) }) })), !showDetails ? null : (jsxRuntime.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 && 'tw-opacity-50'), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.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]') })] })) : (jsxRuntime.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: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                 ? formatIfVerySmall.token
                                                 : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                             ? formatIfVerySmall.token
@@ -24691,8 +24700,8 @@ const List = ({ children }) => {
     return (jsxRuntime.jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
 };
 
-function MainView() {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: "Swap", actions: [
+function MainView({ isLoading }) {
+    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
                     {
                         labelOrIcon: jsxRuntime.jsx(ClockOutlineIcon, {}),
                         id: 'history',
@@ -24701,7 +24710,7 @@ function MainView() {
                         labelOrIcon: jsxRuntime.jsx(SettingsGearIcon, {}),
                         id: 'settings',
                     },
-                ] }), jsxRuntime.jsx(SwapConfiguration, { direction: "from", chain: {
+                ] }), jsxRuntime.jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
                     bgColor: '#fcfc03',
                 }, token: {
@@ -24714,7 +24723,7 @@ function MainView() {
                     isDisabled: true,
                     disabledMessage: 'Not enough USDC to flip the swap',
                     tooltipDisplayDelayMs: 0,
-                }, boostDisabledMessage: "Boost not supported for this route" }), jsxRuntime.jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
+                }, boostDisabledMessage: "Boost not supported for this route", isLoading: isLoading, isEmpty: isLoading }), jsxRuntime.jsx(SwapConfiguration, { isLoading: isLoading, direction: "to", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/avax.svg',
                     bgColor: '#e84142',
                 }, token: {
@@ -24723,7 +24732,7 @@ function MainView() {
                     bgColor: '#2775ca',
                     textColor: '#fff',
                     decimals: 6,
-                }, priceImpactPercentage: '7.2', balance: '2854', address: "so-so.eth", amount: "100" }), jsxRuntime.jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsxRuntime.jsx(Button$1, { variant: "primary", size: "lg", label: "Swap" }) })] }));
+                }, priceImpactPercentage: isLoading ? undefined : '7.2', balance: '2854', address: "so-so.eth", amount: isLoading ? undefined : '100' }), jsxRuntime.jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsxRuntime.jsx(Button$1, { variant: isLoading ? 'tertiary' : 'primary', size: "lg", label: "Swap", isLoading: isLoading }) })] }));
 }
 
 function PunkIcon({ size = '16' }) {

package/dist/cjs/types/components/buttons/AssetsButton.d.ts

@@ -12,6 +12,7 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/buttons/Button.d.ts

@@ -7,6 +7,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size: ButtonSize;
     disabled?: boolean;
     link?: string;
+    isLoading?: boolean;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/NavigationBar.d.ts

@@ -12,6 +12,7 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/SwapConfiguration.d.ts

@@ -33,5 +33,5 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/MainView.d.ts

@@ -1 +1,3 @@
-export declare function MainView(): import("react/jsx-runtime").JSX.Element;
+export declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts

@@ -3,6 +3,8 @@ import { AssetsButton } from '../../components/buttons/AssetsButton';
 declare const meta: Meta<typeof AssetsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const PrimaryVariantLoading: Story;
+export declare const AccentVariantLoading: Story;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;

package/dist/cjs/types/stories/buttons/Button.stories.d.ts

@@ -23,3 +23,8 @@ export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
 export declare const LargeAndLink: Story;
 export declare const LargeAndLinkDisabled: Story;
+export declare const MediumWithIconLoading: Story;
+export declare const MediumWithLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
+export declare const LargeWithLabelLoading: Story;
+export declare const LargeWithLongLabelLoading: Story;

package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
+export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;

package/dist/cjs/types/stories/layout/NavigationBar.stories.d.ts

@@ -9,4 +9,5 @@ export declare const BackButton: Story;
 export declare const Logo: Story;
 export declare const WithActions: Story;
 export declare const AllProps: Story;
+export declare const Loading: Story;
 export declare const Transparent: Story;

package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -5,6 +5,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
 export declare const EmptyVariantAccent: Story;
+export declare const Loading: Story;
+export declare const LoadingWithAllProps: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

package/dist/cjs/types/stories/views/MainView.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof MainView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Loading: Story;

package/dist/esm/index.js

@@ -2966,24 +2966,25 @@ const buttonVariantClassMap = {
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
 const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
+const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
-    const children = (jsxs(Fragment, { children: [!disabled && jsx(ButtonHoverOverlay, { className: roundedClassMap[size] }), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+    var { label, disabled, size, variant, icon, link, isLoading = false } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading"]);
+    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: roundedClassMap[size] })), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
-                jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+                jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "small", children: label })) : !label && icon ? (
                 // icon only
-                icon) : (
+                isLoading ? null : (icon)) : (
                 // icon and label
                 jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
-    disabled && buttonDisabledClass, 
+    disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // custom classes from props
     props.className);
     if (link) {
         return (jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
     }
-    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled, className: className, disabled: disabled, children: children })));
+    return (jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
@@ -3091,28 +3092,33 @@ 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', }) {
-    var _a, _b;
+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 = (_b = (chain && token && token.bgColor)) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
     const bgGradient = useMemo(() => {
-        if (!chain) {
+        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]);
-    return (jsxs("button", { onClick: onClick, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant]), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer 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-cursor-pointer tw-items-center tw-justify-between', chain && token ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [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 ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) })) }) }), chain && token ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                }, 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-cursor-pointer 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 && 'tw-pl-[7px]'), style: {
+                        } }), 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) && 'tw-w-[135px]'), children: chain && token ? token.symbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, 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 = {
@@ -16876,16 +16882,16 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
-        if (isLoading)
-            return 'loading';
         if (isEmpty)
             return 'empty';
+        if (isLoading)
+            return 'loading';
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     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: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+            : '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 }) })] })) }));
@@ -17502,12 +17508,12 @@ function ModalContentDivider() {
     return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, }) {
     return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton
                     ? '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", 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", label: typeof action.labelOrIcon === 'string'
+                            : 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
@@ -18100,9 +18106,11 @@ 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 = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive = true, isLoading = true, }) {
+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;
-    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("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), 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, 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: {
+    const WalletButtonTag = isLoading ? 'div' : 'button';
+    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: isLoading ? undefined : onWalletButtonClick, 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', isLoading ? 'tw-opacity-50' : 'hover:tw-bg-material-light-thin'), 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 : '',
                     price: tokenPrice,
@@ -18111,7 +18119,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain,
                 }, 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 })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24223,6 +24231,7 @@ const buttonClassName = 'tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-roun
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
+const loadingClassName = 'tw-opacity-50';
 var InputMode;
 (function (InputMode) {
     InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
@@ -24353,7 +24362,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [balance]);
     return (jsxs(Fragment, { children: [isInteractive ? (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 && 'tw-opacity-50'), 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 }) }) })), !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 && 'tw-opacity-50'), 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), 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 }) })) : (jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive && interactiveChipClassName), 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
@@ -24671,8 +24680,8 @@ const List = ({ children }) => {
     return (jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
 };
 
-function MainView() {
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: "Swap", actions: [
+function MainView({ isLoading }) {
+    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { isLoading: isLoading, title: "Swap", actions: [
                     {
                         labelOrIcon: jsx(ClockOutlineIcon, {}),
                         id: 'history',
@@ -24681,7 +24690,7 @@ function MainView() {
                         labelOrIcon: jsx(SettingsGearIcon, {}),
                         id: 'settings',
                     },
-                ] }), jsx(SwapConfiguration, { direction: "from", chain: {
+                ] }), jsx(SwapConfiguration, { isLoading: isLoading, direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
                     bgColor: '#fcfc03',
                 }, token: {
@@ -24694,7 +24703,7 @@ function MainView() {
                     isDisabled: true,
                     disabledMessage: 'Not enough USDC to flip the swap',
                     tooltipDisplayDelayMs: 0,
-                }, boostDisabledMessage: "Boost not supported for this route" }), jsx(SwapConfiguration, { isFetching: true, direction: "to", chain: {
+                }, boostDisabledMessage: "Boost not supported for this route", 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: {
@@ -24703,7 +24712,7 @@ function MainView() {
                     bgColor: '#2775ca',
                     textColor: '#fff',
                     decimals: 6,
-                }, priceImpactPercentage: '7.2', balance: '2854', address: "so-so.eth", amount: "100" }), jsx("div", { className: "tw-h-full tw-max-h-[80px] tw-px-squid-m tw-pb-squid-m", children: jsx(Button$1, { variant: "primary", size: "lg", label: "Swap" }) })] }));
+                }, 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 }) })] }));
 }
 
 function PunkIcon({ size = '16' }) {

package/dist/esm/types/components/buttons/AssetsButton.d.ts

@@ -12,6 +12,7 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/buttons/Button.d.ts

@@ -7,6 +7,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size: ButtonSize;
     disabled?: boolean;
     link?: string;
+    isLoading?: boolean;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/NavigationBar.d.ts

@@ -12,6 +12,7 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -33,5 +33,5 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/views/MainView.d.ts

@@ -1 +1,3 @@
-export declare function MainView(): import("react/jsx-runtime").JSX.Element;
+export declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts

@@ -3,6 +3,8 @@ import { AssetsButton } from '../../components/buttons/AssetsButton';
 declare const meta: Meta<typeof AssetsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const PrimaryVariantLoading: Story;
+export declare const AccentVariantLoading: Story;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;

package/dist/esm/types/stories/buttons/Button.stories.d.ts

@@ -23,3 +23,8 @@ export declare const LargeTertiary: Story;
 export declare const LargeDisabled: Story;
 export declare const LargeAndLink: Story;
 export declare const LargeAndLinkDisabled: Story;
+export declare const MediumWithIconLoading: Story;
+export declare const MediumWithLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
+export declare const LargeWithLabelLoading: Story;
+export declare const LargeWithLongLabelLoading: Story;

package/dist/esm/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
+export declare const EmptyLoading: Story;
 export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;

package/dist/esm/types/stories/layout/NavigationBar.stories.d.ts

@@ -9,4 +9,5 @@ export declare const BackButton: Story;
 export declare const Logo: Story;
 export declare const WithActions: Story;
 export declare const AllProps: Story;
+export declare const Loading: Story;
 export declare const Transparent: Story;

package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -5,6 +5,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
 export declare const EmptyVariantAccent: Story;
+export declare const Loading: Story;
+export declare const LoadingWithAllProps: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

package/dist/esm/types/stories/views/MainView.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof MainView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Loading: Story;

package/dist/index.d.ts

@@ -143,8 +143,9 @@ interface AssetsButtonProps {
     };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
+    isLoading?: boolean;
 }
-declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+declare function AssetsButton({ chain, token, onClick, variant, isLoading, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -162,8 +163,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     size: ButtonSize;
     disabled?: boolean;
     link?: string;
+    isLoading?: boolean;
 }
-declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, isLoading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -1371,8 +1373,9 @@ interface NavigationBarProps {
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
     actions?: ActionButton[];
+    isLoading?: boolean;
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 declare function PipeSeparator({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
@@ -1418,7 +1421,7 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
 }
-declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, maxUsdDecimals, isInputInteractive, isLoading, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -1747,7 +1750,9 @@ interface AssetsViewProps {
 declare function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }: AssetsViewProps): react_jsx_runtime.JSX.Element;
 declare const List: ({ children }: react__default.PropsWithChildren) => react_jsx_runtime.JSX.Element;
 
-declare function MainView(): react_jsx_runtime.JSX.Element;
+declare function MainView({ isLoading }: {
+    isLoading?: boolean;
+}): react_jsx_runtime.JSX.Element;
 
 type WalletViewType = 'paymentMethod' | 'recipientEmpty' | 'recipientTypingEns' | 'recipientTypingAddress';
 interface WalletsViewProps {

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "author": "",
   "license": "MIT",
   "resolutions": {