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

package/dist/index.d.cts

@@ -24,10 +24,11 @@ import * as GooglePaySdk from '@moonpay/platform-protocol/sdks/google-pay';
 export { Event as GooglePayEvent, SetupError as SetupGooglePayError } from '@moonpay/platform-protocol/sdks/google-pay';
 import * as WidgetSdk from '@moonpay/platform-protocol/sdks/widget';
 export { SetupError as SetupWidgetError, Event as WidgetEvent } from '@moonpay/platform-protocol/sdks/widget';
+import { FrameTransport, FrameOptions, ThemeOptions, ListTransactionsParams } from '@moonpay/platform-sdk-core';
+export { ThemeOptions } from '@moonpay/platform-sdk-core';
 import { GetPaymentMethodsError, GetQuoteError, GetTransactionsError, DevPlatformApiError, CreateIdentityError, GetIdentityError, UpdateIdentityError, VerifyIdentityError, GetIdentityUploadUrlError, SubmitIdentityFilesError } from '@moonpay/platform-protocol/api/errors';
 import { CreateIdentityRequestBody, Identity, UpdateIdentityRequestBody, IdentityVerificationResponse, IdentityFileUploadUrlRequestBody, IdentityFileUploadUrl, SubmitIdentityFilesRequestBody } from '@moonpay/platform-protocol/api/identity';
 import { ResetConnectionError } from '@moonpay/platform-protocol/sdks/reset';
-import { FrameTransport, FrameOptions, ListTransactionsParams } from '@moonpay/platform-sdk-core';
 import { ViewStyle } from 'react-native';
 import { ProtocolMessage } from '@moonpay/platform-protocol/protocol';
 import { RefObject, ReactNode } from 'react';
@@ -132,10 +133,8 @@ interface ChallengeFrame {
 }
 
 interface ConnectOptions {
-    /** Theme options for the connect frame. */
-    theme?: {
-        appearance?: 'light' | 'dark';
-    };
+    /** Theme for this connect frame. Overrides the provider-level `theme`. */
+    theme?: ThemeOptions;
     /** Callback for connect lifecycle events. */
     onEvent?: (event: ConnectSdk.Event) => void;
 }
@@ -306,10 +305,8 @@ interface MoonPayChallengeProps {
 declare function MoonPayChallenge({ url, onEvent, style }: MoonPayChallengeProps): JSX.Element;
 
 interface MoonPayConnectProps {
-    /** Theme options for the connect frame. Mount-time only. */
-    theme?: {
-        appearance?: 'light' | 'dark';
-    };
+    /** Theme for this connect frame. Overrides the provider-level `theme`. Mount-time only. */
+    theme?: ThemeOptions;
     /** Callback for connect lifecycle events. */
     onEvent?: (event: ConnectSdk.Event) => void;
     /** Container style. Defaults to flex: 1. */
@@ -398,9 +395,11 @@ interface MoonPayProviderProps {
     sessionToken: string;
     apiBaseUrl?: string;
     frameBaseUrl?: string;
+    /** Theme applied to every visible MoonPay frame (connect, widget, Apple/Google Pay, …). */
+    theme?: ThemeOptions;
     children: ReactNode;
 }
-declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, children, }: MoonPayProviderProps): JSX.Element;
+declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
 declare function useMoonPay(): {
     client: RNClient;
 };

package/dist/index.d.ts

@@ -24,10 +24,11 @@ import * as GooglePaySdk from '@moonpay/platform-protocol/sdks/google-pay';
 export { Event as GooglePayEvent, SetupError as SetupGooglePayError } from '@moonpay/platform-protocol/sdks/google-pay';
 import * as WidgetSdk from '@moonpay/platform-protocol/sdks/widget';
 export { SetupError as SetupWidgetError, Event as WidgetEvent } from '@moonpay/platform-protocol/sdks/widget';
