@0xsquid/ui 0.27.2 → 0.27.3-alpha.0

package/dist/cjs/index.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React$1 = require('react');
+var reactHooks = require('@0xsquid/react-hooks');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -6595,59 +6596,6 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-/**
- * Convert token amount to USD
- * @param {string|number} tokenAmount - The amount of tokens
- * @param {string|number} tokenPrice - The price of one token in USD
- * @returns {BigNumber} - The equivalent amount in USD
- */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
-    if (!tokenAmount || !tokenPrice)
-        return "";
-    const amount = new BigNumber(tokenAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.multipliedBy(price).decimalPlaces(maxDecimals).toString();
-}
-/**
- * Convert USD to token amount
- * @param {string|number} usdAmount - The amount in USD
- * @param {string|number} tokenPrice - The price of one token in USD
- * @param {number} maxDecimals - The maximum number of decimals
- * @returns {BigNumber} - The equivalent amount of tokens
- */
-function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
-    if (!usdAmount || !tokenPrice || !maxDecimals)
-        return "0";
-    const amount = new BigNumber(usdAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
-}
-const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 5,
-});
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-function formatAmount(amount) {
-    return INTL_NUMBER_FORMATTER.format(amount);
-}
-function trimExtraDecimals(value, maxDecimals) {
-    var _a;
-    const split = value.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)}`;
-            return newValue;
-        }
-    }
-    return value;
-}
-
 function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -17869,9 +17817,8 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
+function PipeSeparator(props) {
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
 function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
@@ -18796,7 +18743,7 @@ function ListItem(_a) {
     });
     return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
@@ -18804,10 +18751,9 @@ function ListItem(_a) {
                             : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
-const ListItemActionsButton = React$1.forwardRef((props, ref) => {
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
-            ? "tw-bg-material-light-thin tw-opacity-100"
-            : "tw-opacity-0", props.className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+const ListItemActionsButton = React$1.forwardRef((_a, ref) => {
+    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
 
 const dropdownPositionClassMap = {
@@ -19223,6 +19169,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
                                         // show separator for all steps except the first one
                                         showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? "pending" : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
+SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
@@ -25178,7 +25125,9 @@ function PopLayout(props) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 var lib = {};
@@ -26292,10 +26241,7 @@ const tooltipThresholdPaddingMap = {
     xl: "40px",
     xxl: "60px",
 };
-const TooltipContainer = (_a) => {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", className) })));
-};
+const TooltipContainer = (props) => (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", props.className) })));
 const TooltipTriggerWrapper = (_a) => {
     var { elementRef } = _a, props = __rest$1(_a, ["elementRef"]);
     return jsxRuntime.jsx("div", Object.assign({}, props, { ref: elementRef }));
@@ -26486,10 +26432,10 @@ function NumericInput(_a) {
         }
     }, [forcedAmount]);
     const updateInputValue = React$1.useCallback((newValue) => {
-        const safeNewValue = trimExtraDecimals(newValue, token.decimals);
+        const safeNewValue = reactHooks.trimExtraDecimals(newValue, token.decimals);
         const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
-            : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
+            : reactHooks.convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
     }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = React$1.useCallback(() => {
@@ -26502,7 +26448,7 @@ function NumericInput(_a) {
         onAmountChange,
     ]);
     const handleInputChange = (e) => {
-        let value = e.target.value.replace(/,/g, "."); // Replace commas with dots
+        const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
@@ -26523,8 +26469,8 @@ function NumericInput(_a) {
         var _a;
         if (inputValue !== "") {
             const convertedAmount = userInputType === UserInputType.TOKEN
-                ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
-                : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
+                ? reactHooks.convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
+                : reactHooks.convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
         setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
@@ -26541,7 +26487,7 @@ function NumericInput(_a) {
                 isUsdAmountVerySmall: false,
             };
         if (userInputType === UserInputType.TOKEN) {
-            const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
+            const usdRawAmount = reactHooks.convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
                 RegExpNonZeroValue.test(tokenRawAmount) &&
@@ -26558,7 +26504,7 @@ function NumericInput(_a) {
             };
         }
         else {
-            const tokenRawAmount = convertUSDToTokenAmount(amount, token.price, token.decimals);
+            const tokenRawAmount = reactHooks.convertUSDToTokenAmount(amount, token.price, token.decimals);
             const usdRawAmount = amount;
             const isUsdAmountVerySmall = (!!usdRawAmount &&
                 RegExpNonZeroValue.test(usdRawAmount) &&
@@ -26582,14 +26528,18 @@ function NumericInput(_a) {
             return "0";
         if (userInputType === UserInputType.TOKEN) {
             if (direction === "from") {
-                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
+                return reactHooks.formatUsdAmount(reactHooks.convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
+                    includeSign: false,
+                });
             }
             else {
-                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
+                return reactHooks.formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
+                    includeSign: false,
+                });
             }
         }
         else {
-            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
+            return reactHooks.formatTokenAmount(reactHooks.convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [
         inputValue,
@@ -26606,7 +26556,7 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const balanceFormatted = React$1.useMemo(() => {
-        return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
+        return reactHooks.formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
     }, [balance]);
     const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = React$1.useRef(null);
@@ -62008,7 +61958,7 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -62029,7 +61979,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             return "You declined the transaction in your wallet.";
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
+            return `You received a refund of ${refundTokenSymbol} to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return "Add gas to the transaction via Axelarscan to complete the swap";
@@ -62046,7 +61996,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React$1.useState(true);
     const isFirstRenderRef = React$1.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -62076,6 +62026,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

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

