@0xsquid/ui 0.18.3 → 0.18.5

package/dist/cjs/index.js

@@ -2907,8 +2907,8 @@ function ArrowRightUpIcon() {
 function ChevronArrowIcon({ size = '16', className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowTriangle() {
-    return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
+function ArrowTriangle({ className }) {
+    return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
 }
 function ChevronLargeDownIcon({ size = '24', className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -6703,10 +6703,6 @@ function trimExtraDecimals(value, maxDecimals) {
     return value;
 }
 
-function MaxIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_41_20801", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
 function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -18123,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,
@@ -18134,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 === null || token === void 0 ? void 0 : token.iconUrl), 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, }) {
@@ -24254,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);
@@ -24271,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);
         }
@@ -24365,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]);
@@ -24380,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, {}), 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.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+                                            : 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, }) {
@@ -59835,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]', 
@@ -59853,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/icons/Arrow.d.ts

@@ -5,7 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowTriangle({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeDownIcon({ size, className, }: {
     size?: 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/layout/SwapConfiguration.stories.d.ts

@@ -12,6 +12,7 @@ export declare const Address: Story;
 export declare const WithBalance: Story;
 export declare const LowPriceImpact: Story;
 export declare const HighPriceImpact: Story;
+export declare const ZeroPriceImpact: Story;
 export declare const IsFetching: Story;
 export declare const AllProps: Story;
 export declare const ToDirection: Story;

package/dist/esm/index.js

@@ -2887,8 +2887,8 @@ function ArrowRightUpIcon() {
 function ChevronArrowIcon({ size = '16', className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowTriangle() {
-    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
+function ArrowTriangle({ className }) {
+    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
 }
 function ChevronLargeDownIcon({ size = '24', className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -6683,10 +6683,6 @@ function trimExtraDecimals(value, maxDecimals) {
     return value;
 }
 
-function MaxIcon() {
-    return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_41_20801)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM10.6508 4.74074L14.1508 7.74074C14.5701 8.10017 14.6187 8.73147 14.2593 9.15079C13.8998 9.57012 13.2685 9.61868 12.8492 9.25926L10 6.81708L7.15079 9.25926C6.73147 9.61868 6.10017 9.57012 5.74074 9.15079C5.38132 8.73147 5.42988 8.10017 5.84921 7.74074L9.34921 4.74074C9.7237 4.41975 10.2763 4.41975 10.6508 4.74074ZM14.1508 13.7407L10.6508 10.7407C10.2763 10.4198 9.7237 10.4198 9.34921 10.7407L5.84921 13.7407C5.42988 14.1002 5.38132 14.7315 5.74074 15.1508C6.10017 15.5701 6.73147 15.6187 7.15079 15.2593L10 12.8171L12.8492 15.2593C13.2685 15.6187 13.8998 15.5701 14.2593 15.1508C14.6187 14.7315 14.5701 14.1002 14.1508 13.7407Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_41_20801", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
-}
-
 function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -18103,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,
@@ -18114,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 === null || token === void 0 ? void 0 : token.iconUrl), 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, }) {
@@ -24234,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);
@@ -24251,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);
         }
@@ -24345,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]);
@@ -24360,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, {}), 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" }), jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
+                                            : 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, }) {
@@ -59815,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]', 
@@ -59833,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/icons/Arrow.d.ts

@@ -5,7 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowTriangle({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeDownIcon({ size, className, }: {
     size?: 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/layout/SwapConfiguration.stories.d.ts

@@ -12,6 +12,7 @@ export declare const Address: Story;
 export declare const WithBalance: Story;
 export declare const LowPriceImpact: Story;
 export declare const HighPriceImpact: Story;
+export declare const ZeroPriceImpact: Story;
 export declare const IsFetching: Story;
 export declare const AllProps: Story;
 export declare const ToDirection: Story;

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.3",
+  "version": "0.18.5",
   "author": "",
   "license": "MIT",
   "resolutions": {