@0xsquid/ui 0.15.3 → 0.15.5

package/dist/cjs/index.js

@@ -2570,8 +2570,25 @@ const mainImageSizeClassMap = {
     sm: 'tw-w-8 tw-h-8',
     md: 'tw-w-10 tw-h-10',
 };
+const loadingSkeletonClassName = 'tw-bg-grey-500';
 function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
-    return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "", className: cn('tw-h-full tw-w-full', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs') }), badgeUrl ? (jsxRuntime.jsx("img", { src: badgeUrl, alt: "", className: cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]) })) : null] })) : null;
+    const [imagesLoadState, setImageLoadState] = React.useState({
+        badgeLoaded: false,
+        mainImageLoaded: false,
+    });
+    const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
+    const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
+    return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onLoad: () => {
+                    // update state when image is fully loaded
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
+                }, className: cn(mainImageClassName, 
+                // hide main image while it is loading, and display it when it is loaded
+                imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!imagesLoadState.badgeLoaded && (jsxRuntime.jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
+                            // update state when badge image is fully loaded
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
+                        }, className: cn(badgeImageClassName, 
+                        // hide badge image while it is loading, and display it when it is loaded
+                        imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
 function LoadingSkeleton({ className, height = '20', }) {
@@ -6631,8 +6648,9 @@ const listItemSizeMap = {
     small: 'tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-h-list-item-large tw-px-squid-xs',
 };
+const subtitleClassName = 'tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500';
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
     const isDetailInteractive = !!onDetailClick;
@@ -6652,7 +6670,7 @@ function ListItem(_a) {
     return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item 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 && '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, 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', 
                     // '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]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: 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
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [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
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : '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] })))] })) })));
 }
@@ -6697,6 +6715,7 @@ function SwapStepSeparator() {
     return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
 }
 
+const STEP_ITEM_HEIGHT = 52;
 const statusBgClassMap = {
     executed: '!tw-bg-grey-300',
     ongoing: '!tw-bg-grey-300',
@@ -6748,22 +6767,26 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
                 return 'tw-text-grey-300';
         }
     }, [status]);
-    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [jsxRuntime.jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
-                            if (type === 'string') {
-                                return (
-                                // Instead of displaying the string into a single <BodyText />
-                                // we split it into multiple <BodyText />
-                                // for edge case where the string is too long to fit in one line
-                                value
-                                    .trim()
-                                    .split(' ')
-                                    .map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
-                            }
-                            else if (type === 'image') {
-                                return (jsxRuntime.jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }, index));
-                            }
-                            return null;
-                        }) })] }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }));
+    return (jsxRuntime.jsx("li", { style: {
+            maxHeight: `${STEP_ITEM_HEIGHT}px`,
+            minHeight: `${STEP_ITEM_HEIGHT}px`,
+        }, className: "tw-relative tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxRuntime.jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsxRuntime.jsxs("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: [jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status], 'tw-absolute tw-left-0 tw-top-full tw-mt-0.5'), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs tw-pr-squid-xs", children: descriptionBlocks.map((block, index) => {
+                        const { type, value } = block;
+                        if (type === 'string') {
+                            return (
+                            // Instead of displaying the string into a single <BodyText />
+                            // we split it into multiple <BodyText />
+                            // for edge case where the string is too long to fit in one line
+                            value
+                                .trim()
+                                .split(' ')
+                                .map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
+                        }
+                        else if (type === 'image') {
+                            return (jsxRuntime.jsx("img", { src: value, className: cn('tw-h-squid-m tw-w-squid-m', block.rounded ? 'tw-rounded-full' : 'tw-rounded-squid-xxs') }, index));
+                        }
+                        return null;
+                    }) })] }) }));
 }
 
 const borderRadiusClassMap = {
@@ -6878,8 +6901,10 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-const SwapStepsCollapsed = React.forwardRef(({ steps, currentStepIndex: _newStepIndex, onOpen, onClose }, ref) => {
-    const newStepIndex = Math.round(_newStepIndex);
+const STEPS_LIST_HEIGHT = 400;
+const SwapStepsCollapsed = React.forwardRef((props, ref) => {
+    const { steps, currentStepIndex: _newStepIndex, onOpen, onClose, footerButton, } = props;
+    const newStepIndex = Math.round(_newStepIndex < 0 ? 0 : _newStepIndex);
     React.useImperativeHandle(ref, () => ({
         handleToggleRouteSteps,
     }));
@@ -6899,6 +6924,16 @@ const SwapStepsCollapsed = React.forwardRef(({ steps, currentStepIndex: _newStep
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    React.useEffect(() => {
+        var _a;
+        if (!isRouteVisible)
+            return;
+        // scroll in the steps list so the current step is visible at the middle
+        (_a = routeStepsListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: -((newStepIndex - 1) * STEP_ITEM_HEIGHT) + STEPS_LIST_HEIGHT / 2,
+            behavior: 'smooth',
+        });
+    }, [newStepIndex]);
     const routeStepsListRef = React.useRef(null);
     const handleToggleRouteSteps = () => {
         if (isRouteVisible) {
@@ -6929,9 +6964,13 @@ const SwapStepsCollapsed = React.forwardRef(({ steps, currentStepIndex: _newStep
                         }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
                             [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                             [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                        }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
-                            ? 'tw-animate-expand-route'
-                            : 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-max-h-[535px] tw-grow-0 tw-flex-col tw-gap-squid-xxs tw-pt-[52px]", style: {
+                        }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isRouteVisible &&
+                            (isShowRouteAnimationRunning
+                                ? 'tw-animate-expand-route'
+                                : 'tw-animate-collapse-route')), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-flex-col tw-gap-squid-xxs', isRouteVisible || isShowRouteAnimationRunning
+                                ? 'tw-max-h-[535px]'
+                                : ''), style: {
+                                paddingTop: `${STEP_ITEM_HEIGHT}px`,
                                 transition: isShowRouteAnimationRunning
                                     ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
                                     : isRouteVisible
@@ -6939,13 +6978,16 @@ const SwapStepsCollapsed = React.forwardRef(({ steps, currentStepIndex: _newStep
                                         : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
                                 transform: isShowRouteAnimationRunning
                                     ? 'translateY(0)'
-                                    : `translateY(calc(-100% + 85px + ${(newStepIndex + 1) * 50}px))`,
-                            }, children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { ref: routeStepsListRef, style: {
+                                    : `translateY(calc(-100% + 69px + ${(newStepIndex + 1) * STEP_ITEM_HEIGHT}px))`,
+                            }, children: [jsxRuntime.jsx("div", { style: {
+                                        display: isRouteVisible ? 'flex' : 'none',
+                                        height: `${STEP_ITEM_HEIGHT}px`,
+                                    }, className: cn('tw-absolute tw-top-0 tw-z-10 tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-800 tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { ref: routeStepsListRef, style: {
                                         zIndex: isRouteVisible ? 0 : -10,
                                         scrollbarWidth: 'none',
-                                    }, className: "tw-relative tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
+                                    }, className: "tw-relative tw-flex  tw-w-[400px] tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
                                         // 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-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }) }));
+                                        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, { 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" }) })] }) })] }) }) }));
 });
 
 function TokenPair({ firstToken, secondToken }) {
@@ -42247,7 +42289,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, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
     const isFirstRenderRef = React.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -42305,9 +42347,10 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 imageUrl: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromAmount })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toAmount })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), !showSwapInfoSection ? (jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
+                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromAmount })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toAmount })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Button, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
 }
-const TrackTransactionView = React.forwardRef(({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd }, ref) => {
+const TrackTransactionView = React.forwardRef((props, ref) => {
+    const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;
     const { currentStepIndex, steps } = React.useMemo(() => {
         if (swapState === SwapState.COMPLETED) {
             onTxEnd();
@@ -42341,12 +42384,19 @@ const TrackTransactionView = React.forwardRef(({ swapState, rawSteps, onOpen, on
                 currentStepIndex: rawSteps.length - 1,
             };
         }
+        if (swapState === SwapState.ERROR) {
+            const firstErrorStepIndex = rawSteps.findIndex((s) => s.status === 'error');
+            return {
+                steps: rawSteps,
+                currentStepIndex: firstErrorStepIndex,
+            };
+        }
         return {
             steps: rawSteps,
             currentStepIndex: 0,
         };
     }, [swapState, rawSteps]);
-    return rawSteps.length > 0 ? (jsxRuntime.jsx(SwapStepsCollapsed, { ref: ref, steps: steps, currentStepIndex: currentStepIndex, onClose: onClose, onOpen: onOpen })) : null;
+    return rawSteps.length > 0 ? (jsxRuntime.jsx(SwapStepsCollapsed, { ref: ref, steps: steps, currentStepIndex: currentStepIndex, onClose: onClose, onOpen: onOpen, footerButton: footerButton })) : null;
 });
 const SwapDetailItemValues = ({ fromContent, toContent, }) => {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [typeof fromContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: fromContent })) : (fromContent), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), typeof toContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: toContent })) : (toContent)] }));
@@ -42373,15 +42423,11 @@ const lightTheme = {
     'status-positive': '#11D421',
     'status-negative': '#FF5B4D',
     'status-warning': '#EC9213',
-    // transparent
-    'transparent-light-thin': '#17191C1A', // 10% opacity
-    'transparent-light-average': '#17191C54', // 33% opacity
-    'transparent-light-thick': '#17191CA8', // 66% opacity
-    'transparent-dark-thin': '#FBFBFD1A', // 10% opacity
-    'transparent-dark-average': '#FBFCFD54', // 33% opacity
-    'transparent-dark-thick': '#FBFCFDA8', // 66% opacity
 };
 
+// list of the theme variables that need to be replaced
+// from the user readable theme config
+// to the internal theme config
 const themeKeysToReplace = [
     {
         userKey: 'content',
@@ -42391,24 +42437,20 @@ const themeKeysToReplace = [
         userKey: 'accent',
         internalKey: 'royal',
     },
-    {
-        userKey: 'transparent',
-        internalKey: 'material',
-    },
     {
         userKey: 'status-warning',
         internalKey: 'status-partial',
     },
 ];
 /**
- * Parsing the user readable config to css variables
+ * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
+ * and adds the material-* variants
  * example user theme:
  * {
  *   'content-100': '#000',
  *   'content-200': '#000',
  *   'accent-400': '#000',
- *   'transparent-light-thin': '#000'
  * }
  * Resulting in:
  * {
@@ -42423,10 +42465,9 @@ const parseSquidTheme = (userTheme) => {
     var _a;
     if (!userTheme)
         return undefined;
-    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+    let squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
         // content-* -> grey-*
         // accent-* -> royal-*
-        // transparent-* -> material-*
         const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
         if (keyToReplace) {
             const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
@@ -42437,6 +42478,23 @@ const parseSquidTheme = (userTheme) => {
         }
         return internalKeys;
     }, {});
+    // add material-{light,dark}-{thin,average,thick} colors to the squid theme object
+    // using the following formula:
+    // material-light-thin -> grey-100 + 10% opacity
+    // material-light-average -> grey-100 + 33% opacity
+    // material-light-thick -> grey-100 + 66% opacity
+    // material-dark-thin -> grey-900 + 10% opacity
+    // material-dark-average -> grey-900 + 33% opacity
+    // material-dark-thick -> grey-900 + 66% opacity
+    const materialVariants = {
+        'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
+        'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
+        'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
+        'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
+        'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
+        'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
+    };
+    squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
     const styleKeys = Object.keys(themeTypesKeys);
     const parsed = styleKeys.map((sk) => {
         const themeItem = themeTypesKeys[sk];
@@ -42563,6 +42621,7 @@ exports.NavigationBar = NavigationBar;
 exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;
 exports.ProfileHeaderBackground = ProfileHeaderBackground;
+exports.STEP_ITEM_HEIGHT = STEP_ITEM_HEIGHT;
 exports.SectionTitle = SectionTitle;
 exports.SettingsButton = SettingsButton;
 exports.SettingsItem = SettingsItem;

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

@@ -1,10 +1,16 @@
 /// <reference types="react" />
 import { SwapStep } from '../../types/components';
+export type SwapStepsCollapsedFooterButton = {
+    label: string;
+    link?: string;
+    onClick?: () => void;
+};
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;
     onOpen?: () => void;
     onClose?: () => void;
+    footerButton?: SwapStepsCollapsedFooterButton;
 }
 export declare const SwapStepsCollapsed: import("react").ForwardRefExoticComponent<SwapStepsCollapsedProps & import("react").RefAttributes<{
     handleToggleRouteSteps: () => void;

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

@@ -4,6 +4,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     mainImageUrl?: string;
     secondaryImageUrl?: string;
     subtitle?: string;
+    subtitleOnHover?: React.ReactNode;
     detail?: string;
     icon?: React.ReactNode;
     size?: ListItemSize;
@@ -20,5 +21,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,5 +5,6 @@ interface SwapStepItemProps {
     link?: string;
     status?: SwapStepItemStatus;
 }
+export declare const STEP_ITEM_HEIGHT = 52;
 export declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,13 +1,13 @@
 import { SquidTheme } from '../../types/config';
 /**
- * Parsing the user readable config to css variables
+ * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
+ * and adds the material-* variants
  * example user theme:
  * {
  *   'content-100': '#000',
  *   'content-200': '#000',
  *   'accent-400': '#000',
- *   'transparent-light-thin': '#000'
  * }
  * Resulting in:
  * {

package/dist/cjs/types/stories/layout/SwapStepsCollapsed.stories.d.ts

@@ -10,3 +10,4 @@ export declare const ShortRoute: Story;
 export declare const LongRoute: Story;
 export declare const Error: Story;
 export declare const Warning: Story;
+export declare const LongDescriptionSteps: Story;

package/dist/cjs/types/stories/lists/ListItem.stories.d.ts

@@ -9,6 +9,8 @@ export declare const LargeWithLongTitle: Story;
 export declare const LargeWithLongTitleAndSubtitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
+export declare const SubtitleOnHover: Story;
+export declare const SubtitleOnHoverTokenBalance: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
 export declare const LargeWithDetailAndIconInteractive: Story;
@@ -16,7 +18,8 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
-export declare const LargeLoading: Story;
+export declare const SubtitleLoading: Story;
+export declare const ImageAndBadgeLoading: Story;
 export declare const Small: Story;
 export declare const SmallInteractive: Story;
 export declare const SmallWithLongTitle: Story;

package/dist/cjs/types/stories/lists/SwapStepItem.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Executed: Story;
 export declare const ExecutedWithSeparator: Story;
+export declare const ExecutedWithSeparatorAndLink: Story;
 export declare const Success: Story;
 export declare const SuccessWithSeparator: Story;
 export declare const Pending: Story;
@@ -18,6 +19,7 @@ export declare const ErrorWithSeparator: Story;
 export declare const Warning: Story;
 export declare const WarningWithSeparator: Story;
 export declare const CustomDescription: Story;
+export declare const CustomDescriptionWithRoundedImage: Story;
 export declare const CustomDescriptionWithSeparator: Story;
 export declare const Link: Story;
 export declare const LongDescription: Story;

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithControls: Story;
 export declare const ShortRoute: Story;
+export declare const LongDescriptionSteps: Story;
 export declare const LongRoute: Story;
 export declare const Completed: Story;
 export declare const Error: Story;

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

@@ -5,8 +5,12 @@ export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
 export type SwapStepDescriptionBlock = {
-    type: 'string' | 'image';
+    type: 'string';
     value: string;
+} | {
+    type: 'image';
+    value: string;
+    rounded?: boolean;
 };
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];

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

@@ -41,12 +41,6 @@ export type SquidTheme = {
     'status-positive': string;
     'status-negative': string;
     'status-warning': string;
-    'transparent-light-thin': string;
-    'transparent-light-average': string;
-    'transparent-light-thick': string;
-    'transparent-dark-thin': string;
-    'transparent-dark-average': string;
-    'transparent-dark-thick': string;
 };
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useMemo, useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { useState, useMemo, useRef, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2550,8 +2550,25 @@ const mainImageSizeClassMap = {
     sm: 'tw-w-8 tw-h-8',
     md: 'tw-w-10 tw-h-10',
 };
+const loadingSkeletonClassName = 'tw-bg-grey-500';
 function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
-    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [jsx("img", { src: imageUrl, alt: "", className: cn('tw-h-full tw-w-full', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs') }), badgeUrl ? (jsx("img", { src: badgeUrl, alt: "", className: cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]) })) : null] })) : null;
+    const [imagesLoadState, setImageLoadState] = useState({
+        badgeLoaded: false,
+        mainImageLoaded: false,
+    });
+    const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
+    const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
+    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsx("img", { src: imageUrl, alt: "", onLoad: () => {
+                    // update state when image is fully loaded
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
+                }, className: cn(mainImageClassName, 
+                // hide main image while it is loading, and display it when it is loaded
+                imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [!imagesLoadState.badgeLoaded && (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
+                            // update state when badge image is fully loaded
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
+                        }, className: cn(badgeImageClassName, 
+                        // hide badge image while it is loading, and display it when it is loaded
+                        imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
 function LoadingSkeleton({ className, height = '20', }) {
@@ -6611,8 +6628,9 @@ const listItemSizeMap = {
     small: 'tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-h-list-item-large tw-px-squid-xs',
 };
+const subtitleClassName = 'tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500';
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
     const isDetailInteractive = !!onDetailClick;
@@ -6632,7 +6650,7 @@ function ListItem(_a) {
     return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item 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 && '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, 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', 
                     // '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]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: 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
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [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
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : '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] })))] })) })));
 }
@@ -6677,6 +6695,7 @@ function SwapStepSeparator() {
     return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
 }
 
+const STEP_ITEM_HEIGHT = 52;
 const statusBgClassMap = {
     executed: '!tw-bg-grey-300',
     ongoing: '!tw-bg-grey-300',
@@ -6728,22 +6747,26 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
                 return 'tw-text-grey-300';
         }
     }, [status]);
-    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-text-grey-300 tw-transition-colors tw-duration-1000", children: [jsxs("a", { href: link, target: "_blank", style: transitionStyle, className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
-                            if (type === 'string') {
-                                return (
-                                // Instead of displaying the string into a single <BodyText />
-                                // we split it into multiple <BodyText />
-                                // for edge case where the string is too long to fit in one line
-                                value
-                                    .trim()
-                                    .split(' ')
-                                    .map((word, i) => (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
-                            }
-                            else if (type === 'image') {
-                                return (jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }, index));
-                            }
-                            return null;
-                        }) })] }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status]), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }));
+    return (jsx("li", { style: {
+            maxHeight: `${STEP_ITEM_HEIGHT}px`,
+            minHeight: `${STEP_ITEM_HEIGHT}px`,
+        }, className: "tw-relative tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs', !!link && 'hover:tw-bg-material-light-thin', statusTextClass), children: [jsxs("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: [jsx(Chip, { style: transitionStyle, className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], 'tw-absolute tw-left-0 tw-top-full tw-mt-0.5'), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs tw-pr-squid-xs", children: descriptionBlocks.map((block, index) => {
+                        const { type, value } = block;
+                        if (type === 'string') {
+                            return (
+                            // Instead of displaying the string into a single <BodyText />
+                            // we split it into multiple <BodyText />
+                            // for edge case where the string is too long to fit in one line
+                            value
+                                .trim()
+                                .split(' ')
+                                .map((word, i) => (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
+                        }
+                        else if (type === 'image') {
+                            return (jsx("img", { src: value, className: cn('tw-h-squid-m tw-w-squid-m', block.rounded ? 'tw-rounded-full' : 'tw-rounded-squid-xxs') }, index));
+                        }
+                        return null;
+                    }) })] }) }));
 }
 
 const borderRadiusClassMap = {
@@ -6858,8 +6881,10 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-const SwapStepsCollapsed = forwardRef(({ steps, currentStepIndex: _newStepIndex, onOpen, onClose }, ref) => {
-    const newStepIndex = Math.round(_newStepIndex);
+const STEPS_LIST_HEIGHT = 400;
+const SwapStepsCollapsed = forwardRef((props, ref) => {
+    const { steps, currentStepIndex: _newStepIndex, onOpen, onClose, footerButton, } = props;
+    const newStepIndex = Math.round(_newStepIndex < 0 ? 0 : _newStepIndex);
     useImperativeHandle(ref, () => ({
         handleToggleRouteSteps,
     }));
@@ -6879,6 +6904,16 @@ const SwapStepsCollapsed = forwardRef(({ steps, currentStepIndex: _newStepIndex,
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    useEffect(() => {
+        var _a;
+        if (!isRouteVisible)
+            return;
+        // scroll in the steps list so the current step is visible at the middle
+        (_a = routeStepsListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: -((newStepIndex - 1) * STEP_ITEM_HEIGHT) + STEPS_LIST_HEIGHT / 2,
+            behavior: 'smooth',
+        });
+    }, [newStepIndex]);
     const routeStepsListRef = useRef(null);
     const handleToggleRouteSteps = () => {
         if (isRouteVisible) {
@@ -6909,9 +6944,13 @@ const SwapStepsCollapsed = forwardRef(({ steps, currentStepIndex: _newStepIndex,
                         }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
                             [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                             [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                        }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
-                            ? 'tw-animate-expand-route'
-                            : 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-max-h-[535px] tw-grow-0 tw-flex-col tw-gap-squid-xxs tw-pt-[52px]", style: {
+                        }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isRouteVisible &&
+                            (isShowRouteAnimationRunning
+                                ? 'tw-animate-expand-route'
+                                : 'tw-animate-collapse-route')), children: jsxs("div", { className: cn('tw-flex tw-flex-col tw-gap-squid-xxs', isRouteVisible || isShowRouteAnimationRunning
+                                ? 'tw-max-h-[535px]'
+                                : ''), style: {
+                                paddingTop: `${STEP_ITEM_HEIGHT}px`,
                                 transition: isShowRouteAnimationRunning
                                     ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
                                     : isRouteVisible
@@ -6919,13 +6958,16 @@ const SwapStepsCollapsed = forwardRef(({ steps, currentStepIndex: _newStepIndex,
                                         : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
                                 transform: isShowRouteAnimationRunning
                                     ? 'translateY(0)'
-                                    : `translateY(calc(-100% + 85px + ${(newStepIndex + 1) * 50}px))`,
-                            }, children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { ref: routeStepsListRef, style: {
+                                    : `translateY(calc(-100% + 69px + ${(newStepIndex + 1) * STEP_ITEM_HEIGHT}px))`,
+                            }, children: [jsx("div", { style: {
+                                        display: isRouteVisible ? 'flex' : 'none',
+                                        height: `${STEP_ITEM_HEIGHT}px`,
+                                    }, className: cn('tw-absolute tw-top-0 tw-z-10 tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-800 tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { ref: routeStepsListRef, style: {
                                         zIndex: isRouteVisible ? 0 : -10,
                                         scrollbarWidth: 'none',
-                                    }, className: "tw-relative tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
+                                    }, className: "tw-relative tw-flex  tw-w-[400px] tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
                                         // 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-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }) }));
+                                        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, { 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" }) })] }) })] }) }) }));
 });
 
 function TokenPair({ firstToken, secondToken }) {
@@ -42227,7 +42269,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, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -42285,9 +42327,10 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 imageUrl: toToken.logoUrl,
-                            } })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(SwapDetailListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(SwapDetailItemValues, { fromContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsx(CaptionText, { children: fromAmount })] }), toContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsx(CaptionText, { children: toAmount })] }) }) }), jsx(SwapDetailListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsx(SwapDetailItemValues, { fromContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(SwapDetailListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsx(SwapDetailListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), !showSwapInfoSection ? (jsx(Button, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsx(Button, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsx(Button, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
+                            } })) }), jsx(SwapProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-py-squid-s", children: [jsx(SwapDetailListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(SwapDetailItemValues, { fromContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), jsx(CaptionText, { children: fromAmount })] }), toContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), jsx(CaptionText, { children: toAmount })] }) }) }), jsx(SwapDetailListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsx(SwapDetailItemValues, { fromContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), toContent: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(SwapDetailListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(SwapDetailItemValues, { fromContent: fromAddressFormatted, toContent: toAddressFormatted }) }), jsx(SwapDetailListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState, footerButton: footerButton }), !showSwapInfoSection ? (jsx(Button, { size: "lg", variant: "primary", label: "Cancel", onClick: handleCollapseRouteSteps, className: "tw-min-h-button" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-gap-squid-xxs", children: [jsx(Button, { size: "lg", variant: "secondary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }), jsx(Button, { size: "lg", variant: "primary", label: "Complete", onClick: handleComplete, className: "tw-min-h-button" })] })) : (jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[swapState], onClick: handleClose, className: "tw-min-h-button" }))] }));
 }
-const TrackTransactionView = forwardRef(({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd }, ref) => {
+const TrackTransactionView = forwardRef((props, ref) => {
+    const { swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, footerButton, } = props;
     const { currentStepIndex, steps } = useMemo(() => {
         if (swapState === SwapState.COMPLETED) {
             onTxEnd();
@@ -42321,12 +42364,19 @@ const TrackTransactionView = forwardRef(({ swapState, rawSteps, onOpen, onClose,
                 currentStepIndex: rawSteps.length - 1,
             };
         }
+        if (swapState === SwapState.ERROR) {
+            const firstErrorStepIndex = rawSteps.findIndex((s) => s.status === 'error');
+            return {
+                steps: rawSteps,
+                currentStepIndex: firstErrorStepIndex,
+            };
+        }
         return {
             steps: rawSteps,
             currentStepIndex: 0,
         };
     }, [swapState, rawSteps]);
-    return rawSteps.length > 0 ? (jsx(SwapStepsCollapsed, { ref: ref, steps: steps, currentStepIndex: currentStepIndex, onClose: onClose, onOpen: onOpen })) : null;
+    return rawSteps.length > 0 ? (jsx(SwapStepsCollapsed, { ref: ref, steps: steps, currentStepIndex: currentStepIndex, onClose: onClose, onOpen: onOpen, footerButton: footerButton })) : null;
 });
 const SwapDetailItemValues = ({ fromContent, toContent, }) => {
     return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [typeof fromContent === 'string' ? (jsx(CaptionText, { children: fromContent })) : (fromContent), jsx("span", { className: "tw-text-grey-500", children: jsx(ChevronLargeRightIcon, {}) }), typeof toContent === 'string' ? (jsx(CaptionText, { children: toContent })) : (toContent)] }));
@@ -42353,15 +42403,11 @@ const lightTheme = {
     'status-positive': '#11D421',
     'status-negative': '#FF5B4D',
     'status-warning': '#EC9213',
-    // transparent
-    'transparent-light-thin': '#17191C1A', // 10% opacity
-    'transparent-light-average': '#17191C54', // 33% opacity
-    'transparent-light-thick': '#17191CA8', // 66% opacity
-    'transparent-dark-thin': '#FBFBFD1A', // 10% opacity
-    'transparent-dark-average': '#FBFCFD54', // 33% opacity
-    'transparent-dark-thick': '#FBFCFDA8', // 66% opacity
 };
 
+// list of the theme variables that need to be replaced
+// from the user readable theme config
+// to the internal theme config
 const themeKeysToReplace = [
     {
         userKey: 'content',
@@ -42371,24 +42417,20 @@ const themeKeysToReplace = [
         userKey: 'accent',
         internalKey: 'royal',
     },
-    {
-        userKey: 'transparent',
-        internalKey: 'material',
-    },
     {
         userKey: 'status-warning',
         internalKey: 'status-partial',
     },
 ];
 /**
- * Parsing the user readable config to css variables
+ * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
+ * and adds the material-* variants
  * example user theme:
  * {
  *   'content-100': '#000',
  *   'content-200': '#000',
  *   'accent-400': '#000',
- *   'transparent-light-thin': '#000'
  * }
  * Resulting in:
  * {
@@ -42403,10 +42445,9 @@ const parseSquidTheme = (userTheme) => {
     var _a;
     if (!userTheme)
         return undefined;
-    const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
+    let squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
         // content-* -> grey-*
         // accent-* -> royal-*
-        // transparent-* -> material-*
         const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
         if (keyToReplace) {
             const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
@@ -42417,6 +42458,23 @@ const parseSquidTheme = (userTheme) => {
         }
         return internalKeys;
     }, {});
+    // add material-{light,dark}-{thin,average,thick} colors to the squid theme object
+    // using the following formula:
+    // material-light-thin -> grey-100 + 10% opacity
+    // material-light-average -> grey-100 + 33% opacity
+    // material-light-thick -> grey-100 + 66% opacity
+    // material-dark-thin -> grey-900 + 10% opacity
+    // material-dark-average -> grey-900 + 33% opacity
+    // material-dark-thick -> grey-900 + 66% opacity
+    const materialVariants = {
+        'material-light-thin': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.1),
+        'material-light-average': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.33),
+        'material-light-thick': getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.66),
+        'material-dark-thin': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.1),
+        'material-dark-average': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.33),
+        'material-dark-thick': getHexColorFromOpacityPercentage(squidTheme['grey-900'], 0.66),
+    };
+    squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
     const styleKeys = Object.keys(themeTypesKeys);
     const parsed = styleKeys.map((sk) => {
         const themeItem = themeTypesKeys[sk];
@@ -42512,4 +42570,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, STEP_ITEM_HEIGHT, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

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

@@ -1,10 +1,16 @@
 /// <reference types="react" />
 import { SwapStep } from '../../types/components';
+export type SwapStepsCollapsedFooterButton = {
+    label: string;
+    link?: string;
+    onClick?: () => void;
+};
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;
     onOpen?: () => void;
     onClose?: () => void;
+    footerButton?: SwapStepsCollapsedFooterButton;
 }
 export declare const SwapStepsCollapsed: import("react").ForwardRefExoticComponent<SwapStepsCollapsedProps & import("react").RefAttributes<{
     handleToggleRouteSteps: () => void;

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

@@ -4,6 +4,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     mainImageUrl?: string;
     secondaryImageUrl?: string;
     subtitle?: string;
+    subtitleOnHover?: React.ReactNode;
     detail?: string;
     icon?: React.ReactNode;
     size?: ListItemSize;
@@ -20,5 +21,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,5 +5,6 @@ interface SwapStepItemProps {
     link?: string;
     status?: SwapStepItemStatus;
 }
+export declare const STEP_ITEM_HEIGHT = 52;
 export declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,13 +1,13 @@
 import { SquidTheme } from '../../types/config';
 /**
- * Parsing the user readable config to css variables
+ * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
+ * and adds the material-* variants
  * example user theme:
  * {
  *   'content-100': '#000',
  *   'content-200': '#000',
  *   'accent-400': '#000',
- *   'transparent-light-thin': '#000'
  * }
  * Resulting in:
  * {

package/dist/esm/types/stories/layout/SwapStepsCollapsed.stories.d.ts

@@ -10,3 +10,4 @@ export declare const ShortRoute: Story;
 export declare const LongRoute: Story;
 export declare const Error: Story;
 export declare const Warning: Story;
+export declare const LongDescriptionSteps: Story;

package/dist/esm/types/stories/lists/ListItem.stories.d.ts

@@ -9,6 +9,8 @@ export declare const LargeWithLongTitle: Story;
 export declare const LargeWithLongTitleAndSubtitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
+export declare const SubtitleOnHover: Story;
+export declare const SubtitleOnHoverTokenBalance: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
 export declare const LargeWithDetailAndIconInteractive: Story;
@@ -16,7 +18,8 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
-export declare const LargeLoading: Story;
+export declare const SubtitleLoading: Story;
+export declare const ImageAndBadgeLoading: Story;
 export declare const Small: Story;
 export declare const SmallInteractive: Story;
 export declare const SmallWithLongTitle: Story;

package/dist/esm/types/stories/lists/SwapStepItem.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Executed: Story;
 export declare const ExecutedWithSeparator: Story;
+export declare const ExecutedWithSeparatorAndLink: Story;
 export declare const Success: Story;
 export declare const SuccessWithSeparator: Story;
 export declare const Pending: Story;
@@ -18,6 +19,7 @@ export declare const ErrorWithSeparator: Story;
 export declare const Warning: Story;
 export declare const WarningWithSeparator: Story;
 export declare const CustomDescription: Story;
+export declare const CustomDescriptionWithRoundedImage: Story;
 export declare const CustomDescriptionWithSeparator: Story;
 export declare const Link: Story;
 export declare const LongDescription: Story;

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithControls: Story;
 export declare const ShortRoute: Story;
+export declare const LongDescriptionSteps: Story;
 export declare const LongRoute: Story;
 export declare const Completed: Story;
 export declare const Error: Story;

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

@@ -5,8 +5,12 @@ export type ButtonSize = 'md' | 'lg';
 export type SwapDirection = 'from' | 'to';
 export type BoostMode = 'normal' | 'boost';
 export type SwapStepDescriptionBlock = {
-    type: 'string' | 'image';
+    type: 'string';
     value: string;
+} | {
+    type: 'image';
+    value: string;
+    rounded?: boolean;
 };
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];

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

@@ -41,12 +41,6 @@ export type SquidTheme = {
     'status-positive': string;
     'status-negative': string;
     'status-warning': string;
-    'transparent-light-thin': string;
-    'transparent-light-average': string;
-    'transparent-light-thick': string;
-    'transparent-dark-thin': string;
-    'transparent-dark-average': string;
-    'transparent-dark-thick': string;
 };
 export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**

package/dist/index.css

@@ -741,6 +741,10 @@ video {
   top: 11px;
 }
 
+.tw-top-full {
+  top: 100%;
+}
+
 .tw-top-squid-xxs {
   top: 0.3125rem;
 }
@@ -820,10 +824,22 @@ video {
   margin-right: 1px;
 }
 
+.tw-mt-0 {
+  margin-top: 0px;
+}
+
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
 
+.tw-block {
+  display: block;
+}
+
 .tw-flex {
   display: flex;
 }
@@ -1016,10 +1032,6 @@ video {
   max-height: 205px;
 }
 
-.tw-max-h-\[413px\] {
-  max-height: 413px;
-}
-
 .tw-max-h-\[535px\] {
   max-height: 535px;
 }
@@ -1028,6 +1040,10 @@ video {
   max-height: 540px;
 }
 
+.tw-max-h-\[55px\] {
+  max-height: 55px;
+}
+
 .tw-max-h-\[600px\] {
   max-height: 600px;
 }
@@ -1060,6 +1076,10 @@ video {
   min-height: 30px;
 }
 
+.tw-min-h-\[55px\] {
+  min-height: 55px;
+}
+
 .tw-min-h-button {
   min-height: 3.75rem;
 }
@@ -2029,10 +2049,6 @@ video {
   padding: 1.875rem;
 }
 
-.tw-p-squid-s {
-  padding: 0.9375rem;
-}
-
 .tw-p-squid-xs {
   padding: 0.625rem;
 }
@@ -2101,6 +2117,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.tw-px-squid-s {
+  padding-left: 0.9375rem;
+  padding-right: 0.9375rem;
+}
+
 .tw-px-squid-xs {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
@@ -2131,11 +2152,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.tw-py-\[15px\] {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
 .tw-py-squid-s {
   padding-top: 0.9375rem;
   padding-bottom: 0.9375rem;
@@ -2252,10 +2268,6 @@ video {
   padding-right: 0.625rem;
 }
 
-.tw-pt-\[52px\] {
-  padding-top: 52px;
-}
-
 .tw-pt-\[5px\] {
   padding-top: 5px;
 }
@@ -2814,6 +2826,10 @@ input[type='number'] {
   display: block;
 }
 
+.tw-group\/list-item:hover .group-hover\/list-item\:tw-block {
+  display: block;
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }

package/dist/index.d.ts

@@ -55,8 +55,12 @@ type ButtonSize = 'md' | 'lg';
 type SwapDirection = 'from' | 'to';
 type BoostMode = 'normal' | 'boost';
 type SwapStepDescriptionBlock = {
-    type: 'string' | 'image';
+    type: 'string';
     value: string;
+} | {
+    type: 'image';
+    value: string;
+    rounded?: boolean;
 };
 type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
@@ -254,6 +258,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     mainImageUrl?: string;
     secondaryImageUrl?: string;
     subtitle?: string;
+    subtitleOnHover?: React.ReactNode;
     detail?: string;
     icon?: React.ReactNode;
     size?: ListItemSize;
@@ -270,7 +275,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;
@@ -342,6 +347,7 @@ interface SwapStepItemProps {
     link?: string;
     status?: SwapStepItemStatus;
 }
+declare const STEP_ITEM_HEIGHT = 52;
 declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuProps {
@@ -459,11 +465,17 @@ interface SwapProgressViewHeaderProps {
 }
 declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
 
+type SwapStepsCollapsedFooterButton = {
+    label: string;
+    link?: string;
+    onClick?: () => void;
+};
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;
     onOpen?: () => void;
     onClose?: () => void;
+    footerButton?: SwapStepsCollapsedFooterButton;
 }
 declare const SwapStepsCollapsed: React$1.ForwardRefExoticComponent<SwapStepsCollapsedProps & React$1.RefAttributes<{
     handleToggleRouteSteps: () => void;
@@ -510,7 +522,7 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }: {
+declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
     steps: SwapStep[];
     handleClose?: () => void;
     handleComplete?: () => void;
@@ -527,6 +539,7 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
     toAddressFormatted: string;
     swapState: SwapState;
     estimatedTimeToComplete?: string;
+    footerButton?: SwapStepsCollapsedFooterButton;
 }): react_jsx_runtime.JSX.Element;
 
 type SquidTheme = {
@@ -544,12 +557,6 @@ type SquidTheme = {
     'status-positive': string;
     'status-negative': string;
     'status-warning': string;
-    'transparent-light-thin': string;
-    'transparent-light-average': string;
-    'transparent-light-thick': string;
-    'transparent-dark-thin': string;
-    'transparent-dark-average': string;
-    'transparent-dark-thick': string;
 };
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
@@ -568,4 +575,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, BorderedContainer, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, STEP_ITEM_HEIGHT, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressView, SwapProgressViewHeader, SwapState, type SwapStep, SwapStepItem, type SwapStepItemStatus, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, Switch, type ThemeType, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

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