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

package/dist/index.js

@@ -370,8 +370,8 @@ var connectionResetSpec = {
 };
 
 // src/frame-view.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
-import { View as View2 } from "react-native";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { View as View3 } from "react-native";
 
 // src/frame-component.tsx
 import { useEffect, useRef } from "react";
@@ -450,11 +450,7 @@ var WebViewTransport = class {
     if (!this.webViewRef?.current) {
       throw new Error("Cannot send message: WebView not attached");
     }
-    const js = `
-      window.postMessage(${JSON.stringify(JSON.stringify(message))}, '*');
-      true;
-    `;
-    this.webViewRef.current.injectJavaScript(js);
+    this.webViewRef.current.postMessage(JSON.stringify(message));
   }
   onMessage(handler) {
     this.handlers.push(handler);
@@ -581,13 +577,12 @@ function createFrameSession(spec, ctx, props, overrides = {}) {
 import { createClientCore } from "@moonpay/platform-sdk-core";
 import {
   createContext,
-  useCallback,
+  useCallback as useCallback2,
   useContext,
   useMemo,
-  useRef as useRef2,
-  useState
+  useRef as useRef3,
+  useState as useState2
 } from "react";
-import { Modal } from "react-native";
 
 // src/methods/add-card.ts
 import { err, ok } from "@moonpay/platform-protocol/result";
@@ -876,8 +871,153 @@ function createMountSession(specCtx, host) {
   };
 }
 
-// src/provider.tsx
+// src/VisibleFrameSlotSheet.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View as View2
+} from "react-native";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function animateSheet(value, toValue, onDone) {
+  const animation = Platform.OS === "android" ? Animated.timing(value, {
+    toValue,
+    duration: 250,
+    easing: Easing.out(Easing.exp),
+    useNativeDriver: true
+  }) : 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 } = useWindowDimensions();
+  const sheetHeight = Math.round(height * 0.9);
+  const translateY = useRef2(new Animated.Value(sheetHeight)).current;
+  const [frameReady, setFrameReady] = useState(false);
+  const onCloseRef = useRef2(onClose);
+  onCloseRef.current = onClose;
+  const closingRef = useRef2(false);
+  const close = useCallback(() => {
+    if (closingRef.current)
+      return;
+    closingRef.current = true;
+    animateSheet(translateY, sheetHeight, ({ finished }) => {
+      if (finished)
+        onCloseRef.current();
+    });
+  }, [translateY, sheetHeight]);
+  useEffect2(() => {
+    animateSheet(translateY, 0);
+  }, [translateY]);
+  useEffect2(() => {
+    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__ */ jsx2(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: close, children: /* @__PURE__ */ jsxs(View2, { style: styles.root, children: [
+    /* @__PURE__ */ jsx2(Animated.View, { style: [styles.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ jsx2(
+      Pressable,
+      {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        onPress: close
+      }
+    ) }),
+    /* @__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(
+        Pressable,
+        {
+          onPress: close,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          hitSlop: 8,
+          style: styles.closeButton,
+          children: /* @__PURE__ */ jsx2(Text, { style: styles.closeButtonText, children: "\u2715" })
+        }
+      )
+    ] })
+  ] }) });
+}
+var styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  // Dimmed backdrop covering the whole screen; fades with the sheet position.
+  backdrop: {
+    ...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: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Floating X in the top-right corner, over the frame.
+  closeButton: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.06)",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    elevation: 2
+  },
+  closeButtonText: {
+    fontSize: 17,
+    lineHeight: 20,
+    color: "#000",
+    fontWeight: "500"
+  }
+});
+
+// src/provider.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MoonPayContext = createContext(null);
 function MoonPayProvider({
   sessionToken,
@@ -885,14 +1025,14 @@ function MoonPayProvider({
   frameBaseUrl,
   children
 }) {
-  const [frameSlots, setFrameSlots] = useState([]);
-  const addSlot = useCallback((slot) => {
+  const [frameSlots, setFrameSlots] = useState2([]);
+  const addSlot = useCallback2((slot) => {
     setFrameSlots((prev) => [...prev, slot]);
   }, []);
-  const removeSlot = useCallback((id) => {
+  const removeSlot = useCallback2((id) => {
     setFrameSlots((prev) => prev.filter((s) => s.id !== id));
   }, []);
-  const coreRef = useRef2(null);
+  const coreRef = useRef3(null);
   if (!coreRef.current) {
     coreRef.current = createClientCore({
       apiBaseUrl,
@@ -908,19 +1048,17 @@ function MoonPayProvider({
       core
     });
   }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot]);
-  return /* @__PURE__ */ jsxs(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl }, children: [
+  return /* @__PURE__ */ jsxs2(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl }, children: [
     children,
-    frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
-    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ jsx2(
-      Modal,
+    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(
+      VisibleFrameSlotSheet,
       {
-        visible: true,
-        animationType: "slide",
-        onRequestClose: () => {
+        slot,
+        onClose: () => {
           slot.dispose();
           removeSlot(slot.id);
-        },
-        children: /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport })
+        }
       },
       slot.id
     ))
@@ -938,7 +1076,7 @@ function useMoonPay() {
 }
 
 // src/frame-view.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function applyReactiveProps(spec, keys, props, applied, handle) {
   for (const key of keys) {
     const next = props[key];
@@ -956,11 +1094,11 @@ function MoonPayFrameView({
   onEvent
 }) {
   const { sessionToken, core, frameBaseUrl } = useMoonPayContext();
-  const [transport, setTransport] = useState2(null);
-  const handleRef = useRef3(null);
-  const onEventRef = useRef3(onEvent);
+  const [transport, setTransport] = useState3(null);
+  const handleRef = useRef4(null);
+  const onEventRef = useRef4(onEvent);
   onEventRef.current = onEvent;
-  const propsRef = useRef3(props);
+  const propsRef = useRef4(props);
   propsRef.current = props;
   const reactiveKeys = Object.keys(spec.reactiveProps ?? {});
   const mountProps = {};
@@ -971,8 +1109,8 @@ function MoonPayFrameView({
   }
   const mountKey = JSON.stringify(mountProps);
   const liveKey = JSON.stringify(liveProps);
-  const appliedRef = useRef3({});
-  useEffect2(() => {
+  const appliedRef = useRef4({});
+  useEffect3(() => {
     let disposed = false;
     let session;
     const applied = {};
@@ -1011,23 +1149,23 @@ function MoonPayFrameView({
       setTransport(null);
     };
   }, [mountKey, spec, sessionToken, core, frameBaseUrl]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handle = handleRef.current;
     if (!handle)
       return;
     applyReactiveProps(spec, reactiveKeys, propsRef.current, appliedRef.current, handle);
   }, [liveKey]);
   if (spec.hidden) {
-    return transport ? /* @__PURE__ */ jsx3(MoonPayFrame, { transport, hidden: true }) : null;
+    return transport ? /* @__PURE__ */ jsx4(MoonPayFrame, { transport, hidden: true }) : null;
   }
   const resolvedStyle = { ...defaultStyle, ...style };
-  return /* @__PURE__ */ jsx3(View2, { style: resolvedStyle, children: transport ? /* @__PURE__ */ jsx3(MoonPayFrame, { transport }) : null });
+  return /* @__PURE__ */ jsx4(View3, { style: resolvedStyle, children: transport ? /* @__PURE__ */ jsx4(MoonPayFrame, { transport }) : null });
 }
 
 // src/components/add-card.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function MoonPayAddCard({ onEvent, style }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     MoonPayFrameView,
     {
       spec: addCardSpec,
@@ -1040,13 +1178,13 @@ function MoonPayAddCard({ onEvent, style }) {
 }
 
 // src/components/apple-pay-button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function MoonPayApplePayButton({
   quote,
   onEvent,
   style
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     MoonPayFrameView,
     {
       spec: applePaySpec,
@@ -1059,9 +1197,9 @@ function MoonPayApplePayButton({
 }
 
 // src/components/auth.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function MoonPayAuth({ onEvent, style }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     MoonPayFrameView,
     {
       spec: authSpec,
@@ -1074,9 +1212,9 @@ function MoonPayAuth({ onEvent, style }) {
 }
 
 // src/components/buy-button.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function MoonPayBuyButton({ quote, onEvent, style }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     MoonPayFrameView,
     {
       spec: buyButtonSpec,
@@ -1089,13 +1227,13 @@ function MoonPayBuyButton({ quote, onEvent, style }) {
 }
 
 // src/components/buy-frame.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function MoonPayBuyFrame({
   quote,
   externalTransactionId,
   onEvent
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     MoonPayFrameView,
     {
       spec: buySpec,
@@ -1107,9 +1245,9 @@ function MoonPayBuyFrame({
 }
 
 // src/components/challenge.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function MoonPayChallenge({ url, onEvent, style }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     MoonPayFrameView,
     {
       spec: challengeSpec,
@@ -1122,9 +1260,9 @@ function MoonPayChallenge({ url, onEvent, style }) {
 }
 
 // src/components/connect.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function MoonPayConnect({ theme, onEvent, style }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     MoonPayFrameView,
     {
       spec: connectSpec,
@@ -1137,12 +1275,12 @@ function MoonPayConnect({ theme, onEvent, style }) {
 }
 
 // src/components/connection-check.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function MoonPayConnectionCheck({
   skipKyc,
   onEvent
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     MoonPayFrameView,
     {
       spec: connectionCheckSpec,
@@ -1154,20 +1292,20 @@ function MoonPayConnectionCheck({
 }
 
 // src/components/connection-reset.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function MoonPayConnectionReset({ onEvent }) {
-  return /* @__PURE__ */ jsx12(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
+  return /* @__PURE__ */ jsx13(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
 }
 
 // src/components/google-pay-button.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function MoonPayGooglePayButton({
   quote,
   externalTransactionId,
   onEvent,
   style
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     MoonPayFrameView,
     {
       spec: googlePaySpec,
@@ -1180,9 +1318,9 @@ function MoonPayGooglePayButton({
 }
 
 // src/components/widget.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function MoonPayWidget({ quote, onEvent, style }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     MoonPayFrameView,
     {
       spec: widgetSpec,