@0xsquid/ui 0.18.4 → 0.19.0

package/dist/cjs/index.js

@@ -3111,27 +3111,28 @@ 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({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant = 'primary', }) {
+function AssetsButton({ chain, token, onClick, variant = 'primary', }) {
+    var _a, _b;
     const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
-    const chainBgColor = _chainBgColor !== null && _chainBgColor !== void 0 ? _chainBgColor : defaultBgColor;
-    const tokenBgColor = _tokenBgColor !== null && _tokenBgColor !== void 0 ? _tokenBgColor : defaultBgColor;
+    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 bgGradient = React.useMemo(() => {
-        if (!chainImageUrl) {
+        if (!chain) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
-        if (!tokenImageUrl) {
+        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]);
-    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', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [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: {
                     backgroundImage: bgGradient,
-                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (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 ? (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: {
                             backgroundColor: tokenBgColor,
-                        } }), jsxRuntime.jsx("img", { src: tokenImageUrl, alt: tokenSymbol, 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', tokenImageUrl && '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-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: {
                     backgroundColor: tokenBgColor,
-                    color: tokenTextColor,
-                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                    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" })] })] }));
 }
 
 const CSS_VARS = {
@@ -17524,13 +17525,13 @@ function ModalContentDivider() {
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     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'
-                    : 'mobile-lg:tw-pl-squid-l tw-pl-squid-m tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button$1, { className: displayButtonShadows
+                    : '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'
                                 ? action.labelOrIcon
                                 : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
                                 ? null
-                                : action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsxRuntime.jsx("div", { className: "mobile-lg:tw-px-squid-l tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+                                : action.labelOrIcon, onClick: action.onClick }, action.id))) })] }), title ? (jsxRuntime.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: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 const createStoreImpl = (createState) => {
@@ -18119,9 +18120,9 @@ 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, }) {
+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, }) {
     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, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor, 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: {
+    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: {
                     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,
@@ -18130,7 +18131,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 })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24250,10 +24251,11 @@ 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, }) {
+}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive = false, }) {
     var _a;
     const [inputValue, setInputValue] = React.useState('');
     const [inputMode, setInputMode] = React.useState(InputMode.TOKEN);
+    const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     React.useEffect(() => {
         if (forcedAmount !== undefined) {
             updateInputValue(forcedAmount);
@@ -24267,7 +24269,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         setInputValue(formattedAmount);
     }, [inputMode, token.price, direction, token.decimals]);
     const onBalanceButtonClick = React.useCallback(() => {
-        if (direction === 'from') {
+        if (balanceChipClickable) {
             updateInputValue(balance);
             onAmountChange(balance);
         }
@@ -24361,12 +24363,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
             return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [inputValue, inputMode, token.price, direction, amountUsd]);
-    const isInteractive = direction === 'from';
     const AmountChip = isInteractive ? 'button' : 'div';
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    const BalanceChipTag = isInteractive ? 'button' : 'div';
+    const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
     const balanceFormatted = React.useMemo(() => {
         return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
     }, [balance]);
@@ -24376,7 +24377,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                                 ? formatIfVerySmall.token
                                                 : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                             ? formatIfVerySmall.token
-                                            : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0 ? 'tw-opacity-0' : '' }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), jsxRuntime.jsx(Chip, { label: "Max" })] })] }))] }));
+                                            : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0 ? 'tw-opacity-0' : '' }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), jsxRuntime.jsx(Chip, { label: "Max" })] })] }))] }));
 }
 
 function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
@@ -24694,9 +24695,11 @@ function MainView() {
     return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: "Swap", actions: [
                     {
                         labelOrIcon: jsxRuntime.jsx(ClockOutlineIcon, {}),
+                        id: 'history',
                     },
                     {
                         labelOrIcon: jsxRuntime.jsx(SettingsGearIcon, {}),
+                        id: 'settings',
                     },
                 ] }), jsxRuntime.jsx(SwapConfiguration, { direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
@@ -59714,13 +59717,13 @@ function XSocial({ className, size = '24', }) {
 }
 
 function SwapSuccessIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
+    return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
 }
 function SwapErrorIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-opacity": "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
+    return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
 }
 function SwapWarningIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
