@farcaster/snap 1.6.0 → 1.7.1

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

@@ -0,0 +1,82 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import Slider from "@react-native-community/slider";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapSlider({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "slider");
+  const path = `/inputs/${name}`;
+  const min = Number(props.min ?? 0);
+  const max = Number(props.max ?? 100);
+  const step = props.step != null ? Number(props.step) : 1;
+  const fallback =
+    props.defaultValue != null ? Number(props.defaultValue) : (min + max) / 2;
+  const raw = get(path);
+  const value =
+    raw === undefined || raw === null ? fallback : Number(raw);
+  const clamped = Number.isFinite(value)
+    ? Math.min(max, Math.max(min, value))
+    : fallback;
+
+  const label = props.label != null ? String(props.label) : null;
+  const minLabel = props.minLabel != null ? String(props.minLabel) : null;
+  const maxLabel = props.maxLabel != null ? String(props.maxLabel) : null;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? (
+        <View style={styles.labelRow}>
+          <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
+          <Text style={[styles.valueText, { color: colors.textSecondary }]}>
+            {String(Math.round(clamped))}
+          </Text>
+        </View>
+      ) : null}
+      <Slider
+        style={styles.slider}
+        minimumValue={min}
+        maximumValue={max}
+        step={step > 0 ? step : 1}
+        value={clamped}
+        onValueChange={(v) => set(path, v)}
+        minimumTrackTintColor={accentHex}
+        maximumTrackTintColor={colors.muted}
+        thumbTintColor={accentHex}
+      />
+      {minLabel != null || maxLabel != null ? (
+        <View style={styles.minMaxRow}>
+          <Text style={[styles.minMax, { color: colors.textSecondary }]}>
+            {minLabel ?? String(min)}
+          </Text>
+          <Text style={[styles.minMax, { color: colors.textSecondary }]}>
+            {maxLabel ?? String(max)}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 6 },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: { fontSize: 13, fontWeight: "500", flex: 1 },
+  valueText: { fontSize: 13 },
+  slider: { width: "100%", height: 40 },
+  minMaxRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  minMax: { fontSize: 12 },
+});

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

@@ -0,0 +1,66 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+
+const VGAP: Record<string, number> = {
+  none: 0,
+  sm: 8,
+  md: 16,
+  lg: 24,
+};
+
+const HGAP: Record<string, number> = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+};
+
+const JUSTIFY: Record<string, "flex-start" | "center" | "flex-end" | "space-between" | "space-around"> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+};
+
+export function SnapStack({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const direction = String(props.direction ?? "vertical");
+  const rawGap = props.gap;
+  const isHorizontal = direction === "horizontal";
+  const gapMap = isHorizontal ? HGAP : VGAP;
+  const gap =
+    typeof rawGap === "number"
+      ? rawGap
+      : typeof rawGap === "string" && rawGap in gapMap
+        ? gapMap[rawGap]!
+        : isHorizontal ? HGAP.md! : VGAP.md!;
+  const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
+
+  return (
+    <View
+      style={[
+        styles.stack,
+        isHorizontal ? styles.horizontal : undefined,
+        { gap },
+        justify ? { justifyContent: justify } : undefined,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stack: {
+    width: "100%",
+  },
+  horizontal: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+  },
+});

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