+import { FrameTransport, FrameOptions, ThemeOptions, ListTransactionsParams } from '@moonpay/platform-sdk-core';
+export { ThemeOptions } from '@moonpay/platform-sdk-core';
 import { GetPaymentMethodsError, GetQuoteError, GetTransactionsError, DevPlatformApiError, CreateIdentityError, GetIdentityError, UpdateIdentityError, VerifyIdentityError, GetIdentityUploadUrlError, SubmitIdentityFilesError } from '@moonpay/platform-protocol/api/errors';
 import { CreateIdentityRequestBody, Identity, UpdateIdentityRequestBody, IdentityVerificationResponse, IdentityFileUploadUrlRequestBody, IdentityFileUploadUrl, SubmitIdentityFilesRequestBody } from '@moonpay/platform-protocol/api/identity';
 import { ResetConnectionError } from '@moonpay/platform-protocol/sdks/reset';
-import { FrameTransport, FrameOptions, ListTransactionsParams } from '@moonpay/platform-sdk-core';
 import { ViewStyle } from 'react-native';
 import { ProtocolMessage } from '@moonpay/platform-protocol/protocol';
 import { RefObject, ReactNode } from 'react';
@@ -132,10 +133,8 @@ interface ChallengeFrame {
 }
 
 interface ConnectOptions {
-    /** Theme options for the connect frame. */
-    theme?: {
-        appearance?: 'light' | 'dark';
-    };
+    /** Theme for this connect frame. Overrides the provider-level `theme`. */
+    theme?: ThemeOptions;
     /** Callback for connect lifecycle events. */
     onEvent?: (event: ConnectSdk.Event) => void;
 }
@@ -306,10 +305,8 @@ interface MoonPayChallengeProps {
 declare function MoonPayChallenge({ url, onEvent, style }: MoonPayChallengeProps): JSX.Element;
 
 interface MoonPayConnectProps {
-    /** Theme options for the connect frame. Mount-time only. */
-    theme?: {
-        appearance?: 'light' | 'dark';
-    };
+    /** Theme for this connect frame. Overrides the provider-level `theme`. Mount-time only. */
+    theme?: ThemeOptions;
     /** Callback for connect lifecycle events. */
     onEvent?: (event: ConnectSdk.Event) => void;
     /** Container style. Defaults to flex: 1. */
@@ -398,9 +395,11 @@ interface MoonPayProviderProps {
     sessionToken: string;
     apiBaseUrl?: string;
     frameBaseUrl?: string;
+    /** Theme applied to every visible MoonPay frame (connect, widget, Apple/Google Pay, …). */
+    theme?: ThemeOptions;
     children: ReactNode;
 }
-declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, children, }: MoonPayProviderProps): JSX.Element;
+declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
 declare function useMoonPay(): {
     client: RNClient;
 };

package/dist/index.js

@@ -6,7 +6,11 @@ import {
   ConnectionErrorCode,
   ConnectionStatus
 } from "@moonpay/platform-protocol/models/connection";
