@0xsquid/ui 0.27.3 → 0.27.5

package/dist/cjs/index.js

@@ -6601,7 +6601,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
+function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
     if (!tokenAmount || !tokenPrice)
         return "";
     const amount = new BigNumber(tokenAmount);
@@ -6622,29 +6622,73 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
+const MAX_TOKEN_DECIMALS = 8;
+const TOKEN_EXACT_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+});
+const TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+    minimumSignificantDigits: 2,
+    maximumSignificantDigits: 4,
+});
+function formatTokenAmount(amount, { exact = true } = {}) {
+    const numericAmount = parseFloat(amount || "0");
+    if (numericAmount <= 0) {
+        return "0";
+    }
+    // Check if numericAmount is less than the smallest displayable amount
+    if (numericAmount < Math.pow(10, -MAX_TOKEN_DECIMALS)) {
+        return `<${Math.pow(10, -MAX_TOKEN_DECIMALS).toFixed(MAX_TOKEN_DECIMALS)}`;
+    }
+    return exact
+        ? TOKEN_EXACT_AMOUNT_INTL_FORMATTER.format(numericAmount)
+        : TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER.format(numericAmount);
+}
+// For values below 100,000, use exact integer precision
+// e.g 1,234.56, 98,765.43
+const STANDARD_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
     minimumFractionDigits: 2,
-    maximumFractionDigits: 5,
+    maximumFractionDigits: 2,
 });
