@moonpay/platform-sdk-react-native 0.3.0 → 1.0.0

package/dist/index.cjs

@@ -30,12 +30,391 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ConnectionStatus: () => import_connection2.ConnectionStatus,
+  MoonPayAddCard: () => MoonPayAddCard,
+  MoonPayApplePayButton: () => MoonPayApplePayButton,
+  MoonPayAuth: () => MoonPayAuth,
+  MoonPayBuyButton: () => MoonPayBuyButton,
+  MoonPayBuyFrame: () => MoonPayBuyFrame,
+  MoonPayChallenge: () => MoonPayChallenge,
+  MoonPayConnect: () => MoonPayConnect,
+  MoonPayConnectionCheck: () => MoonPayConnectionCheck,
+  MoonPayConnectionReset: () => MoonPayConnectionReset,
   MoonPayFrame: () => MoonPayFrame,
+  MoonPayGooglePayButton: () => MoonPayGooglePayButton,
   MoonPayProvider: () => MoonPayProvider,
+  MoonPayWidget: () => MoonPayWidget,
   WebViewTransport: () => WebViewTransport,
   useMoonPay: () => useMoonPay
 });
 module.exports = __toCommonJS(src_exports);
+var import_connection2 = require("@moonpay/platform-protocol/models/connection");
+
+// src/frame-specs.ts
+var import_connection = require("@moonpay/platform-protocol/models/connection");
+var import_platform_sdk_core = require("@moonpay/platform-sdk-core");
+function createQuoteCommands(send, channelId) {
+  return {
+    setQuote: (signature) => send({
+      version: 2,
+      meta: { channelId },
+      kind: "setQuote",
+      payload: { quote: { signature } }
+    })
+  };
+}
+var applePaySpec = {
+  channelPrefix: "applepay",
+  path: import_platform_sdk_core.FRAME_PATHS.applePay,
+  hidden: false,
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    signature: props.quote
+  }),
+  createCommands: createQuoteCommands,
+  reactiveProps: {
+    quote: (commands, quote) => commands.setQuote(quote)
+  },
+  mapMessage: (msg, commands) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "challenge":
+        return {
+          kind: "challenge",
+          payload: msg.payload
+        };
+      case "error": {
+        const payload = msg.payload;
+        if (payload.code === "quoteExpired") {
+          return { kind: "quoteExpired", payload: { setQuote: commands.setQuote } };
+        }
+        if (payload.code === "applePayUnavailable") {
+          return { kind: "unsupported" };
+        }
+        const kind = payload.code === "generic" ? "genericError" : payload.code;
+        return { kind: "error", payload: { kind, message: payload.message } };
+      }
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({ kind: "error", payload: { kind: "genericError", message } })
+};
+var googlePaySpec = {
+  channelPrefix: "googlepay",
+  path: import_platform_sdk_core.FRAME_PATHS.googlePay,
+  hidden: false,
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    signature: props.quote,
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+  }),
+  createCommands: createQuoteCommands,
+  reactiveProps: {
+    quote: (commands, quote) => commands.setQuote(quote)
+  },
+  mapMessage: (msg, commands) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "challenge":
+        return {
+          kind: "challenge",
+          payload: msg.payload
+        };
+      case "error": {
+        const payload = msg.payload;
+        if (payload.code === "quoteExpired") {
+          return { kind: "quoteExpired", payload: { setQuote: commands.setQuote } };
+        }
+        if (payload.code === "googlePayUnavailable") {
+          return { kind: "unsupported" };
+        }
+        const kind = payload.code === "generic" ? "genericError" : payload.code;
+        return { kind: "error", payload: { kind, message: payload.message } };
+      }
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({ kind: "error", payload: { kind: "genericError", message } })
+};
+var buyButtonSpec = {
+  channelPrefix: "buy-button",
+  path: import_platform_sdk_core.FRAME_PATHS.buyButton,
+  hidden: false,
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    signature: props.quote
+  }),
+  createCommands: createQuoteCommands,
+  reactiveProps: {
+    quote: (commands, quote) => commands.setQuote(quote)
+  },
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "challenge":
+        return {
+          kind: "challenge",
+          payload: msg.payload
+        };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: "generic", message }
+  })
+};
+function applyCredentialsOnComplete(msg, ctx) {
+  if (msg.kind !== "complete" || !ctx.privateKey)
+    return;
+  const connection = msg.payload;
+  if (connection.status !== import_connection.ConnectionStatus.active)
+    return;
+  const creds = (0, import_platform_sdk_core.decryptCredentials)(connection.credentials, ctx.privateKey);
+  ctx.core.context.setAccessToken(creds.accessToken);
+  ctx.core.context.setClientToken(creds.clientToken);
+}
+var connectionCheckSpec = {
+  channelPrefix: "check",
+  path: import_platform_sdk_core.FRAME_PATHS.checkConnection,
+  hidden: true,
+  needsKeyPair: true,
+  handshakeTimeout: 1e4,
+  buildParams: (ctx, props, publicKey) => ({
+    sessionToken: ctx.sessionToken,
+    publicKey,
+    ...props.skipKyc && { skipKyc: true }
+  }),
+  onMessageEffect: applyCredentialsOnComplete,
+  mapMessage: (msg) => {
+    if (msg.kind === "complete") {
+      return { kind: "complete", payload: msg.payload };
+    }
+    if (msg.kind === "error") {
+      return { kind: "error", payload: msg.payload };
+    }
+    return null;
+  },
+  errorEvent: (message) => ({ kind: "error", payload: { message } })
+};
+var connectSpec = {
+  channelPrefix: "connect",
+  path: import_platform_sdk_core.FRAME_PATHS.connect,
+  hidden: false,
+  needsKeyPair: true,
+  buildParams: (ctx, props, publicKey) => ({
+    sessionToken: ctx.sessionToken,
+    publicKey,
+    ...props.theme?.appearance && { appearance: props.theme.appearance }
+  }),
+  onMessageEffect: applyCredentialsOnComplete,
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: import_connection.ConnectionErrorCode.connectionFailedGeneric, message }
+  })
+};
+var authSpec = {
+  channelPrefix: "auth",
+  path: import_platform_sdk_core.FRAME_PATHS.auth,
+  hidden: false,
+  needsKeyPair: true,
+  buildParams: (ctx, _props, publicKey) => {
+    const clientToken = ctx.core.context.clientToken;
+    if (!clientToken) {
+      throw new Error(
+        'No clientToken in context \u2014 call getConnection() first and ensure it resolved with status "connectionRequired".'
+      );
+    }
+    return { clientToken, publicKey };
+  },
+  onMessageEffect: applyCredentialsOnComplete,
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      case "complete": {
+        const connection = msg.payload;
+        if (connection.status === import_connection.ConnectionStatus.active || connection.status === import_connection.ConnectionStatus.termsAcceptanceRequired) {
+          return { kind: "complete", payload: msg.payload };
+        }
+        return null;
+      }
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: import_connection.ConnectionErrorCode.connectionFailedGeneric, message }
+  })
+};
+var widgetSpec = {
+  channelPrefix: "widget",
+  path: import_platform_sdk_core.FRAME_PATHS.widget,
+  hidden: false,
+  buildParams: (ctx, props) => ({
+    flow: "buy",
+    clientToken: ctx.core.context.clientToken,
+    quoteSignature: props.quote
+  }),
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "transactionCreated":
+        return {
+          kind: "transactionCreated",
+          payload: msg.payload
+        };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      case "close":
+        return { kind: "close" };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: "generic", message }
+  })
+};
+var buySpec = {
+  channelPrefix: "buy",
+  path: import_platform_sdk_core.FRAME_PATHS.buy,
+  hidden: true,
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    signature: props.quote,
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+  }),
+  createCommands: createQuoteCommands,
+  reactiveProps: {
+    quote: (commands, quote) => commands.setQuote(quote)
+  },
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "challenge":
+        return { kind: "challenge", payload: msg.payload };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: "generic", message }
+  })
+};
+var addCardSpec = {
+  channelPrefix: "add-card",
+  path: import_platform_sdk_core.FRAME_PATHS.addCard,
+  hidden: false,
+  buildParams: (ctx) => ({ clientToken: ctx.core.context.clientToken }),
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "complete":
+        return {
+          kind: "complete",
+          payload: msg.payload
+        };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: "generic", message }
+  })
+};
+var challengeSpec = {
+  channelPrefix: "challenge",
+  path: import_platform_sdk_core.FRAME_PATHS.challenge,
+  // documentation only — buildUrl below wins
+  hidden: false,
+  resolveChannelId: (props, generated) => new URL(props.url).searchParams.get("channelId") || generated,
+  buildUrl: (_ctx, props, channelId) => {
+    const url = new URL(props.url);
+    url.searchParams.set("channelId", channelId);
+    return url.toString();
+  },
+  mapMessage: (msg) => {
+    switch (msg.kind) {
+      case "ready":
+        return { kind: "ready" };
+      case "complete":
+        return { kind: "complete", payload: msg.payload };
+      case "cancelled":
+        return { kind: "cancelled", payload: msg.payload };
+      case "error":
+        return { kind: "error", payload: msg.payload };
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: "generic", message }
+  })
+};
+var connectionResetSpec = {
+  channelPrefix: "reset",
+  path: import_platform_sdk_core.FRAME_PATHS.reset,
+  hidden: true,
+  handshakeTimeout: 5e3,
+  buildParams: (ctx) => ({ sessionToken: ctx.sessionToken }),
+  mapMessage: (msg) => {
+    if (msg.kind === "complete")
+      return { kind: "complete" };
+    if (msg.kind === "error") {
+      const payload = msg.payload;
+      return { kind: "error", payload: { message: payload?.message ?? "Reset failed" } };
+    }
+    return null;
+  },
+  errorEvent: (message) => ({ kind: "error", payload: { message } })
+};
+
+// src/frame-view.tsx
+var import_react3 = require("react");
+var import_react_native3 = require("react-native");
 
 // src/frame-component.tsx
 var import_react = require("react");
