@0xsquid/ui 0.13.9 → 0.13.11

package/dist/cjs/index.js

@@ -2831,6 +2831,12 @@ const themeTypesKeys = {
     'status-partial': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
     },
+    'grey-100-005': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
+    },
+    'material-light-blend-grey-900': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+    },
 };
 
 function PlusIcon() {
@@ -2882,6 +2888,7 @@ const ANIMATION_DURATIONS = {
     CHANGE_SWAP_STEP: 300,
     SHOW_MODAL: 400,
     HIDE_MODAL: 400,
+    BOOST_BUTTON: 500,
 };
 const ANIMATION_TIMINGS = {
     EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
@@ -3107,7 +3114,7 @@ const borderRadiusClassMap = {
 };
 function Menu(_a) {
     var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
 }
 
 const tooltipWidthClassMap = {
@@ -3133,28 +3140,13 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
                 'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
 }
 
-const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, }) {
-    const boostIndicatorRef = React.useRef(null);
-    function handleToggleBoostMode() {
-        if (!boostIndicatorRef.current || !canToggleBoostMode)
-            return;
-        // we don't want to trigger the animation when the component is mounted
-        // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, animationDuration);
-        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
-            boostIndicatorRef.current.dataset.boostMode = 'boost';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsxRuntime.jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
                                 boxShadow: generateMarkerLines(40),
-                            } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
-                        transitionDuration: animationDuration,
+                            } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
                     } })] }) }));
 }
 function generateMarkerLines(count) {
@@ -3188,9 +3180,25 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
-                    ? 'tw-bg-grey-300'
-                    : 'tw-bg-status-positive') })] }));
+    const boostIndicatorRef = React.useRef(null);
+    function handleToggleBoostMode() {
+        if (!boostIndicatorRef.current || !canToggleBoostMode)
+            return;
+        // we don't want to trigger the animation when the component is mounted
+        // so we set the animation duration only when user clicks the button
+        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsxRuntime.jsx("div", { className: "tw-bg-grey-900", children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+                        ? 'tw-bg-grey-300'
+                        : 'tw-bg-status-positive') })] }) }));
 }
 
 function EmojiSadIcon({ className }) {
@@ -3210,7 +3218,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
     const state = React.useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3221,7 +3229,8 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-group/arrow-button tw-border-transparent tw-bg-transparent", icon: jsxRuntime.jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsxRuntime.jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+                                    'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -38590,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" })] }));
