@farcaster/snap 1.6.0 → 1.7.0

package/dist/react-native/components/snap-toggle-group.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapToggleGroup({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const { accentHex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const name = String(props.name ?? "toggle_group");
+    const path = `/inputs/${name}`;
+    const label = props.label ? String(props.label) : undefined;
+    const isMultiple = Boolean(props.multiple);
+    const orientation = String(props.orientation ?? "horizontal");
+    const options = Array.isArray(props.options)
+        ? props.options
+        : [];
+    const raw = get(path);
+    const defaultValue = props.defaultValue;
+    const selected = (() => {
+        if (raw !== undefined && raw !== null) {
+            return isMultiple
+                ? Array.isArray(raw)
+                    ? raw
+                    : []
+                : typeof raw === "string"
+                    ? [raw]
+                    : [];
+        }
+        if (defaultValue !== undefined) {
+            return Array.isArray(defaultValue)
+                ? defaultValue
+                : [String(defaultValue)];
+        }
+        return [];
+    })();
+    const isVertical = orientation === "vertical";
+    const handlePress = (opt) => {
+        if (isMultiple) {
+            const next = selected.includes(opt)
+                ? selected.filter((s) => s !== opt)
+                : [...selected, opt];
+            set(path, next);
+        }
+        else {
+            if (opt && opt !== selected[0])
+                set(path, opt);
+        }
+    };
+    return (_jsxs(View, { style: styles.wrap, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(View, { style: [
+                    styles.group,
+                    { backgroundColor: colors.border + "33" },
+                    isVertical ? styles.groupVertical : styles.groupHorizontal,
+                ], children: options.map((opt, index) => {
+                    const isSelected = selected.includes(opt);
+                    return (_jsx(Pressable, { style: ({ pressed }) => [
+                            styles.option,
+                            isSelected && { backgroundColor: accentHex },
+                            pressed && styles.pressed,
+                            !isVertical && styles.optionHorizontal,
+                        ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
+                                styles.optionText,
+                                { color: colors.text },
+                                isSelected && styles.optionTextSelected,
+                            ], children: opt }) }, index));
+                }) })] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%", gap: 6 },
+    label: { fontSize: 13, fontWeight: "500" },
+    group: {
+        padding: 4,
+        borderRadius: 8,
+        gap: 4,
+    },
+    groupHorizontal: {
+        flexDirection: "row",
+    },
+    groupVertical: {
+        flexDirection: "column",
+    },
+    option: {
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    optionHorizontal: {
+        flex: 1,
+    },
+    pressed: { opacity: 0.88 },
+    optionText: {
+        fontSize: 13,
+        fontWeight: "500",
+    },
+    optionTextSelected: {
+        color: "#fff",
+    },
+});

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

@@ -0,0 +1,52 @@
+import type { Spec } from "@json-render/core";
+import { useSnapTheme, type SnapNativeColors } 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 { useSnapTheme, hexToRgba };
+export type { SnapNativeColors };
+export declare function SnapView({ snap, handlers, loading, appearance, colors, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+}): import("react").JSX.Element;

package/dist/react-native/index.js

@@ -0,0 +1,155 @@
+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 { hexToRgba } from "./use-snap-palette.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";
+// ─── 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;
+            }
+        }
+    }
+}
+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 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.6)" : "rgba(255,255,255,0.75)",
+                    },
+                ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })), _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/theme.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export type SnapNativeColors = {
+    bg: string;
+    surface: string;
+    text: string;
+    textSecondary: string;
+    border: string;
+    inputBg: string;
+    muted: string;
+};
+interface SnapThemeValue {
+    mode: "light" | "dark";
+    colors: SnapNativeColors;
+}
+export declare function SnapThemeProvider({ appearance, colors, children, }: {
+    appearance: "light" | "dark";
+    colors?: Partial<SnapNativeColors>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSnapTheme(): SnapThemeValue;
+export {};

package/dist/react-native/theme.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const DEFAULT_LIGHT = {
+    bg: "#dfe3e8",
+    surface: "#ffffff",
+    text: "#111111",
+    textSecondary: "#6b7280",
+    border: "#d1d5db",
+    inputBg: "#ffffff",
+    muted: "#f9fafb",
+};
+const DEFAULT_DARK = {
+    bg: "#111318",
+    surface: "#1a1d24",
+    text: "#fafafa",
+    textSecondary: "#a1a1aa",
+    border: "#374151",
+    inputBg: "#1a1d24",
+    muted: "#27272a",
+};
+const SnapThemeContext = createContext({
+    mode: "dark",
+    colors: DEFAULT_DARK,
+});
+export function SnapThemeProvider({ appearance, colors, children, }) {
+    const value = useMemo(() => {
+        const defaults = appearance === "dark" ? DEFAULT_DARK : DEFAULT_LIGHT;
+        return {
+            mode: appearance,
+            colors: colors ? { ...defaults, ...colors } : defaults,
+        };
+    }, [appearance, colors]);
+    return (_jsx(SnapThemeContext.Provider, { value: value, children: children }));
+}
+export function useSnapTheme() {
+    return useContext(SnapThemeContext);
+}

package/dist/react-native/use-snap-palette.d.ts

@@ -0,0 +1,13 @@
+export declare function useSnapPalette(): {
+    appearance: "light" | "dark";
+    accentName: "gray" | "blue" | "red" | "amber" | "green" | "teal" | "purple" | "pink";
+    accentHex: string;
+    hex: (semantic: string) => string;
+};
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export declare function hexToRgba(hex: string, alpha: number): string;
+export declare function useSnapPreviewChromePalette(themeAccent: string | undefined): {
+    appearance: "light" | "dark";
+    accentName: "gray" | "blue" | "red" | "amber" | "green" | "teal" | "purple" | "pink";
+    accentHex: string;
+};

package/dist/react-native/use-snap-palette.js

@@ -0,0 +1,48 @@
+import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapTheme } from "./theme.js";
+function resolveHex(name, appearance) {
+    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    if (Object.hasOwn(map, name)) {
+        return map[name];
+    }
+    return map.purple;
+}
+function isPaletteColor(s) {
+    return PALETTE_COLOR_VALUES.includes(s);
+}
+function themeAccentFromStore(get) {
+    const raw = get("/theme/accent");
+    if (typeof raw === "string" && isPaletteColor(raw)) {
+        return raw;
+    }
+    return DEFAULT_THEME_ACCENT;
+}
+export function useSnapPalette() {
+    const { mode } = useSnapTheme();
+    const { get } = useStateStore();
+    const accentName = themeAccentFromStore(get);
+    const accentHex = resolveHex(accentName, mode);
+    const hex = (semantic) => semantic === "accent" ? accentHex : resolveHex(semantic, mode);
+    return { appearance: mode, accentName, accentHex, hex };
+}
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export function hexToRgba(hex, alpha) {
+    const m = /^#([0-9a-fA-F]{6})$/.exec(hex.trim());
+    if (!m) {
+        return `rgba(0,0,0,${alpha})`;
+    }
+    const n = Number.parseInt(m[1], 16);
+    const r = (n >> 16) & 255;
+    const g = (n >> 8) & 255;
+    const b = n & 255;
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+export function useSnapPreviewChromePalette(themeAccent) {
+    const { mode } = useSnapTheme();
+    const accentName = typeof themeAccent === "string" && isPaletteColor(themeAccent)
+        ? themeAccent
+        : DEFAULT_THEME_ACCENT;
+    const accentHex = resolveHex(accentName, mode);
+    return { appearance: mode, accentName, accentHex };
+}

package/dist/ui/badge.d.ts

@@ -14,18 +14,18 @@ export declare const badgeProps: z.ZodObject<{
         accent: "accent";
     }>>;
     icon: z.ZodOptional<z.ZodEnum<{
-        check: "check";
-        repeat: "repeat";
         "arrow-right": "arrow-right";
         "arrow-left": "arrow-left";
         "external-link": "external-link";
         "chevron-right": "chevron-right";
+        check: "check";
         x: "x";
         "alert-triangle": "alert-triangle";
         info: "info";
         clock: "clock";
         heart: "heart";
         "message-circle": "message-circle";
+        repeat: "repeat";
         share: "share";
         user: "user";
         users: "users";

package/dist/ui/button.d.ts

@@ -10,18 +10,18 @@ export declare const buttonProps: z.ZodObject<{
         ghost: "ghost";
     }>>;
     icon: z.ZodOptional<z.ZodEnum<{
-        check: "check";
-        repeat: "repeat";
         "arrow-right": "arrow-right";
         "arrow-left": "arrow-left";
         "external-link": "external-link";
         "chevron-right": "chevron-right";
+        check: "check";
         x: "x";
         "alert-triangle": "alert-triangle";
         info: "info";
         clock: "clock";
         heart: "heart";
         "message-circle": "message-circle";
+        repeat: "repeat";
         share: "share";
         user: "user";
         users: "users";

package/dist/ui/catalog.d.ts

@@ -14,7 +14,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
             children: {
                 optional: true;
                 kind: "array";
-                inner?: import("@json-render/core").SchemaType<"string", unknown> | undefined;
+                inner?: import("@json-render/core").SchemaType<"string", unknown>;
             };
         }>>;
     }>;
@@ -49,18 +49,18 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     accent: "accent";
                 }>>;
                 icon: z.ZodOptional<z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";
@@ -96,18 +96,18 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     ghost: "ghost";
                 }>>;
                 icon: z.ZodOptional<z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";
