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

package/dist/index.js

@@ -1,3 +1,375 @@
+// src/index.ts
+import { ConnectionStatus as ConnectionStatus2 } from "@moonpay/platform-protocol/models/connection";
+
+// src/frame-specs.ts
+import {
+  ConnectionErrorCode,
+  ConnectionStatus
+} from "@moonpay/platform-protocol/models/connection";
+import { decryptCredentials, FRAME_PATHS } from "@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: 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: 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: 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 !== ConnectionStatus.active)
+    return;
+  const creds = decryptCredentials(connection.credentials, ctx.privateKey);
+  ctx.core.context.setAccessToken(creds.accessToken);
+  ctx.core.context.setClientToken(creds.clientToken);
+}
+var connectionCheckSpec = {
+  channelPrefix: "check",
+  path: 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: 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: ConnectionErrorCode.connectionFailedGeneric, message }
+  })
+};
+var authSpec = {
+  channelPrefix: "auth",
+  path: 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 === ConnectionStatus.active || connection.status === ConnectionStatus.termsAcceptanceRequired) {
+          return { kind: "complete", payload: msg.payload };
+        }
+        return null;
+      }
+      default:
+        return null;
+    }
+  },
+  errorEvent: (message) => ({
+    kind: "error",
+    payload: { code: ConnectionErrorCode.connectionFailedGeneric, message }
+  })
+};
+var widgetSpec = {
+  channelPrefix: "widget",
+  path: 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: 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: 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: 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: 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
+import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { View as View2 } from "react-native";
+
 // src/frame-component.tsx
 import { useEffect, useRef } from "react";
 import { View } from "react-native";
@@ -31,28 +403,12 @@ function MoonPayFrame({ transport, hidden, style }) {
   ) });
 }
 