-import { decryptCredentials, FRAME_PATHS } from "@moonpay/platform-sdk-core";
+import {
+  decryptCredentials,
+  FRAME_PATHS,
+  themeParams
+} from "@moonpay/platform-sdk-core";
 function createQuoteCommands(send, channelId) {
   return {
     setQuote: (signature) => send({
@@ -112,6 +116,8 @@ var buyButtonSpec = {
   },
   mapMessage: (msg) => {
     switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
       case "complete":
         return { kind: "complete", payload: msg.payload };
       case "challenge":
@@ -174,7 +180,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.
+    ...themeParams(props.theme)
   }),
   onMessageEffect: applyCredentialsOnComplete,
   mapMessage: (msg) => {
@@ -408,6 +416,7 @@ function MoonPayFrame({ transport, hidden, style }) {
 
 // src/frame-engine.ts
 import {
+  applyThemeParam,
   buildFrameUrl,
   createFrameOrchestrator,
   generateKeyPair
@@ -479,11 +488,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 ? generateKeyPair() : void 0;
-  const url = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : buildFrameUrl(
+  const builtUrl = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : buildFrameUrl(
     spec.path,
     { ...spec.buildParams?.(ctx, props, keyPair?.publicKey), channelId },
     { frameBaseUrl: ctx.frameBaseUrl }
   );
+  const url = spec.hidden ? builtUrl : applyThemeParam(builtUrl, ctx.theme);
   const transport = (overrides.createTransport ?? (() => new WebViewTransport()))();
   let resolvedHandle = null;
   let rejectDisposed;
@@ -579,7 +589,7 @@ import {
   createContext,
   useCallback as useCallback2,
   useContext,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef3,
   useState as useState2
 } from "react";
@@ -872,20 +882,47 @@ function createMountSession(specCtx, host) {
 }
 
 // src/VisibleFrameSlotSheet.tsx
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState } from "react";
 import {
   ActivityIndicator,
   Animated,
   Easing,
   Modal,
+  PanResponder,
   Platform,
   Pressable,
   StyleSheet,
-  Text,
   useWindowDimensions,
   View as View2
 } from "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
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PRESENT_GRACE_MS = 3e3;
 function animateSheet(value, toValue, onDone) {
   const animation = Platform.OS === "android" ? Animated.timing(value, {
     toValue,
@@ -912,6 +949,8 @@ function VisibleFrameSlotSheet({
   const sheetHeight = Math.round(height * 0.9);
   const translateY = useRef2(new Animated.Value(sheetHeight)).current;
   const [frameReady, setFrameReady] = useState(false);
+  const [presented, setPresented] = useState(false);
+  const phaseRef = useRef2("hidden");
   const onCloseRef = useRef2(onClose);
   onCloseRef.current = onClose;
   const closingRef = useRef2(false);
@@ -919,29 +958,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 = useMemo(
+    () => 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 = 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]
+  );
   useEffect2(() => {
-    animateSheet(translateY, 0);
-  }, [translateY]);
+    const timer = setTimeout(() => dispatch("grace"), PRESENT_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, [dispatch]);
   useEffect2(() => {
     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__ */ jsx2(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: close, children: /* @__PURE__ */ jsxs(View2, { style: styles.root, children: [
+  return /* @__PURE__ */ jsx2(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: close, children: /* @__PURE__ */ jsxs(View2, { style: styles.root, pointerEvents: presented ? "auto" : "none", children: [
     /* @__PURE__ */ jsx2(Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ jsx2(
       Pressable,
       {
@@ -954,17 +1044,16 @@ function VisibleFrameSlotSheet({
     /* @__PURE__ */ jsxs(Animated.View, { style: [styles.sheet, { height: sheetHeight, transform: [{ translateY }] }], children: [
       /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport }),
       !frameReady && /* @__PURE__ */ jsx2(View2, { style: styles.loading, children: /* @__PURE__ */ jsx2(ActivityIndicator, { size: "large", color: "#000" }) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx2(View2, { style: styles.handleArea, ...panResponder.panHandlers, children: /* @__PURE__ */ jsx2(
         Pressable,
         {
           onPress: close,
           accessibilityRole: "button",
           accessibilityLabel: "Close",
-          hitSlop: 8,
-          style: styles.closeButton,
-          children: /* @__PURE__ */ jsx2(Text, { style: styles.closeButtonText, children: "\u2715" })
+          hitSlop: 12,
+          children: /* @__PURE__ */ jsx2(View2, { style: styles.handleBar })
         }
-      )
+      ) })
     ] })
   ] }) });
 }
@@ -994,25 +1083,25 @@ var styles = 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)"
   }
 });
 
@@ -1023,6 +1112,7 @@ function MoonPayProvider({
   sessionToken,
   apiBaseUrl,
   frameBaseUrl,
+  theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = useState2([]);
@@ -1041,14 +1131,14 @@ function MoonPayProvider({
     });
   }
   const core = coreRef.current;
-  const client = useMemo(() => {
-    const specCtx = { sessionToken, core, frameBaseUrl };
+  const client = useMemo2(() => {
+    const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
       mountSession: createMountSession(specCtx, { addSlot, removeSlot }),
       core
     });
-  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot]);
-  return /* @__PURE__ */ jsxs2(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl }, children: [
+  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot, theme?.appearance]);
+  return /* @__PURE__ */ jsxs2(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl, theme }, children: [
     children,
     frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ jsx3(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
     frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ jsx3(
@@ -1093,7 +1183,7 @@ function MoonPayFrameView({
   defaultStyle,
   onEvent
 }) {
-  const { sessionToken, core, frameBaseUrl } = useMoonPayContext();
+  const { sessionToken, core, frameBaseUrl, theme } = useMoonPayContext();
   const [transport, setTransport] = useState3(null);
   const handleRef = useRef4(null);
   const onEventRef = useRef4(onEvent);
@@ -1119,7 +1209,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")