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

package/dist/index.cjs

@@ -0,0 +1,724 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MoonPayFrame: () => MoonPayFrame,
+  MoonPayProvider: () => MoonPayProvider,
+  WebViewTransport: () => WebViewTransport,
+  useMoonPay: () => useMoonPay
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/frame-component.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_webview = __toESM(require("react-native-webview"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function MoonPayFrame({ transport, hidden, style }) {
+  const webViewRef = (0, import_react.useRef)(null);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native_webview.default,
+    {
+      ref: webViewRef,
+      source: { uri: url },
+      onMessage: handleMessage,
+      allowsInlineMediaPlayback: true,
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      style: { flex: 1 }
+    }
+  ) });
+}
+
+// src/provider.tsx
+var import_platform_protocol = require("@moonpay/platform-protocol");
+var import_platform_sdk_core = require("@moonpay/platform-sdk-core");
+var import_react2 = require("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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MoonPayContext = (0, import_react2.createContext)(null);
+var slotCounter = 0;
+function MoonPayProvider({
+  sessionToken,
+  apiBaseUrl,
+  frameBaseUrl,
+  children
+}) {
+  const [frameSlots, setFrameSlots] = (0, import_react2.useState)([]);
+  const addSlot = (0, import_react2.useCallback)((slot) => {
+    setFrameSlots((prev) => [...prev, slot]);
+  }, []);
+  const removeSlot = (0, import_react2.useCallback)((id) => {
+    setFrameSlots((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const coreRef = (0, import_react2.useRef)(null);
+  if (!coreRef.current) {
+    coreRef.current = (0, import_platform_sdk_core.createClientCore)({
+      apiBaseUrl,
+      frameBaseUrl,
+      createTransport: () => new WebViewTransport()
+    });
+  }
+  const core = coreRef.current;
+  const client = (0, import_react2.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 });
+        (0, import_platform_sdk_core.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 } = (0, import_platform_sdk_core.generateKeyPair)();
+      const channelId = `check-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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((0, import_platform_protocol.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((0, import_platform_protocol.err)({ message: payload.message }));
+              return;
+            }
+            if (msg.kind === "complete") {
+              clearTimeout(timeout);
+              handle.dispose();
+              removeSlot(slotId);
+              const connection = msg.payload;
+              if (connection.status === import_platform_protocol.ConnectionStatus.active) {
+                const creds = (0, import_platform_sdk_core.decryptCredentials)(connection.credentials, privateKey);
+                core.context.setAccessToken(creds.accessToken);
+                core.context.setClientToken(creds.clientToken);
+              }
+              resolve((0, import_platform_protocol.ok)(connection));
+            }
+          });
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          message: e instanceof Error ? e.message : "Failed to check connection"
+        });
+      }
+    }
+    async function connect(opts) {
+      const { privateKey, publicKey } = (0, import_platform_sdk_core.generateKeyPair)();
+      const channelId = `connect-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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((0, import_platform_protocol.err)({ message: "Connection error" }));
+              return;
+            }
+            if (msg.kind === "complete") {
+              const connection = msg.payload;
+              if (connection.status === import_platform_protocol.ConnectionStatus.active) {
+                const creds = (0, import_platform_sdk_core.decryptCredentials)(connection.credentials, privateKey);
+                core.context.setAccessToken(creds.accessToken);
+                core.context.setClientToken(creds.clientToken);
+              }
+              opts.onEvent?.({ kind: "complete", payload: connection });
+              resolve(
+                (0, import_platform_protocol.ok)({
+                  dispose: () => {
+                    handle.dispose();
+                    removeSlot(slotId);
+                  }
+                })
+              );
+            }
+          });
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          message: e instanceof Error ? e.message : "Connect failed"
+        });
+      }
+    }
+    async function setupWidget(opts) {
+      const channelId = `widget-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Widget setup failed"
+        });
+      }
+    }
+    async function setupApplePay(opts) {
+      const channelId = `applepay-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Apple Pay setup failed"
+        });
+      }
+    }
+    async function setupBuy(opts) {
+      const channelId = `buy-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Buy setup failed"
+        });
+      }
+    }
+    async function setupBuyButton(opts) {
+      const channelId = `buy-button-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Buy button setup failed"
+        });
+      }
+    }
+    async function setupGooglePay(opts) {
+      const channelId = `googlepay-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          setQuote,
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.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 (0, import_platform_protocol.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 (0, import_platform_protocol.ok)({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.err)({
+          kind: "genericError",
+          message: e instanceof Error ? e.message : "Challenge setup failed"
+        });
+      }
+    }
+    async function setupAddCard(opts) {
+      const channelId = `add-card-${Date.now()}`;
+      const url = (0, import_platform_sdk_core.buildFrameUrl)(
+        import_platform_sdk_core.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 (0, import_platform_protocol.ok)({
+          dispose: () => {
+            handle.dispose();
+            removeSlot(slotId);
+          }
+        });
+      } catch (e) {
+        return (0, import_platform_protocol.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__ */ (0, import_jsx_runtime2.jsxs)(MoonPayContext.Provider, { value: { client }, children: [
+    children,
+    frameSlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoonPayFrame, { transport: slot.transport, hidden: slot.hidden }, slot.id))
+  ] });
+}
+function useMoonPay() {
+  const ctx = (0, import_react2.useContext)(MoonPayContext);
+  if (!ctx) {
+    throw new Error("useMoonPay must be used within a <MoonPayProvider>");
+  }
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MoonPayFrame,
+  MoonPayProvider,
+  WebViewTransport,
+  useMoonPay
+});
+//# sourceMappingURL=index.cjs.map