@@ -1,3 +1,4 @@
+/// <reference types="trusted-types" />
 import { motion } from "framer-motion";
 import { ComponentProps } from "react";
 interface AppContainerProps extends ComponentProps<typeof motion.div> {

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

@@ -1,2 +1,2 @@
 import { ComponentProps } from "react";
-export declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -3,14 +3,13 @@ import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -28,5 +27,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,11 +13,11 @@ export type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-export type SwapStep = {
+export interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 export declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,

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

@@ -1,3 +1,3 @@
 export type { SquidTheme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default$1, { useState, createContext, useContext, useMemo, useRef, useEffect, useLayoutEffect, useInsertionEffect, useCallback, forwardRef, Fragment as Fragment$1, createElement, useId as useId$1, Component, cloneElement, Children, isValidElement, useImperativeHandle } from 'react';
+import { trimExtraDecimals, convertTokenAmountToUSD, formatUsdAmount, formatTokenAmount, convertUSDToTokenAmount } from '@0xsquid/react-hooks';
 
 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}
 
@@ -6575,59 +6576,6 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-/**
- * Convert token amount to USD
- * @param {string|number} tokenAmount - The amount of tokens
- * @param {string|number} tokenPrice - The price of one token in USD
- * @returns {BigNumber} - The equivalent amount in USD
- */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
-    if (!tokenAmount || !tokenPrice)
-        return "";
-    const amount = new BigNumber(tokenAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.multipliedBy(price).decimalPlaces(maxDecimals).toString();
-}
-/**
- * Convert USD to token amount
- * @param {string|number} usdAmount - The amount in USD
- * @param {string|number} tokenPrice - The price of one token in USD
- * @param {number} maxDecimals - The maximum number of decimals
- * @returns {BigNumber} - The equivalent amount of tokens
- */
-function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
-    if (!usdAmount || !tokenPrice || !maxDecimals)
-        return "0";
-    const amount = new BigNumber(usdAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
-}
-const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 5,
-});
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-function formatAmount(amount) {
-    return INTL_NUMBER_FORMATTER.format(amount);
-}
-function trimExtraDecimals(value, maxDecimals) {
-    var _a;
-    const split = value.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)}`;
-            return newValue;
-        }
-    }
-    return value;
-}
-
 function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -17849,9 +17797,8 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
+function PipeSeparator(props) {
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
 function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
@@ -18776,7 +18723,7 @@ function ListItem(_a) {
     });
     return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
@@ -18784,10 +18731,9 @@ function ListItem(_a) {
                             : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
-const ListItemActionsButton = forwardRef((props, ref) => {
-    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
-            ? "tw-bg-material-light-thin tw-opacity-100"
-            : "tw-opacity-0", props.className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+const ListItemActionsButton = forwardRef((_a, ref) => {
+    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
 
 const dropdownPositionClassMap = {
@@ -19203,6 +19149,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
                                         // show separator for all steps except the first one
                                         showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? "pending" : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
+SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
@@ -25158,7 +25105,9 @@ function PopLayout(props) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 var lib = {};
@@ -26272,10 +26221,7 @@ const tooltipThresholdPaddingMap = {
     xl: "40px",
     xxl: "60px",
 };
-const TooltipContainer = (_a) => {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-relative", className) })));
-};
+const TooltipContainer = (props) => (jsx("div", Object.assign({}, props, { className: cn("tw-relative", props.className) })));
 const TooltipTriggerWrapper = (_a) => {
     var { elementRef } = _a, props = __rest$1(_a, ["elementRef"]);
     return jsx("div", Object.assign({}, props, { ref: elementRef }));
@@ -26482,7 +26428,7 @@ function NumericInput(_a) {
         onAmountChange,
     ]);
     const handleInputChange = (e) => {
-        let value = e.target.value.replace(/,/g, "."); // Replace commas with dots
+        const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
@@ -26562,14 +26508,18 @@ function NumericInput(_a) {
             return "0";
         if (userInputType === UserInputType.TOKEN) {
             if (direction === "from") {
-                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
+                return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
+                    includeSign: false,
+                });
             }
             else {
-                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
+                return formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
+                    includeSign: false,
+                });
             }
         }
         else {
-            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
+            return formatTokenAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [
         inputValue,
@@ -26586,7 +26536,7 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const balanceFormatted = useMemo(() => {
-        return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
+        return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
     }, [balance]);
     const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);
@@ -61988,7 +61938,7 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -62009,7 +61959,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             return "You declined the transaction in your wallet.";
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
+            return `You received a refund of ${refundTokenSymbol} to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return "Add gas to the transaction via Axelarscan to complete the swap";
@@ -62026,7 +61976,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -62056,6 +62006,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

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

