@0xsquid/ui 0.4.0 → 0.4.2

package/dist/cjs/index.js

@@ -2762,7 +2762,7 @@ const themeTypesKeys = {
 
 const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
 const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
-function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, }) {
+function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
     const bgGradient = react.useMemo(() => {
         if (!chainImageUrl) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2772,11 +2772,11 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 47.5%, ${tokenBgColor} 52.5%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
                 }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
                     backgroundColor: tokenBgColor,
-                }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-full -tw-translate-x-[2px]" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
                 }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, {})] })] }));
@@ -2855,7 +2855,7 @@ function EthereumIcon() {
 }
 
 function FeeButton() {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(Chip, { label: "Fee" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: 560 })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(Chip, { label: "Fee" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: '560' })] })] }));
 }
 
 // font size, line height, and letter spacing classes
@@ -2947,27 +2947,19 @@ function Boost({ boostMode, onToggleBoostMode }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
 }
 
-var DetailsToolbarState;
-(function (DetailsToolbarState) {
-    DetailsToolbarState[DetailsToolbarState["FULL"] = 0] = "FULL";
-    DetailsToolbarState[DetailsToolbarState["LOADING"] = 1] = "LOADING";
-    DetailsToolbarState[DetailsToolbarState["EMPTY"] = 2] = "EMPTY";
-    DetailsToolbarState[DetailsToolbarState["ERROR"] = 3] = "ERROR";
-})(DetailsToolbarState || (DetailsToolbarState = {}));
-
 function EmojiSadIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
 
 const detailStateClassMap = {
-    [DetailsToolbarState.LOADING]: 'tw-opacity-33 tw-pointer-events-none',
-    [DetailsToolbarState.EMPTY]: 'tw-pointer-events-none tw-hidden',
-    [DetailsToolbarState.ERROR]: 'tw-opacity-33 tw-pointer-events-none',
-    [DetailsToolbarState.FULL]: '',
+    loading: 'tw-opacity-33 tw-pointer-events-none',
+    empty: 'tw-pointer-events-none tw-hidden',
+    error: 'tw-opacity-33 tw-pointer-events-none',
+    full: '',
 };
-function DetailsToolbar({ state = DetailsToolbarState.FULL, errorMessage, }) {
+function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, }) {
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === DetailsToolbarState.ERROR ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, {}) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", 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, { boostMode: "boost" }) })] })) }));
+    return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, {}) }), 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", 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, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
 }
 const ErrorMessage = ({ message }) => {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsxRuntime.jsx(EmojiSadIcon, {}), jsxRuntime.jsx(CaptionText, { children: message })] }));
@@ -3003,11 +2995,12 @@ function WalletAddress({ address, ens }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd = 0, balance = '0', isFetching = false, chain, token, direction, }) {
-    const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
+function SwapConfiguration({ priceImpactPercentage, amount = '0', swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
+    var _a;
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    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("div", { 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 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, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: "so-so.eth" })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m", children: jsxRuntime.jsx("input", { className: "tw-my-squid-xs 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: 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: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", 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 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, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m", children: jsxRuntime.jsx("input", { className: "tw-my-squid-xs 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(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: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {

package/dist/cjs/types/components/badges/UsdAmount.d.ts

@@ -1,5 +1,5 @@
 interface UsdAmountProps {
-    usdAmount: number;
+    usdAmount: string;
 }
 export declare function UsdAmount({ usdAmount }: UsdAmountProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ interface AssetsButtonProps {
     chainBgColor?: string;
     tokenBgColor?: string;
     tokenTextColor?: string;
+    onClick?: () => void;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
-import { DetailsToolbarState } from '../../types/components';
+import { BoostMode, DetailsToolbarState } from '../../types/components';
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
     errorMessage: string;
+    boostMode?: BoostMode;
+    onToggleBoostMode?: ({ boostMode }: {
+        boostMode: BoostMode;
+    }) => void;
 }
-export declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -14,10 +14,5 @@ export type SwapStep = {
     chipContent: React.ReactNode;
     routeStepOrder: number;
 };
-export declare enum DetailsToolbarState {
-    FULL = 0,
-    LOADING = 1,
-    EMPTY = 2,
-    ERROR = 3
-}
+export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';

package/dist/esm/index.js

@@ -2760,7 +2760,7 @@ const themeTypesKeys = {
 
 const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
 const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
-function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, }) {
+function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, onClick, }) {
     const bgGradient = useMemo(() => {
         if (!chainImageUrl) {
             return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
@@ -2770,11 +2770,11 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 47.5%, ${tokenBgColor} 52.5%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
                 }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
                     backgroundColor: tokenBgColor,
-                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-full -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
                 }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, {})] })] }));
@@ -2853,7 +2853,7 @@ function EthereumIcon() {
 }
 
 function FeeButton() {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: 560 })] })] }));
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: '560' })] })] }));
 }
 
 // font size, line height, and letter spacing classes
@@ -2945,27 +2945,19 @@ function Boost({ boostMode, onToggleBoostMode }) {
     return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
 }
 
-var DetailsToolbarState;
-(function (DetailsToolbarState) {
-    DetailsToolbarState[DetailsToolbarState["FULL"] = 0] = "FULL";
-    DetailsToolbarState[DetailsToolbarState["LOADING"] = 1] = "LOADING";
-    DetailsToolbarState[DetailsToolbarState["EMPTY"] = 2] = "EMPTY";
-    DetailsToolbarState[DetailsToolbarState["ERROR"] = 3] = "ERROR";
-})(DetailsToolbarState || (DetailsToolbarState = {}));
-
 function EmojiSadIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
 
 const detailStateClassMap = {
-    [DetailsToolbarState.LOADING]: 'tw-opacity-33 tw-pointer-events-none',
-    [DetailsToolbarState.EMPTY]: 'tw-pointer-events-none tw-hidden',
-    [DetailsToolbarState.ERROR]: 'tw-opacity-33 tw-pointer-events-none',
-    [DetailsToolbarState.FULL]: '',
+    loading: 'tw-opacity-33 tw-pointer-events-none',
+    empty: 'tw-pointer-events-none tw-hidden',
+    error: 'tw-opacity-33 tw-pointer-events-none',
+    full: '',
 };