@@ -70,10 +449,8 @@ function MoonPayFrame({ transport, hidden, style }) {
   ) });
 }
 
-// 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/frame-engine.ts
+var import_platform_sdk_core2 = require("@moonpay/platform-sdk-core");
 
 // src/webview-transport.ts
 var WebViewTransport = class {
@@ -134,10 +511,401 @@ var WebViewTransport = class {
   }
 };
 
+// src/frame-engine.ts
+var FrameSessionDisposedError = class extends Error {
+  constructor() {
+    super("Frame session disposed");
+    this.name = "FrameSessionDisposedError";
+  }
+};
+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)(
+    spec.path,
+    { ...spec.buildParams?.(ctx, props, keyPair?.publicKey), channelId },
+    { frameBaseUrl: ctx.frameBaseUrl }
+  );
+  const transport = (overrides.createTransport ?? (() => new WebViewTransport()))();
+  let resolvedHandle = null;
+  let rejectDisposed;
+  const disposedBeforeReady = new Promise((_, reject) => {
+    rejectDisposed = reject;
+  });
+  const handleReady = (0, import_platform_sdk_core2.createFrameOrchestrator)({
+    transport,
+    channelId,
+    url,
+    container: null,
+    hidden: spec.hidden,
+    handshakeTimeout: overrides.handshakeTimeout ?? spec.handshakeTimeout ?? 15e3
+  }).then((handle) => {
+    const send = (msg) => handle.sendMessage(msg);
+    const commands = spec.createCommands?.(send, channelId);
+    const eventHandlers = [];
+    const disposeHandlers = [];
+    let disposeNotified = false;
+    const notifyDisposed = () => {
+      if (disposeNotified)
+        return;
+      disposeNotified = true;
+      for (const handler of [...disposeHandlers]) {
+        handler();
+      }
+    };
+    handle.onMessage((msg) => {
+      spec.onMessageEffect?.(msg, { ...ctx, privateKey: keyPair?.privateKey });
+      const event = spec.mapMessage(msg, commands);
+      if (event !== null) {
+        for (const handler of [...eventHandlers]) {
+          handler(event);
+        }
+      }
+    });
+    const sessionHandle = {
+      onEvent(handler) {
+        eventHandlers.push(handler);
+        return () => {
+          const idx = eventHandlers.indexOf(handler);
+          if (idx >= 0)
+            eventHandlers.splice(idx, 1);
+        };
+      },
+      onMessage: (handler) => handle.onMessage(handler),
+      onDispose(handler) {
+        disposeHandlers.push(handler);
+        return () => {
+          const idx = disposeHandlers.indexOf(handler);
+          if (idx >= 0)
+            disposeHandlers.splice(idx, 1);
+        };
+      },
+      sendMessage: send,
+      commands,
+      dispose: () => {
+        handle.dispose();
+        notifyDisposed();
+      }
+    };
+    resolvedHandle = sessionHandle;
+    return sessionHandle;
+  });
+  const ready = Promise.race([handleReady, disposedBeforeReady]);
+  ready.catch(() => {
+  });
+  return {
+    transport,
+    channelId,
+    url,
+    hidden: spec.hidden,
+    ready,
+    dispose: () => {
+      if (resolvedHandle) {
+        resolvedHandle.dispose();
+      } else {
+        transport.dispose();
+        rejectDisposed?.(new FrameSessionDisposedError());
+      }
+    }
+  };
+}
+
+// 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");
+
+// src/methods/add-card.ts
+var import_result = require("@moonpay/platform-protocol/result");
+async function setupAddCard(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(addCardSpec, {});
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result.ok)({ dispose });
+  } catch (e) {
+    return (0, import_result.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Add card setup failed"
+    });
+  }
+}
+
+// src/methods/apple-pay.ts
+var import_result2 = require("@moonpay/platform-protocol/result");
+async function setupApplePay(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(applePaySpec, { quote: opts.quote });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result2.ok)({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return (0, import_result2.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Apple Pay setup failed"
+    });
+  }
+}
+
+// src/methods/auth.ts
+var import_result3 = require("@moonpay/platform-protocol/result");
+async function setupAuth(deps, opts) {
+  if (!deps.core.context.clientToken) {
+    return (0, import_result3.err)({
+      kind: "configurationError",
+      message: 'No clientToken in context \u2014 call getConnection() first and ensure it resolved with status "connectionRequired".'
+    });
+  }
+  try {
+    const { handle, dispose } = await deps.mountSession(authSpec, {});
+    return await new Promise((resolve) => {
+      handle.onEvent((event) => {
+        opts.onEvent?.(event);
+        if (event.kind === "error") {
+          resolve((0, import_result3.err)({ kind: "genericError", message: "Auth frame error" }));
+          dispose();
+        }
+      });
+      handle.onMessage((msg) => {
+        if (msg.kind === "complete") {
+          resolve((0, import_result3.ok)({ dispose }));
+        }
+      });
+      handle.onDispose(() => {
+        resolve((0, import_result3.err)({ kind: "genericError", message: "Auth flow dismissed" }));
+      });
+    });
+  } catch (e) {
+    if (e instanceof FrameSessionDisposedError) {
+      return (0, import_result3.err)({ kind: "genericError", message: "Auth flow dismissed" });
+    }
+    return (0, import_result3.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Auth setup failed"
+    });
+  }
+}
+
+// src/methods/buy.ts
+var import_result4 = require("@moonpay/platform-protocol/result");
+async function setupBuy(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(buySpec, {
+      quote: opts.quote,
+      externalTransactionId: opts.externalTransactionId
+    });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result4.ok)({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return (0, import_result4.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Buy setup failed"
+    });
+  }
+}
+
+// src/methods/buy-button.ts
+var import_result5 = require("@moonpay/platform-protocol/result");
+async function setupBuyButton(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(buyButtonSpec, { quote: opts.quote });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result5.ok)({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return (0, import_result5.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Buy button setup failed"
+    });
+  }
+}
+
+// src/methods/challenge.ts
+var import_result6 = require("@moonpay/platform-protocol/result");
+async function setupChallenge(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(challengeSpec, { url: opts.url });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result6.ok)({ dispose });
+  } catch (e) {
+    if (e instanceof TypeError) {
+      return (0, import_result6.err)({ kind: "configurationError", message: "Invalid challenge URL" });
+    }
+    return (0, import_result6.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Challenge setup failed"
+    });
+  }
+}
+
+// src/methods/connect.ts
+var import_result7 = require("@moonpay/platform-protocol/result");
+async function connect(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(connectSpec, { theme: opts.theme });
+    return await new Promise((resolve) => {
+      handle.onEvent((event) => {
+        opts.onEvent?.(event);
+        if (event.kind === "error") {
+          resolve((0, import_result7.err)({ message: "Connection error" }));
+          dispose();
+        } else if (event.kind === "complete") {
+          resolve((0, import_result7.ok)({ dispose }));
+        }
+      });
+      handle.onDispose(() => {
+        resolve((0, import_result7.err)({ message: "Connect flow dismissed" }));
+      });
+    });
+  } catch (e) {
+    if (e instanceof FrameSessionDisposedError) {
+      return (0, import_result7.err)({ message: "Connect flow dismissed" });
+    }
+    return (0, import_result7.err)({
+      message: e instanceof Error ? e.message : "Connect failed"
+    });
+  }
+}
+
+// src/methods/connection-check.ts
+var import_result8 = require("@moonpay/platform-protocol/result");
+async function getConnection(deps, options = {}) {
+  try {
+    const { handle, dispose } = await deps.mountSession(connectionCheckSpec, options);
+    return await new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        dispose();
+        resolve((0, import_result8.err)({ message: "Get connection timed out" }));
+      }, 1e4);
+      handle.onEvent((event) => {
+        clearTimeout(timeout);
+        dispose();
+        if (event.kind === "error") {
+          resolve((0, import_result8.err)({ message: event.payload.message }));
+        } else {
+          resolve((0, import_result8.ok)(event.payload));
+        }
+      });
+    });
+  } catch (e) {
+    return (0, import_result8.err)({
+      message: e instanceof Error ? e.message : "Failed to check connection"
+    });
+  }
+}
+
+// src/methods/connection-reset.ts
+var import_result9 = require("@moonpay/platform-protocol/result");
+async function resetConnection(deps) {
+  try {
+    const { handle, dispose } = await deps.mountSession(connectionResetSpec, {});
+    return await new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        dispose();
+        resolve((0, import_result9.ok)(void 0));
+      }, 5e3);
+      handle.onEvent(() => {
+        clearTimeout(timeout);
+        dispose();
+        resolve((0, import_result9.ok)(void 0));
+      });
+    });
+  } catch {
+    return (0, import_result9.ok)(void 0);
+  }
+}
+
+// src/methods/google-pay.ts
+var import_result10 = require("@moonpay/platform-protocol/result");
+async function setupGooglePay(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(googlePaySpec, {
+      quote: opts.quote,
+      externalTransactionId: opts.externalTransactionId
+    });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result10.ok)({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return (0, import_result10.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Google Pay setup failed"
+    });
+  }
+}
+
+// src/methods/widget.ts
+var import_result11 = require("@moonpay/platform-protocol/result");
+async function setupWidget(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(widgetSpec, { quote: opts.quote });
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return (0, import_result11.ok)({ dispose });
+  } catch (e) {
+    return (0, import_result11.err)({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Widget setup failed"
+    });
+  }
+}
+
+// src/client.ts
+function createRNClient(deps) {
+  const { core } = deps;
+  return {
+    getConnection: (options) => getConnection(deps, options ?? {}),
+    connect: (opts) => connect(deps, opts),
+    setupAuth: (opts) => setupAuth(deps, opts),
+    getPaymentMethods: () => core.getPaymentMethods(),
+    getQuote: (params) => core.getQuote(params),
+    listTransactions: (params) => core.listTransactions(params),
+    getTransaction: (id) => core.getTransaction(id),
+    setupWidget: (opts) => setupWidget(deps, opts),
+    setupApplePay: (opts) => setupApplePay(deps, opts),
+    setupBuy: (opts) => setupBuy(deps, opts),
+    setupBuyButton: (opts) => setupBuyButton(deps, opts),
+    setupGooglePay: (opts) => setupGooglePay(deps, opts),
+    deletePaymentMethod: (id) => core.deletePaymentMethod(id),
+    resetConnection: () => resetConnection(deps),
+    setupChallenge: (opts) => setupChallenge(deps, opts),
+    setupAddCard: (opts) => setupAddCard(deps, opts),
+    createIdentity: (body) => core.createIdentity(body),
+    getIdentity: (id) => core.getIdentity(id),
+    updateIdentity: (id, body) => core.updateIdentity(id, body),
+    verifyIdentity: (id) => core.verifyIdentity(id),
+    getIdentityUploadUrl: (id, body) => core.getIdentityUploadUrl(id, body),
+    submitIdentityFiles: (id, body) => core.submitIdentityFiles(id, body)
+  };
+}
+
+// src/methods/mount-session.ts
+var slotCounter = 0;
+function createMountSession(specCtx, host) {
+  return async function mountSession(spec, props) {
+    const session = createFrameSession(spec, specCtx, props);
+    const slotId = `slot-${++slotCounter}`;
+    host.addSlot({
+      id: slotId,
+      transport: session.transport,
+      hidden: session.hidden,
+      dispose: () => session.dispose()
+    });
+    try {
+      const handle = await session.ready;
+      return {
+        handle,
+        dispose: () => {
+          handle.dispose();
+          host.removeSlot(slotId);
+        }
+      };
+    } catch (e) {
+      host.removeSlot(slotId);
+      throw e;
+    }
+  };
+}
+
 // 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,