@@ -38657,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.';
@@ -38683,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';
@@ -38697,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({
@@ -38729,6 +38741,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
             toAmount,
             toChain,
             toToken,
+            toAddressFormatted,
         });
         return {
             headerTitle,
@@ -38747,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,
@@ -38792,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,
@@ -38809,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
@@ -38875,6 +38884,7 @@ const themeKeysToReplace = [
  * @param style
  */
 const parseSquidTheme = (userTheme) => {
+    var _a;
     if (!userTheme)
         return undefined;
     const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
@@ -38914,7 +38924,11 @@ const parseSquidTheme = (userTheme) => {
     //   })
     // })
     parsed.push({
-        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    // color representing the blend of material-light and grey-900
+    parsed.push({
+        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
     });
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
@@ -38936,6 +38950,46 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .toString(16)
             .padStart(2, '0')).toUpperCase();
 }
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a ? a + a : '');
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: result[4] ? parseInt(result[4], 16) / 255 : 1,
+        }
+        : null;
+}
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+// Example usage:
+// let foregroundColor = '#FBFBFD1A'
+// let bgColor = '#17191C'
+// let resultingColor = blendColors(foregroundColor, bgColor)
+// console.log(resultingColor) // Output: ~#2f3033
+function blendColors(foreground, background) {
+    let fg = hexToRgb(foreground);
+    let bg = hexToRgb(background);
+    if (!fg || !bg)
+        return null;
+    let r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    let g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    let b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
 
 function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);

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

@@ -1,12 +1,11 @@
+/// <reference types="react" />
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/layout/DetailsToolbar.d.ts

@@ -7,6 +7,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -19,5 +21,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,6 +21,7 @@ export declare const ANIMATION_DURATIONS: {
     CHANGE_SWAP_STEP: number;
     SHOW_MODAL: number;
     HIDE_MODAL: number;
+    BOOST_BUTTON: number;
 };
 export declare const ANIMATION_TIMINGS: {
     EXPAND_ROUTE: string;

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

@@ -36,3 +36,4 @@ export declare function getContrastColor({ r, g, b, }: {
  * @returns {string} The hexadecimal color with opacity.
  */
 export declare function getHexColorFromOpacityPercentage(color: string, opacity: number): string;
+export declare function blendColors(foreground: string, background: string): string | null;

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

@@ -3,7 +3,8 @@ import { Boost } from '../../components/layout/Boost';
 declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Normal: Story;
 export declare const Boosted: Story;
-export declare const Disabled: Story;
+export declare const NormalDisabled: Story;
+export declare const BoostedDisabled: Story;
 export declare const DisabledWithDelayedTooltip: Story;

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

@@ -10,3 +10,4 @@ export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;
 export declare const BoostDisabledWithDelayedTooltip: Story;
+export declare const FlipButtonDisabled: Story;

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/cjs/types/types/config.d.ts

@@ -23,6 +23,8 @@ export interface InternalSquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
+    'grey-100-005': string;
+    'material-light-blend-grey-900': string;
 }
 export type SquidTheme = {
     'content-100': string;

package/dist/esm/index.js

@@ -2811,6 +2811,12 @@ const themeTypesKeys = {
     'status-partial': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
     },
+    'grey-100-005': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100-005`,
+    },
+    'material-light-blend-grey-900': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-blend-grey-900`,
+    },
 };
 
 function PlusIcon() {
@@ -2862,6 +2868,7 @@ const ANIMATION_DURATIONS = {
     CHANGE_SWAP_STEP: 300,
     SHOW_MODAL: 400,
     HIDE_MODAL: 400,
+    BOOST_BUTTON: 500,
 };
 const ANIMATION_TIMINGS = {
     EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
@@ -3087,7 +3094,7 @@ const borderRadiusClassMap = {
 };
 function Menu(_a) {
     var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg', menuRef } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded", "menuRef"]);
-    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), ref: menuRef, children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", { className: "tw-z-20 tw-max-w-full tw-text-caption", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
 }
 
 const tooltipWidthClassMap = {
@@ -3113,28 +3120,13 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
                 'tw-animate-hide peer-hover:tw-animate-display-delayed hover:tw-animate-display-delayed', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
 }
 
-const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, }) {
-    const boostIndicatorRef = useRef(null);
-    function handleToggleBoostMode() {
-        if (!boostIndicatorRef.current || !canToggleBoostMode)
-            return;
-        // we don't want to trigger the animation when the component is mounted
-        // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, animationDuration);
-        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
-            boostIndicatorRef.current.dataset.boostMode = 'boost';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+function BoostButton({ boostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', tooltipDisplayDelayMs = 0, boostIndicatorRef, }) {
+    return (jsx(Tooltip, { tooltipWidth: "max", displayDelayMs: tooltipDisplayDelayMs, tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-rounded-squid-m tw-pb-squid-xxs tw-text-grey-300 focus:tw-outline-none", children: [jsx("span", { className: cn('tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsx("span", { className: cn('tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent', canToggleBoostMode &&
+                        'group-hover/boost-toggle:tw-from-material-light-blend-grey-900') }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled/boost-toggle:tw-grayscale data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled/boost-toggle:tw-grayscale", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
                                 boxShadow: generateMarkerLines(40),
-                            } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
-                        transitionDuration: animationDuration,
+                            } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors group-disabled/boost-toggle:tw-grayscale peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`,
                     } })] }) }));
 }
 function generateMarkerLines(count) {
@@ -3168,9 +3160,25 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, boostTooltipDisplayDelayMs = 0, }) {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
-                    ? 'tw-bg-grey-300'
-                    : 'tw-bg-status-positive') })] }));
+    const boostIndicatorRef = useRef(null);
+    function handleToggleBoostMode() {
+        if (!boostIndicatorRef.current || !canToggleBoostMode)
+            return;
+        // we don't want to trigger the animation when the component is mounted
+        // so we set the animation duration only when user clicks the button
+        boostIndicatorRef.current.style.setProperty(CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION, `${ANIMATION_DURATIONS.BOOST_BUTTON}ms`);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsx("div", { className: "tw-bg-grey-900", children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: cn('tw-group/boost-toggle tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-rounded-squid-m tw-bg-grey-900 tw-pr-squid-xs', canToggleBoostMode && 'hover:tw-bg-material-light-thin'), children: [jsx(BoostButton, { boostIndicatorRef: boostIndicatorRef, boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, tooltipDisplayDelayMs: boostTooltipDisplayDelayMs }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' || !canToggleBoostMode
+                        ? 'tw-bg-grey-300'
+                        : 'tw-bg-status-positive') })] }) }));
 }
 
 function EmojiSadIcon({ className }) {
@@ -3190,7 +3198,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -3201,7 +3209,8 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-group/arrow-button tw-border-transparent tw-bg-transparent", icon: jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+                                    'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -38570,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" })] }));
@@ -38637,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.';
@@ -38663,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';
@@ -38677,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({
@@ -38709,6 +38721,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
             toAmount,
             toChain,
             toToken,
+            toAddressFormatted,
         });
         return {
             headerTitle,
@@ -38727,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,
@@ -38772,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,
@@ -38789,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
@@ -38855,6 +38864,7 @@ const themeKeysToReplace = [
  * @param style
  */
 const parseSquidTheme = (userTheme) => {
+    var _a;
     if (!userTheme)
         return undefined;
     const squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
@@ -38894,7 +38904,11 @@ const parseSquidTheme = (userTheme) => {
     //   })
     // })
     parsed.push({
-        [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+        [themeTypesKeys['grey-100-005'].cssVariable]: getHexColorFromOpacityPercentage(squidTheme['grey-100'], 0.05),
+    });
+    // color representing the blend of material-light and grey-900
+    parsed.push({
+        [themeTypesKeys['material-light-blend-grey-900'].cssVariable]: (_a = blendColors(squidTheme['material-light-thin'], squidTheme['grey-900'])) !== null && _a !== void 0 ? _a : '',
     });
     return parsed.reduce((a, v) => {
         const key = Object.keys(v)[0];
@@ -38916,6 +38930,46 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .toString(16)
             .padStart(2, '0')).toUpperCase();
 }
+function hexToRgb(hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a ? a + a : '');
+    });
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: result[4] ? parseInt(result[4], 16) / 255 : 1,
+        }
+        : null;
+}
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+// Example usage:
+// let foregroundColor = '#FBFBFD1A'
+// let bgColor = '#17191C'
+// let resultingColor = blendColors(foregroundColor, bgColor)
+// console.log(resultingColor) // Output: ~#2f3033
+function blendColors(foreground, background) {
+    let fg = hexToRgb(foreground);
+    let bg = hexToRgb(background);
+    if (!fg || !bg)
+        return null;
+    let r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    let g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    let b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
 
 function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light', }) {
     const parsedStyle = parseSquidTheme(theme);

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

@@ -1,12 +1,11 @@
+/// <reference types="react" />
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/layout/DetailsToolbar.d.ts

@@ -7,6 +7,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -19,5 +21,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,6 +21,7 @@ export declare const ANIMATION_DURATIONS: {
     CHANGE_SWAP_STEP: number;
     SHOW_MODAL: number;
     HIDE_MODAL: number;
+    BOOST_BUTTON: number;
 };
 export declare const ANIMATION_TIMINGS: {
     EXPAND_ROUTE: string;

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

@@ -36,3 +36,4 @@ export declare function getContrastColor({ r, g, b, }: {
  * @returns {string} The hexadecimal color with opacity.
  */
 export declare function getHexColorFromOpacityPercentage(color: string, opacity: number): string;
+export declare function blendColors(foreground: string, background: string): string | null;

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

@@ -3,7 +3,8 @@ import { Boost } from '../../components/layout/Boost';
 declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Normal: Story;
 export declare const Boosted: Story;
-export declare const Disabled: Story;
+export declare const NormalDisabled: Story;
+export declare const BoostedDisabled: Story;
 export declare const DisabledWithDelayedTooltip: Story;

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

@@ -10,3 +10,4 @@ export declare const Error: Story;
 export declare const ErrorHelpButton: Story;
 export declare const BoostDisabled: Story;
 export declare const BoostDisabledWithDelayedTooltip: Story;
+export declare const FlipButtonDisabled: Story;

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/esm/types/types/config.d.ts

@@ -23,6 +23,8 @@ export interface InternalSquidTheme {
     'material-dark-thin': string;
     'material-dark-average': string;
     'material-dark-thick': string;
+    'grey-100-005': string;
+    'material-light-blend-grey-900': string;
 }
 export type SquidTheme = {
     'content-100': string;

package/dist/index.css

@@ -960,6 +960,10 @@ video {
   height: 60px;
 }
 
+.tw-h-\[640px\] {
+  height: 640px;
+}
+
 .tw-h-\[660px\] {
   height: 660px;
 }
@@ -2200,10 +2204,6 @@ video {
   padding-right: 0.625rem;
 }
 
-.tw-pr-squid-xxs {
-  padding-right: 0.3125rem;
-}
-
 .tw-pt-\[5px\] {
   padding-top: 5px;
 }
@@ -2746,6 +2746,10 @@ input[type='number'] {
   outline-offset: 2px;
 }
 
+.disabled\:tw-cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
 .tw-group\/base-button:hover .group-hover\/base-button\:tw-block {
   display: block;
 }
@@ -2754,11 +2758,17 @@ input[type='number'] {
   display: none;
 }
 
-.tw-group\/arrow-button:hover .group-hover\/arrow-button\:tw-rotate-180 {
+.tw-group\/flip-button:hover .group-hover\/flip-button\:tw-rotate-180 {
   --tw-rotate: 180deg;
   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));
 }
 
+.tw-group\/boost-toggle:hover .group-hover\/boost-toggle\:tw-from-material-light-blend-grey-900 {
+  --tw-gradient-from: var(--squid-theme-material-light-blend-grey-900) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700 {
   --tw-gradient-from: var(--squid-theme-grey-700) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
@@ -2781,7 +2791,7 @@ input[type='number'] {
   opacity: 1;
 }
 
-.tw-group:disabled .group-disabled\:tw-grayscale {
+.tw-group\/boost-toggle:disabled .group-disabled\/boost-toggle\:tw-grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/dist/index.d.ts

@@ -79,13 +79,11 @@ type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
 interface BoostButtonProps {
     boostMode: BoostMode;
     canToggleBoostMode?: boolean;
-    onToggleBoostMode?: ({ boostMode }: {
-        boostMode: BoostMode;
-    }) => void;
     boostDisabledMessage?: string;
     tooltipDisplayDelayMs?: number;
+    boostIndicatorRef: React.RefObject<HTMLDivElement>;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, boostIndicatorRef, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -189,6 +187,8 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
+    isFlipButtonDisabled?: boolean;
+    flipButtonDisabledMessage?: string;
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -201,7 +201,7 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -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.9",
+  "version": "0.13.11",
   "author": "",
   "license": "MIT",
   "resolutions": {

package/dist/cjs/types/stories/buttons/BoostButton.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { BoostButton } from '../../components/buttons/BoostButton';
-declare const meta: Meta<typeof BoostButton>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const Boost: Story;
-export declare const Disabled: Story;
-export declare const DisabledWithDelayedTooltip: Story;

package/dist/esm/types/stories/buttons/BoostButton.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { BoostButton } from '../../components/buttons/BoostButton';
-declare const meta: Meta<typeof BoostButton>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const Boost: Story;
-export declare const Disabled: Story;
-export declare const DisabledWithDelayedTooltip: Story;