-function DetailsToolbar({ state = DetailsToolbarState.FULL, errorMessage, }) {
+function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, }) {
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === DetailsToolbarState.ERROR ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: "boost" }) })] })) }));
+    return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), 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", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
 }
 const ErrorMessage = ({ message }) => {
     return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
@@ -3001,11 +2993,12 @@ function WalletAddress({ address, ens }) {
     return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd = 0, balance = '0', isFetching = false, chain, token, direction, }) {
-    const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
+function SwapConfiguration({ priceImpactPercentage, amount = '0', swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
+    var _a;
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    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("div", { 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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { 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 }) }), jsx("div", { className: "tw-px-squid-m", children: jsx("input", { className: "tw-my-squid-xs 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: 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: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", 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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsx("div", { className: "tw-px-squid-m", children: jsx("input", { className: "tw-my-squid-xs 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(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: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs 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("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {

package/dist/esm/types/components/badges/UsdAmount.d.ts

@@ -1,5 +1,5 @@
 interface UsdAmountProps {
-    usdAmount: number;
+    usdAmount: string;
 }
 export declare function UsdAmount({ usdAmount }: UsdAmountProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ interface AssetsButtonProps {
     chainBgColor?: string;
     tokenBgColor?: string;
     tokenTextColor?: string;
+    onClick?: () => void;
 }
-export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
-import { DetailsToolbarState } from '../../types/components';
+import { BoostMode, DetailsToolbarState } from '../../types/components';
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
     errorMessage: string;
+    boostMode?: BoostMode;
+    onToggleBoostMode?: ({ boostMode }: {
+        boostMode: BoostMode;
+    }) => void;
 }
-export declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -14,10 +14,5 @@ export type SwapStep = {
     chipContent: React.ReactNode;
     routeStepOrder: number;
 };
-export declare enum DetailsToolbarState {
-    FULL = 0,
-    LOADING = 1,
-    EMPTY = 2,
-    ERROR = 3
-}
+export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';

package/dist/index.css

@@ -2251,7 +2251,7 @@ video {
 
   src:
     local('Geist'),
-    url('../fonts/Geist-Variable.woff2') format('woff2');
+    url('./fonts/Geist-Variable.woff2') format('woff2');
 }
 
 *,

package/dist/index.d.ts

@@ -13,7 +13,7 @@ type BadgeSize = 'sm' | 'md';
 declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
 interface UsdAmountProps {
-    usdAmount: number;
+    usdAmount: string;
 }
 declare function UsdAmount({ usdAmount }: UsdAmountProps): react_jsx_runtime.JSX.Element;
 
@@ -38,8 +38,9 @@ interface AssetsButtonProps {
     chainBgColor?: string;
     tokenBgColor?: string;
     tokenTextColor?: string;
+    onClick?: () => void;
 }
-declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, onClick, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
@@ -56,12 +57,7 @@ type SwapStep = {
     chipContent: React.ReactNode;
     routeStepOrder: number;
 };
-declare enum DetailsToolbarState {
-    FULL = 0,
-    LOADING = 1,
-    EMPTY = 2,
-    ERROR = 3
-}
+type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 type ThemeType = 'light' | 'dark';
 
 interface BoostButtonProps {
@@ -139,8 +135,12 @@ declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): react_jsx_
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
     errorMessage: string;
+    boostMode?: BoostMode;
+    onToggleBoostMode?: ({ boostMode }: {
+        boostMode: BoostMode;
+    }) => void;
 }
-declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 type Rounded = 'sm' | 'lg';
 interface MenuProps extends React$1.ComponentProps<'div'> {
@@ -173,9 +173,9 @@ declare function ProductCard({ children }: ProductCardProps): react_jsx_runtime.
 
 interface SwapConfigurationProps {
     direction: SwapDirection;
-    priceImpactPercentage?: number;
-    amount?: number;
-    swapAmountUsd?: number;
+    priceImpactPercentage?: string;
+    amount?: string;
+    swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
     chain?: {
@@ -188,8 +188,12 @@ interface SwapConfigurationProps {
         bgColor: string;
         textColor: string;
     };
+    address?: string;
+    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onWalletButtonClick?: () => void;
+    onAssetsButtonClick?: () => void;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -20,7 +20,8 @@
     "release:pre": "release-it --preRelease=beta",
     "release:ci": "release-it --ci",
     "release:dry": "release-it --dry-run",
-    "build": "yarn build-tailwind && rollup -c && cp src/styles/compiled-tailwind.css dist/index.css"
+    "build": "yarn build-tailwind && rollup -c && cp src/styles/compiled-tailwind.css dist/index.css && yarn copy-fonts",
+    "copy-fonts": "cp -r src/styles/fonts dist/fonts"
   },
   "dependencies": {
     "clsx": "2.1.0",
@@ -53,8 +54,8 @@
     "@storybook/react-webpack5": "^8.0.1",
     "@storybook/test": "^8.0.1",
     "@types/color": "^3.0.6",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "autoprefixer": "10.4.18",
     "concurrently": "8.2.2",
@@ -101,7 +102,7 @@
     }
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
 }