@moonpay/platform-sdk-react-native 1.0.3 → 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) => {
@@ -416,7 +418,7 @@ var connectionResetSpec = {
 };
 
 // src/frame-view.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native3 = require("react-native");
 
 // src/frame-component.tsx
@@ -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;
@@ -617,8 +620,7 @@ function createFrameSession(spec, ctx, props, overrides = {}) {
 
 // src/provider.tsx
 var import_platform_sdk_core3 = require("@moonpay/platform-sdk-core");
-var import_react2 = require("react");
-var import_react_native2 = require("react-native");
+var import_react3 = require("react");
 
 // src/methods/add-card.ts
 var import_result = require("@moonpay/platform-protocol/result");
@@ -907,23 +909,189 @@ function createMountSession(specCtx, host) {
   };
 }
 
-// src/provider.tsx
+// src/VisibleFrameSlotSheet.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var MoonPayContext = (0, import_react2.createContext)(null);
+function animateSheet(value, toValue, onDone) {
+  const animation = import_react_native2.Platform.OS === "android" ? import_react_native2.Animated.timing(value, {
+    toValue,
+    duration: 250,
+    easing: import_react_native2.Easing.out(import_react_native2.Easing.exp),
+    useNativeDriver: true
+  }) : import_react_native2.Animated.spring(value, {
+    toValue,
+    damping: 500,
+    stiffness: 1e3,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+    useNativeDriver: true
+  });
+  animation.start(onDone);
+}
+function VisibleFrameSlotSheet({
+  slot,
+  onClose
+}) {
+  const { height } = (0, import_react_native2.useWindowDimensions)();
+  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 onCloseRef = (0, import_react2.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const closingRef = (0, import_react2.useRef)(false);
+  const close = (0, import_react2.useCallback)(() => {
+    if (closingRef.current)
+      return;
+    closingRef.current = true;
+    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]
+  );
+  (0, import_react2.useEffect)(() => {
+    animateSheet(translateY, 0);
+  }, [translateY]);
+  (0, import_react2.useEffect)(() => {
+    const unsubscribe = slot.transport.onMessage((msg) => {
+      if (msg.kind === "ready")
+        setFrameReady(true);
+      else if (msg.kind === "complete" || msg.kind === "error")
+        close();
+    });
+    return unsubscribe;
+  }, [slot.transport, close]);
+  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: [
+    /* @__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,
+      {
+        style: import_react_native2.StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        onPress: close
+      }
+    ) }),
+    /* @__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)(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: 12,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.handleBar })
+        }
+      ) })
+    ] })
+  ] }) });
+}
+var styles = import_react_native2.StyleSheet.create({
+  root: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  // Dimmed backdrop covering the whole screen; fades with the sheet position.
+  backdrop: {
+    ...import_react_native2.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  // Bottom sheet: ~90% of the screen (height applied inline), rounded top
+  // corners. The 10% gap keeps the frame clear of the status bar / notch
+  // without depending on react-native-safe-area-context.
+  sheet: {
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden"
+  },
+  // Opaque cover with a centered spinner, shown until the frame is ready.
+  loading: {
+    ...import_react_native2.StyleSheet.absoluteFillObject,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // 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: 0,
+    left: 0,
+    right: 0,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    elevation: 2
+  },
+  // The visible pill.
+  handleBar: {
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "rgba(0, 0, 0, 0.2)"
+  }
+});
+
+// src/provider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MoonPayContext = (0, import_react3.createContext)(null);
 function MoonPayProvider({
   sessionToken,
   apiBaseUrl,
   frameBaseUrl,
+  theme,
   children
 }) {
-  const [frameSlots, setFrameSlots] = (0, import_react2.useState)([]);
-  const addSlot = (0, import_react2.useCallback)((slot) => {
+  const [frameSlots, setFrameSlots] = (0, import_react3.useState)([]);
+  const addSlot = (0, import_react3.useCallback)((slot) => {
     setFrameSlots((prev) => [...prev, slot]);
   }, []);
-  const removeSlot = (0, import_react2.useCallback)((id) => {
+  const removeSlot = (0, import_react3.useCallback)((id) => {
     setFrameSlots((prev) => prev.filter((s) => s.id !== id));
   }, []);
-  const coreRef = (0, import_react2.useRef)(null);
+  const coreRef = (0, import_react3.useRef)(null);
   if (!coreRef.current) {
     coreRef.current = (0, import_platform_sdk_core3.createClientCore)({
       apiBaseUrl,
@@ -932,33 +1100,31 @@ function MoonPayProvider({
     });
   }
   const core = coreRef.current;
-  const client = (0, import_react2.useMemo)(() => {
-    const specCtx = { sessionToken, core, frameBaseUrl };
+  const client = (0, import_react3.useMemo)(() => {
+    const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
       mountSession: createMountSession(specCtx, { addSlot, removeSlot }),
       core
     });
-  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
-    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native2.Modal,
+    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)(
+      VisibleFrameSlotSheet,
       {
-        visible: true,
-        animationType: "slide",
-        onRequestClose: () => {
+        slot,
+        onClose: () => {
           slot.dispose();
           removeSlot(slot.id);
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoonPayFrame, { transport: slot.transport })
+        }
       },
       slot.id
     ))
   ] });
 }
 function useMoonPayContext() {
-  const ctx = (0, import_react2.useContext)(MoonPayContext);
+  const ctx = (0, import_react3.useContext)(MoonPayContext);
   if (!ctx) {
     throw new Error("useMoonPay must be used within a <MoonPayProvider>");
   }
@@ -969,7 +1135,7 @@ function useMoonPay() {
 }
 
 // src/frame-view.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function applyReactiveProps(spec, keys, props, applied, handle) {
   for (const key of keys) {
     const next = props[key];
@@ -986,12 +1152,12 @@ function MoonPayFrameView({
   defaultStyle,
   onEvent
 }) {
-  const { sessionToken, core, frameBaseUrl } = useMoonPayContext();
-  const [transport, setTransport] = (0, import_react3.useState)(null);
-  const handleRef = (0, import_react3.useRef)(null);
-  const onEventRef = (0, import_react3.useRef)(onEvent);
+  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);
   onEventRef.current = onEvent;
-  const propsRef = (0, import_react3.useRef)(props);
+  const propsRef = (0, import_react4.useRef)(props);
   propsRef.current = props;
   const reactiveKeys = Object.keys(spec.reactiveProps ?? {});
   const mountProps = {};
@@ -1002,8 +1168,8 @@ function MoonPayFrameView({
   }
   const mountKey = JSON.stringify(mountProps);
   const liveKey = JSON.stringify(liveProps);
-  const appliedRef = (0, import_react3.useRef)({});
-  (0, import_react3.useEffect)(() => {
+  const appliedRef = (0, import_react4.useRef)({});
+  (0, import_react4.useEffect)(() => {
     let disposed = false;
     let session;
     const applied = {};
@@ -1012,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")
@@ -1042,23 +1212,23 @@ function MoonPayFrameView({
       setTransport(null);
     };
   }, [mountKey, spec, sessionToken, core, frameBaseUrl]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handle = handleRef.current;
     if (!handle)
       return;
     applyReactiveProps(spec, reactiveKeys, propsRef.current, appliedRef.current, handle);
   }, [liveKey]);
   if (spec.hidden) {
-    return transport ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport, hidden: true }) : null;
+    return transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport, hidden: true }) : null;
   }
   const resolvedStyle = { ...defaultStyle, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: resolvedStyle, children: transport ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport }) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: resolvedStyle, children: transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport }) : null });
 }
 
 // src/components/add-card.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function MoonPayAddCard({ onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     MoonPayFrameView,
     {
       spec: addCardSpec,
@@ -1071,13 +1241,13 @@ function MoonPayAddCard({ onEvent, style }) {
 }
 
 // src/components/apple-pay-button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MoonPayApplePayButton({
   quote,
   onEvent,
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     MoonPayFrameView,
     {
       spec: applePaySpec,
@@ -1090,9 +1260,9 @@ function MoonPayApplePayButton({
 }
 
 // src/components/auth.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function MoonPayAuth({ onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MoonPayFrameView,
     {
       spec: authSpec,
@@ -1105,9 +1275,9 @@ function MoonPayAuth({ onEvent, style }) {
 }
 
 // src/components/buy-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function MoonPayBuyButton({ quote, onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     MoonPayFrameView,
     {
       spec: buyButtonSpec,
@@ -1120,13 +1290,13 @@ function MoonPayBuyButton({ quote, onEvent, style }) {
 }
 
 // src/components/buy-frame.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function MoonPayBuyFrame({
   quote,
   externalTransactionId,
   onEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     MoonPayFrameView,
     {
       spec: buySpec,
@@ -1138,9 +1308,9 @@ function MoonPayBuyFrame({
 }
 
 // src/components/challenge.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function MoonPayChallenge({ url, onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MoonPayFrameView,
     {
       spec: challengeSpec,
@@ -1153,9 +1323,9 @@ function MoonPayChallenge({ url, onEvent, style }) {
 }
 
 // src/components/connect.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function MoonPayConnect({ theme, onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     MoonPayFrameView,
     {
       spec: connectSpec,
@@ -1168,12 +1338,12 @@ function MoonPayConnect({ theme, onEvent, style }) {
 }
 
 // src/components/connection-check.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function MoonPayConnectionCheck({
   skipKyc,
   onEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     MoonPayFrameView,
     {
       spec: connectionCheckSpec,
@@ -1185,20 +1355,20 @@ function MoonPayConnectionCheck({
 }
 
 // src/components/connection-reset.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function MoonPayConnectionReset({ onEvent }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
 }
 
 // src/components/google-pay-button.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function MoonPayGooglePayButton({
   quote,
   externalTransactionId,
   onEvent,
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     MoonPayFrameView,
     {
       spec: googlePaySpec,
@@ -1211,9 +1381,9 @@ function MoonPayGooglePayButton({
 }
 
 // src/components/widget.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function MoonPayWidget({ quote, onEvent, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MoonPayFrameView,
     {
       spec: widgetSpec,