@moonpay/platform-sdk-react-native 1.1.0 → 1.3.0

package/README.md

@@ -61,6 +61,8 @@ export function App() {
 
 `MoonPayProvider` also accepts optional `apiBaseUrl` and `frameBaseUrl` props that point the SDK at a different MoonPay environment — useful if MoonPay gives you test endpoints during onboarding. Leave them unset to use production.
 
+Pass an optional `theme={{ appearance: 'light' | 'dark' }}` to render every MoonPay frame in light or dark mode. Omit it to follow the customer's system preference. The connect flow can override it per call (`client.connect({ theme })` or `<MoonPayConnect theme={...} />`).
+
 **3. Check the connection and connect the customer:**
 
 ```tsx

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":
@@ -220,7 +222,9 @@ var connectSpec = {
   buildParams: (ctx, props, publicKey) => ({
     sessionToken: ctx.sessionToken,
     publicKey,
-    ...props.theme?.appearance && { appearance: props.theme.appearance }
+    // Per-call override; `applyThemeParam` in the engine fills the client
+    // default for connect (and every other visible frame) when this is absent.
+    ...(0, import_platform_sdk_core.themeParams)(props.theme)
   }),
   onMessageEffect: applyCredentialsOnComplete,
   mapMessage: (msg) => {
@@ -521,11 +525,12 @@ function createFrameSession(spec, ctx, props, overrides = {}) {
   const generated = `${spec.channelPrefix}-${Date.now()}`;
   const channelId = spec.resolveChannelId ? spec.resolveChannelId(props, generated) : generated;
   const keyPair = spec.needsKeyPair ? (0, import_platform_sdk_core2.generateKeyPair)() : void 0;
-  const url = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : (0, import_platform_sdk_core2.buildFrameUrl)(
+  const builtUrl = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : (0, import_platform_sdk_core2.buildFrameUrl)(
     spec.path,
     { ...spec.buildParams?.(ctx, props, keyPair?.publicKey), channelId },
     { frameBaseUrl: ctx.frameBaseUrl }
   );
+  const url = spec.hidden ? builtUrl : (0, import_platform_sdk_core2.applyThemeParam)(builtUrl, ctx.theme);
   const transport = (overrides.createTransport ?? (() => new WebViewTransport()))();
   let resolvedHandle = null;
   let rejectDisposed;
@@ -909,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,
@@ -936,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);
@@ -943,29 +977,80 @@ function VisibleFrameSlotSheet({
     if (closingRef.current)
       return;
     closingRef.current = true;
+    phaseRef.current = "closed";
     animateSheet(translateY, sheetHeight, ({ finished }) => {
       if (finished)
         onCloseRef.current();
     });
   }, [translateY, sheetHeight]);
+  const panResponder = (0, import_react2.useMemo)(
+    () => import_react_native2.PanResponder.create({
+      // Claim the gesture only for a clearly downward drag — never on a tap
+      // (so the handle's onPress still fires) or a mostly-horizontal swipe.
+      onMoveShouldSetPanResponder: (_evt, { dy, dx }) => dy > 5 && dy > Math.abs(dx),
+      onPanResponderGrant: () => {
+        translateY.stopAnimation(() => {
+          translateY.extractOffset();
+        });
+      },
+      // Track the finger downward; clamp upward travel to the open position.
+      onPanResponderMove: (_evt, { dy }) => {
+        translateY.setValue(Math.max(0, dy));
+      },
+      onPanResponderRelease: (_evt, { dy, vy }) => {
+        translateY.flattenOffset();
+        const draggedPastThreshold = dy > sheetHeight * 0.35;
+        const flungDownFast = vy > 0.5;
+        if (draggedPastThreshold || flungDownFast) {
+          close();
+        } else {
+          animateSheet(translateY, 0);
+        }
+      },
+      // Another responder stole the gesture: settle to a known state.
+      onPanResponderTerminate: () => {
+        translateY.flattenOffset();
+        animateSheet(translateY, 0);
+      }
+    }),
+    [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,
       {
@@ -978,17 +1063,16 @@ function VisibleFrameSlotSheet({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Animated.View, { style: [styles.sheet, { height: sheetHeight, transform: [{ translateY }] }], children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoonPayFrame, { transport: slot.transport }),
       !frameReady && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.loading, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.ActivityIndicator, { size: "large", color: "#000" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.handleArea, ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_react_native2.Pressable,
         {
           onPress: close,
           accessibilityRole: "button",
           accessibilityLabel: "Close",
-          hitSlop: 8,
-          style: styles.closeButton,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.closeButtonText, children: "\u2715" })
+          hitSlop: 12,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.handleBar })
         }
-      )
+      ) })
     ] })
   ] }) });
 }
@@ -1018,25 +1102,25 @@ var styles = import_react_native2.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  // Floating X in the top-right corner, over the frame.
-  closeButton: {
+  // Drag-to-dismiss strip pinned across the top of the sheet, floating over the
+  // frame. Tall enough to be an easy grab target without eating much of the UI.
+  handleArea: {
     position: "absolute",
-    top: 12,
-    right: 12,
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: "rgba(0, 0, 0, 0.06)",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 28,
     alignItems: "center",
     justifyContent: "center",
     zIndex: 1,
     elevation: 2
   },
-  closeButtonText: {
-    fontSize: 17,
-    lineHeight: 20,
-    color: "#000",
-    fontWeight: "500"
+  // The visible pill.
+  handleBar: {
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "rgba(0, 0, 0, 0.2)"
   }
 });
 
@@ -1047,6 +1131,7 @@ function MoonPayProvider({
   sessionToken,
   apiBaseUrl,
   frameBaseUrl,
+  theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = (0, import_react3.useState)([]);
@@ -1066,13 +1151,13 @@ function MoonPayProvider({
   }
   const core = coreRef.current;
   const client = (0, import_react3.useMemo)(() => {
-    const specCtx = { sessionToken, core, frameBaseUrl };
+    const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
       mountSession: createMountSession(specCtx, { addSlot, removeSlot }),
       core
     });
-  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl }, children: [
+  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot, theme?.appearance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl, theme }, children: [
     children,
     frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
     frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1117,7 +1202,7 @@ function MoonPayFrameView({
   defaultStyle,
   onEvent
 }) {
-  const { sessionToken, core, frameBaseUrl } = useMoonPayContext();
+  const { sessionToken, core, frameBaseUrl, theme } = useMoonPayContext();
   const [transport, setTransport] = (0, import_react4.useState)(null);
   const handleRef = (0, import_react4.useRef)(null);
   const onEventRef = (0, import_react4.useRef)(onEvent);
@@ -1143,7 +1228,11 @@ function MoonPayFrameView({
     }
     appliedRef.current = applied;
     try {
-      session = createFrameSession(spec, { sessionToken, core, frameBaseUrl }, propsRef.current);
+      session = createFrameSession(
+        spec,
+        { sessionToken, core, frameBaseUrl, theme },
+        propsRef.current
+      );
     } catch (e) {
       onEventRef.current?.(
         spec.errorEvent(e instanceof Error ? e.message : "Failed to create frame")