@@ -153,7 +921,7 @@ function MoonPayProvider({
   }, []);
   const coreRef = (0, import_react2.useRef)(null);
   if (!coreRef.current) {
-    coreRef.current = (0, import_platform_sdk_core.createClientCore)({
+    coreRef.current = (0, import_platform_sdk_core3.createClientCore)({
       apiBaseUrl,
       frameBaseUrl,
       createTransport: () => new WebViewTransport()
@@ -161,674 +929,313 @@ function MoonPayProvider({
   }
   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(options = {}) {
-      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,
-          ...options.skipKyc && { skipKyc: true }
+    const specCtx = { sessionToken, core, frameBaseUrl };
+    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: [
+    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,
+      {
+        visible: true,
+        animationType: "slide",
+        onRequestClose: () => {
+          slot.dispose();
+          removeSlot(slot.id);
         },
-        { 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"
-        });
-      }
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoonPayFrame, { transport: slot.transport })
+      },
+      slot.id
+    ))
+  ] });
+}
+function useMoonPayContext() {
+  const ctx = (0, import_react2.useContext)(MoonPayContext);
+  if (!ctx) {
+    throw new Error("useMoonPay must be used within a <MoonPayProvider>");
+  }
+  return ctx;
+}
+function useMoonPay() {
+  return useMoonPayContext();
+}
+
+// src/frame-view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function applyReactiveProps(spec, keys, props, applied, handle) {
+  for (const key of keys) {
+    const next = props[key];
+    if (next !== void 0 && next !== applied[key]) {
+      spec.reactiveProps?.[key]?.(handle.commands, next);
+      applied[key] = next;
     }
-    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 }
+  }
+}
+function MoonPayFrameView({
+  spec,
+  props,
+  style,
+  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);
+  onEventRef.current = onEvent;
+  const propsRef = (0, import_react3.useRef)(props);
+  propsRef.current = props;
+  const reactiveKeys = Object.keys(spec.reactiveProps ?? {});
+  const mountProps = {};
+  const liveProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    const k = key;
+    (reactiveKeys.includes(k) ? liveProps : mountProps)[k] = value;
+  }
+  const mountKey = JSON.stringify(mountProps);
+  const liveKey = JSON.stringify(liveProps);
+  const appliedRef = (0, import_react3.useRef)({});
+  (0, import_react3.useEffect)(() => {
+    let disposed = false;
+    let session;
+    const applied = {};
+    for (const key of reactiveKeys) {
+      applied[key] = propsRef.current[key];
+    }
+    appliedRef.current = applied;
+    try {
+      session = createFrameSession(spec, { sessionToken, core, frameBaseUrl }, propsRef.current);
+    } catch (e) {
+      onEventRef.current?.(
+        spec.errorEvent(e instanceof Error ? e.message : "Failed to create frame")
       );
-      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"
-        });
-      }
+      return;
     }
