@0xsquid/ui 0.13.10 → 0.13.11

package/dist/cjs/index.js

@@ -38599,12 +38599,15 @@ function XSocial({ className, size = '24', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
 }
 
-function CircleCheckIcon() {
+function SwapSuccessIcon() {
     return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", 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_52170" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
 }
-function EmojiSadFilledIcon() {
+function SwapErrorIcon() {
     return (jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-opacity": "0.33" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", 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_52502" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
 }
+function SwapWarningIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsxRuntime.jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", 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_588_15630" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_588_15630", children: jsxRuntime.jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
+}
 
 function WalletFilledIcon({ size = '24' }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M4 6.5V17C4 18.6569 5.34315 20 7 20H18C19.1046 20 20 19.1046 20 18V11C20 9.89543 19.1046 9 18 9H16M4 6.5C4 7.88071 5.11929 9 6.5 9H16M4 6.5C4 5.11929 5.11929 4 6.5 4H14.5882C15.3679 4 16 4.63207 16 5.41176V9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "square", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M15.5 15.375C15.9832 15.375 16.375 14.9832 16.375 14.5C16.375 14.0168 15.9832 13.625 15.5 13.625C15.0168 13.625 14.625 14.0168 14.625 14.5C14.625 14.9832 15.0168 15.375 15.5 15.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "0.75" })] }));
@@ -38666,12 +38669,12 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
         case SwapState.CONFIRMATION_REJECTED:
             return 'Swap rejected';
         case SwapState.PARTIAL_SUCCESS:
