@0xsquid/ui 0.13.6 → 0.13.7

package/dist/cjs/index.js

@@ -2569,6 +2569,16 @@ function debounce(func, delay) {
     };
     return debounced;
 }
+const formatTime = (elapsedTime) => {
+    const totalSeconds = Math.floor(elapsedTime / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    // Show only seconds if total time is less than 1 minute
+    if (minutes === 0) {
+        return `${totalSeconds}s`;
+    }
+    // Show only minutes if total time is 1 minute or more
+    return `${minutes}m`;
+};
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2682,7 +2692,6 @@ const roundedClassMap = {
     md: 'tw-rounded-squid-m',
     lg: 'tw-rounded-squid-xxl',
 };
-const buttonBorderClassName = 'tw-border-material-light-thin hover:tw-border-material-light-average';
 const buttonVariantClassMap = {
     primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100',
     secondary: 'tw-bg-grey-100 tw-text-grey-800',
@@ -2700,7 +2709,7 @@ function Button(_a) {
                 icon) : (
                 // icon and label
                 jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], buttonBorderClassName, roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
     disabled && buttonDisabledClass, 
     // custom classes from props
@@ -2740,15 +2749,15 @@ function ChevronRightSmallIcon() {
 function ArrowLeftIcon({ 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: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
-function ArrowRightUpCircleIcon() {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 15L14.5 9.5M15 14V9H10M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
-}
 function ChevronGrabberVerticalIcon({ size = '16', className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
 function SquareArrowTopRight2Icon({ className, size = '16', }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M6.00033 2.66663H4.80033C4.05359 2.66663 3.68022 2.66663 3.395 2.81195C3.14412 2.93978 2.94015 3.14376 2.81232 3.39464C2.66699 3.67985 2.66699 4.05322 2.66699 4.79996L2.66699 11.2C2.66699 11.9467 2.66699 12.3201 2.81232 12.6053C2.94015 12.8562 3.14412 13.0601 3.395 13.188C3.68022 13.3333 4.05359 13.3333 4.80033 13.3333L11.2003 13.3333C11.9471 13.3333 12.3204 13.3333 12.6056 13.188C12.8565 13.0601 13.0605 12.8562 13.1883 12.6053C13.3337 12.3201 13.3337 11.9467 13.3337 11.2V9.99996M9.33366 2.66663L13.3337 2.66663M13.3337 2.66663V6.66663M13.3337 2.66663L7.33366 8.66663", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
+function ArrowsSwapIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsxs("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: "M14 4L20 9.99998H4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M10 20L4 14H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+}
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
@@ -2860,16 +2869,26 @@ const CSS_VARS = {
     SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
     SCALE_AND_FADE_DOWN_DURATION: '--squid-animation-scale-and-fade-down-duration',
     TRANSLATE_TOP_OR_BOTTOM: '--squid-animation-translate-top-or-bottom',
+    SHOW_MODAL_DURATION: '--squid-animation-show-modal-duration',
+    HIDE_MODAL_DURATION: '--squid-animation-hide-modal-duration',
+    SLIDE_TO_TOP_DURATION: '--squid-animation-slide-to-top-duration',
+    SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
+    BLUR_IN_DURATION: '--squid-animation-blur-in-duration',
+    BLUR_OUT_DURATION: '--squid-animation-blur-out-duration',
 };
 const ANIMATION_DURATIONS = {
     SHOW_ROUTE: 300,
     HIDE_ROUTE: 300,
     CHANGE_SWAP_STEP: 300,
+    SHOW_MODAL: 400,
+    HIDE_MODAL: 400,
 };
 const ANIMATION_TIMINGS = {
     EXPAND_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
     COLLAPSE_ROUTE: 'linear', //'cubic-bezier(.32, .72, 0, 1)',
     CHANGE_SWAP_STEP: 'linear', //'cubic-bezier(.4,0,.2,1)',
+    SHOW_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
+    HIDE_ROUTE: 'cubic-bezier(.165,.84,.44,1)',
 };
 
 function SearchIcon() {
@@ -3446,7 +3465,7 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                                     .map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
                             }
                             else if (type === 'image') {
-                                return (jsxRuntime.jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }, index));
+                                return (jsxRuntime.jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }, index));
                             }
                             return null;
                         }) })] })] }));
