@0xsquid/ui 0.7.3 → 0.7.5

package/dist/cjs/index.js

@@ -2532,6 +2532,24 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+function debounce(func, delay) {
+    let timeoutId;
+    const debounced = function (...args) {
+        // @ts-expect-error - 'this' implicitly has type 'any' because it does not have a type annotation.
+        const context = this;
+        const later = () => {
+            timeoutId = null;
+            func.apply(context, args);
+        };
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(later, delay);
+    };
+    debounced.cancel = () => {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+    };
+    return debounced;
+}
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2794,6 +2812,135 @@ const PasteButton = () => {
     return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
 };
 
+const NumericInput = (_a) => {
+    var _b;
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    const [inputValue, setInputValue] = react.useState(initialValue);
+    // Probably a better way to handle this
+    // This was introduce to handle the "MAX" button setting an amount
+    // Other than that, this component is only sending value to the exterior
+    // Without this, we were losing inputs such as ".05" that were forced parsed to "0.05" after debounce
+    react.useEffect(() => {
+        if (forcedUpdateValue && forcedUpdateValue !== '0') {
+            setInputValue(forcedUpdateValue);
+        }
+    }, [forcedUpdateValue]);
+    /**
+     * Get the number of decimals of inputValue
+     * If there are more decimals than the maxDecimals
+     * remove the extra decimals
+     */
+    react.useEffect(() => {
+        var _a;
+        const split = inputValue.split('.');
+        if (split.length > 1) {
+            const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+            if (maxDecimals && decimals.length > maxDecimals) {
+                const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
+                setInputValue(newValue);
+                onParsedValueChanged(newValue);
+            }
+        }
+    }, [maxDecimals]);
+    const debouncePriceChanged = (value = '') => {
+        if (value.endsWith('.'))
+            return;
+        onParsedValueChanged(value);
+    };
+    // useCallback to memoizes the debounce function, prevents recreating it
+    const debouncePriceUpdate = react.useCallback(debounce(debouncePriceChanged, 700), []);
+    const handlePriceChanged = (event) => {
+        var _a;
+        try {
+            const formattedInput = event.currentTarget.value
+                .replace(/[^0-9\.\,$%]/g, '')
+                .replace(',', '.');
+            if (formattedInput.includes('$') || formattedInput.includes('%')) {
+                let cleanedInput = formattedInput;
+                if (formattedInput.includes('$') && formattedInput.includes('%')) {
+                    // only allow one of them
+                    cleanedInput = formattedInput
+                        .replaceAll('$', '')
+                        .replaceAll('%', '')
+                        .concat('%');
+                }
+                else if (formattedInput.includes('%')) {
+                    // remove duplicates & always add % at the end
+                    cleanedInput = formattedInput.replaceAll('%', '').concat('%');
+                }
+                else if (formattedInput.includes('$')) {
+                    // Always add $ at the beginning
+                    cleanedInput = formattedInput.replaceAll('$', '');
+                    cleanedInput = `$${cleanedInput}`;
+                }
+                setInputValue(cleanedInput);
+                debouncePriceUpdate.cancel();
+                return;
+            }
+            // This is to prevent the user from typing more decimals than the decimals attribute of the token
+            if (maxDecimals !== undefined) {
+                const split = formattedInput.split('.');
+                if (split.length > 1) {
+                    const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+                    if (decimals.length > maxDecimals) {
+                        // Don't update anything
+                        return;
+                    }
+                }
+            }
+            // if input includes at least one character different than `0` (zero), `.` (dot), or `,` (comma)
+            // means that user is typing a valid amount, for example: 1.02 or 0.005
+            // if so, then update the input value and fetch the price
+            if (/[^0,.]/.test(formattedInput)) {
+                setInputValue(formattedInput);
+                debouncePriceUpdate(formattedInput);
+            }
+            else if (
+            // Means the user is currently typing and will add decimal, no need to fetch or parse
+            // example input: 0.00
+            (formattedInput.includes('.') && formattedInput.endsWith('0')) ||
+                formattedInput.endsWith('.') ||
+                (formattedInput === '0' && (inputValue === '' || inputValue === '0'))) {
+                setInputValue(formattedInput);
+            }
+            else if (!isNaN(+formattedInput)) {
+                setInputValue(formattedInput.toString());
+                debouncePriceUpdate(formattedInput.toString());
+                // onParsedValueChanged(formattedInput.toString());
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        catch (error) {
+            setInputValue('');
+        }
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (inputValue.includes('%')) {
+            const percentage = Number(inputValue.replace('%', ''));
+            // If the percentage is greater than 100, set it to 100
+            const formattedPercentage = percentage > 100 ? 100 : percentage;
+            const valueByPercentage = Number(balance) * (formattedPercentage / 100);
+            // If the value is 0, we want to show 0, not 0.0000
+            const formattedValue = valueByPercentage === 0 ? '0' : valueByPercentage.toFixed(4);
+            setInputValue(formattedValue);
+            onParsedValueChanged(formattedValue);
+        }
+        if (inputValue.includes('$')) {
+            const usdAmount = Number(inputValue.replace('$', ''));
+            if (usdAmount > 0) {
+                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+                const newValueFormatted = newValue.toFixed(4);
+                setInputValue(newValueFormatted);
+                onParsedValueChanged(newValueFormatted);
+            }
+        }
+    };
+    return (jsxRuntime.jsx("form", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", onSubmit: handleSubmit, children: jsxRuntime.jsx("input", Object.assign({}, props, { onChange: handlePriceChanged, value: inputValue, type: "string", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : '0', className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none" })) }));
+};
+
 // font size, line height, and letter spacing classes
 const textClassMap = {
     small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
@@ -2966,7 +3113,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage = 'Something went wrong', boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+    const state = react.useMemo(() => {
+        if (errorMessage)
+            return 'error';
+        if (isLoading)
+            return 'loading';
+        if (isEmpty)
+            return 'empty';
+        return 'full';
+    }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
     return (jsxRuntime.jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
@@ -2976,7 +3132,7 @@ function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
 }
 
 function useModal(props) {
-    const [isModalOpen, setIsModalOpen] = react.useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
+    const [isModalOpen, setIsModalOpen] = react.useState(Boolean(void 0 ));
     const modalRef = react.useRef(null);
     const openModalButtonRef = react.useRef(null);
     react.useEffect(() => {
@@ -3144,15 +3300,17 @@ 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", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "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)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
     var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", 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 : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "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 }) }), direction === 'from' ? (jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", 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 : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "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 }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceButtonTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive
+                            ? 'hover:tw-bg-material-light-thin'
+                            : 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3279,6 +3437,7 @@ exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.NavigationBar = NavigationBar;
+exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;
 exports.SectionTitle = SectionTitle;
 exports.SettingsButton = SettingsButton;
@@ -3294,4 +3453,3 @@ exports.Switch = Switch;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.UsdAmount = UsdAmount;
-exports.useModal = useModal;

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

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from 'react';
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export * from './Input';
+export * from './NumericInput';
 export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';

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

@@ -1,6 +1,5 @@
-import { BoostMode, DetailsToolbarState } from '../../types/components';
+import { BoostMode } from '../../types/components';
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -12,10 +11,12 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -18,12 +18,14 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/themes.d.ts

@@ -1,10 +1,10 @@
 import { ThemeType } from '../types/components';
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 export type Theme = {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
-    theme: ConfigTheme;
+    theme: SquidTheme;
     type: ThemeType;
 };
 export declare const themes: Theme[];

package/dist/cjs/types/core/utils.d.ts

@@ -8,3 +8,10 @@ import { ClassValue } from 'clsx';
  * @returns The combined class names as a string.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+type AnyFunction = (...args: any[]) => any;
+interface DebouncedFunction<F extends AnyFunction> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export {};

package/dist/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './providers';
-export * from './hooks';
+export * from './providers';
+export * from './types';

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -1,9 +1,9 @@
-import { ConfigTheme } from '../../types/config';
+import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
  * @param style
  */