-            return 'Swap failed halfway';
+            return 'Swap failed to complete';
         case SwapState.NEEDS_GAS:
             return 'Needs gas on destination';
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return 'Authenticate the transaction in your wallet.';
@@ -38692,7 +38695,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, })
             return 'You declined the transaction in your wallet.';
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}`;
+            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return 'Add gas to the transaction via Axelarscan to complete the swap';
@@ -38706,10 +38709,10 @@ const swapProgressButtonTexts = {
     [SwapState.ERROR]: 'Ok, go back',
     [SwapState.CONFIRMATION_TOO_LONG]: 'Cancel',
     [SwapState.CONFIRMATION_REJECTED]: 'Ok, go back',
-    [SwapState.PARTIAL_SUCCESS]: 'Ok, done',
+    [SwapState.PARTIAL_SUCCESS]: 'Cancel',
     [SwapState.NEEDS_GAS]: 'Go to Axelarscan',
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, 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, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
     const isFirstRenderRef = React.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -38738,6 +38741,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
             toAmount,
             toChain,
             toToken,
+            toAddressFormatted,
         });
         return {
             headerTitle,
@@ -38756,18 +38760,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
                         : 'tw-animate-scale-and-fade-down'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
                             // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
                             boxShadow: '0 1px 0 currentColor',
-                        }, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(CircleCheckIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", icon: jsxRuntime.jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ||
-                            swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(EmojiSadFilledIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
+                        }, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsxRuntime.jsx(Loader, { size: "60" }) }) }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", icon: jsxRuntime.jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 imageUrl: fromToken.logoUrl,
                             }, 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: jsxRuntime.jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete }) })] })] }), jsxRuntime.jsx(TrackTransactionView, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), 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, { 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" }))] }));
 }
 const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
     const { currentStepIndex, steps } = React.useMemo(() => {
-        if (rawSteps.every((s) => s.status === SwapState.COMPLETED)) {
+        if (swapState === SwapState.COMPLETED) {
+            onTxEnd();
             return {
                 steps: rawSteps,
                 currentStepIndex: rawSteps.length - 1,
@@ -38801,13 +38805,6 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
                 currentStepIndex: rawSteps.length - 1,
             };
         }
-        else if (swapState === SwapState.COMPLETED) {
-            onTxEnd();
-            return {
-                steps: rawSteps,
-                currentStepIndex: rawSteps.length - 1,
-            };
-        }
         return {
             steps: rawSteps,
             currentStepIndex: 0,
@@ -38818,6 +38815,9 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
 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)] }));
 };
+const SwapErrorTopMenu = ({ supportLink, type, }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: type === 'error' ? jsxRuntime.jsx(SwapErrorIcon, {}) : jsxRuntime.jsx(SwapWarningIcon, {}) }), jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] }));
+};
 
 const lightTheme = {
     // content

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

@@ -1,2 +1,3 @@
-export declare function CircleCheckIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function EmojiSadFilledIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapSuccessIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapErrorIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapWarningIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -9,9 +9,10 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, 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, }: {
     steps: SwapStep[];
     handleClose?: () => void;
+    handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;
     supportLink?: string;

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

@@ -3,4 +3,12 @@ import { SwapProgressView } from '../../components/views/SwapProgressView';
 declare const meta: Meta<typeof SwapProgressView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const WithControls: Story;
+export declare const Completed: Story;
+export declare const Error: Story;
+export declare const Confirm: Story;
+export declare const ConfirmationRejected: Story;
+export declare const ConfirmationTooLong: Story;
+export declare const NeedsGas: Story;
+export declare const PartialSuccess: Story;
+export declare const Progress: Story;

package/dist/esm/index.js

@@ -38579,12 +38579,15 @@ function XSocial({ className, size = '24', }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
 }
 
-function CircleCheckIcon() {
+function SwapSuccessIcon() {
     return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM31.5479 20.2665C32.2474 19.4116 32.1214 18.1516 31.2665 17.4521C30.4116 16.7527 29.1515 16.8787 28.4521 17.7336L20.8515 27.0232L18.4142 24.5858C17.6332 23.8048 16.3668 23.8048 15.5858 24.5858C14.8047 25.3669 14.8047 26.6332 15.5858 27.4143L19.5858 31.4143C19.9853 31.8138 20.5353 32.0257 21.0996 31.9976C21.664 31.9694 22.1901 31.7039 22.5479 31.2665L31.5479 20.2665Z", className: "tw-text-status-positive", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52170)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52170", x: "-17", y: "-17", width: "82", 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_52170" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52170", result: "shape" })] }) })] }));
 }
-function EmojiSadFilledIcon() {
+function SwapErrorIcon() {
     return (jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24Z", className: "tw-text-grey-900", fill: "currentColor" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM31.0683 28.9289C27.163 25.0237 20.8314 25.0237 16.9261 28.9289C16.1451 29.71 16.1451 30.9763 16.9261 31.7574C17.7072 32.5384 18.9735 32.5384 19.7545 31.7574C22.0977 29.4142 25.8967 29.4142 28.2398 31.7574C29.0209 32.5384 30.2872 32.5384 31.0683 31.7574C31.8493 30.9763 31.8493 29.71 31.0683 28.9289ZM21 19C21 20.6569 19.8807 22 18.5 22C17.1193 22 16 20.6569 16 19C16 17.3431 17.1193 16 18.5 16C19.8807 16 21 17.3431 21 19ZM29.5 22C30.8807 22 32 20.6569 32 19C32 17.3431 30.8807 16 29.5 16C28.1193 16 27 17.3431 27 19C27 20.6569 28.1193 22 29.5 22Z", className: "tw-text-status-negative", fill: "currentColor" }), jsx("g", { filter: "url(#filter0_b_457_52502)", children: jsx("circle", { cx: "24", cy: "24", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-opacity": "0.33" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_52502", x: "-17", y: "-17", width: "82", 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_52502" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_52502", result: "shape" })] }) })] }));
 }
+function SwapWarningIcon() {
+    return (jsxs("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("g", { filter: "url(#filter0_b_588_15630)", children: jsx("circle", { cx: "21", cy: "21", r: "20.5", stroke: "currentColor", className: "tw-text-material-light-average" }) }), jsxs("g", { "clip-path": "url(#clip0_588_15630)", children: [jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "currentColor", className: "tw-text-grey-900" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M41 21C41 32.0457 32.0457 41 21 41C9.9543 41 1 32.0457 1 21C1 9.9543 9.9543 1 21 1C32.0457 1 41 9.9543 41 21ZM15.5 19C16.8807 19 18 17.6569 18 16C18 14.3431 16.8807 13 15.5 13C14.1193 13 13 14.3431 13 16C13 17.6569 14.1193 19 15.5 19ZM29 16C29 17.6569 27.8807 19 26.5 19C25.1193 19 24 17.6569 24 16C24 14.3431 25.1193 13 26.5 13C27.8807 13 29 14.3431 29 16ZM15 27C13.8954 27 13 27.8954 13 29C13 30.1046 13.8954 31 15 31H27C28.1046 31 29 30.1046 29 29C29 27.8954 28.1046 27 27 27H15Z", fill: "currentColor", className: "tw-text-status-partial" })] }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_b_588_15630", x: "-20", y: "-20", width: "82", 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_588_15630" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_588_15630", result: "shape" })] }), jsx("clipPath", { id: "clip0_588_15630", children: jsx("path", { d: "M1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21Z", fill: "white" }) })] })] }));
+}
 
 function WalletFilledIcon({ size = '24' }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M4 6.5V17C4 18.6569 5.34315 20 7 20H18C19.1046 20 20 19.1046 20 18V11C20 9.89543 19.1046 9 18 9H16M4 6.5C4 7.88071 5.11929 9 6.5 9H16M4 6.5C4 5.11929 5.11929 4 6.5 4H14.5882C15.3679 4 16 4.63207 16 5.41176V9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "square", "stroke-linejoin": "round" }), jsx("path", { d: "M15.5 15.375C15.9832 15.375 16.375 14.9832 16.375 14.5C16.375 14.0168 15.9832 13.625 15.5 13.625C15.0168 13.625 14.625 14.0168 14.625 14.5C14.625 14.9832 15.0168 15.375 15.5 15.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "0.75" })] }));
@@ -38646,12 +38649,12 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
         case SwapState.CONFIRMATION_REJECTED:
             return 'Swap rejected';
         case SwapState.PARTIAL_SUCCESS:
-            return 'Swap failed halfway';
+            return 'Swap failed to complete';
         case SwapState.NEEDS_GAS:
             return 'Needs gas on destination';
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return 'Authenticate the transaction in your wallet.';
@@ -38672,7 +38675,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, })
             return 'You declined the transaction in your wallet.';
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}`;
+            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return 'Add gas to the transaction via Axelarscan to complete the swap';
@@ -38686,10 +38689,10 @@ const swapProgressButtonTexts = {
     [SwapState.ERROR]: 'Ok, go back',
     [SwapState.CONFIRMATION_TOO_LONG]: 'Cancel',
     [SwapState.CONFIRMATION_REJECTED]: 'Ok, go back',
-    [SwapState.PARTIAL_SUCCESS]: 'Ok, done',
+    [SwapState.PARTIAL_SUCCESS]: 'Cancel',
     [SwapState.NEEDS_GAS]: 'Go to Axelarscan',
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, 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, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -38718,6 +38721,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
             toAmount,
             toChain,
             toToken,
+            toAddressFormatted,
         });
         return {
             headerTitle,
@@ -38736,18 +38740,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
                         : 'tw-animate-scale-and-fade-down'), children: [jsx("div", { className: "tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-royal-500 tw-text-material-light-thin", style: {
                             // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
                             boxShadow: '0 1px 0 currentColor',
-                        }, children: jsx("div", { children: jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsx(Loader, { size: "60" }) }) }) }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(CircleCheckIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", icon: jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ||
-                            swapState === SwapState.PARTIAL_SUCCESS ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(EmojiSadFilledIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] })) : (jsx(TokenPair, { firstToken: {
+                        }, children: jsx("div", { children: jsx(AnimationWrapper, { lottieJsonFile: swapProgressAnimations[swapState], hideAnimations: false, animReplacement: jsx(Loader, { size: "60" }) }) }) }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(SwapSuccessIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", icon: jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 imageUrl: fromToken.logoUrl,
                             }, 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: jsx(SwapDetailItemValues, { fromContent: timer, toContent: estimatedTimeToComplete }) })] })] }), jsx(TrackTransactionView, { onTxEnd: () => stopTimer(), onTxStart: () => startTimer(), rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, swapState: swapState }), 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, { 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" }))] }));
 }
 const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
     const { currentStepIndex, steps } = useMemo(() => {
-        if (rawSteps.every((s) => s.status === SwapState.COMPLETED)) {
+        if (swapState === SwapState.COMPLETED) {
+            onTxEnd();
             return {
                 steps: rawSteps,
                 currentStepIndex: rawSteps.length - 1,
@@ -38781,13 +38785,6 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
                 currentStepIndex: rawSteps.length - 1,
             };
         }
-        else if (swapState === SwapState.COMPLETED) {
-            onTxEnd();
-            return {
-                steps: rawSteps,
-                currentStepIndex: rawSteps.length - 1,
-            };
-        }
         return {
             steps: rawSteps,
             currentStepIndex: 0,
@@ -38798,6 +38795,9 @@ const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart,
 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)] }));
 };