@@ -201,18 +201,18 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         icon: {
             props: z.ZodObject<{
                 name: z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";

package/dist/ui/icon.d.ts

@@ -3,18 +3,18 @@ export declare const ICON_NAMES: readonly ["arrow-right", "arrow-left", "externa
 export declare const ICON_SIZES: readonly ["sm", "md"];
 export declare const iconProps: z.ZodObject<{
     name: z.ZodEnum<{
-        check: "check";
-        repeat: "repeat";
         "arrow-right": "arrow-right";
         "arrow-left": "arrow-left";
         "external-link": "external-link";
         "chevron-right": "chevron-right";
+        check: "check";
         x: "x";
         "alert-triangle": "alert-triangle";
         info: "info";
         clock: "clock";
         heart: "heart";
         "message-circle": "message-circle";
+        repeat: "repeat";
         share: "share";
         user: "user";
         users: "users";

package/dist/ui/schema.d.ts

@@ -11,7 +11,7 @@ export declare const snapJsonRenderSchema: import("@json-render/core").Schema<{
             children: {
                 optional: true;
                 kind: "array";
-                inner?: import("@json-render/core").SchemaType<"string", unknown> | undefined;
+                inner?: import("@json-render/core").SchemaType<"string", unknown>;
             };
         }>>;
     }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",
@@ -100,6 +100,11 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
       "default": "./dist/react/index.js"
+    },
+    "./react-native": {
+      "types": "./dist/react-native/index.d.ts",
+      "import": "./dist/react-native/index.js",
+      "default": "./dist/react-native/index.js"
     }
   },
   "files": [
@@ -147,7 +152,7 @@
     "zod": "^4.0.0"
   },
   "scripts": {
-    "build": "tsc && tsc-alias --resolve-full-paths --resolve-full-extension .js",
+    "build": "tsc && (tsc -p tsconfig.react-native.json || true) && tsc-alias --resolve-full-paths --resolve-full-extension .js",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"

package/src/react-native/catalog-renderer.tsx

@@ -0,0 +1,37 @@
+import { createRenderer } from "@json-render/react-native";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapActionButton } from "./components/snap-action-button";
+import { SnapBadge } from "./components/snap-badge";
+import { SnapIcon } from "./components/snap-icon";
+import { SnapImage } from "./components/snap-image";
+import { SnapInput } from "./components/snap-input";
+import { SnapItem } from "./components/snap-item";
+import { SnapItemGroup } from "./components/snap-item-group";
+import { SnapProgress } from "./components/snap-progress";
+import { SnapSeparator } from "./components/snap-separator";
+import { SnapSlider } from "./components/snap-slider";
+import { SnapStack } from "./components/snap-stack";
+import { SnapSwitch } from "./components/snap-switch";
+import { SnapText } from "./components/snap-text";
+import { SnapToggleGroup } from "./components/snap-toggle-group";
+
+/**
+ * Maps snap json-render catalog types to React Native primitives.
+ * Keys match the snap wire-format `type` strings exactly (snake_case).
+ */
+export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
+  badge: SnapBadge,
+  button: SnapActionButton,
+  icon: SnapIcon,
+  image: SnapImage,
+  input: SnapInput,
+  item: SnapItem,
+  item_group: SnapItemGroup,
+  progress: SnapProgress,
+  separator: SnapSeparator,
+  slider: SnapSlider,
+  stack: SnapStack,
+  switch: SnapSwitch,
+  text: SnapText,
+  toggle_group: SnapToggleGroup,
+});