@0xsquid/ui 0.13.3 → 0.13.4

package/dist/cjs/index.js

@@ -2852,8 +2852,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
 const CSS_VARS = {
     MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
     DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
-    SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
-    SLIDE_TO_TOP_DURATION: '--squid-animation-slide-to-top-duration',
+    COLLAPSE_TO_BOTTOM_DURATION: '--squid-animation-collapse-to-bottom-duration',
+    EXPAND_TO_TOP_DURATION: '--squid-animation-expand-to-top-duration',
     FADE_IN_DURATION: '--squid-animation-fade-in-duration',
     FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
     SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
@@ -3591,11 +3591,11 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
                         }, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: handleCloseRouteSteps }), jsxRuntime.jsxs("div", { style: {
-                            [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
-                            [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
+                            [CSS_VARS.COLLAPSE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
+                            [CSS_VARS.EXPAND_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
                         }, className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
-                            ? 'tw-animate-slide-to-top'
-                            : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
+                            ? 'tw-animate-expand-to-top'
+                            : 'tw-animate-collapse-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
                                     scrollbarGutter: 'stable',
                                 }, children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
                                         ? 'pending'
@@ -38652,8 +38652,14 @@ const swapProgressButtonTexts = {
     partialSuccess: 'Ok, done',
     needsGas: 'Go to Axelarscan',
 };
-function SwapProgressView({ steps, currentStepIndex, 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, txStatus, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React.useState(true);
+    const isFirstRenderRef = React.useRef(true);
+    React.useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+        }
+    }, []);
     const handleRouteStepsOpen = React.useCallback(() => {
         setShowSwapInfoSection(false);
     }, []);
@@ -38681,11 +38687,13 @@ function SwapProgressView({ steps, currentStepIndex, isOpen = true, handleClose,
             default:
                 return 'confirm';
         }
-    }, [currentStepIndex, steps]);
-    return (jsxRuntime.jsxs(Modal, { className: "tw-overflow-hidden", isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
+    }, [txStatus]);
+    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxRuntime.jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
-                }, borderType: "outline", className: cn('!tw-max-h-[470px]', showSwapInfoSection
+                }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
+                // do not show animation on first render
+                isFirstRenderRef.current ? "" : showSwapInfoSection
                     ? 'tw-animate-scale-and-fade-up'
                     : '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)

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

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

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

@@ -1,8 +1,8 @@
 export declare const CSS_VARS: {
     MOVE_WITH_SPRING_BOUNCE_DURATION: string;
     DISPLAY_DELAYED_DURATION: string;
-    SLIDE_TO_BOTTOM_DURATION: string;
-    SLIDE_TO_TOP_DURATION: string;
+    COLLAPSE_TO_BOTTOM_DURATION: string;
+    EXPAND_TO_TOP_DURATION: string;
     FADE_IN_DURATION: string;
     FADE_OUT_DURATION: string;
     SCALE_AND_FADE_UP_DURATION: string;

package/dist/esm/index.js

@@ -2832,8 +2832,8 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
 const CSS_VARS = {
     MOVE_WITH_SPRING_BOUNCE_DURATION: '--squid-animation-move-with-spring-bounce-duration',
     DISPLAY_DELAYED_DURATION: '--squid-animation-display-delayed-duration',
-    SLIDE_TO_BOTTOM_DURATION: '--squid-animation-slide-to-bottom-duration',
-    SLIDE_TO_TOP_DURATION: '--squid-animation-slide-to-top-duration',
+    COLLAPSE_TO_BOTTOM_DURATION: '--squid-animation-collapse-to-bottom-duration',
+    EXPAND_TO_TOP_DURATION: '--squid-animation-expand-to-top-duration',
     FADE_IN_DURATION: '--squid-animation-fade-in-duration',
     FADE_OUT_DURATION: '--squid-animation-fade-out-duration',
     SCALE_AND_FADE_UP_DURATION: '--squid-animation-scale-and-fade-up-duration',
@@ -3571,11 +3571,11 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
                         }, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: handleCloseRouteSteps }), jsxs("div", { style: {
-                            [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
-                            [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
+                            [CSS_VARS.COLLAPSE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
+                            [CSS_VARS.EXPAND_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
                         }, className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
-                            ? 'tw-animate-slide-to-top'
-                            : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
+                            ? 'tw-animate-expand-to-top'
+                            : 'tw-animate-collapse-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: handleCloseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-max-h-fit tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", style: {
                                     scrollbarGutter: 'stable',
                                 }, children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
                                         ? 'pending'
@@ -38632,8 +38632,14 @@ const swapProgressButtonTexts = {
     partialSuccess: 'Ok, done',
     needsGas: 'Go to Axelarscan',
 };
-function SwapProgressView({ steps, currentStepIndex, 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, txStatus, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
+    const isFirstRenderRef = useRef(true);
+    useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+        }
+    }, []);
     const handleRouteStepsOpen = useCallback(() => {
         setShowSwapInfoSection(false);
     }, []);
@@ -38661,11 +38667,13 @@ function SwapProgressView({ steps, currentStepIndex, isOpen = true, handleClose,
             default:
                 return 'confirm';
         }
-    }, [currentStepIndex, steps]);
-    return (jsxs(Modal, { className: "tw-overflow-hidden", isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
+    }, [txStatus]);
+    return (jsxs(Modal, { isOpen: isOpen, onBackdropClick: handleClose, children: [jsxs(ModalContent, { style: {
                     [CSS_VARS.SCALE_AND_FADE_DOWN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE_STEPS}ms`,
                     [CSS_VARS.SCALE_AND_FADE_UP_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE_STEPS}ms`,
-                }, borderType: "outline", className: cn('!tw-max-h-[470px]', showSwapInfoSection
+                }, borderType: "outline", className: cn('!tw-max-h-[470px]', 
+                // do not show animation on first render
+                isFirstRenderRef.current ? "" : showSwapInfoSection
                     ? 'tw-animate-scale-and-fade-up'
                     : '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)

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

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

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

@@ -1,8 +1,8 @@
 export declare const CSS_VARS: {
     MOVE_WITH_SPRING_BOUNCE_DURATION: string;
     DISPLAY_DELAYED_DURATION: string;
-    SLIDE_TO_BOTTOM_DURATION: string;
-    SLIDE_TO_TOP_DURATION: string;
+    COLLAPSE_TO_BOTTOM_DURATION: string;
+    EXPAND_TO_TOP_DURATION: string;
     FADE_IN_DURATION: string;
     FADE_OUT_DURATION: string;
     SCALE_AND_FADE_UP_DURATION: string;

package/dist/index.css

@@ -1432,6 +1432,38 @@ video {
   animation: tw-blur-out 0.2s ease-out both;
 }
 
+@keyframes tw-collapse-to-bottom {
+  0% {
+    height: 100%;
+    opacity: 1;
+  }
+
+  100% {
+    height: 60px;
+    opacity: 0;
+  }
+}
+
+.tw-animate-collapse-to-bottom {
+  animation: tw-collapse-to-bottom var(--squid-animation-collapse-to-bottom-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+}
+
+@keyframes tw-expand-to-top {
+  0% {
+    height: 60px;
+    opacity: 0;
+  }
+
+  100% {
+    height: 100%;
+    opacity: 1;
+  }
+}
+
+.tw-animate-expand-to-top {
+  animation: tw-expand-to-top var(--squid-animation-expand-to-top-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+}
+
 @keyframes tw-fade-in {
   0% {
     opacity: 0;
@@ -1542,34 +1574,34 @@ video {
 
 @keyframes tw-slide-to-bottom {
   0% {
-    height: 100%;
+    transform: translateY(0);
     opacity: 1;
   }
 
   100% {
-    height: 60px;
+    transform: translateY(120px);
     opacity: 0;
   }
 }
 
 .tw-animate-slide-to-bottom {
-  animation: tw-slide-to-bottom var(--squid-animation-slide-to-bottom-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+  animation: tw-slide-to-bottom 0.2s ease-out both;
 }
 
 @keyframes tw-slide-to-top {
   0% {
-    height: 60px;
+    transform: translateY(120px);
     opacity: 0;
   }
 
   100% {
-    height: 100%;
+    transform: translateY(0);
     opacity: 1;
   }
 }
 
 .tw-animate-slide-to-top {
-  animation: tw-slide-to-top var(--squid-animation-slide-to-top-duration, 0s) cubic-bezier(.165,.84,.44,1) both;
+  animation: tw-slide-to-top 0.35s ease-out both;
 }
 
 @keyframes tw-translate-to-bottom {

package/dist/index.d.ts

@@ -493,9 +493,8 @@ type Token = {
     logoUrl: string;
     bgColor: string;
 };
-declare function SwapProgressView({ steps, currentStepIndex, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
+declare function SwapProgressView({ steps, isOpen, handleClose, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, txStatus, }: {
     steps: SwapStep[];
-    currentStepIndex: number;
     handleClose?: () => void;
     isOpen?: boolean;
     socialLink?: 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.3",
+  "version": "0.13.4",
   "author": "",
   "license": "MIT",
   "resolutions": {