+    return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsxRuntime.jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
 }
 
 const swapProgressAnimations = {
@@ -59831,7 +59834,9 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
     const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
     return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
         // close route steps modal when open and backdrop is clicked
-        !showSwapInfoSection ? handleCollapseRouteSteps : handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
+        !showSwapInfoSection
+            ? handleCollapseRouteSteps
+            : () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), children: [jsxRuntime.jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                 }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
@@ -59849,7 +59854,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
+                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Close", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }), jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }))] }));
 }
 const TrackTransactionView = React.forwardRef((props, ref) => {
     const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;

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

@@ -1,13 +1,17 @@
 import { AssetsButtonVariant } from '../../types/components';
 interface AssetsButtonProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
+    token?: {
+        iconUrl: string;
+        symbol: string;
+        bgColor: string;
+        textColor: string;
+    };
+    chain?: {
+        iconUrl: string;
+        bgColor: string;
+    };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/controls/NumericInput.d.ts

@@ -23,6 +23,7 @@ interface NumericInputProps {
     direction?: SwapDirection;
     amountUsd?: string;
     maxUsdDecimals?: number;
+    isInteractive?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
+    id: React.Key;
 };
 interface NavigationBarProps {
     title?: string;

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

@@ -30,6 +30,8 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     assetsButtonVariant?: AssetsButtonVariant;
     maxUsdDecimals?: number;
+    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, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -12,7 +12,7 @@ type Token = {
 };
 export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
     steps: SwapStep[];
-    handleClose?: () => void;
+    handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;
+export declare const TokenOnly: Story;
 export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;

package/dist/esm/index.js

@@ -3091,27 +3091,28 @@ 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({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant = 'primary', }) {
+function AssetsButton({ chain, token, onClick, variant = 'primary', }) {
+    var _a, _b;
     const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
-    const chainBgColor = _chainBgColor !== null && _chainBgColor !== void 0 ? _chainBgColor : defaultBgColor;
-    const tokenBgColor = _tokenBgColor !== null && _tokenBgColor !== void 0 ? _tokenBgColor : defaultBgColor;
+    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 bgGradient = useMemo(() => {
-        if (!chainImageUrl) {
+        if (!chain) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
-        if (!tokenImageUrl) {
+        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]);
-    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', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    }, [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: {
                     backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (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 ? (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: {
                             backgroundColor: tokenBgColor,
-                        } }), jsx("img", { src: tokenImageUrl, alt: tokenSymbol, 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', tokenImageUrl && '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-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: {
                     backgroundColor: tokenBgColor,
-                    color: tokenTextColor,
-                }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                    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" })] })] }));
 }
 
 const CSS_VARS = {
@@ -17504,13 +17505,13 @@ function ModalContentDivider() {
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     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'
-                    : 'mobile-lg:tw-pl-squid-l tw-pl-squid-m tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
+                    : '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'
                                 ? action.labelOrIcon
                                 : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
                                 ? null
-                                : action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "mobile-lg:tw-px-squid-l tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : 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) => {
@@ -18099,9 +18100,9 @@ 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, }) {
+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, }) {
     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, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor, 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: {
+    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: {
                     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,
@@ -18110,7 +18111,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 })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, amountUsd: amountUsd, isInteractive: isInputInteractive })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -24230,10 +24231,11 @@ 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, }) {
+}, showDetails = true, isLoading = false, direction, amountUsd, isInteractive = false, }) {
     var _a;
     const [inputValue, setInputValue] = useState('');
     const [inputMode, setInputMode] = useState(InputMode.TOKEN);
+    const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     useEffect(() => {
         if (forcedAmount !== undefined) {
             updateInputValue(forcedAmount);
@@ -24247,7 +24249,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         setInputValue(formattedAmount);
     }, [inputMode, token.price, direction, token.decimals]);
     const onBalanceButtonClick = useCallback(() => {
-        if (direction === 'from') {
+        if (balanceChipClickable) {
             updateInputValue(balance);
             onAmountChange(balance);
         }
@@ -24341,12 +24343,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
             return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [inputValue, inputMode, token.price, direction, amountUsd]);
-    const isInteractive = direction === 'from';
     const AmountChip = isInteractive ? 'button' : 'div';
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    const BalanceChipTag = isInteractive ? 'button' : 'div';
+    const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
     const balanceFormatted = useMemo(() => {
         return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
     }, [balance]);
@@ -24356,7 +24357,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                                 ? 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, isInteractive && interactiveChipClassName), 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] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable && interactiveChipClassName), 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, }) {
@@ -24674,9 +24675,11 @@ function MainView() {
     return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: "Swap", actions: [
                     {
                         labelOrIcon: jsx(ClockOutlineIcon, {}),
+                        id: 'history',
                     },
                     {
                         labelOrIcon: jsx(SettingsGearIcon, {}),
+                        id: 'settings',
                     },
                 ] }), jsx(SwapConfiguration, { direction: "from", chain: {
                     iconUrl: 'https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/blast.svg',
@@ -59694,13 +59697,13 @@ function XSocial({ className, size = '24', }) {
 }
 
 function SwapSuccessIcon() {
-    return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
+    return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52170" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
 }
 function SwapErrorIcon() {
-    return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-opacity": "0.33" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
+    return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", strokeOpacity: "0.33" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_52502" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
 }
 function SwapWarningIcon() {
-    return (jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsx("clipPath", { id: "clip0_588_15630", children: jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
+    return (jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", height: "82", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_588_15630" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsx("clipPath", { id: "clip0_588_15630", children: jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
 }
 
 const swapProgressAnimations = {
@@ -59811,7 +59814,9 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
     const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
     return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
         // close route steps modal when open and backdrop is clicked
-        !showSwapInfoSection ? handleCollapseRouteSteps : handleClose, children: [jsxs(ModalContent, { style: {
+        !showSwapInfoSection
+            ? handleCollapseRouteSteps
+            : () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), children: [jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                 }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
@@ -59829,7 +59834,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsx(Button$1, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
+                            } })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, variant: "round", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, variant: "round", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsx(Button$1, { size: "lg", variant: "primary", label: "Close", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsx(Button$1, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }), jsx(Button$1, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsx(Button$1, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: () => handleClose === null || handleClose === void 0 ? void 0 : handleClose(swapState), className: "tw-min-h-button" }))] }));
 }
 const TrackTransactionView = forwardRef((props, ref) => {
     const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;

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

@@ -1,13 +1,17 @@
 import { AssetsButtonVariant } from '../../types/components';
 interface AssetsButtonProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
+    token?: {
+        iconUrl: string;
+        symbol: string;
+        bgColor: string;
+        textColor: string;
+    };
+    chain?: {
+        iconUrl: string;
+        bgColor: string;
+    };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/controls/NumericInput.d.ts

@@ -23,6 +23,7 @@ interface NumericInputProps {
     direction?: SwapDirection;
     amountUsd?: string;
     maxUsdDecimals?: number;
+    isInteractive?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
+    id: React.Key;
 };
 interface NavigationBarProps {
     title?: string;

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

@@ -30,6 +30,8 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     assetsButtonVariant?: AssetsButtonVariant;
     maxUsdDecimals?: number;
+    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, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -12,7 +12,7 @@ type Token = {
 };
 export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
     steps: SwapStep[];
-    handleClose?: () => void;
+    handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof meta>;
 export declare const PrimaryVariantEmpty: Story;
 export declare const AccentVariantEmpty: Story;
 export declare const ChainOnly: Story;
+export declare const TokenOnly: Story;
 export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;

package/dist/index.d.ts

@@ -131,16 +131,20 @@ interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
 
 interface AssetsButtonProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
+    token?: {
+        iconUrl: string;
+        symbol: string;
+        bgColor: string;
+        textColor: string;
+    };
+    chain?: {
+        iconUrl: string;
+        bgColor: string;
+    };
     onClick?: () => void;
     variant?: AssetsButtonVariant;
 }
-declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+declare function AssetsButton({ chain, token, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -227,8 +231,9 @@ interface NumericInputProps {
     direction?: SwapDirection;
     amountUsd?: string;
     maxUsdDecimals?: number;
+    isInteractive?: boolean;
 }
-declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): react_jsx_runtime.JSX.Element;
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, isInteractive, }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;
@@ -1356,6 +1361,7 @@ declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
+    id: React.Key;
 };
 interface NavigationBarProps {
     title?: string;
@@ -1409,8 +1415,10 @@ interface SwapConfigurationProps {
     emptyAddressLabel?: string;
     assetsButtonVariant?: AssetsButtonVariant;
     maxUsdDecimals?: number;
+    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, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+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;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -1764,7 +1772,7 @@ type Token = {
 };
 declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
     steps: SwapStep[];
-    handleClose?: () => void;
+    handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;

package/package.json

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