-// src/provider.tsx
-import {
-  ConnectionStatus,
-  err,
-  ok
-} from "@moonpay/platform-protocol";
+// src/frame-engine.ts
 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 {
@@ -113,10 +469,408 @@ 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 ? generateKeyPair() : void 0;
+  const url = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : 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 = 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
+import { createClientCore } from "@moonpay/platform-sdk-core";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+import { Modal } from "react-native";
+
+// src/methods/add-card.ts
+import { err, ok } from "@moonpay/platform-protocol/result";
+async function setupAddCard(deps, opts) {
+  try {
+    const { handle, dispose } = await deps.mountSession(addCardSpec, {});
+    handle.onEvent((event) => opts.onEvent?.(event));
+    return ok({ dispose });
+  } catch (e) {
+    return err({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Add card setup failed"
+    });
+  }
+}
+
+// src/methods/apple-pay.ts
+import { err as err2, ok as ok2 } from "@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 ok2({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return err2({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Apple Pay setup failed"
+    });
+  }
+}
+
+// src/methods/auth.ts
+import { err as err3, ok as ok3 } from "@moonpay/platform-protocol/result";
+async function setupAuth(deps, opts) {
+  if (!deps.core.context.clientToken) {
+    return err3({
+      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(err3({ kind: "genericError", message: "Auth frame error" }));
+          dispose();
+        }
+      });
+      handle.onMessage((msg) => {
+        if (msg.kind === "complete") {
+          resolve(ok3({ dispose }));
+        }
+      });
+      handle.onDispose(() => {
+        resolve(err3({ kind: "genericError", message: "Auth flow dismissed" }));
+      });
+    });
+  } catch (e) {
+    if (e instanceof FrameSessionDisposedError) {
+      return err3({ kind: "genericError", message: "Auth flow dismissed" });
+    }
+    return err3({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Auth setup failed"
+    });
+  }
+}
+
+// src/methods/buy.ts
+import { err as err4, ok as ok4 } from "@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 ok4({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return err4({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Buy setup failed"
+    });
+  }
+}
+
+// src/methods/buy-button.ts
+import { err as err5, ok as ok5 } from "@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 ok5({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return err5({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Buy button setup failed"
+    });
+  }
+}
+
+// src/methods/challenge.ts
+import { err as err6, ok as ok6 } from "@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 ok6({ dispose });
+  } catch (e) {
+    if (e instanceof TypeError) {
+      return err6({ kind: "configurationError", message: "Invalid challenge URL" });
+    }
+    return err6({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Challenge setup failed"
+    });
+  }
+}
+
+// src/methods/connect.ts
+import { err as err7, ok as ok7 } from "@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(err7({ message: "Connection error" }));
+          dispose();
+        } else if (event.kind === "complete") {
+          resolve(ok7({ dispose }));
+        }
+      });
+      handle.onDispose(() => {
+        resolve(err7({ message: "Connect flow dismissed" }));
+      });
+    });
+  } catch (e) {
+    if (e instanceof FrameSessionDisposedError) {
+      return err7({ message: "Connect flow dismissed" });
+    }
+    return err7({
+      message: e instanceof Error ? e.message : "Connect failed"
+    });
+  }
+}
+
+// src/methods/connection-check.ts
+import { err as err8, ok as ok8 } from "@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(err8({ message: "Get connection timed out" }));
+      }, 1e4);
+      handle.onEvent((event) => {
+        clearTimeout(timeout);
+        dispose();
+        if (event.kind === "error") {
+          resolve(err8({ message: event.payload.message }));
+        } else {
+          resolve(ok8(event.payload));
+        }
+      });
+    });
+  } catch (e) {
+    return err8({
+      message: e instanceof Error ? e.message : "Failed to check connection"
+    });
+  }
+}
+
+// src/methods/connection-reset.ts
+import { ok as ok9 } from "@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(ok9(void 0));
+      }, 5e3);
+      handle.onEvent(() => {
+        clearTimeout(timeout);
+        dispose();
+        resolve(ok9(void 0));
+      });
+    });
+  } catch {
+    return ok9(void 0);
+  }
+}
+
+// src/methods/google-pay.ts
+import { err as err9, ok as ok10 } from "@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 ok10({ setQuote: handle.commands.setQuote, dispose });
+  } catch (e) {
+    return err9({
+      kind: "genericError",
+      message: e instanceof Error ? e.message : "Google Pay setup failed"
+    });
+  }
+}
+
+// src/methods/widget.ts
+import { err as err10, ok as ok11 } from "@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 ok11({ dispose });
+  } catch (e) {
+    return err10({
+      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
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var MoonPayContext = createContext(null);
-var slotCounter = 0;
 function MoonPayProvider({
   sessionToken,
   apiBaseUrl,
@@ -140,673 +894,312 @@ function MoonPayProvider({
   }
   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(options = {}) {
-      const { privateKey, publicKey } = generateKeyPair();
-      const channelId = `check-${Date.now()}`;
-      const url = buildFrameUrl(
-        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__ */ jsxs(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl }, children: [
+    children,
+    frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
+    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ jsx2(
+      Modal,
+      {
+        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(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"
-        });
-      }
+        children: /* @__PURE__ */ jsx2(MoonPayFrame, { transport: slot.transport })
+      },
+      slot.id
+    ))
+  ] });
+}
+function useMoonPayContext() {
+  const ctx = useContext(MoonPayContext);
+  if (!ctx) {
+    throw new Error("useMoonPay must be used within a <MoonPayProvider>");
+  }
+  return ctx;
+}
+function useMoonPay() {
+  return useMoonPayContext();
+}
+
+// src/frame-view.tsx
+import { jsx as jsx3 } from "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 } = generateKeyPair();
-      const channelId = `connect-${Date.now()}`;
-      const url = buildFrameUrl(
-        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] = useState2(null);
+  const handleRef = useRef3(null);
+  const onEventRef = useRef3(onEvent);
+  onEventRef.current = onEvent;
+  const propsRef = useRef3(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 = useRef3({});
+  useEffect2(() => {
+    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(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"
-        });
-      }
+      return;
     }
-    async function setupAuth(opts) {
-      const clientToken = core.context.clientToken;
-      if (!clientToken) {
-        return 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 } = generateKeyPair();
-      const channelId = `auth-${Date.now()}`;
-      const url = buildFrameUrl(
-        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(err({ kind: "genericError", message: "Auth frame 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);
-              }
-              if (connection.status === ConnectionStatus.active || connection.status === ConnectionStatus.termsAcceptanceRequired) {
-                opts.onEvent?.({ kind: "complete", payload: connection });
-              }
-              resolve(
-                ok({
-                  dispose: () => {
-                    handle.dispose();
-                    removeSlot(slotId);
-                  }
-                })
-              );
-            }
-          });
-        });
-      } catch (e) {
-        return 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]);
+  useEffect2(() => {
+    const handle = handleRef.current;
+    if (!handle)
+      return;
+    applyReactiveProps(spec, reactiveKeys, propsRef.current, appliedRef.current, handle);
+  }, [liveKey]);
+  if (spec.hidden) {
+    return transport ? /* @__PURE__ */ jsx3(MoonPayFrame, { transport, hidden: true }) : null;
+  }
+  const resolvedStyle = { ...defaultStyle, ...style };
+  return /* @__PURE__ */ jsx3(View2, { style: resolvedStyle, children: transport ? /* @__PURE__ */ jsx3(MoonPayFrame, { transport }) : null });
+}
+
+// src/components/add-card.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function MoonPayAddCard({ onEvent, style }) {
+  return /* @__PURE__ */ jsx4(
+    MoonPayFrameView,
+    {
+      spec: addCardSpec,
+      props: {},
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/apple-pay-button.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MoonPayApplePayButton({
+  quote,
+  onEvent,
+  style
+}) {
+  return /* @__PURE__ */ jsx5(
+    MoonPayFrameView,
+    {
+      spec: applePaySpec,
+      props: { quote },
+      style,
+      defaultStyle: { height: 48 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/auth.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MoonPayAuth({ onEvent, style }) {
+  return /* @__PURE__ */ jsx6(
+    MoonPayFrameView,
+    {
+      spec: authSpec,
+      props: {},
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/buy-button.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function MoonPayBuyButton({ quote, onEvent, style }) {
+  return /* @__PURE__ */ jsx7(
+    MoonPayFrameView,
+    {
+      spec: buyButtonSpec,
+      props: { quote },
+      style,
+      defaultStyle: { height: 48 },
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/buy-frame.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function MoonPayBuyFrame({
+  quote,
+  externalTransactionId,
+  onEvent
+}) {
+  return /* @__PURE__ */ jsx8(
+    MoonPayFrameView,
+    {
+      spec: buySpec,
+      props: { quote, externalTransactionId },
+      defaultStyle: {},
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/challenge.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function MoonPayChallenge({ url, onEvent, style }) {
+  return /* @__PURE__ */ jsx9(
+    MoonPayFrameView,
+    {
+      spec: challengeSpec,
+      props: { url },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    async function resetConnection() {
-      const channelId = `reset-${Date.now()}`;
-      const url = buildFrameUrl(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(ok(void 0));
-          }, 5e3);
-          handle.onMessage((msg) => {
-            if (msg.kind === "complete" || msg.kind === "error") {
-              clearTimeout(timeout);
-              handle.dispose();
-              removeSlot(slotId);
-              resolve(ok(void 0));
-            }
-          });
-        });
-      } catch {
-        return ok(void 0);
-      }
+  );
+}
+
+// src/components/connect.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function MoonPayConnect({ theme, onEvent, style }) {
+  return /* @__PURE__ */ jsx10(
+    MoonPayFrameView,
+    {
+      spec: connectSpec,
+      props: { theme },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
     }
-    async function setupChallenge(opts) {
-      let url;
-      try {
-        url = new URL(opts.url);
-      } catch {
-        return 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 ok({
-          dispose: () => {
-            handle.dispose();
-            removeSlot(slotId);
-          }
-        });
-      } catch (e) {
-        return err({
-          kind: "genericError",
-          message: e instanceof Error ? e.message : "Challenge setup failed"
-        });
-      }
+  );
+}
+
+// src/components/connection-check.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function MoonPayConnectionCheck({
+  skipKyc,
+  onEvent
+}) {
+  return /* @__PURE__ */ jsx11(
+    MoonPayFrameView,
+    {
+      spec: connectionCheckSpec,
+      props: { skipKyc },
+      defaultStyle: {},
+      onEvent
     }
-    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"
-        });
-      }
+  );
+}
+
+// src/components/connection-reset.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function MoonPayConnectionReset({ onEvent }) {
+  return /* @__PURE__ */ jsx12(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
+}
+
+// src/components/google-pay-button.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function MoonPayGooglePayButton({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
+  return /* @__PURE__ */ jsx13(
+    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__ */ 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;
+
+// src/components/widget.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function MoonPayWidget({ quote, onEvent, style }) {
+  return /* @__PURE__ */ jsx14(
+    MoonPayFrameView,
+    {
+      spec: widgetSpec,
+      props: { quote },
+      style,
+      defaultStyle: { flex: 1 },
+      onEvent
+    }
+  );
 }
 export {
+  ConnectionStatus2 as ConnectionStatus,
+  MoonPayAddCard,
+  MoonPayApplePayButton,
+  MoonPayAuth,
+  MoonPayBuyButton,
+  MoonPayBuyFrame,
+  MoonPayChallenge,
+  MoonPayConnect,
+  MoonPayConnectionCheck,
+  MoonPayConnectionReset,
   MoonPayFrame,
+  MoonPayGooglePayButton,
   MoonPayProvider,
+  MoonPayWidget,
   WebViewTransport,
   useMoonPay
 };