@farcaster/snap 1.15.3 → 1.16.0

package/dist/react/v2/snap-view.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import type { ValidationResult } from "../../validator.js";
+import type { SnapPage, SnapActionHandlers } from "../index.js";
+export declare function SnapViewV2({ snap, handlers, loading, appearance, onValidationError, validationErrorFallback, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SnapCardV2({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    maxWidth?: number;
+    showOverflowWarning?: boolean;
+    onValidationError?: (result: ValidationResult) => void;
+    validationErrorFallback?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/v2/snap-view.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { validateSnapResponse } from "../../validator.js";
+import { SnapViewCore } from "../snap-view-core.js";
+const SNAP_MAX_HEIGHT = 500;
+const SNAP_WARNING_HEIGHT = 700;
+// ─── Default validation error fallback ────────────────
+function SnapValidationFallback({ appearance, message, }) {
+    const isDark = appearance === "dark";
+    return (_jsx("div", { style: {
+            width: "100%",
+            padding: 16,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
+            fontSize: 14,
+        }, children: _jsx("span", { children: message ? `Unable to render snap: ${message}` : "Unable to render snap" }) }));
+}
+// ─── SnapViewV2 ──────────────────────────────────────
+export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark", onValidationError, validationErrorFallback, }) {
+    const validation = useMemo(() => validateSnapResponse(snap), [snap]);
+    const valid = validation.valid;
+    const validationMessage = validation.issues[0]?.message;
+    useEffect(() => {
+        if (!valid) {
+            if (onValidationError) {
+                onValidationError(validation);
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.warn("[Snap] validation issues:", validation.issues);
+            }
+        }
+    }, [valid, validation, onValidationError]);
+    if (!valid) {
+        if (validationErrorFallback === null)
+            return null;
+        return _jsx(_Fragment, { children: validationErrorFallback ?? _jsx(SnapValidationFallback, { appearance: appearance, message: validationMessage }) });
+    }
+    return (_jsx(SnapViewCore, { snap: snap, handlers: handlers, loading: loading, appearance: appearance }));
+}
+// ─── SnapCardV2 ──────────────────────────────────────
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", maxWidth = 480, showOverflowWarning = false, onValidationError, validationErrorFallback, }) {
+    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
+    const bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+    return (_jsxs("div", { style: {
+            position: "relative",
+            width: "100%",
+            maxWidth,
+            maxHeight,
+            overflow: "hidden",
+        }, children: [_jsx(SnapViewV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }), showOverflowWarning && (_jsxs("div", { style: {
+                    position: "absolute",
+                    top: SNAP_MAX_HEIGHT,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    pointerEvents: "none",
+                    zIndex: 10,
+                }, children: [_jsx("div", { style: { borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }, children: _jsxs("span", { style: {
+                                position: "absolute",
+                                top: -10,
+                                right: 0,
+                                fontSize: 10,
+                                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                color: "rgba(255,100,100,0.7)",
+                                background: bg,
+                                padding: "1px 4px",
+                                borderRadius: 3,
+                            }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx("div", { style: {
+                            height: "100%",
+                            background: "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
+                        } })] }))] }));
+}

package/dist/react-native/components/snap-action-button.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
-export declare function SnapActionButton({ element: { props }, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;
+export declare function SnapActionButton({ element, emit, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

package/dist/react-native/components/snap-action-button.js

@@ -1,17 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { ExternalLink } from "lucide-react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { ICON_MAP } from "./snap-icon.js";
-export function SnapActionButton({ element: { props }, emit, }) {
+function isExternalLinkAction(on) {
+    if (!on)
+        return false;
+    const press = on.press;
+    if (!press || press.action !== "open_url")
+        return false;
+    return press.params?.isSnap !== true;
+}
+export function SnapActionButton({ element, emit, }) {
     const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
+    const { props } = element;
     const label = String(props.label ?? "Action");
     const variant = String(props.variant ?? "secondary");
     const isPrimary = variant === "primary";
     const iconName = props.icon ? String(props.icon) : undefined;
     const textColor = isPrimary ? "#fff" : colors.text;
     const iconColor = isPrimary ? "#fff" : colors.text;
+    const on = element.on;
+    const showExternalIcon = isExternalLinkAction(on);
     return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
                 isPrimary ? styles.btnDefault : styles.btnOther,
@@ -30,7 +42,12 @@ export function SnapActionButton({ element: { props }, emit, }) {
                         }
                     }
                 })();
-            }, children: [iconName && ICON_MAP[iconName] ? ((() => { const I = ICON_MAP[iconName]; return _jsx(I, { size: 16, color: iconColor }); })()) : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label })] }) }));
+            }, children: [iconName && ICON_MAP[iconName]
+                    ? (() => {
+                        const I = ICON_MAP[iconName];
+                        return _jsx(I, { size: 16, color: iconColor });
+                    })()
+                    : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
 }
 const styles = StyleSheet.create({
     outer: { flex: 1, minWidth: 0 },

package/dist/react-native/components/snap-badge.js

@@ -15,11 +15,11 @@ export function SnapBadge({ element: { props }, }) {
     return (_jsxs(View, { style: [
             styles.badge,
             isFilled
-                ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
+                ? { backgroundColor: resolvedColor + "20", borderColor: "transparent" }
                 : { borderColor: resolvedColor },
-        ], children: [Icon && (_jsx(Icon, { size: 12, color: isFilled ? "#fff" : resolvedColor })), _jsx(Text, { style: [
+        ], children: [Icon && (_jsx(Icon, { size: 12, color: resolvedColor })), _jsx(Text, { style: [
                     styles.label,
-                    { color: isFilled ? "#fff" : resolvedColor },
+                    { color: resolvedColor },
                 ], children: label })] }));
 }
 const styles = StyleSheet.create({

package/dist/react-native/index.d.ts

@@ -1,52 +1,24 @@
-import type { Spec } from "@json-render/core";
-import { useSnapTheme, type SnapNativeColors } from "./theme.js";
+import type { ReactNode } from "react";
+import type { ValidationResult } from "@farcaster/snap";
+import type { SnapNativeColors } from "./theme.js";
+import type { SnapPage, SnapActionHandlers } from "./types.js";
+import { useSnapTheme } from "./theme.js";
 import { hexToRgba } from "./use-snap-palette.js";
-export type JsonValue = string | number | boolean | null | JsonValue[] | {
-    [key: string]: JsonValue;
-};
-export type SnapPage = {
-    version: string;
-    theme?: {
-        accent?: string;
-    };
-    effects?: string[];
-    ui: Spec;
-};
-export type SnapActionHandlers = {
-    submit: (target: string, inputs: Record<string, JsonValue>) => void;
-    open_url: (target: string) => void;
-    open_mini_app: (target: string) => void;
-    view_cast: (params: {
-        hash: string;
-    }) => void;
-    view_profile: (params: {
-        fid: number;
-    }) => void;
-    compose_cast: (params: {
-        text?: string;
-        channelKey?: string;
-        embeds?: string[];
-    }) => void;
-    view_token: (params: {
-        token: string;
-    }) => void;
-    send_token: (params: {
-        token: string;
-        amount?: string;
-        recipientFid?: number;
-        recipientAddress?: string;
-    }) => void;
-    swap_token: (params: {
-        sellToken?: string;
-        buyToken?: string;
-    }) => void;
-};
+export type { JsonValue, SnapPage, SnapActionHandlers } from "./types.js";
 export { useSnapTheme, hexToRgba };
 export type { SnapNativeColors };
-export declare function SnapView({ snap, handlers, loading, appearance, colors, }: {
+export declare function SnapCard({ snap, handlers, loading, appearance, colors, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, }: {
     snap: SnapPage;
     handlers: SnapActionHandlers;
     loading?: boolean;
     appearance?: "light" | "dark";
     colors?: Partial<SnapNativeColors>;
+    /** Border radius of the card (default 16). */
+    borderRadius?: number;
+    /** When true (v2 only), extends to 700px and shows a warning overlay below 500px. When false, clips at 500px. */
+    showOverflowWarning?: boolean;
+    /** Called when snap validation fails (v2 only). */
+    onValidationError?: (result: ValidationResult) => void;
+    /** Custom fallback rendered when validation fails (v2 only). */
+    validationErrorFallback?: ReactNode;
 }): import("react").JSX.Element;

package/dist/react-native/index.js

@@ -1,169 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
-import { SnapCatalogView } from "./catalog-renderer.js";
-import { SnapThemeProvider, useSnapTheme, } from "./theme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SPEC_VERSION_2 } from "@farcaster/snap";
+import { useSnapTheme } from "./theme.js";
 import { hexToRgba } from "./use-snap-palette.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
-import { ConfettiOverlay } from "./confetti-overlay.js";
-import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
+import { SnapCardV1 } from "./v1/snap-view.js";
+import { SnapCardV2 } from "./v2/snap-view.js";
 // ─── Re-exports ───────────────────────────────────────
 export { useSnapTheme, hexToRgba };
-// ─── Internal helpers ─────────────────────────────────
-function applyStatePaths(model, changes) {
-    const entries = Array.isArray(changes)
-        ? changes.map((c) => [c.path, c.value])
-        : Object.entries(changes);
-    for (const [path, value] of entries) {
-        const trimmed = path.startsWith("/") ? path : `/${path}`;
-        const parts = trimmed.split("/").filter(Boolean);
-        if (parts.length < 2)
-            continue;
-        const [top, ...rest] = parts;
-        if (top === "inputs") {
-            if (typeof model.inputs !== "object" || model.inputs === null) {
-                model.inputs = {};
-            }
-            const inputs = model.inputs;
-            if (rest.length === 1) {
-                inputs[rest[0]] = value;
-            }
-            continue;
-        }
-        if (top === "theme") {
-            if (typeof model.theme !== "object" || model.theme === null) {
-                model.theme = {};
-            }
-            const theme = model.theme;
-            if (rest.length === 1) {
-                theme[rest[0]] = value;
-            }
-        }
+// ─── SnapCard (version-switching) ─────────────────────
+export function SnapCard({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, }) {
+    if (snap.version === SPEC_VERSION_2) {
+        return (_jsx(SnapCardV2, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
     }
+    return (_jsx(SnapCardV1, { snap: snap, handlers: handlers, loading: loading, appearance: appearance, colors: colors, borderRadius: borderRadius }));
 }
-function resolveAccentHex(accent, appearance) {
-    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-    const name = accent && Object.hasOwn(map, accent)
-        ? accent
-        : DEFAULT_THEME_ACCENT;
-    return map[name];
-}
-// ─── SnapView ─────────────────────────────────────────
-function SnapViewInner({ snap, handlers, loading = false, }) {
-    const { mode } = useSnapTheme();
-    const spec = snap.ui;
-    const accentHex = resolveAccentHex(snap.theme?.accent, mode);
-    const showConfetti = snap.effects?.includes("confetti");
-    // Increment key each time a new snap with confetti arrives so the overlay
-    // unmounts/remounts and restarts its animation on every trigger.
-    const confettiEpochRef = useRef(0);
-    const lastConfettiSnapRef = useRef(null);
-    if (showConfetti && snap !== lastConfettiSnapRef.current) {
-        confettiEpochRef.current++;
-        lastConfettiSnapRef.current = snap;
-    }
-    const initialState = useMemo(() => ({
-        ...(spec.state ?? {}),
-        inputs: { ...(spec.state?.inputs ?? {}) },
-        theme: {
-            ...(spec.state?.theme ?? {}),
-            ...(snap.theme ? { accent: snap.theme.accent } : {}),
-        },
-    }), [spec, snap.theme]);
-    const stateRef = useRef(initialState);
-    useEffect(() => {
-        stateRef.current = {
-            inputs: {
-                ...(initialState.inputs ?? {}),
-            },
-            theme: {
-                ...(initialState.theme ?? {}),
-            },
-        };
-    }, [initialState]);
-    useEffect(() => {
-        const result = snapJsonRenderCatalog.validate(spec);
-        if (!result.success) {
-            // eslint-disable-next-line no-console
-            console.warn("[SnapView] catalog validation issues:", result.error);
-        }
-    }, [spec]);
-    const [pageKey, setPageKey] = useState(0);
-    useEffect(() => {
-        setPageKey((k) => k + 1);
-    }, [spec]);
-    const handlersRef = useRef(handlers);
-    handlersRef.current = handlers;
-    const handleAction = useCallback((name, params) => {
-        const inputs = (stateRef.current.inputs ?? {});
-        const p = (params ?? {});
-        const h = handlersRef.current;
-        switch (name) {
-            case "submit":
-                h.submit(String(p.target ?? ""), inputs);
-                break;
-            case "open_url":
-                h.open_url(String(p.target ?? ""));
-                break;
-            case "open_mini_app":
-                h.open_mini_app(String(p.target ?? ""));
-                break;
-            case "view_cast":
-                h.view_cast({ hash: String(p.hash ?? "") });
-                break;
-            case "view_profile":
-                h.view_profile({ fid: Number(p.fid ?? 0) });
-                break;
-            case "compose_cast":
-                h.compose_cast({
-                    text: p.text ? String(p.text) : undefined,
-                    channelKey: p.channelKey ? String(p.channelKey) : undefined,
-                    embeds: Array.isArray(p.embeds) ? p.embeds : undefined,
-                });
-                break;
-            case "view_token":
-                h.view_token({ token: String(p.token ?? "") });
-                break;
-            case "send_token":
-                h.send_token({
-                    token: String(p.token ?? ""),
-                    amount: p.amount ? String(p.amount) : undefined,
-                    recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
-                    recipientAddress: p.recipientAddress
-                        ? String(p.recipientAddress)
-                        : undefined,
-                });
-                break;
-            case "swap_token":
-                h.swap_token({
-                    sellToken: p.sellToken ? String(p.sellToken) : undefined,
-                    buyToken: p.buyToken ? String(p.buyToken) : undefined,
-                });
-                break;
-            default:
-                break;
-        }
-    }, []);
-    return (_jsxs(View, { style: styles.container, children: [loading ? (_jsx(View, { style: [
-                    styles.overlay,
-                    {
-                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
-                    },
-                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, showConfetti ? _jsx(ConfettiOverlay, {}, `confetti-${confettiEpochRef.current}`) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
-                    applyStatePaths(stateRef.current, changes);
-                }, onAction: handleAction }, pageKey)] }));
-}
-export function SnapView({ snap, handlers, loading = false, appearance = "dark", colors, }) {
-    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewInner, { snap: snap, handlers: handlers, loading: loading }) }));
-}
-const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 10,
-    },
-});

package/dist/react-native/snap-view-core.d.ts

@@ -0,0 +1,11 @@
+import type { SnapPage, SnapActionHandlers } from "./types.js";
+export declare function applyStatePaths(model: Record<string, unknown>, changes: {
+    path: string;
+    value: unknown;
+}[] | Record<string, unknown>): void;
+export declare function resolveAccentHex(accent: string | undefined, appearance: "light" | "dark"): string;
+export declare function SnapViewCoreInner({ snap, handlers, loading, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+}): import("react").JSX.Element;

package/dist/react-native/snap-view-core.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapCatalogView } from "./catalog-renderer.js";
+import { useSnapTheme } from "./theme.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
+// ─── Shared helpers ──────────────────────────────────
+export function applyStatePaths(model, changes) {
+    const entries = Array.isArray(changes)
+        ? changes.map((c) => [c.path, c.value])
+        : Object.entries(changes);
+    for (const [path, value] of entries) {
+        const trimmed = path.startsWith("/") ? path : `/${path}`;
+        const parts = trimmed.split("/").filter(Boolean);
+        if (parts.length < 2)
+            continue;
+        const [top, ...rest] = parts;
+        if (top === "inputs") {
+            if (typeof model.inputs !== "object" || model.inputs === null) {
+                model.inputs = {};
+            }
+            const inputs = model.inputs;
+            if (rest.length === 1) {
+                inputs[rest[0]] = value;
+            }
+            continue;
+        }
+        if (top === "theme") {
+            if (typeof model.theme !== "object" || model.theme === null) {
+                model.theme = {};
+            }
+            const theme = model.theme;
+            if (rest.length === 1) {
+                theme[rest[0]] = value;
+            }
+        }
+    }
+}
+export function resolveAccentHex(accent, appearance) {
+    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    const name = accent && Object.hasOwn(map, accent)
+        ? accent
+        : DEFAULT_THEME_ACCENT;
+    return map[name];
+}
+// ─── Core rendering component (no validation) ────────
+export function SnapViewCoreInner({ snap, handlers, loading = false, }) {
+    const { mode } = useSnapTheme();
+    const spec = snap.ui;
+    const accentHex = resolveAccentHex(snap.theme?.accent, mode);
+    const initialState = useMemo(() => ({
+        ...(spec.state ?? {}),
+        inputs: { ...(spec.state?.inputs ?? {}) },
+        theme: {
+            ...(spec.state?.theme ?? {}),
+            ...(snap.theme ? { accent: snap.theme.accent } : {}),
+        },
+    }), [spec, snap.theme]);
+    const stateRef = useRef(initialState);
+    useEffect(() => {
+        stateRef.current = {
+            inputs: {
+                ...(initialState.inputs ?? {}),
+            },
+            theme: {
+                ...(initialState.theme ?? {}),
+            },
+        };
+    }, [initialState]);
+    useEffect(() => {
+        const catalogResult = snapJsonRenderCatalog.validate(spec);
+        if (!catalogResult.success) {
+            // eslint-disable-next-line no-console
+            console.warn("[Snap] catalog validation issues:", catalogResult.error);
+        }
+    }, [spec]);
+    const [pageKey, setPageKey] = useState(0);
+    useEffect(() => {
+        setPageKey((k) => k + 1);
+    }, [spec]);
+    const handlersRef = useRef(handlers);
+    handlersRef.current = handlers;
+    const handleAction = useCallback((name, params) => {
+        const inputs = (stateRef.current.inputs ?? {});
+        const p = (params ?? {});
+        const h = handlersRef.current;
+        switch (name) {
+            case "submit":
+                h.submit(String(p.target ?? ""), inputs);
+                break;
+            case "open_url":
+                h.open_url(String(p.target ?? ""));
+                break;
+            case "open_mini_app":
+                h.open_mini_app(String(p.target ?? ""));
+                break;
+            case "view_cast":
+                h.view_cast({ hash: String(p.hash ?? "") });
+                break;
+            case "view_profile":
+                h.view_profile({ fid: Number(p.fid ?? 0) });
+                break;
+            case "compose_cast":
+                h.compose_cast({
+                    text: p.text ? String(p.text) : undefined,
+                    channelKey: p.channelKey ? String(p.channelKey) : undefined,
+                    embeds: Array.isArray(p.embeds) ? p.embeds : undefined,
+                });
+                break;
+            case "view_token":
+                h.view_token({ token: String(p.token ?? "") });
+                break;
+            case "send_token":
+                h.send_token({
+                    token: String(p.token ?? ""),
+                    amount: p.amount ? String(p.amount) : undefined,
+                    recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
+                    recipientAddress: p.recipientAddress
+                        ? String(p.recipientAddress)
+                        : undefined,
+                });
+                break;
+            case "swap_token":
+                h.swap_token({
+                    sellToken: p.sellToken ? String(p.sellToken) : undefined,
+                    buyToken: p.buyToken ? String(p.buyToken) : undefined,
+                });
+                break;
+            default:
+                break;
+        }
+    }, []);
+    return (_jsxs(View, { style: styles.container, children: [loading ? (_jsx(View, { style: [
+                    styles.overlay,
+                    {
+                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
+                    },
+                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })) : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                    applyStatePaths(stateRef.current, changes);
+                }, onAction: handleAction }, pageKey)] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 10,
+    },
+});

package/dist/react-native/types.d.ts

@@ -0,0 +1,41 @@
+import type { Spec } from "@json-render/core";
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type SnapPage = {
+    version: string;
+    theme?: {
+        accent?: string;
+    };
+    effects?: string[];
+    ui: Spec;
+};
+export type SnapActionHandlers = {
+    submit: (target: string, inputs: Record<string, JsonValue>) => void;
+    open_url: (target: string) => void;
+    open_mini_app: (target: string) => void;
+    view_cast: (params: {
+        hash: string;
+    }) => void;
+    view_profile: (params: {
+        fid: number;
+    }) => void;
+    compose_cast: (params: {
+        text?: string;
+        channelKey?: string;
+        embeds?: string[];
+    }) => void;
+    view_token: (params: {
+        token: string;
+    }) => void;
+    send_token: (params: {
+        token: string;
+        amount?: string;
+        recipientFid?: number;
+        recipientAddress?: string;
+    }) => void;
+    swap_token: (params: {
+        sellToken?: string;
+        buyToken?: string;
+    }) => void;
+};

package/dist/react-native/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/v1/snap-view.d.ts

@@ -0,0 +1,22 @@
+import { type SnapNativeColors } from "../theme.js";
+import type { SnapPage, SnapActionHandlers } from "../types.js";
+export declare function SnapViewV1Inner({ snap, handlers, loading, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+}): import("react").JSX.Element;
+export declare function SnapViewV1({ snap, handlers, loading, appearance, colors, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+}): import("react").JSX.Element;
+export declare function SnapCardV1({ snap, handlers, loading, appearance, colors, borderRadius, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    borderRadius?: number;
+}): import("react").JSX.Element;