@farcaster/snap 1.5.2 → 1.7.0

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