+const SwapErrorTopMenu = ({ supportLink, type, }) => {
+    return (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: type === 'error' ? jsx(SwapErrorIcon, {}) : jsx(SwapWarningIcon, {}) }), jsx(Button, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] }));
+};
 
 const lightTheme = {
     // content

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

@@ -1,2 +1,3 @@
-export declare function CircleCheckIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function EmojiSadFilledIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapSuccessIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapErrorIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapWarningIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -9,9 +9,10 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, 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, }: {
     steps: SwapStep[];
     handleClose?: () => void;
+    handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;
     supportLink?: string;

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

@@ -3,4 +3,12 @@ import { SwapProgressView } from '../../components/views/SwapProgressView';
 declare const meta: Meta<typeof SwapProgressView>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const WithControls: Story;
+export declare const Completed: Story;
+export declare const Error: Story;
+export declare const Confirm: Story;
+export declare const ConfirmationRejected: Story;
+export declare const ConfirmationTooLong: Story;
+export declare const NeedsGas: Story;
+export declare const PartialSuccess: Story;
+export declare const Progress: Story;

package/dist/index.css

@@ -960,6 +960,10 @@ video {
   height: 60px;
 }
 
+.tw-h-\[640px\] {
+  height: 640px;
+}
+
 .tw-h-\[660px\] {
   height: 660px;
 }

package/dist/index.d.ts

@@ -491,9 +491,10 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-declare function SwapProgressView({ steps, isOpen, handleClose, 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, }: {
     steps: SwapStep[];
     handleClose?: () => void;
+    handleComplete?: () => void;
     isOpen?: boolean;
     socialLink?: string;
     supportLink?: string;

package/package.json

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