@0xsquid/ui 0.15.1 → 0.15.3

package/dist/cjs/index.js

@@ -6878,23 +6878,15 @@ 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 })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }) {
+const SwapStepsCollapsed = React.forwardRef(({ steps, currentStepIndex: _newStepIndex, onOpen, onClose }, ref) => {
     const newStepIndex = Math.round(_newStepIndex);
-    const [currentStepIndex, setCurrentStepIndex] = React.useState(newStepIndex);
-    React.useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            setCurrentStepIndex(Math.round(newStepIndex));
-        }, ANIMATION_DURATIONS.CHANGE_SWAP_STEP);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [newStepIndex]);
+    React.useImperativeHandle(ref, () => ({
+        handleToggleRouteSteps,
+    }));
     // handles whether route component is mounted
     const [isRouteVisible, setIsRouteVisible] = React.useState(false);
     // handles whether route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = React.useState(false);
-    steps[currentStepIndex];
-    currentStepIndex === steps.length - 1;
     React.useEffect(() => {
         // we do not want to unmount the route component if the animation to show route is running
         if (isShowRouteAnimationRunning)
@@ -6907,8 +6899,16 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    const routeStepsListRef = React.useRef(null);
     const handleToggleRouteSteps = () => {
         if (isRouteVisible) {
+            if (routeStepsListRef.current) {
+                // reset scroll position of route steps list
+                routeStepsListRef.current.scrollTo({
+                    top: routeStepsListRef.current.scrollHeight,
+                    behavior: 'instant',
+                });
+            }
             setIsShowRouteAnimationRunning(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
@@ -6918,33 +6918,35 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     };
-    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsxRuntime.jsx("div", { style: {
-                        [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
-                        [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { style: {
-                        zIndex: 20,
-                        display: isRouteVisible ? 'none' : 'block',
-                    }, 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-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
-                            transition: isShowRouteAnimationRunning
-                                ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
-                                : isRouteVisible
-                                    ? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
-                                    : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
-                            transform: isShowRouteAnimationRunning
-                                ? 'translateY(0)'
-                                : `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
-                        }, children: [jsxRuntime.jsx("div", { className: cn('tw-absolute 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", { style: {
-                                    zIndex: isRouteVisible ? 0 : -10,
-                                    scrollbarWidth: 'none',
-                                }, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 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, 
-                                    // 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-absolute tw-bottom-0 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" }) })] }) })] }) }));
-}
+    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsxRuntime.jsx("div", { onClick: handleToggleRouteSteps, style: {
+                            [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
+                            [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
+                        }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-backdrop-blur/10  ', isShowRouteAnimationRunning
+                            ? 'tw-animate-fade-in'
+                            : 'tw-animate-fade-out') }), jsxRuntime.jsx("div", { style: {
+                            zIndex: 20,
+                            display: isRouteVisible ? 'none' : 'block',
+                        }, 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: {
+                                transition: isShowRouteAnimationRunning
+                                    ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
+                                    : isRouteVisible
+                                        ? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
+                                        : `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: {
+                                        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, 
+                                        // 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" }) })] }) })] }) }) }));
+});
 
 function TokenPair({ firstToken, secondToken }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxRuntime.jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsxRuntime.jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxRuntime.jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
@@ -42281,7 +42283,11 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             headerDescription,
         };
     }, [swapState, fromToken, toToken, toAmount, toChain]);
-    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
+    const trackTransactionViewRef = React.useRef(null);
+    const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
+    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
+        // close route steps modal when open and backdrop is clicked
+        !showSwapInfoSection ? handleCollapseRouteSteps : handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                 }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
@@ -42299,9 +42305,9 @@ 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, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), 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 }), !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 = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
+const TrackTransactionView = React.forwardRef(({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd }, ref) => {
     const { currentStepIndex, steps } = React.useMemo(() => {
         if (swapState === SwapState.COMPLETED) {
             onTxEnd();
@@ -42340,8 +42346,8 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
             currentStepIndex: 0,
         };
     }, [swapState, rawSteps]);
-    return rawSteps.length > 0 ? (jsxRuntime.jsx(SwapStepsCollapsed, { 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 })) : 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)] }));
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapStep } from '../../types/components';
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
@@ -5,5 +6,7 @@ interface SwapStepsCollapsedProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }: SwapStepsCollapsedProps): import("react/jsx-runtime").JSX.Element;
+export declare const SwapStepsCollapsed: import("react").ForwardRefExoticComponent<SwapStepsCollapsedProps & import("react").RefAttributes<{
+    handleToggleRouteSteps: () => void;
+}>>;
 export {};

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

@@ -27,13 +27,4 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
 }): import("react/jsx-runtime").JSX.Element;
