@moonpay/platform-sdk-react-native 0.0.0 → 0.2.1

package/dist/index.js

@@ -0,0 +1,702 @@
+// src/frame-component.tsx
+import { useEffect, useRef } from "react";
+import { View } from "react-native";
+import WebView from "react-native-webview";
+import { jsx } from "react/jsx-runtime";
+function MoonPayFrame({ transport, hidden, style }) {
+  const webViewRef = useRef(null);
+  useEffect(() => {
+    transport.attachWebView(webViewRef);
+    return () => {
+    };
+  }, [transport]);
+  const url = transport.url;
+  if (!url)
+    return null;
+  const handleMessage = (event) => {
+    transport.handleWebViewMessage(event.nativeEvent.data);
+  };
+  const containerStyle = hidden ? { width: 0, height: 0, overflow: "hidden" } : { flex: 1, ...style };
+  return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(
+    WebView,
+    {
+      ref: webViewRef,
+      source: { uri: url },
+      onMessage: handleMessage,
+      allowsInlineMediaPlayback: true,
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      style: { flex: 1 }
+    }
+  ) });
+}
+
+// src/provider.tsx
+import {
+  ConnectionStatus,
+  err,
+  ok
+} from "@moonpay/platform-protocol";
+import {
+  buildFrameUrl,
+  createClientCore,
+  createFrameOrchestrator,
+  decryptCredentials,
+  FRAME_PATHS,
+  generateKeyPair
+} from "@moonpay/platform-sdk-core";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/webview-transport.ts
+var WebViewTransport = class {
+  webViewRef = null;
+  handlers = [];
+  _url = "";
+  _options = null;
+  /** Called by the frame component when it mounts the WebView. */
+  attachWebView(ref) {
+    this.webViewRef = ref;
+  }
+  /** Called by the WebView's onMessage prop to route incoming messages. */
+  handleWebViewMessage(data) {
+    try {
+      const msg = JSON.parse(data);
+      if (!msg.kind)
+        return;
+      for (const handler of this.handlers) {
+        handler(msg);
+      }
+    } catch {
+    }
+  }
+  get url() {
+    return this._url;
+  }
+  get options() {
+    return this._options;
+  }
+  // FrameTransport interface
+  create(url, options) {
+    this._url = url;
+    this._options = options;
+  }
+  sendMessage(message) {
+    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);
+  }
+  onMessage(handler) {
+    this.handlers.push(handler);
+    return () => {
+      const idx = this.handlers.indexOf(handler);
+      if (idx >= 0)
+        this.handlers.splice(idx, 1);
+    };
+  }
+  dispose() {
+    this.handlers.length = 0;
+    this.webViewRef = null;
+    this._url = "";
+    this._options = null;
+  }
+};
+
+// src/provider.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MoonPayContext = createContext(null);
+var slotCounter = 0;
+function MoonPayProvider({
+  sessionToken,
+  apiBaseUrl,
+  frameBaseUrl,
+  children
+}) {
+  const [frameSlots, setFrameSlots] = useState([]);
+  const addSlot = useCallback((slot) => {
+    setFrameSlots((prev) => [...prev, slot]);
+  }, []);
+  const removeSlot = useCallback((id) => {
+    setFrameSlots((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const coreRef = useRef2(null);
+  if (!coreRef.current) {
+    coreRef.current = createClientCore({
+      apiBaseUrl,
+      frameBaseUrl,
+      createTransport: () => new WebViewTransport()
+    });
+  }
+  const core = coreRef.current;
+  const client = useMemo(() => {
+    function createManagedFrame(opts) {
+      const transport = new WebViewTransport();
+      const slotId = `slot-${++slotCounter}`;
+      const promise = new Promise((resolve, reject) => {
+        transport.create(opts.url, { container: null, hidden: opts.hidden });
+        addSlot({ id: slotId, transport, hidden: opts.hidden });
+        createFrameOrchestrator({
+          transport,
+          channelId: opts.channelId,
+          url: opts.url,
+          container: null,
+          hidden: opts.hidden,
+          handshakeTimeout: opts.handshakeTimeout ?? 15e3
+        }).then((handle) => resolve({ handle, slotId })).catch((e) => {
+          removeSlot(slotId);
+          reject(e);
+        });
+      });
+      return { promise, transport };
+    }
+    async function getConnection() {
+      const { privateKey, publicKey } = generateKeyPair();
+      const channelId = `check-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.checkConnection,
+        { sessionToken, channelId, publicKey },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({
+          url,
+          channelId,
+          hidden: true,
+          handshakeTimeout: 1e4
+        });
+        const { handle, slotId } = await promise;
+        return new Promise((resolve) => {
+          const timeout = setTimeout(() => {
+            handle.dispose();
+            removeSlot(slotId);
+            resolve(err({ message: "Get connection timed out" }));
+          }, 1e4);
+          handle.onMessage((msg) => {
+            if (msg.kind === "error") {
+              clearTimeout(timeout);
+              handle.dispose();
+              removeSlot(slotId);
+              const payload = msg.payload;
+              resolve(err({ message: payload.message }));
+              return;
+            }
+            if (msg.kind === "complete") {
+              clearTimeout(timeout);
+              handle.dispose();
+              removeSlot(slotId);
+              const connection = msg.payload;
+              if (connection.status === ConnectionStatus.active) {
+                const creds = decryptCredentials(connection.credentials, privateKey);
+                core.context.setAccessToken(creds.accessToken);
+                core.context.setClientToken(creds.clientToken);
+              }
+              resolve(ok(connection));
+            }
+          });
+        });
+      } catch (e) {
+        return err({
+          message: e instanceof Error ? e.message : "Failed to check connection"
+        });
+      }
+    }
+    async function connect(opts) {
+      const { privateKey, publicKey } = generateKeyPair();
+      const channelId = `connect-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.connect,
+        {
+          sessionToken,
+          channelId,
+          publicKey,
+          ...opts.theme?.appearance && { appearance: opts.theme.appearance }
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        return new Promise((resolve) => {
+          handle.onMessage((msg) => {
+            if (msg.kind === "ready") {
+              opts.onEvent?.({ kind: "ready" });
+              return;
+            }
+            if (msg.kind === "error") {
+              const payload = msg.payload;
+              opts.onEvent?.({ kind: "error", payload });
+              handle.dispose();
+              removeSlot(slotId);
+              resolve(err({ message: "Connection error" }));
+              return;
+            }
+            if (msg.kind === "complete") {
+              const connection = msg.payload;
+              if (connection.status === ConnectionStatus.active) {
+                const creds = decryptCredentials(connection.credentials, privateKey);
+                core.context.setAccessToken(creds.accessToken);
+                core.context.setClientToken(creds.clientToken);
+              }
+              opts.onEvent?.({ kind: "complete", payload: connection });
+              resolve(
+                ok({
+                  dispose: () => {
+                    handle.dispose();
+                    removeSlot(slotId);
+                  }
+                })
+              );
+            }
+          });
+        });
+      } catch (e) {
+        return err({
+          message: e instanceof Error ? e.message : "Connect failed"
+        });
+      }
+    }
+    async function setupWidget(opts) {
+      const channelId = `widget-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.widget,
+        {
+          flow: "buy",
+          clientToken: core.context.clientToken,
+          quoteSignature: opts.quote,
+          channelId
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "ready":
+              opts.onEvent?.({ kind: "ready" });
+              break;
+            case "transactionCreated":
+              opts.onEvent?.({
+                kind: "transactionCreated",
+                payload: msg.payload
+              });
+              break;
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "error": {
+              const payload = msg.payload;
+              opts.onEvent?.({
+                kind: "error",
+                payload: { code: payload.code, message: payload.message }
+              });
+              break;
+            }
+            case "close":
+              opts.onEvent?.({ kind: "close" });
+              break;
+          }
+        });
+        return ok({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Widget setup failed"
+        });
+      }
+    }
+    async function setupApplePay(opts) {
+      const channelId = `applepay-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.applePay,
+        {
+          clientToken: core.context.clientToken,
+          signature: opts.quote,
+          channelId
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        const setQuote = (signature) => {
+          handle.sendMessage({
+            version: 2,
+            meta: { channelId },
+            kind: "setQuote",
+            payload: { quote: { signature } }
+          });
+        };
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "ready":
+              opts.onEvent?.({ kind: "ready" });
+              break;
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "error": {
+              const payload = msg.payload;
+              if (payload.code === "quoteExpired") {
+                opts.onEvent?.({ kind: "quoteExpired", payload: { setQuote } });
+              } else if (payload.code === "applePayUnavailable") {
+                opts.onEvent?.({ kind: "unsupported" });
+              } else {
+                const kind = payload.code === "generic" ? "genericError" : payload.code;
+                opts.onEvent?.({
+                  kind: "error",
+                  payload: { kind, message: payload.message }
+                });
+              }
+              break;
+            }
+          }
+        });
+        return ok({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Apple Pay setup failed"
+        });
+      }
+    }
+    async function setupBuy(opts) {
+      const channelId = `buy-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.buy,
+        {
+          channelId,
+          clientToken: core.context.clientToken,
+          signature: opts.quote,
+          ...opts.externalTransactionId && { externalTransactionId: opts.externalTransactionId }
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: true });
+        const { handle, slotId } = await promise;
+        const setQuote = (signature) => {
+          handle.sendMessage({
+            version: 2,
+            meta: { channelId },
+            kind: "setQuote",
+            payload: { quote: { signature } }
+          });
+        };
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "ready":
+              opts.onEvent?.({ kind: "ready" });
+              break;
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "challenge":
+              opts.onEvent?.({
+                kind: "challenge",
+                payload: msg.payload
+              });
+              break;
+            case "error":
+              opts.onEvent?.({
+                kind: "error",
+                payload: msg.payload
+              });
+              break;
+          }
+        });
+        return ok({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Buy setup failed"
+        });
+      }
+    }
+    async function setupBuyButton(opts) {
+      const channelId = `buy-button-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.buyButton,
+        {
+          channelId,
+          clientToken: core.context.clientToken,
+          signature: opts.quote
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        const setQuote = (signature) => {
+          handle.sendMessage({
+            version: 2,
+            meta: { channelId },
+            kind: "setQuote",
+            payload: { quote: { signature } }
+          });
+        };
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "challenge":
+              opts.onEvent?.({
+                kind: "challenge",
+                payload: msg.payload
+              });
+              break;
+            case "error":
+              opts.onEvent?.({
+                kind: "error",
+                payload: msg.payload
+              });
+              break;
+          }
+        });
+        return ok({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Buy button setup failed"
+        });
+      }
+    }
+    async function setupGooglePay(opts) {
+      const channelId = `googlepay-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.googlePay,
+        {
+          clientToken: core.context.clientToken,
+          signature: opts.quote,
+          channelId,
+          ...opts.externalTransactionId && { externalTransactionId: opts.externalTransactionId }
+        },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        const setQuote = (signature) => {
+          handle.sendMessage({
+            version: 2,
+            meta: { channelId },
+            kind: "setQuote",
+            payload: { quote: { signature } }
+          });
+        };
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "ready":
+              opts.onEvent?.({ kind: "ready" });
+              break;
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "challenge":
+              opts.onEvent?.({
+                kind: "challenge",
+                payload: msg.payload
+              });
+              break;
+            case "error": {
+              const payload = msg.payload;
+              if (payload.code === "quoteExpired") {
+                opts.onEvent?.({ kind: "quoteExpired", payload: { setQuote } });
+              } else if (payload.code === "googlePayUnavailable") {
+                opts.onEvent?.({ kind: "unsupported" });
+              } else {
+                const kind = payload.code === "generic" ? "genericError" : payload.code;
+                opts.onEvent?.({
+                  kind: "error",
+                  payload: { kind, message: payload.message }
+                });
+              }
+              break;
+            }
+          }
+        });
+        return ok({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Google Pay setup failed"
+        });
+      }
+    }
+    async function setupChallenge(opts) {
+      let channelId;
+      try {
+        channelId = new URL(opts.url).searchParams.get("channelId") ?? "";
+        if (!channelId)
+          throw new Error("missing channelId");
+      } catch {
+        return err({ kind: "configurationError", message: "Challenge URL is missing channelId" });
+      }
+      try {
+        const { promise } = createManagedFrame({ url: opts.url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "ready":
+              opts.onEvent?.({ kind: "ready" });
+              break;
+            case "complete":
+              opts.onEvent?.({
+                kind: "complete",
+                payload: msg.payload
+              });
+              break;
+            case "cancelled":
+              opts.onEvent?.({
+                kind: "cancelled",
+                payload: msg.payload
+              });
+              break;
+            case "error":
+              opts.onEvent?.({
+                kind: "error",
+                payload: msg.payload
+              });
+              break;
+          }
+        });
+        return ok({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Challenge setup failed"
+        });
+      }
+    }
+    async function setupAddCard(opts) {
+      const channelId = `add-card-${Date.now()}`;
+      const url = buildFrameUrl(
+        FRAME_PATHS.addCard,
+        { channelId, clientToken: core.context.clientToken },
+        { frameBaseUrl }
+      );
+      try {
+        const { promise } = createManagedFrame({ url, channelId, hidden: false });
+        const { handle, slotId } = await promise;
+        handle.onMessage((msg) => {
+          switch (msg.kind) {
+            case "complete":
+              opts.onEvent?.({ kind: "complete", payload: msg.payload });
+              break;
+            case "error":
+              opts.onEvent?.({
+                kind: "error",
+                payload: msg.payload
+              });
+              break;
+          }
+        });
+        return ok({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return err({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Add card setup failed"
+        });
+      }
+    }
+    return {
+      getConnection,
+      connect,
+      getPaymentMethods: () => core.getPaymentMethods(),
+      getQuote: (params) => core.getQuote(params),
+      listTransactions: (params) => core.listTransactions(params),
+      getTransaction: (id) => core.getTransaction(id),
+      setupWidget,
+      setupApplePay,
+      setupBuy,
+      setupBuyButton,
+      setupGooglePay,
+      setupChallenge,
+      setupAddCard
+    };
+  }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot]);
+  return /* @__PURE__ */ jsxs(MoonPayContext.Provider, { value: { client }, children: [
+    children,
+    frameSlots.map((slot) => /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport, hidden: slot.hidden }, slot.id))
+  ] });
+}
+function useMoonPay() {
+  const ctx = useContext(MoonPayContext);
+  if (!ctx) {
+    throw new Error("useMoonPay must be used within a <MoonPayProvider>");
+  }
+  return ctx;
+}
+export {
+  MoonPayFrame,
+  MoonPayProvider,
+  WebViewTransport,
+  useMoonPay
+};
+//# sourceMappingURL=index.js.map