-    async function setupAuth(opts) {
-      const clientToken = core.context.clientToken;
-      if (!clientToken) {
-        return (0, import_platform_protocol.err)({
-          kind: "configurationError",
-          message: 'No clientToken in context \u2014 call getConnection() first and ensure it resolved with status "connectionRequired".'
-        });
+    setTransport(session.transport);
+    session.ready.then((handle) => {
+      if (disposed) {
+        handle.dispose();
+        return;
       }
-      const { privateKey, publicKey } = (0, import_platform_sdk_core.generateKeyPair)();
-      const channelId = `auth-${Date.now()}`;
-      const url = (0, import_platform_sdk_core.buildFrameUrl)(
-        import_platform_sdk_core.FRAME_PATHS.auth,
-        { clientToken, channelId, publicKey },
-        { 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)({ kind: "genericError", message: "Auth frame 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);
-              }
-              if (connection.status === import_platform_protocol.ConnectionStatus.active || connection.status === import_platform_protocol.ConnectionStatus.termsAcceptanceRequired) {
-                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)({
-          kind: "genericError",
-          message: e instanceof Error ? e.message : "Auth setup failed"
-        });
+      handleRef.current = handle;
+      handle.onEvent((event) => onEventRef.current?.(event));
+      applyReactiveProps(spec, reactiveKeys, propsRef.current, appliedRef.current, handle);
+    }).catch((e) => {
+      if (!disposed) {
+        onEventRef.current?.(
+          spec.errorEvent(e instanceof Error ? e.message : "Frame handshake failed")
+        );
       }
+    });
+    return () => {
+      disposed = true;
+      handleRef.current = null;
+      session.dispose();
+      setTransport(null);
+    };
+  }, [mountKey, spec, sessionToken, core, frameBaseUrl]);
+  (0, import_react3.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;
+  }
+  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 });
+}
+
+// src/components/add-card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MoonPayAddCard({ onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    MoonPayFrameView,
+    {
+      spec: addCardSpec,
+      props: {},
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/apple-pay-button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MoonPayApplePayButton({
+  quote,
+  onEvent,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    MoonPayFrameView,
+    {
+      spec: applePaySpec,
+      props: { quote },
+      style,
+      defaultStyle: { height: 48 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/auth.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function MoonPayAuth({ onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    MoonPayFrameView,
+    {
+      spec: authSpec,
+      props: {},
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/buy-button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MoonPayBuyButton({ quote, onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    MoonPayFrameView,
+    {
+      spec: buyButtonSpec,
+      props: { quote },
+      style,
+      defaultStyle: { height: 48 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/buy-frame.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function MoonPayBuyFrame({
+  quote,
+  externalTransactionId,
+  onEvent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    MoonPayFrameView,
+    {
+      spec: buySpec,
+      props: { quote, externalTransactionId },
+      defaultStyle: {},
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/challenge.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function MoonPayChallenge({ url, onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    MoonPayFrameView,
+    {
+      spec: challengeSpec,
+      props: { url },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    async function resetConnection() {
-      const channelId = `reset-${Date.now()}`;
-      const url = (0, import_platform_sdk_core.buildFrameUrl)(import_platform_sdk_core.FRAME_PATHS.reset, { sessionToken, channelId }, { frameBaseUrl });
-      try {
-        const { promise } = createManagedFrame({
-          url,
-          channelId,
-          hidden: true,
-          handshakeTimeout: 5e3
-        });
-        const { handle, slotId } = await promise;
-        return new Promise((resolve) => {
-          const timeout = setTimeout(() => {
-            handle.dispose();
-            removeSlot(slotId);
-            resolve((0, import_platform_protocol.ok)(void 0));
-          }, 5e3);
-          handle.onMessage((msg) => {
-            if (msg.kind === "complete" || msg.kind === "error") {
-              clearTimeout(timeout);
-              handle.dispose();
-              removeSlot(slotId);
-              resolve((0, import_platform_protocol.ok)(void 0));
-            }
-          });
-        });
-      } catch {
-        return (0, import_platform_protocol.ok)(void 0);
-      }
+  );
+}
+
+// src/components/connect.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function MoonPayConnect({ theme, onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    MoonPayFrameView,
+    {
+      spec: connectSpec,
+      props: { theme },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    async function setupChallenge(opts) {
-      let url;
-      try {
-        url = new URL(opts.url);
-      } catch {
-        return (0, import_platform_protocol.err)({ kind: "configurationError", message: "Invalid challenge URL" });
-      }
-      let channelId = url.searchParams.get("channelId") ?? "";
-      if (!channelId) {
-        channelId = `challenge-${Date.now()}`;
-        url.searchParams.set("channelId", channelId);
-      }
-      try {
-        const { promise } = createManagedFrame({
-          url: url.toString(),
-          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"
-        });
-      }
+  );
+}
+
+// src/components/connection-check.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function MoonPayConnectionCheck({
+  skipKyc,
+  onEvent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    MoonPayFrameView,
+    {
+      spec: connectionCheckSpec,
+      props: { skipKyc },
+      defaultStyle: {},
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/connection-reset.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function MoonPayConnectionReset({ onEvent }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
+}
+
+// src/components/google-pay-button.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function MoonPayGooglePayButton({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    MoonPayFrameView,
+    {
+      spec: googlePaySpec,
+      props: { quote, externalTransactionId },
+      style,
+      defaultStyle: { height: 48 },
+      onEvent
     }
-    return {
-      getConnection,
-      connect,
-      setupAuth,
-      getPaymentMethods: () => core.getPaymentMethods(),
-      getQuote: (params) => core.getQuote(params),
-      listTransactions: (params) => core.listTransactions(params),
-      getTransaction: (id) => core.getTransaction(id),
-      setupWidget,
-      setupApplePay,
-      setupBuy,
-      setupBuyButton,
-      setupGooglePay,
-      deletePaymentMethod: (id) => core.deletePaymentMethod(id),
-      resetConnection,
-      setupChallenge,
-      setupAddCard,
-      createIdentity: (body) => core.createIdentity(body),
-      getIdentity: (id) => core.getIdentity(id),
-      updateIdentity: (id, body) => core.updateIdentity(id, body),
-      verifyIdentity: (id) => core.verifyIdentity(id),
-      getIdentityUploadUrl: (id, body) => core.getIdentityUploadUrl(id, body),
-      submitIdentityFiles: (id, body) => core.submitIdentityFiles(id, body)
-    };
-  }, [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;
+
+// src/components/widget.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function MoonPayWidget({ quote, onEvent, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    MoonPayFrameView,
+    {
+      spec: widgetSpec,
+      props: { quote },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ConnectionStatus,
+  MoonPayAddCard,
+  MoonPayApplePayButton,
+  MoonPayAuth,
+  MoonPayBuyButton,
+  MoonPayBuyFrame,
+  MoonPayChallenge,
+  MoonPayConnect,
+  MoonPayConnectionCheck,
+  MoonPayConnectionReset,
   MoonPayFrame,
+  MoonPayGooglePayButton,
   MoonPayProvider,
+  MoonPayWidget,
   WebViewTransport,
   useMoonPay
 });