@moneymq/react 0.3.0 → 0.3.2

package/dist/index.js

@@ -591,6 +591,34 @@ function CheckoutModal({
   const { isSandboxMode, sandboxAccounts } = useSandbox();
   const client = useMoneyMQ();
   const lottieRef = (0, import_react4.useRef)(null);
+  const [shouldRender, setShouldRender] = (0, import_react4.useState)(false);
+  const [animationPhase, setAnimationPhase] = (0, import_react4.useState)("closed");
+  (0, import_react4.useEffect)(() => {
+    if (visible && !shouldRender) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setAnimationPhase("backdrop");
+        setTimeout(() => {
+          setAnimationPhase("open");
+        }, 150);
+      });
+    } else if (!visible && shouldRender && animationPhase !== "closing") {
+      setAnimationPhase("closing");
+      setTimeout(() => {
+        setShouldRender(false);
+        setAnimationPhase("closed");
+      }, 300);
+    }
+  }, [visible, shouldRender, animationPhase]);
+  const handleAnimatedClose = (0, import_react4.useCallback)(() => {
+    if (animationPhase === "closing") return;
+    setAnimationPhase("closing");
+    setTimeout(() => {
+      setShouldRender(false);
+      setAnimationPhase("closed");
+      onClose();
+    }, 300);
+  }, [onClose, animationPhase]);
   const copyToClipboard = (text, type) => {
     navigator.clipboard.writeText(text);
     if (type === "sender") {
@@ -784,7 +812,7 @@ function CheckoutModal({
     }, 3e3);
     return () => clearInterval(interval);
   }, [canPay, visible]);
-  if (!visible) return null;
+  if (!shouldRender) return null;
   const WalletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2v-5z" }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 12h.01", strokeWidth: "2", strokeLinecap: "round" })
@@ -803,6 +831,9 @@ function CheckoutModal({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("clipPath", { id: "clip0_524_7", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "471", height: "99", fill: "white" }) }) })
   ] });
+  const isBackdropVisible = animationPhase === "backdrop" || animationPhase === "open";
+  const isModalVisible = animationPhase === "open";
+  const isClosing = animationPhase === "closing";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
         @keyframes spin {
@@ -817,10 +848,11 @@ function CheckoutModal({
           position: "fixed",
           inset: 0,
           zIndex: 9998,
-          backgroundColor: "rgba(0, 0, 0, 0.6)",
-          backdropFilter: "blur(8px)"
+          backgroundColor: isBackdropVisible && !isClosing ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0)",
+          backdropFilter: isBackdropVisible && !isClosing ? "blur(8px)" : "blur(0px)",
+          transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 250ms cubic-bezier(0.4, 0, 0.2, 1)"
         },
-        onClick: onClose
+        onClick: handleAnimatedClose
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -833,9 +865,10 @@ function CheckoutModal({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          padding: "1rem"
+          padding: "1rem",
+          pointerEvents: isClosing ? "none" : "auto"
         },
-        onClick: onClose,
+        onClick: handleAnimatedClose,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
@@ -845,7 +878,10 @@ function CheckoutModal({
               backgroundColor: "#2c2c2e",
               borderRadius: "1rem",
               overflow: "hidden",
-              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+              opacity: isModalVisible && !isClosing ? 1 : 0,
+              transform: isModalVisible && !isClosing ? "translateY(0) scale(1)" : "translateY(-20px) scale(0.98)",
+              transition: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1)"
             },
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -897,7 +933,7 @@ function CheckoutModal({
                       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "button",
                         {
-                          onClick: onClose,
+                          onClick: handleAnimatedClose,
                           style: {
                             padding: "0.375rem 0.75rem",
                             fontSize: "0.8125rem",