@farcaster/snap 1.6.0 → 1.7.1

package/src/dataStore.ts

@@ -6,18 +6,14 @@ export type DataStoreValue =
   | DataStoreValue[]
   | { [key: string]: DataStoreValue };
 
-export type SnapDataStoreOperations = {
+export type SnapDataStore = {
   get(key: string): Promise<DataStoreValue | null>;
   set(key: string, value: DataStoreValue): Promise<void>;
 };
 
-export type SnapDataStore = SnapDataStoreOperations & {
-  withLock<T>(fn: (store: SnapDataStoreOperations) => Promise<T>): Promise<T>;
-};
-
 export function createDefaultDataStore(): SnapDataStore {
   const err = new Error(
-    "Data store is not configured. Use withUpstash() from @farcaster/snap-upstash or provide a data store implementation.",
+    "Data store is not configured. Use withTursoServerless() from @farcaster/snap-turso or provide a data store implementation.",
   );
   return {
     get(_key: string): Promise<never> {
@@ -26,37 +22,17 @@ export function createDefaultDataStore(): SnapDataStore {
     set(_key: string, _value: DataStoreValue): Promise<never> {
       return Promise.reject(err);
     },
-    withLock<T>(
-      _fn: (store: SnapDataStoreOperations) => Promise<T>,
-    ): Promise<never> {
-      return Promise.reject(err);
-    },
   };
 }
 
 export function createInMemoryDataStore(): SnapDataStore {
   const data = new Map<string, DataStoreValue>();
-  const ops: SnapDataStoreOperations = {
-    get: async (key: string): Promise<DataStoreValue | null> => {
+  return {
+    async get(key: string): Promise<DataStoreValue | null> {
       return data.get(key) ?? null;
     },
-    set: async (key: string, value: DataStoreValue): Promise<void> => {
+    async set(key: string, value: DataStoreValue): Promise<void> {
       data.set(key, value);
     },
   };
-  /** Serializes `withLock` callbacks so async work does not interleave across callers. */
-  let lockChain: Promise<unknown> = Promise.resolve();
-  return {
-    ...ops,
-    withLock<T>(
-      fn: (store: SnapDataStoreOperations) => Promise<T>,
-    ): Promise<T> {
-      const run = lockChain.then(() => fn(ops));
-      lockChain = run.then(
-        () => undefined,
-        () => undefined,
-      );
-      return run;
-    },
-  };
 }

package/src/index.ts

@@ -32,7 +32,6 @@ export {
 export {
   type DataStoreValue,
   type SnapDataStore,
-  type SnapDataStoreOperations,
   createDefaultDataStore,
   createInMemoryDataStore,
 } from "./dataStore";

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,
+});

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

@@ -0,0 +1,92 @@
+declare const __DEV__: boolean;
+
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { ICON_MAP } from "./snap-icon";
+
+const VARIANT_MAP: Record<string, "default" | "secondary" | "outline" | "ghost"> = {
+  default: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+};
+
+export function SnapActionButton({
+  element: { props },
+  emit,
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const label = String(props.label ?? "Action");
+  const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+  const iconName = props.icon ? String(props.icon) : undefined;
+
+  const variantStyle = (() => {
+    switch (variant) {
+      case "default":
+        return { backgroundColor: accentHex };
+      case "secondary":
+        return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
+      case "outline":
+        return { backgroundColor: "rgba(255,255,255,0.04)", borderWidth: 1, borderColor: colors.border };
+      case "ghost":
+        return { backgroundColor: "transparent" };
+    }
+  })();
+
+  const textColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+  const iconColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+
+  return (
+    <View style={styles.outer}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.btn,
+          variant === "default" ? styles.btnDefault : styles.btnOther,
+          variantStyle,
+          pressed && styles.pressed,
+        ]}
+        onPress={() => {
+          void (async () => {
+            try {
+              await emit("press");
+            } catch (err: unknown) {
+              if (typeof __DEV__ !== "undefined" && __DEV__) {
+                // eslint-disable-next-line no-console
+                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, fontWeight: "600" }}>
+          {label}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: { flex: 1, 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,57 @@
+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 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 Icon = iconName ? ICON_MAP[iconName] : undefined;
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        isAccent
+          ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
+          : { borderColor: resolvedColor },
+      ]}
+    >
+      {Icon && (
+        <Icon size={12} color={isAccent ? "#fff" : resolvedColor} />
+      )}
+      <Text
+        style={[
+          styles.label,
+          { color: isAccent ? "#fff" : 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,
+    fontWeight: "500",
+  },
+});

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,38 @@
+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: {
+    flex: 1,
+    width: "100%",
+    borderRadius: 8,
+    overflow: "hidden",
+    backgroundColor: "#f3f4f6",
+  },
+});

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

@@ -0,0 +1,57 @@
+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, fontWeight: "500" },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+  },
+});

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",
+  },
+});

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

@@ -0,0 +1,70 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapItem({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const { colors } = useSnapTheme();
+  const title = String(props.title ?? "");
+  const description = props.description
+    ? String(props.description)
+    : undefined;
+  const variant = String(props.variant ?? "default");
+
+  const containerVariant =
+    variant === "outline"
+      ? { borderWidth: 1, borderColor: colors.border + "80", borderRadius: 8, padding: 10 }
+      : variant === "muted"
+        ? { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: 8, padding: 10 }
+        : { paddingVertical: 8, paddingHorizontal: 10 };
+
+  return (
+    <View style={[styles.container, containerVariant]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: colors.textSecondary }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {children ? (
+        <View style={styles.actions}>
+          <View style={{ flex: 0 }}>{children}</View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "500",
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 1,
+  },
+  actions: {
+    marginLeft: "auto",
+    paddingLeft: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0,
+    flexGrow: 0,
+    flexBasis: "auto",
+    gap: 4,
+  },
+});

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

@@ -0,0 +1,40 @@
+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 SnapProgress({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const value = Number(props.value ?? 0);
+  const max = Math.max(1, Number(props.max ?? 100));
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  const label = props.label != null ? String(props.label) : null;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.textSecondary }]}>{label}</Text>
+      ) : null}
+      <View style={[styles.track, { backgroundColor: colors.muted }]}>
+        <View style={[styles.fill, { width: `${percent}%`, backgroundColor: accentHex }]} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, width: "100%", gap: 4 },
+  label: { fontSize: 13 },
+  track: {
+    height: 10,
+    borderRadius: 9999,
+    overflow: "hidden",
+  },
+  fill: {
+    height: "100%",
+    borderRadius: 9999,
+  },
+});

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

@@ -0,0 +1,32 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapSeparator({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { colors } = useSnapTheme();
+  const orientation = String(props.orientation ?? "horizontal");
+  const isVertical = orientation === "vertical";
+
+  return (
+    <View
+      style={[
+        isVertical ? styles.vertical : styles.horizontal,
+        { backgroundColor: colors.border + "80" },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    width: "100%",
+    height: 1,
+  },
+  vertical: {
+    height: "100%",
+    width: 1,
+    alignSelf: "stretch",
+  },
+});