@moonpay/platform-sdk-react-native 1.2.0 → 1.4.0

package/dist/index.cjs

@@ -158,6 +158,8 @@ var buyButtonSpec = {
   },
   mapMessage: (msg) => {
     switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
       case "complete":
         return { kind: "complete", payload: msg.payload };
       case "challenge":
@@ -912,7 +914,34 @@ function createMountSession(specCtx, host) {
 // src/VisibleFrameSlotSheet.tsx
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
+
+// src/sheet-presentation.ts
+var NOOP = {
+  present: false,
+  liftSpinner: false,
+  dismissSilent: false,
+  close: false
+};
+function resolvePresentation(phase, signal) {
+  if (phase === "closed")
+    return { phase: "closed", ...NOOP };
+  switch (signal) {
+    case "ready":
+      return { ...NOOP, phase: "presented", present: phase === "hidden", liftSpinner: true };
+    case "grace":
+      if (phase === "presented")
+        return { phase: "presented", ...NOOP };
+      return { ...NOOP, phase: "presented", present: true };
+    case "terminal":
+      if (phase === "hidden")
+        return { ...NOOP, phase: "closed", dismissSilent: true };
+      return { ...NOOP, phase: "closed", close: true };
+  }
+}
+
+// src/VisibleFrameSlotSheet.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var PRESENT_GRACE_MS = 3e3;
 function animateSheet(value, toValue, onDone) {
   const animation = import_react_native2.Platform.OS === "android" ? import_react_native2.Animated.timing(value, {
     toValue,
@@ -939,6 +968,8 @@ function VisibleFrameSlotSheet({
   const sheetHeight = Math.round(height * 0.9);
   const translateY = (0, import_react2.useRef)(new import_react_native2.Animated.Value(sheetHeight)).current;
   const [frameReady, setFrameReady] = (0, import_react2.useState)(false);
+  const [presented, setPresented] = (0, import_react2.useState)(false);
+  const phaseRef = (0, import_react2.useRef)("hidden");
   const onCloseRef = (0, import_react2.useRef)(onClose);
   onCloseRef.current = onClose;
   const closingRef = (0, import_react2.useRef)(false);
@@ -946,6 +977,7 @@ function VisibleFrameSlotSheet({
     if (closingRef.current)
       return;
     closingRef.current = true;
+    phaseRef.current = "closed";
     animateSheet(translateY, sheetHeight, ({ finished }) => {
       if (finished)
         onCloseRef.current();
@@ -983,24 +1015,42 @@ function VisibleFrameSlotSheet({
     }),
     [translateY, sheetHeight, close]
   );
+  const dispatch = (0, import_react2.useCallback)(
+    (signal) => {
+      const result = resolvePresentation(phaseRef.current, signal);
+      phaseRef.current = result.phase;
+      if (result.present) {
+        setPresented(true);
+        animateSheet(translateY, 0);
+      }
+      if (result.liftSpinner)
+        setFrameReady(true);
+      if (result.dismissSilent)
+        onCloseRef.current();
+      if (result.close)
+        close();
+    },
+    [translateY, close]
+  );
   (0, import_react2.useEffect)(() => {
-    animateSheet(translateY, 0);
-  }, [translateY]);
+    const timer = setTimeout(() => dispatch("grace"), PRESENT_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, [dispatch]);
   (0, import_react2.useEffect)(() => {
     const unsubscribe = slot.transport.onMessage((msg) => {
       if (msg.kind === "ready")
-        setFrameReady(true);
+        dispatch("ready");
       else if (msg.kind === "complete" || msg.kind === "error")
-        close();
+        dispatch("terminal");
     });
     return unsubscribe;
-  }, [slot.transport, close]);
+  }, [slot.transport, dispatch]);
   const backdropOpacity = translateY.interpolate({
     inputRange: [0, sheetHeight],
     outputRange: [1, 0],
     extrapolate: "clamp"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: close, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.root, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: close, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.root, pointerEvents: presented ? "auto" : "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_native2.Pressable,
       {