@@ -1,3 +1,4 @@
+/// <reference types="trusted-types" />
 import { motion } from "framer-motion";
 import { ComponentProps } from "react";
 interface AppContainerProps extends ComponentProps<typeof motion.div> {

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

@@ -1,2 +1,2 @@
 import { ComponentProps } from "react";
-export declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -3,14 +3,13 @@ import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -28,5 +27,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,11 +13,11 @@ export type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-export type SwapStep = {
+export interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 export declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,

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

@@ -1,3 +1,3 @@
 export type { SquidTheme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="trusted-types" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, ComponentProps } from 'react';
@@ -37,11 +38,11 @@ type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-type SwapStep = {
+interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,
@@ -1456,7 +1457,7 @@ interface NavigationBarProps extends React.ComponentProps<"nav"> {
 }
 declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, ...props }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
-declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function PipeSeparator(props: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleMenuProps {
     menuRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -2382,14 +2383,13 @@ declare function SwapDetailsView({ isLoading, canToggleBoostMode, }: {
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -2407,6 +2407,7 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): react_jsx_runtime.JSX.Element;
 
 interface BaseTransactionViewProps {
@@ -2654,4 +2655,4 @@ declare const baseTailwindConfig: Config;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.27.2",
+  "version": "0.27.3-alpha.0",
   "author": "",
   "license": "MIT",
   "resolutions": {
@@ -29,6 +29,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@0xsquid/react-hooks": "3.0.4",
     "@lottiefiles/react-lottie-player": "3.5.0",
     "bignumber.js": "9.1.2",
     "clsx": "2.1.1",
@@ -51,6 +52,7 @@
   },
   "homepage": "https://github.com/0xsquid/squid-ui#readme",
   "devDependencies": {
+    "@0xsquid/squid-types": "0.1.104",
     "@chromatic-com/storybook": "^1.2.22",
     "@release-it/conventional-changelog": "github:release-it/conventional-changelog",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -118,6 +120,7 @@
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@0xsquid/react-hooks": "^3.0.4"
   }
 }

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

@@ -1,23 +0,0 @@
-/**
- * Convert token amount to USD
- * @param {string|number} tokenAmount - The amount of tokens
- * @param {string|number} tokenPrice - The price of one token in USD
- * @returns {BigNumber} - The equivalent amount in USD
- */
-export declare function convertTokenAmountToUSD(tokenAmount: string | number, tokenPrice: string | number, maxDecimals?: number): string;
-/**
- * Convert USD to token amount
- * @param {string|number} usdAmount - The amount in USD
- * @param {string|number} tokenPrice - The price of one token in USD
- * @param {number} maxDecimals - The maximum number of decimals
- * @returns {BigNumber} - The equivalent amount of tokens
- */
-export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-export declare function formatAmount(amount: number | bigint | string): string;
-export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;

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

@@ -1,23 +0,0 @@
-/**
- * Convert token amount to USD
- * @param {string|number} tokenAmount - The amount of tokens
- * @param {string|number} tokenPrice - The price of one token in USD
- * @returns {BigNumber} - The equivalent amount in USD
- */
-export declare function convertTokenAmountToUSD(tokenAmount: string | number, tokenPrice: string | number, maxDecimals?: number): string;
-/**
- * Convert USD to token amount
- * @param {string|number} usdAmount - The amount in USD
- * @param {string|number} tokenPrice - The price of one token in USD
- * @param {number} maxDecimals - The maximum number of decimals
- * @returns {BigNumber} - The equivalent amount of tokens
- */
-export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-export declare function formatAmount(amount: number | bigint | string): string;
-export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;