-interface Props {
-    rawSteps: SwapStep[];
-    swapState?: SwapState;
-    onOpen?: () => void;
-    onClose?: () => void;
-    onTxStart: () => void;
-    onTxEnd: () => void;
-}
-export declare const TrackTransactionView: ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -4,6 +4,8 @@ declare const meta: Meta<typeof SwapProgressView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithControls: Story;
+export declare const ShortRoute: Story;
+export declare const LongRoute: Story;
 export declare const Completed: Story;
 export declare const Error: Story;
 export declare const Confirm: Story;

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

@@ -1,2 +1,2 @@
 export type { SquidTheme } from './config';
-export type { SwapState, ThemeType, SwapStep } from './components';
+export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, } from './components';

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 } from 'react';
+import { useMemo, useRef, useState, 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}
 
@@ -6858,23 +6858,15 @@ 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 })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }) {
+const SwapStepsCollapsed = forwardRef(({ steps, currentStepIndex: _newStepIndex, onOpen, onClose }, ref) => {
     const newStepIndex = Math.round(_newStepIndex);
-    const [currentStepIndex, setCurrentStepIndex] = useState(newStepIndex);
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            setCurrentStepIndex(Math.round(newStepIndex));
-        }, ANIMATION_DURATIONS.CHANGE_SWAP_STEP);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [newStepIndex]);
+    useImperativeHandle(ref, () => ({
+        handleToggleRouteSteps,
+    }));
     // handles whether route component is mounted
     const [isRouteVisible, setIsRouteVisible] = useState(false);
     // handles whether route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
