@farcaster/snap 1.6.0 → 1.7.0

package/src/react-native/components/snap-switch.tsx

@@ -0,0 +1,45 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Switch, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapSwitch({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "switch");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const fallback = Boolean(props.defaultChecked ?? false);
+  const raw = get(path);
+  const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
+
+  return (
+    <View style={styles.row}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <Switch
+        value={checked}
+        onValueChange={(v) => set(path, v)}
+        trackColor={{ false: colors.border, true: accentHex }}
+        thumbColor="#fff"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "400",
+    flex: 1,
+  },
+});

package/src/react-native/components/snap-text.tsx

@@ -0,0 +1,53 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
+  lg: { fontSize: 20, fontWeight: "700" },
+  md: { fontSize: 16, lineHeight: 24 },
+  sm: { fontSize: 13 },
+};
+
+const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {
+  bold: "700",
+  medium: "500",
+  normal: "400",
+};
+
+export function SnapText({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { colors } = useSnapTheme();
+  const content = String(props.content ?? "");
+  const size = String(props.size ?? "md");
+  const weight = props.weight ? String(props.weight) : undefined;
+  const align = (props.align as "left" | "center" | "right" | undefined) ?? undefined;
+
+  const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
+  const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
+  const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
+
+  return (
+    <View style={styles.wrap}>
+      <Text
+        style={[
+          styles.base,
+          {
+            color: colors.text,
+            fontSize: sizeStyle!.fontSize,
+            lineHeight: sizeStyle!.lineHeight,
+            fontWeight: resolvedWeight,
+            textAlign,
+          },
+        ]}
+      >
+        {content}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, width: "100%" },
+  base: {},
+});

package/src/react-native/components/snap-toggle-group.tsx

@@ -0,0 +1,128 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapToggleGroup({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  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 as string[])
+    : [];
+
+  const raw = get(path);
+  const defaultValue = props.defaultValue;
+
+  const selected = (() => {
+    if (raw !== undefined && raw !== null) {
+      return isMultiple
+        ? Array.isArray(raw)
+          ? (raw as string[])
+          : []
+        : typeof raw === "string"
+          ? [raw]
+          : [];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue)
+        ? (defaultValue as string[])
+        : [String(defaultValue)];
+    }
+    return [];
+  })();
+
+  const isVertical = orientation === "vertical";
+
+  const handlePress = (opt: string) => {
+    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 (
+    <View style={styles.wrap}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <View
+        style={[
+          styles.group,
+          { backgroundColor: colors.border + "33" },
+          isVertical ? styles.groupVertical : styles.groupHorizontal,
+        ]}
+      >
+        {options.map((opt, index) => {
+          const isSelected = selected.includes(opt);
+          return (
+            <Pressable
+              key={index}
+              style={({ pressed }) => [
+                styles.option,
+                isSelected && { backgroundColor: accentHex },
+                pressed && styles.pressed,
+                !isVertical && styles.optionHorizontal,
+              ]}
+              onPress={() => handlePress(opt)}
+            >
+              <Text
+                style={[
+                  styles.optionText,
+                  { color: colors.text },
+                  isSelected && styles.optionTextSelected,
+                ]}
+              >
+                {opt}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+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/src/react-native/index.tsx

@@ -0,0 +1,267 @@
+import type { Spec } from "@json-render/core";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapCatalogView } from "./catalog-renderer";
+import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "./theme";
+import { hexToRgba } from "./use-snap-palette";
+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,
+  type PaletteColor,
+} from "@farcaster/snap";
+
+// ─── Public types ──────────────────────────────────────
+
+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;
+};
+
+// ─── Re-exports ───────────────────────────────────────
+
+export { useSnapTheme, hexToRgba };
+export type { SnapNativeColors };
+
+// ─── Internal helpers ─────────────────────────────────
+
+function applyStatePaths(
+  model: Record<string, unknown>,
+  changes: { path: string; value: unknown }[] | Record<string, unknown>,
+): void {
+  const entries = Array.isArray(changes)
+    ? changes.map((c) => [c.path, c.value] as const)
+    : 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 as Record<string, unknown>;
+      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 as Record<string, unknown>;
+      if (rest.length === 1) {
+        theme[rest[0]!] = value;
+      }
+    }
+  }
+}
+
+function resolveAccentHex(accent: string | undefined, appearance: "light" | "dark"): string {
+  const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+  const name = accent && Object.hasOwn(map, accent) ? (accent as PaletteColor) : DEFAULT_THEME_ACCENT;
+  return map[name];
+}
+
+// ─── SnapView ─────────────────────────────────────────
+
+function SnapViewInner({
+  snap,
+  handlers,
+  loading = false,
+}: {
+  snap: SnapPage;
+  handlers: SnapActionHandlers;
+  loading?: boolean;
+}) {
+  const { mode } = useSnapTheme();
+  const spec = snap.ui;
+  const accentHex = resolveAccentHex(snap.theme?.accent, mode);
+
+  const initialState = useMemo(
+    () => ({
+      ...(spec.state ?? {}),
+      inputs: { ...((spec.state?.inputs ?? {}) as Record<string, unknown>) },
+      theme: {
+        ...((spec.state?.theme ?? {}) as Record<string, unknown>),
+        ...(snap.theme ? { accent: snap.theme.accent } : {}),
+      },
+    }),
+    [spec, snap.theme],
+  );
+
+  const stateRef = useRef<Record<string, unknown>>(initialState);
+
+  useEffect(() => {
+    stateRef.current = {
+      inputs: {
+        ...((initialState.inputs ?? {}) as Record<string, unknown>),
+      },
+      theme: {
+        ...((initialState.theme ?? {}) as Record<string, unknown>),
+      },
+    };
+  }, [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: unknown, params: unknown) => {
+    const inputs = (stateRef.current.inputs ?? {}) as Record<string, JsonValue>;
+    const p = (params ?? {}) as Record<string, unknown>;
+    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 as string[]) : 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 (
+    <View style={styles.container}>
+      {loading && (
+        <View
+          style={[
+            styles.overlay,
+            {
+              backgroundColor:
+                mode === "dark" ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.75)",
+            },
+          ]}
+        >
+          <ActivityIndicator size="large" color={accentHex} />
+        </View>
+      )}
+      <SnapCatalogView
+        key={pageKey}
+        spec={spec}
+        state={initialState}
+        loading={false}
+        onStateChange={(changes) => {
+          applyStatePaths(stateRef.current, changes);
+        }}
+        onAction={handleAction}
+      />
+    </View>
+  );
+}
+
+export function SnapView({
+  snap,
+  handlers,
+  loading = false,
+  appearance = "dark",
+  colors,
+}: {
+  snap: SnapPage;
+  handlers: SnapActionHandlers;
+  loading?: boolean;
+  appearance?: "light" | "dark";
+  colors?: Partial<SnapNativeColors>;
+}) {
+  return (
+    <SnapThemeProvider appearance={appearance} colors={colors}>
+      <SnapViewInner snap={snap} handlers={handlers} loading={loading} />
+    </SnapThemeProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+  },
+});