-export declare const getParsedStyle: (style?: ConfigTheme) => {
+export declare const getParsedStyle: (style?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/cjs/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface ConfigTheme {
+export interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -41,6 +41,6 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof ConfigTheme, {
+export declare const themeTypesKeys: Record<keyof SquidTheme, {
     cssVariable: string;
 }>;

package/dist/cjs/types/types/index.d.ts

@@ -0,0 +1 @@
+export type { SquidTheme } from './config';

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2530,6 +2530,24 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+function debounce(func, delay) {
+    let timeoutId;
+    const debounced = function (...args) {
+        // @ts-expect-error - 'this' implicitly has type 'any' because it does not have a type annotation.
+        const context = this;
+        const later = () => {
+            timeoutId = null;
+            func.apply(context, args);
+        };
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(later, delay);
+    };
+    debounced.cancel = () => {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+    };
+    return debounced;
+}
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2792,6 +2810,135 @@ const PasteButton = () => {
     return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
 };
 
+const NumericInput = (_a) => {
+    var _b;
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    const [inputValue, setInputValue] = useState(initialValue);
+    // Probably a better way to handle this
+    // This was introduce to handle the "MAX" button setting an amount
+    // Other than that, this component is only sending value to the exterior
+    // Without this, we were losing inputs such as ".05" that were forced parsed to "0.05" after debounce
+    useEffect(() => {
+        if (forcedUpdateValue && forcedUpdateValue !== '0') {
+            setInputValue(forcedUpdateValue);
+        }
+    }, [forcedUpdateValue]);
+    /**
+     * Get the number of decimals of inputValue
+     * If there are more decimals than the maxDecimals
+     * remove the extra decimals
+     */
+    useEffect(() => {
+        var _a;
+        const split = inputValue.split('.');
+        if (split.length > 1) {
+            const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+            if (maxDecimals && decimals.length > maxDecimals) {
+                const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
+                setInputValue(newValue);
+                onParsedValueChanged(newValue);
+            }
+        }
+    }, [maxDecimals]);
+    const debouncePriceChanged = (value = '') => {
+        if (value.endsWith('.'))
+            return;
+        onParsedValueChanged(value);
+    };
+    // useCallback to memoizes the debounce function, prevents recreating it
+    const debouncePriceUpdate = useCallback(debounce(debouncePriceChanged, 700), []);
+    const handlePriceChanged = (event) => {
+        var _a;
+        try {
+            const formattedInput = event.currentTarget.value
+                .replace(/[^0-9\.\,$%]/g, '')
+                .replace(',', '.');
+            if (formattedInput.includes('$') || formattedInput.includes('%')) {
+                let cleanedInput = formattedInput;
+                if (formattedInput.includes('$') && formattedInput.includes('%')) {
+                    // only allow one of them
+                    cleanedInput = formattedInput
+                        .replaceAll('$', '')
+                        .replaceAll('%', '')
+                        .concat('%');
+                }
+                else if (formattedInput.includes('%')) {
+                    // remove duplicates & always add % at the end
+                    cleanedInput = formattedInput.replaceAll('%', '').concat('%');
+                }
+                else if (formattedInput.includes('$')) {
+                    // Always add $ at the beginning
+                    cleanedInput = formattedInput.replaceAll('$', '');
+                    cleanedInput = `$${cleanedInput}`;
+                }
+                setInputValue(cleanedInput);
+                debouncePriceUpdate.cancel();
+                return;
+            }
+            // This is to prevent the user from typing more decimals than the decimals attribute of the token
+            if (maxDecimals !== undefined) {
+                const split = formattedInput.split('.');
+                if (split.length > 1) {
+                    const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+                    if (decimals.length > maxDecimals) {
+                        // Don't update anything
+                        return;
+                    }
+                }
+            }
+            // if input includes at least one character different than `0` (zero), `.` (dot), or `,` (comma)
+            // means that user is typing a valid amount, for example: 1.02 or 0.005
+            // if so, then update the input value and fetch the price
+            if (/[^0,.]/.test(formattedInput)) {
+                setInputValue(formattedInput);
+                debouncePriceUpdate(formattedInput);
+            }
+            else if (
+            // Means the user is currently typing and will add decimal, no need to fetch or parse
+            // example input: 0.00
+            (formattedInput.includes('.') && formattedInput.endsWith('0')) ||
+                formattedInput.endsWith('.') ||
+                (formattedInput === '0' && (inputValue === '' || inputValue === '0'))) {
+                setInputValue(formattedInput);
+            }
+            else if (!isNaN(+formattedInput)) {
+                setInputValue(formattedInput.toString());
+                debouncePriceUpdate(formattedInput.toString());
+                // onParsedValueChanged(formattedInput.toString());
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        catch (error) {
+            setInputValue('');
+        }
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (inputValue.includes('%')) {
+            const percentage = Number(inputValue.replace('%', ''));
+            // If the percentage is greater than 100, set it to 100
+            const formattedPercentage = percentage > 100 ? 100 : percentage;
+            const valueByPercentage = Number(balance) * (formattedPercentage / 100);
+            // If the value is 0, we want to show 0, not 0.0000
+            const formattedValue = valueByPercentage === 0 ? '0' : valueByPercentage.toFixed(4);
+            setInputValue(formattedValue);
+            onParsedValueChanged(formattedValue);
+        }
+        if (inputValue.includes('$')) {
+            const usdAmount = Number(inputValue.replace('$', ''));
+            if (usdAmount > 0) {
+                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+                const newValueFormatted = newValue.toFixed(4);
+                setInputValue(newValueFormatted);
+                onParsedValueChanged(newValueFormatted);
+            }
+        }
+    };
+    return (jsx("form", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", onSubmit: handleSubmit, children: jsx("input", Object.assign({}, props, { onChange: handlePriceChanged, value: inputValue, type: "string", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : '0', className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none" })) }));
+};
+
 // font size, line height, and letter spacing classes
 const textClassMap = {
     small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
@@ -2964,7 +3111,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage = 'Something went wrong', boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+    const state = useMemo(() => {
+        if (errorMessage)
+            return 'error';
+        if (isLoading)
+            return 'loading';
+        if (isEmpty)
+            return 'empty';
+        return 'full';
+    }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
     return (jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
@@ -2974,7 +3130,7 @@ function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
 }
 
 function useModal(props) {
-    const [isModalOpen, setIsModalOpen] = useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
+    const [isModalOpen, setIsModalOpen] = useState(Boolean(void 0 ));
     const modalRef = useRef(null);
     const openModalButtonRef = useRef(null);
     useEffect(() => {
@@ -3142,15 +3298,17 @@ 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", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "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)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
     var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", 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 : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "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 }) }), direction === 'from' ? (jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", 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 : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "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 }) }), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive
+                            ? 'hover:tw-bg-material-light-thin'
+                            : 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3254,4 +3412,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount };

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

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from 'react';
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export * from './Input';
+export * from './NumericInput';
 export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';

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

@@ -1,6 +1,5 @@
-import { BoostMode, DetailsToolbarState } from '../../types/components';
+import { BoostMode } from '../../types/components';
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -12,10 +11,12 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -18,12 +18,14 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/core/themes.d.ts

@@ -1,10 +1,10 @@
 import { ThemeType } from '../types/components';
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 export type Theme = {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
-    theme: ConfigTheme;
+    theme: SquidTheme;
     type: ThemeType;
 };
 export declare const themes: Theme[];

package/dist/esm/types/core/utils.d.ts

@@ -8,3 +8,10 @@ import { ClassValue } from 'clsx';
  * @returns The combined class names as a string.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+type AnyFunction = (...args: any[]) => any;
+interface DebouncedFunction<F extends AnyFunction> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export {};

package/dist/esm/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './providers';
-export * from './hooks';
+export * from './providers';
+export * from './types';

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/services/internal/colorService.d.ts

@@ -1,9 +1,9 @@
-import { ConfigTheme } from '../../types/config';
+import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
  * @param style
  */
-export declare const getParsedStyle: (style?: ConfigTheme) => {
+export declare const getParsedStyle: (style?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/esm/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface ConfigTheme {
+export interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -41,6 +41,6 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof ConfigTheme, {
+export declare const themeTypesKeys: Record<keyof SquidTheme, {
     cssVariable: string;
 }>;

package/dist/esm/types/types/index.d.ts

@@ -0,0 +1 @@
+export type { SquidTheme } from './config';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { InputHTMLAttributes } from 'react';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -56,7 +56,6 @@ type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
 };
-type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 type ThemeType = 'light' | 'dark';
 
 interface BoostButtonProps {
@@ -103,6 +102,16 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
@@ -142,7 +151,6 @@ interface BoostProps {
 declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -154,12 +162,14 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -291,6 +301,7 @@ interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -305,14 +316,16 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -356,7 +369,7 @@ interface HeadingTextProps {
 }
 declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
-interface ConfigTheme {
+interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -393,19 +406,9 @@ interface ConfigTheme {
 }
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useModal(props?: {
-    initialIsModalOpen?: boolean;
-}): {
-    isModalOpen: boolean;
-    openModal: () => void;
-    closeModal: () => void;
-    modalRef: React.RefObject<HTMLDivElement>;
-    openModalButtonRef: React.RefObject<HTMLButtonElement>;
-};
-
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount };

package/package.json

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