@@ -3467,7 +3486,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             return setIsOpen(true);
         const timeoutId = setTimeout(() => {
             setIsOpen(false);
-        }, 300);
+        }, ANIMATION_DURATIONS.HIDE_MODAL);
         return () => {
             clearTimeout(timeoutId);
         };
@@ -3480,7 +3499,13 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
                     onBackdropClick();
                 }
             }
-            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
+            : undefined, style: {
+            [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
+            [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
+        }, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { style: {
+                [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
+                [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
+            }, className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
 const borderTypeClassMap = {
@@ -38507,14 +38532,6 @@ const transactionRejectedAnimation = TransactionRejectedAnimation;
 const useTimer = ({ immediateStart = true, }) => {
     const [timer, setTimer] = React.useState('0s');
     const intervalRef = React.useRef(null);
-    const formatTime = (elapsedTime) => {
-        const totalSeconds = Math.floor(elapsedTime / 1000);
-        const minutes = Math.floor(totalSeconds / 60);
-        const seconds = totalSeconds % 60;
-        const formattedMinutes = minutes > 0 ? `${minutes}m` : '';
-        const formattedSeconds = seconds > 0 ? `${seconds}s` : '';
-        return `${formattedMinutes}${formattedSeconds}`.trim();
-    };
     const startTimer = () => {
         if (intervalRef.current !== null)
             return; // Prevent multiple intervals
@@ -38541,26 +38558,34 @@ const useTimer = ({ immediateStart = true, }) => {
     return { timer, stopTimer, startTimer };
 };
 
-var TransactionStatus;
-(function (TransactionStatus) {
-    // Submitted transaction, returned by squid axelar
-    TransactionStatus["SUCCESS"] = "success";
-    TransactionStatus["NEEDS_GAS"] = "needs_gas";
-    TransactionStatus["ONGOING"] = "ongoing";
-    TransactionStatus["PARTIAL_SUCCESS"] = "partial_success";
-    TransactionStatus["NOT_FOUND"] = "not_found";
-    // Unsubmitted Transaction, can be status from wallet
-    TransactionStatus["INITIAL_LOADING"] = "initialLoading";
-    TransactionStatus["ERROR"] = "error";
-    TransactionStatus["WARNING"] = "warning";
-    TransactionStatus["PENDING"] = "pending";
-    TransactionStatus["REJECTED"] = "rejected";
-})(TransactionStatus || (TransactionStatus = {}));
+var SwapState;
+(function (SwapState) {
+    // user needs to sign the transaction in their wallet
+    SwapState[SwapState["CONFIRM"] = 0] = "CONFIRM";
+    // transaction is ongoing
+    SwapState[SwapState["PROGRESS"] = 1] = "PROGRESS";
+    // transaction is successful
+    SwapState[SwapState["COMPLETED"] = 2] = "COMPLETED";
+    // transaction failed
+    SwapState[SwapState["ERROR"] = 3] = "ERROR";
+    // transaction failed halfway and user received fallback tokens
+    SwapState[SwapState["PARTIAL_SUCCESS"] = 4] = "PARTIAL_SUCCESS";
+    // user hasn't signed the transaction in their wallet after some time
+    SwapState[SwapState["CONFIRMATION_TOO_LONG"] = 5] = "CONFIRMATION_TOO_LONG";
+    // user rejected the transaction in their wallet
+    SwapState[SwapState["CONFIRMATION_REJECTED"] = 6] = "CONFIRMATION_REJECTED";
+    // user needs to add gas to the transaction to complete its execution
+    SwapState[SwapState["NEEDS_GAS"] = 7] = "NEEDS_GAS";
+})(SwapState || (SwapState = {}));
 
 function ChainLink({ size = '16', strokeWidth = '2', }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M6.66667 3.66667L7.16763 3.17225C8.73063 1.60925 11.2648 1.60925 12.8278 3.17225C14.3907 4.73525 14.3907 7.26937 12.8278 8.83237L12.3333 9.33333M3.66667 6.66667L3.17225 7.16763C1.60925 8.73063 1.60925 11.2648 3.17225 12.8278C4.73525 14.3907 7.26937 14.3907 8.83237 12.8278L9.33333 12.3333M6.66667 9.33333L9.33333 6.66667", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
+function TimeFliesIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsx("circle", { cx: "15", cy: "12", r: "7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M2 12H4M3 16H5M3 8H5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), jsxRuntime.jsx("path", { d: "M15 9V12L16.5 13.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+}
+
 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" }) }));
 }
@@ -38608,68 +38633,79 @@ const AnimationWrapper = ({ lottieJsonFile, animReplacement, hideAnimations = fa
 };
 
 const swapProgressAnimations = {
-    confirm: transactionPendingAnimation,
-    error: transactionErrorPauseAnimation,
-    partialSuccess: transactionHalfSuccessAnimation,
-    progress: transactionProcessinganimation,
-    completed: transactionSuccessAnimation,
-    confirmationTooLong: transactionPendingAnimation,
-    confirmationRejected: transactionRejectedAnimation,
-    needsGas: transactionErrorPauseAnimation,
+    [SwapState.CONFIRM]: transactionPendingAnimation,
+    [SwapState.ERROR]: transactionErrorPauseAnimation,
+    [SwapState.PARTIAL_SUCCESS]: transactionHalfSuccessAnimation,
+    [SwapState.PROGRESS]: transactionProcessinganimation,
+    [SwapState.COMPLETED]: transactionSuccessAnimation,
+    [SwapState.CONFIRMATION_TOO_LONG]: transactionPendingAnimation,
+    [SwapState.CONFIRMATION_REJECTED]: transactionRejectedAnimation,
+    [SwapState.NEEDS_GAS]: transactionErrorPauseAnimation,
 };
-const swapProgressTitles = {
-    confirm: 'Confirm swap',
-    progress: 'Swapping tokens',
-    completed: 'Swap complete',
-    error: 'Swap failed',
-    confirmationTooLong: 'Confirmation taking too long',
-    confirmationRejected: 'Swap rejected',
-    partialSuccess: 'Swap failed halfway',
-    // means that the user needs to add gas to the transaction in the destination chain
-    // in order to complete the swap
-    needsGas: 'Needs gas on destination',
+const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
+    switch (swapState) {
+        case SwapState.CONFIRM:
+            return 'Confirm swap';
+        case SwapState.PROGRESS:
+            return `Swap ${fromToken.symbol} to ${toToken.symbol}`;
+        case SwapState.COMPLETED:
+            return 'Swap complete';
+        case SwapState.ERROR:
+            return 'Swap failed';
+        case SwapState.CONFIRMATION_TOO_LONG:
+            return 'Confirmation taking too long';
+        case SwapState.CONFIRMATION_REJECTED:
+            return 'Swap rejected';
+        case SwapState.PARTIAL_SUCCESS:
+            return 'Swap failed halfway';
+        case SwapState.NEEDS_GAS:
+            return 'Needs gas on destination';
+    }
 };
-const getSwapProgressDescriptions = ({ state, toAmount, toChain, toToken, }) => {
-    switch (state) {
-        case 'confirm': {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, }) => {
+    switch (swapState) {
+        case SwapState.CONFIRM: {
             return 'Authenticate the transaction in your wallet.';
         }
-        case 'progress': {
+        case SwapState.PROGRESS: {
             return 'Feel free to dismiss this dialog, we’ll notify you when the swap is complete.';
         }
-        case 'completed': {
+        case SwapState.COMPLETED: {
             return `You received ${toAmount} ${toToken === null || toToken === void 0 ? void 0 : toToken.symbol} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}`;
         }
-        case 'error': {
+        case SwapState.ERROR: {
             return 'Your tokens were safely returned to your wallet.';
         }
-        case 'confirmationTooLong': {
+        case SwapState.CONFIRMATION_TOO_LONG: {
             return 'Please go back and get a new quote.';
         }
-        case 'confirmationRejected': {
+        case SwapState.CONFIRMATION_REJECTED: {
             return 'You declined the transaction in your wallet.';
         }
-        case 'partialSuccess': {
+        case SwapState.PARTIAL_SUCCESS: {
             return `You received a refund of axlUSDC on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}`;
         }
-        case 'needsGas': {
+        case SwapState.NEEDS_GAS: {
             return 'Add gas to the transaction via Axelarscan to complete the swap';
         }
     }
 };
 const swapProgressButtonTexts = {
-    confirm: 'Cancel',
-    progress: 'Ok, done',
-    completed: 'Ok, done',
-    error: 'Ok, go back',
-    confirmationTooLong: 'Cancel',
-    confirmationRejected: 'Ok, go back',
-    partialSuccess: 'Ok, done',
-    needsGas: 'Go to Axelarscan',
+    [SwapState.CONFIRM]: 'Cancel',
+    [SwapState.PROGRESS]: 'Ok, done',
+    [SwapState.COMPLETED]: 'Ok, done',
+    [SwapState.ERROR]: 'Ok, go back',
+    [SwapState.CONFIRMATION_TOO_LONG]: 'Cancel',
+    [SwapState.CONFIRMATION_REJECTED]: 'Ok, go back',
+    [SwapState.PARTIAL_SUCCESS]: 'Ok, done',
+    [SwapState.NEEDS_GAS]: 'Go to Axelarscan',
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, 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({
+        immediateStart: false,
+    });
     const handleRouteStepsOpen = React.useCallback(() => {
         if (isFirstRenderRef.current) {
             isFirstRenderRef.current = false;
@@ -38682,28 +38718,23 @@ function SwapProgressView({ steps, isOpen = true, handleClose, socialLink, suppo
         }
         setShowSwapInfoSection(true);
     }, []);
-    const animationProgressState = React.useMemo(() => {
-        switch (txStatus) {
-            case 'warning':
-                return 'confirmationTooLong';
-            case 'partial_success':
-                return 'partialSuccess';
-            case 'needs_gas':
-                return 'needsGas';
-            case 'error':
-                return 'error';
-            case 'rejected':
-                return 'confirmationRejected';
-            case 'success':
-                return 'completed';
-            case 'ongoing':
-            case 'initialLoading':
-                return 'progress';
-            case 'pending':
-            default:
-                return 'confirm';
-        }
-    }, [txStatus]);
+    const { headerDescription, headerTitle } = React.useMemo(() => {
+        const headerTitle = getSwapProgressTitle({
+            swapState: swapState,
+            fromToken,
+            toToken,
+        });
+        const headerDescription = getSwapProgressDescriptions({
+            swapState: swapState,
+            toAmount,
+            toChain,
+            toToken,
+        });
+        return {
+            headerTitle,
+            headerDescription,
+        };
+    }, [swapState, fromToken, toToken, toAmount, toChain]);
     return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
@@ -38716,26 +38747,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[animationProgressState], 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: animationProgressState === '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" })] })) : animationProgressState === 'error' ||
-                            animationProgressState === 'partialSuccess' ? (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(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: {
                                 bgColor: fromToken.bgColor,
                                 imageUrl: fromToken.logoUrl,
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 imageUrl: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(SwapProgressViewHeader, { title: swapProgressTitles[animationProgressState], description: getSwapProgressDescriptions({
-                            state: animationProgressState,
-                            toAmount,
-                            toChain,
-                            toToken,
-                        }) }), 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(ArrowRightUpCircleIcon, {}), label: `Swap ${fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol}`, detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromToken.logoUrl }), animationProgressState === 'error' ? (jsxRuntime.jsx(CaptionText, { children: "0" })) : (fromAmount)] }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx("span", { className: "tw-inline-block tw-rotate-90", children: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}) }), label: `Receive ${toToken === null || toToken === void 0 ? void 0 : toToken.symbol}`, detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toToken.logoUrl }), animationProgressState === 'error' ? (jsxRuntime.jsx(CaptionText, { children: "0" })) : (toAmount)] }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "1.5" }), label: "Chain", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-full", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) }), jsxRuntime.jsx(SwapDetailListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(CaptionText, { children: fromAddressFormatted }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toAddressFormatted })] }) })] })] }), jsxRuntime.jsx(TrackTransactionView, { rawSteps: steps, onClose: handleRouteStepsClosed, onOpen: handleRouteStepsOpen, txStatus: txStatus }), jsxRuntime.jsx(Button, { size: "lg", variant: "primary", label: swapProgressButtonTexts[animationProgressState], 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: 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" })] }));
 }
-const TrackTransactionView = ({ txStatus, rawSteps, onOpen, onClose, }) => {
-    const { timer, stopTimer, startTimer } = useTimer({
-        immediateStart: false,
-    });
+const TrackTransactionView = ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }) => {
     const { currentStepIndex, steps } = React.useMemo(() => {
-        if (rawSteps.every((s) => s.status === TransactionStatus.SUCCESS)) {
+        if (rawSteps.every((s) => s.status === SwapState.COMPLETED)) {
             return {
                 steps: rawSteps,
                 currentStepIndex: rawSteps.length - 1,
@@ -38744,9 +38767,9 @@ const TrackTransactionView = ({ txStatus, rawSteps, onOpen, onClose, }) => {
         // TODO: Fix this
         // Vercel build throws an error for findLastIndex, probably related to the Node version being used
         // @ts-ignore
-        const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status === TransactionStatus.SUCCESS);
-        if (txStatus === TransactionStatus.ONGOING) {
-            startTimer();
+        const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status === SwapState.COMPLETED);
+        if (swapState === SwapState.PROGRESS) {
+            onTxStart();
             const noSuccessfulStep = lastSuccessfulStepIndex < 0;
             // If no successful step, but transaction is ongoing, this means user signed the tx in their wallet,
             // so we show the second step, because the first step is "waiting for confirmation"
@@ -38754,13 +38777,13 @@ const TrackTransactionView = ({ txStatus, rawSteps, onOpen, onClose, }) => {
             const currentOngoingStepIndex = noSuccessfulStep
                 ? 1
                 : lastSuccessfulStepIndex + 1;
-            // If current step is not the last one, show the timer
+            // If current step is not the last one, show the loader
             if (currentOngoingStepIndex < rawSteps.length) {
-                // Show the timer in the current ongoing step
+                // Show loader in the current ongoing step
                 // @ts-ignore Vercel build error - TODO: Fix this
-                const stepsWithTimer = rawSteps.with(currentOngoingStepIndex, Object.assign(Object.assign({}, rawSteps[currentOngoingStepIndex]), { chipContent: timer }));
+                const stepsWithLoader = rawSteps.with(currentOngoingStepIndex, Object.assign(Object.assign({}, rawSteps[currentOngoingStepIndex]), { chipContent: jsxRuntime.jsx(Loader, { size: "16", strokeWidth: "2" }) }));
                 return {
-                    steps: stepsWithTimer,
+                    steps: stepsWithLoader,
                     currentStepIndex: currentOngoingStepIndex,
                 };
             }
@@ -38769,8 +38792,8 @@ const TrackTransactionView = ({ txStatus, rawSteps, onOpen, onClose, }) => {
                 currentStepIndex: rawSteps.length - 1,
             };
         }
-        else if (txStatus === TransactionStatus.SUCCESS) {
-            stopTimer();
+        else if (swapState === SwapState.COMPLETED) {
+            onTxEnd();
             return {
                 steps: rawSteps,
                 currentStepIndex: rawSteps.length - 1,
@@ -38780,9 +38803,12 @@ const TrackTransactionView = ({ txStatus, rawSteps, onOpen, onClose, }) => {
             steps: rawSteps,
             currentStepIndex: 0,
         };
-    }, [txStatus, rawSteps, timer]);
+    }, [swapState, rawSteps]);
     return rawSteps.length > 0 ? (jsxRuntime.jsx(SwapStepsCollapsed, { steps: steps, currentStepIndex: currentStepIndex, onClose: onClose, onOpen: onOpen })) : null;
 };
+const SwapDetailItemValues = ({ fromContent, toContent, }) => {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: [typeof fromContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: fromContent })) : (fromContent), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), typeof toContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: toContent })) : (toContent)] }));
+};
 
 const lightTheme = {
     // content

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

@@ -41,3 +41,7 @@ export declare function ReorderIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowsSwapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -14,3 +14,7 @@ export declare const ExplosionIcon: ({ size, className, }: {
     className?: string;
     size?: string;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare function TimeFliesIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { SwapStep, TransactionStatus } from '../../types/components';
+import { SwapState, SwapStep } from '../../types/components';
 type ChainData = {
     networkName: string;
     logoUrl: string;
@@ -9,7 +9,7 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, }: {
     steps: SwapStep[];
     handleClose?: () => void;
     isOpen?: boolean;
@@ -23,13 +23,16 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, socialLin
     toChain: ChainData;
     fromAddressFormatted: string;
     toAddressFormatted: string;
-    txStatus: TransactionStatus;
+    swapState: SwapState;
+    estimatedTimeToComplete?: string;
 }): import("react/jsx-runtime").JSX.Element;
 interface Props {
     rawSteps: SwapStep[];
-    txStatus?: TransactionStatus;
+    swapState?: SwapState;
     onOpen?: () => void;
     onClose?: () => void;
+    onTxStart: () => void;
+    onTxEnd: () => void;
 }
-export declare const TrackTransactionView: ({ txStatus, rawSteps, onOpen, onClose, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TrackTransactionView: ({ swapState, rawSteps, onOpen, onClose, onTxStart, onTxEnd, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/cjs/types/core/constants.d.ts

@@ -8,14 +8,24 @@ export declare const CSS_VARS: {
     SCALE_AND_FADE_UP_DURATION: string;
     SCALE_AND_FADE_DOWN_DURATION: string;
     TRANSLATE_TOP_OR_BOTTOM: string;
+    SHOW_MODAL_DURATION: string;
+    HIDE_MODAL_DURATION: string;
+    SLIDE_TO_TOP_DURATION: string;
+    SLIDE_TO_BOTTOM_DURATION: string;
+    BLUR_IN_DURATION: string;
+    BLUR_OUT_DURATION: string;
 };
 export declare const ANIMATION_DURATIONS: {
     SHOW_ROUTE: number;
     HIDE_ROUTE: number;
     CHANGE_SWAP_STEP: number;
+    SHOW_MODAL: number;
+    HIDE_MODAL: number;
 };
 export declare const ANIMATION_TIMINGS: {
     EXPAND_ROUTE: string;
     COLLAPSE_ROUTE: string;
     CHANGE_SWAP_STEP: string;
+    SHOW_ROUTE: string;
+    HIDE_ROUTE: string;
 };

package/dist/cjs/types/core/utils.d.ts

@@ -14,4 +14,5 @@ interface DebouncedFunction<F extends AnyFunction> {
     cancel: () => void;
 }
 export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export declare const formatTime: (elapsedTime: number) => string;
 export {};

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

@@ -13,21 +13,18 @@ export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     link?: string;
-    status: TransactionStatus;
+    status: SwapState;
 };
-export type SwapProgressState = 'confirm' | 'progress' | 'completed' | 'error' | 'partialSuccess' | 'confirmationTooLong' | 'confirmationRejected' | 'needsGas';
+export declare enum SwapState {
+    CONFIRM = 0,
+    PROGRESS = 1,
+    COMPLETED = 2,
+    ERROR = 3,
+    PARTIAL_SUCCESS = 4,
+    CONFIRMATION_TOO_LONG = 5,
+    CONFIRMATION_REJECTED = 6,
+    NEEDS_GAS = 7
+}
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
-export declare enum TransactionStatus {
-    SUCCESS = "success",
-    NEEDS_GAS = "needs_gas",
-    ONGOING = "ongoing",
-    PARTIAL_SUCCESS = "partial_success",
-    NOT_FOUND = "not_found",
-    INITIAL_LOADING = "initialLoading",
-    ERROR = "error",
-    WARNING = "warning",
-    PENDING = "pending",
-    REJECTED = "rejected"
-}

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

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