-    steps[currentStepIndex];
-    currentStepIndex === steps.length - 1;
     useEffect(() => {
         // we do not want to unmount the route component if the animation to show route is running
         if (isShowRouteAnimationRunning)
@@ -6887,8 +6879,16 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    const routeStepsListRef = useRef(null);
     const handleToggleRouteSteps = () => {
         if (isRouteVisible) {
+            if (routeStepsListRef.current) {
+                // reset scroll position of route steps list
+                routeStepsListRef.current.scrollTo({
+                    top: routeStepsListRef.current.scrollHeight,
+                    behavior: 'instant',
+                });
+            }
             setIsShowRouteAnimationRunning(false);
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
@@ -6898,33 +6898,35 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     };
-    return (jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxs(Fragment, { children: [jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsx("div", { style: {
-                        [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
-                        [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { style: {
-                        zIndex: 20,
-                        display: isRouteVisible ? 'none' : 'block',
-                    }, 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-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
-                            transition: isShowRouteAnimationRunning
-                                ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
-                                : isRouteVisible
-                                    ? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
-                                    : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
-                            transform: isShowRouteAnimationRunning
-                                ? 'translateY(0)'
-                                : `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
-                        }, children: [jsx("div", { className: cn('tw-absolute 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", { style: {
-                                    zIndex: isRouteVisible ? 0 : -10,
-                                    scrollbarWidth: 'none',
-                                }, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 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, 
-                                    // 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-absolute tw-bottom-0 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" }) })] }) })] }) }));
-}
+    return (jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsx("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxs(Fragment, { children: [jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsx("div", { onClick: handleToggleRouteSteps, style: {
+                            [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
+                            [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
+                        }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-backdrop-blur/10  ', isShowRouteAnimationRunning
+                            ? 'tw-animate-fade-in'
+                            : 'tw-animate-fade-out') }), jsx("div", { style: {
+                            zIndex: 20,
+                            display: isRouteVisible ? 'none' : 'block',
+                        }, 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: {
+                                transition: isShowRouteAnimationRunning
+                                    ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
+                                    : isRouteVisible
+                                        ? `transform ${ANIMATION_DURATIONS.HIDE_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
+                                        : `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: {
+                                        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, 
+                                        // 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" }) })] }) })] }) }) }));
+});
 
 function TokenPair({ firstToken, secondToken }) {
     return (jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
@@ -42261,7 +42263,11 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             headerDescription,
         };
     }, [swapState, fromToken, toToken, toAmount, toChain]);
-    return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
+    const trackTransactionViewRef = useRef(null);
+    const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
+    return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
+        // close route steps modal when open and backdrop is clicked
+        !showSwapInfoSection ? handleCollapseRouteSteps : handleClose, children: [jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                 }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
@@ -42279,9 +42285,9 @@ 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, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), 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 }), !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 = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
+const TrackTransactionView = forwardRef(({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd }, ref) => {
     const { currentStepIndex, steps } = useMemo(() => {
         if (swapState === SwapState.COMPLETED) {
             onTxEnd();
@@ -42320,8 +42326,8 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
             currentStepIndex: 0,
         };
     }, [swapState, rawSteps]);
-    return rawSteps.length > 0 ? (jsx(SwapStepsCollapsed, { 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 })) : 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)] }));
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapStep } from '../../types/components';
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
@@ -5,5 +6,7 @@ interface SwapStepsCollapsedProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }: SwapStepsCollapsedProps): import("react/jsx-runtime").JSX.Element;
+export declare const SwapStepsCollapsed: import("react").ForwardRefExoticComponent<SwapStepsCollapsedProps & import("react").RefAttributes<{
+    handleToggleRouteSteps: () => void;
+}>>;
 export {};

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

@@ -27,13 +27,4 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
 }): import("react/jsx-runtime").JSX.Element;
-interface Props {
-    rawSteps: SwapStep[];
-    swapState?: SwapState;
-    onOpen?: () => void;
-    onClose?: () => void;
-    onTxStart: () => void;
-    onTxEnd: () => void;
-}
-export declare const TrackTransactionView: ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -4,6 +4,8 @@ declare const meta: Meta<typeof SwapProgressView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithControls: Story;
+export declare const ShortRoute: Story;
+export declare const LongRoute: Story;
 export declare const Completed: Story;
 export declare const Error: Story;
 export declare const Confirm: Story;

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

@@ -1,2 +1,2 @@
 export type { SquidTheme } from './config';
-export type { SwapState, ThemeType, SwapStep } from './components';
+export type { SwapState, ThemeType, SwapStep, SwapStepItemStatus, } from './components';

package/dist/index.css

@@ -741,10 +741,6 @@ video {
   top: 11px;
 }
 
-.tw-top-\[52px\] {
-  top: 52px;
-}
-
 .tw-top-squid-xxs {
   top: 0.3125rem;
 }
@@ -1351,6 +1347,10 @@ video {
   flex-shrink: 0;
 }
 
+.tw-grow-0 {
+  flex-grow: 0;
+}
+
 .-tw-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1438,6 +1438,34 @@ video {
   animation: tw-expand-route var(--squid-animation-expand-to-top-duration, 0s) linear both;
 }
 
+@keyframes tw-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.tw-animate-fade-in {
+  animation: tw-fade-in var(--squid-animation-fade-in-duration, 0s) ease-out both;
+}
+
+@keyframes tw-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.tw-animate-fade-out {
+  animation: tw-fade-out var(--squid-animation-fade-out-duration, 0s) ease-out both;
+}
+
 @keyframes tw-hide {
   0% {
     display: block;
@@ -1493,8 +1521,8 @@ video {
   }
 
   100% {
-    transform: scale(0.8);
-    opacity: 0;
+    transform: scale(0.9);
+    opacity: 0.5;
   }
 }
 
@@ -1504,8 +1532,8 @@ video {
 
 @keyframes tw-scale-and-fade-up {
   0% {
-    transform: scale(0.8);
-    opacity: 0;
+    transform: scale(0.9);
+    opacity: 0.5;
   }
 
   100% {
@@ -2224,6 +2252,10 @@ video {
   padding-right: 0.625rem;
 }
 
+.tw-pt-\[52px\] {
+  padding-top: 52px;
+}
+
 .tw-pt-\[5px\] {
   padding-top: 5px;
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import * as React$1 from 'react';
+import React__default from 'react';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -175,8 +176,8 @@ declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): re
 type TooltipWidth = 'max' | 'container';
 type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 interface TooltipProps {
-    children: React$1.ReactNode;
-    tooltipContent: React$1.ReactNode;
+    children: React__default.ReactNode;
+    tooltipContent: React__default.ReactNode;
     threshold?: TooltipThreshold;
     tooltipWidth?: TooltipWidth;
     containerClassName?: string;
@@ -367,13 +368,13 @@ interface InfoBoxProps {
 declare function InfoBox({ title, description, icon }: InfoBoxProps): react_jsx_runtime.JSX.Element;
 
 type Rounded = 'sm' | 'lg';
-interface MenuProps extends React$1.ComponentProps<'div'> {
+interface MenuProps extends React__default.ComponentProps<'div'> {
     containerClassName?: string;
     contentClassName?: string;
     title?: string;
     displayControls?: boolean;
     rounded?: Rounded;
-    menuRef?: React$1.RefObject<HTMLDivElement>;
+    menuRef?: React__default.RefObject<HTMLDivElement>;
 }
 declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, menuRef, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
@@ -464,7 +465,9 @@ interface SwapStepsCollapsedProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, onClose, }: SwapStepsCollapsedProps): react_jsx_runtime.JSX.Element;
+declare const SwapStepsCollapsed: React$1.ForwardRefExoticComponent<SwapStepsCollapsedProps & React$1.RefAttributes<{
+    handleToggleRouteSteps: () => void;
+}>>;
 
 interface TokenPairProps {
     firstToken: {
@@ -565,4 +568,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, 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, 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 };

package/package.json

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