package/src/react-native/theme.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+// ─── Color tokens ─────────────────────────────────────
+
+export type SnapNativeColors = {
+  bg: string;
+  surface: string;
+  text: string;
+  textSecondary: string;
+  border: string;
+  inputBg: string;
+  muted: string;
+};
+
+const DEFAULT_LIGHT: SnapNativeColors = {
+  bg: "#dfe3e8",
+  surface: "#ffffff",
+  text: "#111111",
+  textSecondary: "#6b7280",
+  border: "#d1d5db",
+  inputBg: "#ffffff",
+  muted: "#f9fafb",
+};
+
+const DEFAULT_DARK: SnapNativeColors = {
+  bg: "#111318",
+  surface: "#1a1d24",
+  text: "#fafafa",
+  textSecondary: "#a1a1aa",
+  border: "#374151",
+  inputBg: "#1a1d24",
+  muted: "#27272a",
+};
+
+// ─── Context ──────────────────────────────────────────
+
+interface SnapThemeValue {
+  mode: "light" | "dark";
+  colors: SnapNativeColors;
+}
+
+const SnapThemeContext = createContext<SnapThemeValue>({
+  mode: "dark",
+  colors: DEFAULT_DARK,
+});
+
+export function SnapThemeProvider({
+  appearance,
+  colors,
+  children,
+}: {
+  appearance: "light" | "dark";
+  colors?: Partial<SnapNativeColors>;
+  children: ReactNode;
+}) {
+  const value = useMemo<SnapThemeValue>(() => {
+    const defaults = appearance === "dark" ? DEFAULT_DARK : DEFAULT_LIGHT;
+    return {
+      mode: appearance,
+      colors: colors ? { ...defaults, ...colors } : defaults,
+    };
+  }, [appearance, colors]);
+
+  return (
+    <SnapThemeContext.Provider value={value}>
+      {children}
+    </SnapThemeContext.Provider>
+  );
+}
+
+export function useSnapTheme(): SnapThemeValue {
+  return useContext(SnapThemeContext);
+}

package/src/react-native/use-snap-palette.ts

@@ -0,0 +1,64 @@
+import {
+  DEFAULT_THEME_ACCENT,
+  PALETTE_COLOR_VALUES,
+  PALETTE_LIGHT_HEX,
+  PALETTE_DARK_HEX,
+  type PaletteColor,
+} from "@farcaster/snap";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapTheme } from "./theme";
+
+function resolveHex(name: string, appearance: "light" | "dark"): string {
+  const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+  if (Object.hasOwn(map, name)) {
+    return map[name as PaletteColor];
+  }
+  return map.purple;
+}
+
+function isPaletteColor(s: string): s is PaletteColor {
+  return (PALETTE_COLOR_VALUES as readonly string[]).includes(s);
+}
+
+function themeAccentFromStore(get: (path: string) => unknown): PaletteColor {
+  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: string) =>
+    semantic === "accent" ? accentHex : resolveHex(semantic, mode);
+
+  return { appearance: mode, accentName, accentHex, hex };
+}
+
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export function hexToRgba(hex: string, alpha: number): string {
+  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: string | undefined) {
+  const { mode } = useSnapTheme();
+  const accentName =
+    typeof themeAccent === "string" && isPaletteColor(themeAccent)
+      ? themeAccent
+      : DEFAULT_THEME_ACCENT;
+  const accentHex = resolveHex(accentName, mode);
+  return { appearance: mode, accentName, accentHex };
+}