@farcaster/snap 2.0.0 → 2.0.1

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

@@ -0,0 +1,41 @@
+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";
+import { SnapBarChart } from "./components/snap-bar-chart";
+import { SnapCellGrid } from "./components/snap-cell-grid";
+
+/**
+ * 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,
+  bar_chart: SnapBarChart,
+  cell_grid: SnapCellGrid,
+});

package/src/react-native/components/snap-action-button.tsx

@@ -0,0 +1,96 @@
+declare const __DEV__: boolean;
+
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { ExternalLink } from "lucide-react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { ICON_MAP } from "./snap-icon";
+
+function isExternalLinkAction(
+  on: Record<string, unknown> | undefined,
+): boolean {
+  if (!on) return false;
+  const press = on.press as
+    | { action?: string; params?: Record<string, unknown> }
+    | undefined;
+  if (!press) return false;
+  return press.action === "open_url";
+}
+
+export function SnapActionButton({
+  element,
+  emit,
+}: ComponentRenderProps<Record<string, unknown>>) {
+  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 as unknown as { on?: Record<string, unknown> }).on;
+  const showExternalIcon = isExternalLinkAction(on);
+
+  return (
+    <View style={styles.outer}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.btn,
+          isPrimary ? styles.btnDefault : styles.btnOther,
+          isPrimary
+            ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
+            : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
+          pressed && styles.pressed,
+        ]}
+        onPress={() => {
+          void (async () => {
+            try {
+              await emit("press");
+            } catch (err: unknown) {
+              if (typeof __DEV__ !== "undefined" && __DEV__) {
+                console.error("[snap] action failed", err);
+              }
+            }
+          })();
+        }}
+      >
+        {iconName && ICON_MAP[iconName]
+          ? (() => {
+              const I = ICON_MAP[iconName]!;
+              return <I size={16} color={iconColor} />;
+            })()
+          : null}
+        <Text style={{ color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }}>
+          {label}
+        </Text>
+        {showExternalIcon ? (
+          <ExternalLink size={14} color={iconColor} style={{ opacity: 0.6 }} />
+        ) : null}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: { minWidth: 0 },
+  btn: {
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: 8,
+  },
+  btnDefault: {
+    paddingVertical: 10,
+  },
+  btnOther: {
+    paddingVertical: 8,
+  },
+  pressed: { opacity: 0.88 },
+});

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

@@ -0,0 +1,60 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { ICON_MAP } from "./snap-icon";
+
+export function SnapBadge({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const label = String(props.label ?? "");
+  const variant = String(props.variant ?? "default");
+  const color = props.color ? String(props.color) : undefined;
+  const iconName = props.icon ? String(props.icon) : undefined;
+  const isAccent = !color || color === "accent";
+  const resolvedColor = isAccent ? accentHex : hex(color);
+  const isFilled = variant !== "outline";
+
+  const Icon = iconName ? ICON_MAP[iconName] : undefined;
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        isFilled
+          ? { backgroundColor: resolvedColor + "20", borderColor: "transparent" }
+          : { borderColor: resolvedColor },
+      ]}
+    >
+      {Icon && (
+        <Icon size={12} color={resolvedColor} />
+      )}
+      <Text
+        style={[
+          styles.label,
+          { color: resolvedColor },
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1,
+  },
+  label: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+  },
+});

package/src/react-native/components/snap-bar-chart.tsx

@@ -0,0 +1,73 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapBarChart({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const bars = Array.isArray(props.bars) ? props.bars : [];
+  const chartColor = String(props.color ?? "accent");
+  const maxVal =
+    props.max != null
+      ? Number(props.max)
+      : Math.max(
+          ...bars.map((b: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return hex(bar.color);
+    if (chartColor !== "accent") return hex(chartColor);
+    return accentHex;
+  }
+
+  return (
+    <View style={styles.wrap}>
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          return (
+            <View key={i} style={styles.row}>
+              <Text
+                style={[styles.label, { color: colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {String(bar.label ?? "")}
+              </Text>
+              <View style={[styles.track, { backgroundColor: colors.muted }]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      width: `${pct}%`,
+                      backgroundColor: barFill(bar),
+                    },
+                  ]}
+                />
+              </View>
+              <Text style={[styles.value, { color: colors.textSecondary }]}>
+                {value}
+              </Text>
+            </View>
+          );
+        },
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 8 },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 },
+  label: { width: 80, fontSize: 12, lineHeight: 16, textAlign: "right" },
+  track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
+  fill: { height: "100%", borderRadius: 9999 },
+  value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
+});

package/src/react-native/components/snap-cell-grid.tsx

@@ -0,0 +1,150 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+
+export function SnapCellGrid({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { hex, appearance } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const { get, set } = useStateStore();
+  const cols = Number(props.cols ?? 2);
+  const rows = Number(props.rows ?? 2);
+  const cells = Array.isArray(props.cells) ? props.cells : [];
+  const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
+  const gap = String(props.gap ?? "sm");
+  const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
+  const gapPx = gapMap[gap] ?? 1;
+
+  const select = String(props.select ?? "off");
+  const interactive = select !== "off";
+  const isMultiple = select === "multiple";
+
+  const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+  const tapPath = `/inputs/${name}`;
+  const tapRaw = get(tapPath);
+
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    const key = `${r},${c}`;
+    if (isMultiple) {
+      const next = new Set(selectedSet);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      set(tapPath, [...next].join("|"));
+    } else {
+      set(tapPath, key);
+    }
+  };
+
+  const cellMap = new Map<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  const ringOuter = appearance === "dark" ? "#fff" : "#000";
+  const ringInner = appearance === "dark" ? "#000" : "#fff";
+
+  const rowEls = [];
+  for (let r = 0; r < rows; r++) {
+    const rowCells = [];
+    for (let c = 0; c < cols; c++) {
+      const cell = cellMap.get(`${r},${c}`);
+      const selected = interactive && isSelected(r, c);
+      const bg = cell?.color ? hex(cell.color) : "transparent";
+
+      const cellContent = cell?.content ? (
+        <Text style={[styles.cellText, { color: colors.textPrimary }]}>
+          {cell.content}
+        </Text>
+      ) : null;
+
+      // Two-tone ring: outer View with contrasting border, inner View with inverse border
+      const cellView = selected ? (
+        <View style={[styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
+          <View
+            style={[
+              styles.innerCell,
+              { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+            ]}
+          >
+            {cellContent}
+          </View>
+        </View>
+      ) : (
+        <View style={[styles.cell, { height: rowHeight, backgroundColor: bg }]}>
+          {cellContent}
+        </View>
+      );
+
+      rowCells.push(
+        interactive ? (
+          <Pressable
+            key={`${r}-${c}`}
+            onPress={() => handleTap(r, c)}
+            style={styles.cellWrap}
+          >
+            {cellView}
+          </Pressable>
+        ) : (
+          <View key={`${r}-${c}`} style={styles.cellWrap}>
+            {cellView}
+          </View>
+        ),
+      );
+    }
+    rowEls.push(
+      <View key={r} style={[styles.gridRow, { gap: gapPx }]}>
+        {rowCells}
+      </View>,
+    );
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <View style={[styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }]}>
+      {rowEls}
+      {selectionLabel ? (
+        <Text style={[styles.selectionText, { color: colors.textSecondary }]}>
+          {selectionLabel}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%" },
+  gridRow: { flexDirection: "row" },
+  cellWrap: { flex: 1 },
+  cell: {
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  innerCell: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+  selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
+});

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

@@ -0,0 +1,102 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import {
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  ChevronRight,
+  Check,
+  X,
+  AlertTriangle,
+  Info,
+  Clock,
+  Heart,
+  MessageCircle,
+  Repeat,
+  Share,
+  User,
+  Users,
+  Star,
+  Trophy,
+  Zap,
+  Flame,
+  Gift,
+  ImageIcon,
+  Play,
+  Pause,
+  Wallet,
+  Coins,
+  Plus,
+  Minus,
+  RefreshCw,
+  Bookmark,
+  ThumbsUp,
+  ThumbsDown,
+  TrendingUp,
+  TrendingDown,
+  type LucideIcon,
+} from "lucide-react-native";
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  "arrow-right": ArrowRight,
+  "arrow-left": ArrowLeft,
+  "external-link": ExternalLink,
+  "chevron-right": ChevronRight,
+  check: Check,
+  x: X,
+  "alert-triangle": AlertTriangle,
+  info: Info,
+  clock: Clock,
+  heart: Heart,
+  "message-circle": MessageCircle,
+  repeat: Repeat,
+  share: Share,
+  user: User,
+  users: Users,
+  star: Star,
+  trophy: Trophy,
+  zap: Zap,
+  flame: Flame,
+  gift: Gift,
+  image: ImageIcon,
+  play: Play,
+  pause: Pause,
+  wallet: Wallet,
+  coins: Coins,
+  plus: Plus,
+  minus: Minus,
+  "refresh-cw": RefreshCw,
+  bookmark: Bookmark,
+  "thumbs-up": ThumbsUp,
+  "thumbs-down": ThumbsDown,
+  "trending-up": TrendingUp,
+  "trending-down": TrendingDown,
+};
+
+const SIZE_PX: Record<string, number> = {
+  sm: 16,
+  md: 20,
+};
+
+export function SnapIcon({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const name = String(props.name ?? "info");
+  const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
+  const color = props.color ? String(props.color) : undefined;
+  const isAccent = !color || color === "accent";
+  const resolvedColor = isAccent ? accentHex : hex(color);
+
+  const Icon = ICON_MAP[name];
+  if (!Icon) return null;
+
+  return (
+    <View style={{ alignItems: "center", justifyContent: "center" }}>
+      <Icon size={size} color={resolvedColor} />
+    </View>
+  );
+}
+
+export { ICON_MAP };

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

@@ -0,0 +1,37 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Image } from "expo-image";
+import { StyleSheet, View } from "react-native";
+
+function aspectToRatio(aspect: string): number {
+  const [w, h] = aspect.split(":").map(Number);
+  if (!w || !h) return 1;
+  return w / h;
+}
+
+export function SnapImage({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const url = String(props.url ?? "");
+  const alt = String(props.alt ?? "");
+  const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
+
+  return (
+    <View style={[styles.frame, { aspectRatio: ratio }]}>
+      <Image
+        source={{ uri: url }}
+        style={StyleSheet.absoluteFill}
+        contentFit="cover"
+        accessibilityLabel={alt || undefined}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    width: "100%",
+    borderRadius: 8,
+    overflow: "hidden",
+    backgroundColor: "#f3f4f6",
+  },
+});

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

@@ -0,0 +1,58 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapInput({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "input");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const placeholder = props.placeholder ? String(props.placeholder) : undefined;
+  const type = String(props.type ?? "text");
+  const maxLength =
+    typeof props.maxLength === "number" ? props.maxLength : undefined;
+  const defaultValue = props.defaultValue != null ? String(props.defaultValue) : "";
+  const raw = get(path);
+  const value = raw !== undefined && raw !== null ? String(raw) : defaultValue;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <TextInput
+        style={[
+          styles.input,
+          {
+            borderColor: colors.border,
+            backgroundColor: colors.inputBg,
+            color: colors.text,
+          },
+        ]}
+        value={value}
+        onChangeText={(text) => set(path, type === "number" ? Number(text) || 0 : text)}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textSecondary}
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType={type === "number" ? "numeric" : "default"}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 4 },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    lineHeight: 18,
+  },
+});

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

@@ -0,0 +1,43 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Children, Fragment, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+const GAP_MAP: Record<string, number> = { none: 0, sm: 4, md: 8, lg: 12 };
+
+export function SnapItemGroup({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const { colors } = useSnapTheme();
+  const border = Boolean(props.border);
+  const separator = Boolean(props.separator);
+  const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
+  const items = Children.toArray(children);
+
+  return (
+    <View
+      style={[
+        styles.group,
+        border && { borderWidth: 1, borderColor: colors.border, borderRadius: 12 },
+        { gap },
+      ]}
+    >
+      {items.map((child, i) => (
+        <Fragment key={i}>
+          {separator && i > 0 && (
+            <View style={{ height: 1, backgroundColor: colors.border + "80" }} />
+          )}
+          {child}
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    overflow: "hidden",
+  },
+});