@0xsquid/ui 0.18.4 → 0.18.5

package/dist/cjs/index.js

@@ -18119,7 +18119,7 @@ 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: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
@@ -18130,7 +18130,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 +24250,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 +24268,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 +24362,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 +24376,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, }) {
@@ -59831,7 +59831,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 +59851,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: "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 === 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/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/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/esm/index.js

@@ -18099,7 +18099,7 @@ 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: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
@@ -18110,7 +18110,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 +24230,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 +24248,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 +24342,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 +24356,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, }) {
@@ -59811,7 +59811,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 +59831,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: "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 === 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/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/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/index.d.ts

@@ -227,8 +227,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;
@@ -1409,8 +1410,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 +1767,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.18.5",
   "author": "",
   "license": "MIT",
   "resolutions": {