-/**
- * 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);
+// For values above 100,000, use compact notation
+// e.g $12,34K, $98,765.43M
+const COMPACT_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    notation: "compact",
+    compactDisplay: "short",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+function formatUsdAmount(amount = "0", { includeSign = true } = {}) {
+    const parsedAmount = Number(amount);
+    if (parsedAmount < 0.01 && parsedAmount > 0) {
+        return includeSign ? "<$0.01" : "<0.01";
+    }
+    // Handle amounts less than 100,000 with exact integer precision
+    if (parsedAmount < 100000) {
+        return STANDARD_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
+    }
+    // Handle amounts 100,000 or more with compact notation
+    return COMPACT_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
 }
 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;
-        }
-    }
+    const [integerPart = "0", decimalPart] = value.split(".");
+    // Return just the integer part if maxDecimals is zero
+    if (maxDecimals === 0) {
+        return integerPart;
+    }
+    // Process decimals if present and maxDecimals is not zero
+    if (decimalPart &&
+        maxDecimals !== undefined &&
+        decimalPart.length > maxDecimals) {
+        return `${integerPart}.${decimalPart.slice(0, maxDecimals)}`;
+    }
+    // Return the original value if there are no excess decimals or maxDecimals is undefined
     return value;
 }
 
@@ -17753,7 +17797,7 @@ function Providers({ providers }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1 tw-self-stretch tw-rounded-squid-m tw-p-squid-xs", children: [jsxRuntime.jsx(Vector, { className: "tw-absolute -tw-top-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-bl-full tw-rounded-br-full tw-bg-royal-500 tw-bg-gradient-to-t tw-text-grey-500" }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-[44px] tw-max-w-[44px] tw-items-center tw-justify-center", children: providersToDisplay.map((provider, index, self) => (jsxRuntime.jsx("img", { style: {
                         transform: `translate(${spacing[self.length][index]}px)`,
                         zIndex: self.length - 1 - index,
-                    }, src: provider.logoUrl, className: "tw-relative tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs tw-border-2 tw-border-grey-900 tw-bg-grey-900" }, provider.logoUrl))) }), jsxRuntime.jsx(Vector, { className: "tw-absolute -tw-bottom-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-tl-full tw-rounded-tr-full tw-bg-royal-500 tw-bg-gradient-to-b tw-text-grey-500" })] }));
+                    }, src: provider.logoUrl, className: "tw-relative tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs tw-border-2 tw-border-grey-900 tw-bg-grey-900" }, provider.key))) }), jsxRuntime.jsx(Vector, { className: "tw-absolute -tw-bottom-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-tl-full tw-rounded-tr-full tw-bg-royal-500 tw-bg-gradient-to-b tw-text-grey-500" })] }));
 }
 const Vector = ({ className }) => (jsxRuntime.jsx("div", { className: cn("tw-h-2.5 tw-w-1 tw-from-current tw-to-grey-900 group-hover/stops-button:tw-to-material-light-blend-grey-900", className) }));
 
@@ -17869,9 +17913,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, }) {
@@ -18830,7 +18873,7 @@ function ListItem(_a) {
     };
     return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", 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, { onClick: handleItemClick, 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, { onClick: handleItemClick, 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
@@ -18841,10 +18884,9 @@ function ListItem(_a) {
                         }, isActive: isDropdownOpen, className: "tw-z-20 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 = {
@@ -19260,6 +19302,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";
@@ -25201,7 +25244,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 = {};
@@ -26315,10 +26360,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 }));
@@ -26525,7 +26567,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) {
@@ -26605,14 +26647,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,
@@ -26629,7 +26675,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 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);
@@ -62031,7 +62077,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.";
@@ -62052,7 +62098,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";
@@ -62069,7 +62115,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({
@@ -62099,6 +62145,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

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

@@ -9,5 +9,6 @@ export interface StopsProps extends React.ComponentProps<"button"> {
 export declare function StopsButton({ stopsCount, estimatedTime, tooltip, providers, ...props }: StopsProps): import("react/jsx-runtime").JSX.Element;
 type Provider = {
     logoUrl: string;
+    key: string;
 };
 export {};

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/core/numbers.d.ts

@@ -13,11 +13,12 @@ export declare function convertTokenAmountToUSD(tokenAmount: string | number, to
  * @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 formatTokenAmount(amount: string, { exact }?: {
+    exact?: boolean | undefined;
+}): string;
+interface FormatUsdAmountOptions {
+    includeSign?: boolean;
+}
+export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign }?: FormatUsdAmountOptions): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
+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

@@ -6581,7 +6581,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
+function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
     if (!tokenAmount || !tokenPrice)
         return "";
     const amount = new BigNumber(tokenAmount);
@@ -6602,29 +6602,73 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
+const MAX_TOKEN_DECIMALS = 8;
+const TOKEN_EXACT_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+});
+const TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+    minimumSignificantDigits: 2,
+    maximumSignificantDigits: 4,
+});
+function formatTokenAmount(amount, { exact = true } = {}) {
+    const numericAmount = parseFloat(amount || "0");
+    if (numericAmount <= 0) {
+        return "0";
+    }
+    // Check if numericAmount is less than the smallest displayable amount
+    if (numericAmount < Math.pow(10, -MAX_TOKEN_DECIMALS)) {
+        return `<${Math.pow(10, -MAX_TOKEN_DECIMALS).toFixed(MAX_TOKEN_DECIMALS)}`;
+    }
+    return exact
+        ? TOKEN_EXACT_AMOUNT_INTL_FORMATTER.format(numericAmount)
+        : TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER.format(numericAmount);
+}
+// For values below 100,000, use exact integer precision
+// e.g 1,234.56, 98,765.43
+const STANDARD_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
     minimumFractionDigits: 2,
-    maximumFractionDigits: 5,
+    maximumFractionDigits: 2,
 });
-/**
- * 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);
+// For values above 100,000, use compact notation
+// e.g $12,34K, $98,765.43M
+const COMPACT_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    notation: "compact",
+    compactDisplay: "short",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+function formatUsdAmount(amount = "0", { includeSign = true } = {}) {
+    const parsedAmount = Number(amount);
+    if (parsedAmount < 0.01 && parsedAmount > 0) {
+        return includeSign ? "<$0.01" : "<0.01";
+    }
+    // Handle amounts less than 100,000 with exact integer precision
+    if (parsedAmount < 100000) {
+        return STANDARD_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
+    }
+    // Handle amounts 100,000 or more with compact notation
+    return COMPACT_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
 }
 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;
-        }
-    }
+    const [integerPart = "0", decimalPart] = value.split(".");
+    // Return just the integer part if maxDecimals is zero
+    if (maxDecimals === 0) {
+        return integerPart;
+    }
+    // Process decimals if present and maxDecimals is not zero
+    if (decimalPart &&
+        maxDecimals !== undefined &&
+        decimalPart.length > maxDecimals) {
+        return `${integerPart}.${decimalPart.slice(0, maxDecimals)}`;
+    }
+    // Return the original value if there are no excess decimals or maxDecimals is undefined
     return value;
 }
 
@@ -17733,7 +17777,7 @@ function Providers({ providers }) {
     return (jsxs("div", { className: "tw-relative tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1 tw-self-stretch tw-rounded-squid-m tw-p-squid-xs", children: [jsx(Vector, { className: "tw-absolute -tw-top-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-bl-full tw-rounded-br-full tw-bg-royal-500 tw-bg-gradient-to-t tw-text-grey-500" }), jsx("div", { className: "tw-flex tw-h-squid-m tw-w-[44px] tw-max-w-[44px] tw-items-center tw-justify-center", children: providersToDisplay.map((provider, index, self) => (jsx("img", { style: {
                         transform: `translate(${spacing[self.length][index]}px)`,
                         zIndex: self.length - 1 - index,
-                    }, src: provider.logoUrl, className: "tw-relative tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs tw-border-2 tw-border-grey-900 tw-bg-grey-900" }, provider.logoUrl))) }), jsx(Vector, { className: "tw-absolute -tw-bottom-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-tl-full tw-rounded-tr-full tw-bg-royal-500 tw-bg-gradient-to-b tw-text-grey-500" })] }));
+                    }, src: provider.logoUrl, className: "tw-relative tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs tw-border-2 tw-border-grey-900 tw-bg-grey-900" }, provider.key))) }), jsx(Vector, { className: "tw-absolute -tw-bottom-0 tw-left-1/2 -tw-translate-x-1/2 tw-rounded-tl-full tw-rounded-tr-full tw-bg-royal-500 tw-bg-gradient-to-b tw-text-grey-500" })] }));
 }
 const Vector = ({ className }) => (jsx("div", { className: cn("tw-h-2.5 tw-w-1 tw-from-current tw-to-grey-900 group-hover/stops-button:tw-to-material-light-blend-grey-900", className) }));
 
@@ -17849,9 +17893,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, }) {
@@ -18810,7 +18853,7 @@ function ListItem(_a) {
     };
     return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", 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, { onClick: handleItemClick, 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, { onClick: handleItemClick, 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
@@ -18821,10 +18864,9 @@ function ListItem(_a) {
                         }, isActive: isDropdownOpen, className: "tw-z-20 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 = {
@@ -19240,6 +19282,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";
@@ -25181,7 +25224,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 = {};
@@ -26295,10 +26340,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 }));
@@ -26505,7 +26547,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) {
@@ -26585,14 +26627,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,
@@ -26609,7 +26655,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);
@@ -62011,7 +62057,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.";
@@ -62032,7 +62078,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";
@@ -62049,7 +62095,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({
@@ -62079,6 +62125,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

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

@@ -9,5 +9,6 @@ export interface StopsProps extends React.ComponentProps<"button"> {
 export declare function StopsButton({ stopsCount, estimatedTime, tooltip, providers, ...props }: StopsProps): import("react/jsx-runtime").JSX.Element;
 type Provider = {
     logoUrl: string;
+    key: string;
 };
 export {};

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/core/numbers.d.ts

@@ -13,11 +13,12 @@ export declare function convertTokenAmountToUSD(tokenAmount: string | number, to
  * @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 formatTokenAmount(amount: string, { exact }?: {
+    exact?: boolean | undefined;
+}): string;
+interface FormatUsdAmountOptions {
+    includeSign?: boolean;
+}
+export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign }?: FormatUsdAmountOptions): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
+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

@@ -37,11 +37,11 @@ type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-type SwapStep = {
+interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,
@@ -1339,6 +1339,7 @@ interface StopsProps extends React.ComponentProps<"button"> {
 }
 type Provider = {
     logoUrl: string;
+    key: string;
 };
 
 interface DetailsToolbarProps {
@@ -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.3",
+  "version": "0.27.5",
   "author": "",
   "license": "MIT",
   "resolutions": {