@moonpay/platform-sdk-react-native 1.1.0 → 1.2.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

@@ -220,7 +220,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 +523,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;
@@ -948,6 +951,38 @@ function VisibleFrameSlotSheet({
         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]
+  );
   (0, import_react2.useEffect)(() => {
     animateSheet(translateY, 0);
   }, [translateY]);
@@ -978,17 +1013,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 +1052,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 +1081,7 @@ function MoonPayProvider({
   sessionToken,
   apiBaseUrl,
   frameBaseUrl,
+  theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = (0, import_react3.useState)([]);
@@ -1066,13 +1101,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 +1152,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 +1178,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")