@farcaster/snap 2.1.2 → 2.3.0

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

@@ -32,38 +32,50 @@ export function SnapCellGrid({
   const tapPath = `/inputs/${name}`;
   const tapRaw = get(tapPath);
 
-  // Parse selection — single mode: "row,col" string; multi mode: "row,col|row,col|..." string
+  const cellMap = new Map<
+    string,
+    { color?: string; content?: string; value?: 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,
+      value: typeof c.value === "string" ? c.value : undefined,
+    });
+  }
+
+  // Each cell's wire value — its `value` if set, otherwise "row,col" fallback.
+  const cellWireValue = (r: number, c: number) =>
+    cellMap.get(`${r},${c}`)?.value ?? `${r},${c}`;
+
+  // Multi mode joins values with `|`; single mode is the value itself.
   const selectedSet = new Set<string>();
   if (typeof tapRaw === "string" && tapRaw.length > 0) {
-    for (const part of tapRaw.split("|")) {
-      if (part.includes(",")) selectedSet.add(part);
+    if (isMultiple) {
+      for (const part of tapRaw.split("|")) {
+        if (part.length > 0) selectedSet.add(part);
+      }
+    } else {
+      selectedSet.add(tapRaw);
     }
   }
 
   const isSelected = (r: number, c: number) =>
-    isSelectable && selectedSet.has(`${r},${c}`);
+    isSelectable && selectedSet.has(cellWireValue(r, c));
 
   const handleTap = (r: number, c: number) => {
-    const key = `${r},${c}`;
+    const wire = cellWireValue(r, c);
     if (isMultiple) {
       const next = new Set(selectedSet);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
+      if (next.has(wire)) next.delete(wire);
+      else next.add(wire);
       set(tapPath, [...next].join("|"));
     } else {
-      set(tapPath, key);
+      set(tapPath, wire);
     }
     if (hasPressAction) emit("press");
   };
 
-  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,
-    });
-  }
-
   /** Cells without a palette `color` — subtle fill so empty slots read as tiles. */
   const emptyCellBg =
     colors.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)";

package/src/react/components/stack.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { cn } from "@neynar/ui/utils";
 import {
   countRenderableChildren,
+  defaultHorizontalGapSize,
   horizontalChildrenAreAllButtons,
 } from "../../stack-horizontal-utils.js";
 import {
@@ -22,7 +23,7 @@ const HGAP: Record<string, string> = {
   none: "gap-0",
   sm: "gap-1",
   md: "gap-2",
-  lg: "gap-3",
+  lg: "gap-4",
 };
 
 const JUSTIFY_FLEX: Record<string, string> = {
@@ -52,11 +53,7 @@ export function SnapStack({
 }) {
   const parentDirection = useSnapStackDirection();
   const direction = String(props.direction ?? "vertical");
-  const gapKey = String(props.gap ?? "md");
   const isHorizontal = direction === "horizontal";
-  const gap = isHorizontal
-    ? (HGAP[gapKey] ?? "gap-2")
-    : (VGAP[gapKey] ?? "gap-4");
   const justifyKey = props.justify ? String(props.justify) : undefined;
   const justifyFlex = justifyKey ? JUSTIFY_FLEX[justifyKey] : undefined;
   const buttonRowGrid =
@@ -73,6 +70,25 @@ export function SnapStack({
     Number.isInteger(columnsRaw)
       ? columnsRaw
       : undefined;
+
+  // Horizontal default depends on column count: 2→lg, 3→md, 4+→sm. Vertical stays md.
+  // Count comes from explicit `columns`, then button-row inference, else direct children
+  // count (any horizontal stack is N columns wide regardless of child types).
+  const horizontalColumnCount = isHorizontal
+    ? (columns ??
+       (buttonRowGrid ? buttonRowCount : undefined) ??
+       countRenderableChildren(children))
+    : undefined;
+  const explicitGap =
+    typeof props.gap === "string" && props.gap in (isHorizontal ? HGAP : VGAP);
+  const gapKey = explicitGap
+    ? String(props.gap)
+    : isHorizontal
+      ? defaultHorizontalGapSize(horizontalColumnCount)
+      : "md";
+  const gap = isHorizontal
+    ? (HGAP[gapKey] ?? HGAP.md!)
+    : (VGAP[gapKey] ?? VGAP.md!);
   const explicitColumnGrid =
     isHorizontal && columns !== undefined && !buttonRowGrid;
   const columnGridClass =

package/src/react/components/text.tsx

@@ -30,8 +30,15 @@ export function SnapText({
       weight={weight}
       align={align}
       className={cn(
-        /** Row peers hug content like RN `wrapRow`; avoid `flex-1` stretching peers across the row. */
-        inHorizontalStack ? "min-w-0 shrink" : "flex-1",
+        /**
+         * Row peers hug content like RN `wrapRow` — `min-w-0 shrink` lets text wrap
+         * inside a horizontal stack without forcing peers wide. In a vertical stack
+         * the `<p>` already fills its parent's width via `display: block`; avoid
+         * `flex-1` here because `flex-grow: 1` on a vertical-flex child fills the
+         * column's height, distributing siblings when the row is taller than its
+         * content (e.g. text next to a tall image).
+         */
+        inHorizontalStack ? "min-w-0 shrink" : "min-w-0",
       )}
       style={{ color: colors.text }}
     >

package/src/react/hooks/use-snap-colors.ts

@@ -4,8 +4,7 @@ import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
 import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context";
-import type { PaletteColor } from "@farcaster/snap";
-import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { resolveSnapColorHex } from "@farcaster/snap";
 
 /** Readable foreground color (black or white) for a given hex background. */
 export function pickForegroundForBg(hex: string): string {
@@ -76,7 +75,6 @@ function buildSnapColors(
   const accent = resolveSnapPaletteHex(accentName, mode);
   const accentFg = pickForegroundForBg(accent);
   const neutrals = mode === "dark" ? NEUTRAL_DARK : NEUTRAL_LIGHT;
-  const paletteMap = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
 
   const accentHover =
     mode === "light"
@@ -87,11 +85,8 @@ function buildSnapColors(
 
   const paletteHex = (name: string) => resolveSnapPaletteHex(name, mode);
 
-  const colorHex = (name: string | undefined) => {
-    if (!name || name === "accent") return accent;
-    if (Object.hasOwn(paletteMap, name)) return paletteMap[name as PaletteColor];
-    return accent;
-  };
+  const colorHex = (name: string | undefined) =>
+    resolveSnapColorHex(name, { accentHex: accent, appearance: mode });
 
   return {
     accent,

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

@@ -32,37 +32,50 @@ export function SnapCellGrid({
   const tapPath = `/inputs/${name}`;
   const tapRaw = get(tapPath);
 
+  const cellMap = new Map<
+    string,
+    { color?: string; content?: string; value?: 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,
+      value: typeof c.value === "string" ? c.value : undefined,
+    });
+  }
+
+  // Each cell's wire value — its `value` if set, otherwise "row,col" fallback.
+  const cellWireValue = (r: number, c: number) =>
+    cellMap.get(`${r},${c}`)?.value ?? `${r},${c}`;
+
+  // Multi mode joins values with `|`; single mode is the value itself.
   const selectedSet = new Set<string>();
   if (typeof tapRaw === "string" && tapRaw.length > 0) {
-    for (const part of tapRaw.split("|")) {
-      if (part.includes(",")) selectedSet.add(part);
+    if (isMultiple) {
+      for (const part of tapRaw.split("|")) {
+        if (part.length > 0) selectedSet.add(part);
+      }
+    } else {
+      selectedSet.add(tapRaw);
     }
   }
 
   const isSelected = (r: number, c: number) =>
-    isSelectable && selectedSet.has(`${r},${c}`);
+    isSelectable && selectedSet.has(cellWireValue(r, c));
 
   const handleTap = (r: number, c: number) => {
-    const key = `${r},${c}`;
+    const wire = cellWireValue(r, c);
     if (isMultiple) {
       const next = new Set(selectedSet);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
+      if (next.has(wire)) next.delete(wire);
+      else next.add(wire);
       set(tapPath, [...next].join("|"));
     } else {
-      set(tapPath, key);
+      set(tapPath, wire);
     }
     if (hasPressAction) emit("press");
   };
 
-  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";
 

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

@@ -3,6 +3,7 @@ import { Children, type ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import {
   countRenderableChildren,
+  defaultHorizontalGapSize,
   horizontalChildrenAreAllButtons,
 } from "../../stack-horizontal-utils.js";
 import {
@@ -21,7 +22,7 @@ const HGAP: Record<string, number> = {
   none: 0,
   sm: 4,
   md: 8,
-  lg: 12,
+  lg: 16,
 };
 
 const JUSTIFY: Record<string, "flex-start" | "center" | "flex-end" | "space-between" | "space-around"> = {
@@ -53,12 +54,6 @@ export function SnapStack({
   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 buttonRowGrid =
     isHorizontal && horizontalChildrenAreAllButtons(children);
   const buttonRowCount = buttonRowGrid
@@ -73,6 +68,23 @@ export function SnapStack({
     Number.isInteger(columnsRaw)
       ? columnsRaw
       : undefined;
+
+  // Horizontal default depends on column count: 2→lg, 3→md, 4+→sm. Vertical stays md.
+  // Count comes from explicit `columns`, then button-row inference, else direct children
+  // count (any horizontal stack is N columns wide regardless of child types).
+  const horizontalColumnCount = isHorizontal
+    ? (columns ??
+       (buttonRowGrid ? buttonRowCount : undefined) ??
+       countRenderableChildren(children))
+    : undefined;
+  const gap =
+    typeof rawGap === "number"
+      ? rawGap
+      : typeof rawGap === "string" && rawGap in gapMap
+        ? gapMap[rawGap]!
+        : isHorizontal
+          ? gapMap[defaultHorizontalGapSize(horizontalColumnCount)]!
+          : VGAP.md!;
   const explicitColumnGrid =
     isHorizontal && columns !== undefined && !buttonRowGrid;
 

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

@@ -3,6 +3,7 @@ import {
   PALETTE_COLOR_VALUES,
   PALETTE_LIGHT_HEX,
   PALETTE_DARK_HEX,
+  resolveSnapColorHex,
   type PaletteColor,
 } from "@farcaster/snap";
 import { useStateStore } from "@json-render/react-native";
@@ -35,7 +36,7 @@ export function useSnapPalette() {
   const accentHex = resolveHex(accentName, mode);
 
   const hex = (semantic: string) =>
-    semantic === "accent" ? accentHex : resolveHex(semantic, mode);
+    resolveSnapColorHex(semantic, { accentHex, appearance: mode });
 
   return { appearance: mode, accentName, accentHex, hex };
 }

package/src/schemas.ts

@@ -104,26 +104,36 @@ const surfaceSchema = z.discriminatedUnion("type", [
   standaloneSurfaceSchema,
 ]);
 
+const fidSchema = z.number().int().nonnegative();
+const userSchema = z.object({ fid: fidSchema });
+
 export const payloadSchema = z
   .object({
-    fid: z.number().int().nonnegative().optional(), // deprecated in favor of user.fid
+    fid: fidSchema.optional(), // deprecated in favor of user.fid
     inputs: z.record(z.string(), postInputValueSchema).default({}),
     timestamp: z.number().int(),
     audience: z.string(),
-    user: z.object({
-      fid: z.number().int().nonnegative(),
-    }),
+    user: userSchema,
     surface: surfaceSchema,
   })
   .strip();
 
 export type SnapPayload = z.infer<typeof payloadSchema>;
 
+/** JFS payload shape for POST minus deprecated `fid`; used for GET auth via payload header. */
+export const getPayloadSchema = payloadSchema.omit({ inputs: true, fid: true });
+
+export type SnapGetPayload = z.infer<typeof getPayloadSchema>;
+
 export const ACTION_TYPE_GET = "get" as const;
 export const ACTION_TYPE_POST = "post" as const;
 
 const snapGetActionSchema = z.object({
   type: z.literal(ACTION_TYPE_GET),
+  user: userSchema.optional(),
+  timestamp: z.number().int().optional(),
+  audience: z.string().optional(),
+  surface: surfaceSchema.optional(),
 });
 
 export type SnapGetAction = z.infer<typeof snapGetActionSchema>;

package/src/server/index.ts

@@ -1,4 +1,10 @@
-export { verifyJFSRequestBody, decodePayload, encodePayload } from "./verify";
+export {
+  verifyJFS as verifyJFSRequestBody, // deprecated alias. drop in v3
+  parseJfs,
+  verifyJFS,
+  decodePayload,
+  encodePayload,
+} from "./verify";
 export {
   DEFAULT_SNAP_HUB_HTTP_BASE_URL,
   getActiveEd25519SignerKeysFromHubHttp,

package/src/server/parseRequest.ts

@@ -1,11 +1,15 @@
+import { z } from "zod";
 import {
   ACTION_TYPE_GET,
   ACTION_TYPE_POST,
+  getPayloadSchema,
   payloadSchema,
   type SnapAction,
+  type SnapPayload,
+  type SnapGetPayload,
 } from "../schemas";
-import { decodePayload, verifyJFSRequestBody } from "./verify";
-import { z } from "zod";
+import { decodePayload, parseJfs, verifyJFS } from "./verify";
+import { SNAP_PAYLOAD_HEADER } from "../constants";
 
 const DEFAULT_SNAP_POST_MAX_SKEW_SECONDS = 300 as const;
 
@@ -62,98 +66,156 @@ export type ParseRequestResult =
   | { success: true; action: SnapAction }
   | { success: false; error: ParseRequestError };
 
-const requestBodySchema = z.object({
-  header: z.string(),
-  payload: z.string(),
-  signature: z.string(),
-});
-
 /**
  * Parse and validate Farcaster snap requests:
- * - `GET` is allowed for first-page loads and returns `{ type: "get" }`.
- * - `POST`: the body must be JSON in JFS form (`header` / `payload` / `signature`) even if JFS verification is skipped.
+ * - `GET`: returns `{ type: "get" }`, or optional viewer fields when `X-Snap-Payload`
+ *   carries a JFS compact string whose decoded payload validates against {@link getPayloadSchema}.
+ * - `POST`: the body must be a JFS envelope — either JSON `{ header, payload, signature }` or the same **compact** string form as GET (`BASE64URL(header).BASE64URL(payload).BASE64URL(signature)`), even if JFS verification is skipped.
  */
 export async function parseRequest(
   request: Request,
   options: ParseRequestOptions = {},
 ): Promise<ParseRequestResult> {
-  if (!["GET", "POST"].includes(request.method)) {
-    return {
-      success: false,
-      error: {
-        type: "method_not_allowed",
-        message: `expected POST, received ${request.method}`,
-      },
-    };
+  if (request.method === "GET") {
+    return await parseGetRequest(request, options);
+  }
+  if (request.method === "POST") {
+    return await parsePostRequest(request, options);
   }
+  return {
+    success: false,
+    error: {
+      type: "method_not_allowed",
+      message: `expected GET or POST, received ${request.method}`,
+    },
+  };
+}
 
-  if (request.method === "GET") {
-    return {
-      success: true,
-      action: { type: ACTION_TYPE_GET },
-    };
+async function parseGetRequest(
+  request: Request,
+  options: ParseRequestOptions,
+): Promise<ParseRequestResult> {
+  const compactHeader = request.headers.get(SNAP_PAYLOAD_HEADER)?.trim();
+  if (!compactHeader) {
+    return { success: true, action: { type: ACTION_TYPE_GET } };
   }
 
-  const maxSkew = options.maxSkewSeconds ?? DEFAULT_SNAP_POST_MAX_SKEW_SECONDS;
-  const nowSec = Math.floor(Date.now() / 1000);
+  const result = await validateJfsPayload({
+    jfsText: compactHeader,
+    schema: getPayloadSchema,
+    request,
+    options,
+    invalidJsonMessage: `${SNAP_PAYLOAD_HEADER} must be a valid JFS compact string`,
+  });
+  if (!result.ok) {
+    return { success: false, error: result.error };
+  }
 
-  const text = await request.text();
+  return {
+    success: true,
+    action: { type: ACTION_TYPE_GET, ...result.payload },
+  };
+}
 
-  let jsonBody: unknown;
-  try {
-    jsonBody = JSON.parse(text);
-  } catch {
+async function parsePostRequest(
+  request: Request,
+  options: ParseRequestOptions,
+): Promise<ParseRequestResult> {
+  const result = await validateJfsPayload({
+    jfsText: await request.text(),
+    schema: payloadSchema,
+    request,
+    options,
+  });
+  if (!result.ok) {
+    return { success: false, error: result.error };
+  }
+
+  const payload = result.payload;
+  if (payload.fid !== undefined && payload.fid !== payload.user.fid) {
     return {
       success: false,
       error: {
-        type: "invalid_json",
-        message: "request body is not valid JSON",
+        type: "fid_mismatch",
+        message: `fid "${payload.fid}" does not match user.fid "${payload.user.fid}"`,
       },
     };
   }
 
-  const parsed = requestBodySchema.safeParse(jsonBody);
-  if (!parsed.success) {
+  return {
+    success: true,
+    action: { type: ACTION_TYPE_POST, ...payload },
+  };
+}
+
+/**
+ * Shared pipeline for authenticated snap requests: parse the JFS envelope,
+ * decode and schema-validate the payload, optionally verify the JFS signature
+ * against an active hub signer (matching `user.fid`), then check timestamp
+ * skew and that `audience` matches the request origin.
+ *
+ * Both GET (payload header) and POST (request body) feed into this.
+ */
+async function validateJfsPayload<T extends SnapPayload | SnapGetPayload>({
+  jfsText,
+  schema,
+  request,
+  options,
+  invalidJsonMessage,
+}: {
+  jfsText: string;
+  schema: z.ZodType<T>;
+  request: Request;
+  options: ParseRequestOptions;
+  invalidJsonMessage?: string;
+}): Promise<
+  { ok: true; payload: T } | { ok: false; error: ParseRequestError }
+> {
+  const parsed = parseJfs(jfsText);
+  if (!parsed.ok) {
     return {
-      success: false,
-      error: { type: "invalid_json", message: parsed.error.message },
+      ok: false,
+      error: {
+        type: "invalid_json",
+        message: invalidJsonMessage ?? parsed.error,
+      },
     };
   }
+  const jfs = parsed.jfs;
 
-  const payloadParsed = payloadSchema.safeParse(
-    decodePayload(parsed.data.payload),
-  );
+  const payloadParsed = schema.safeParse(decodePayload(jfs.payload));
   if (!payloadParsed.success) {
     return {
-      success: false,
+      ok: false,
       error: { type: "validation", issues: payloadParsed.error.issues },
     };
   }
-
-  const body = payloadParsed.data;
+  const payload = payloadParsed.data;
 
   if (!options.skipJFSVerification) {
-    const jfs = await verifyJFSRequestBody(parsed.data);
-    if (!jfs.valid) {
+    const verified = await verifyJFS(jfs);
+    if (!verified.valid) {
       return {
-        success: false,
-        error: { type: "signature", message: jfs.error.message },
+        ok: false,
+        error: { type: "signature", message: verified.error.message },
       };
     }
-    if (jfs.signingUserFid !== body.user.fid) {
+    if (verified.signingUserFid !== payload.user.fid) {
       return {
-        success: false,
+        ok: false,
         error: {
           type: "fid_mismatch",
-          message: `JFS header fid "${jfs.signingUserFid}" does not match user.fid "${body.user.fid}"`,
+          message: `JFS header fid "${verified.signingUserFid}" does not match user.fid "${payload.user.fid}"`,
         },
       };
     }
   }
 
-  if (Math.abs(nowSec - body.timestamp) > maxSkew) {
+  const maxSkew = options.maxSkewSeconds ?? DEFAULT_SNAP_POST_MAX_SKEW_SECONDS;
+  const nowSec = Math.floor(Date.now() / 1000);
+  if (Math.abs(nowSec - payload.timestamp) > maxSkew) {
     return {
-      success: false,
+      ok: false,
       error: {
         type: "replay",
         message: `timestamp outside allowed skew of ${maxSkew}s`,
@@ -176,31 +238,15 @@ export async function parseRequest(
     }
   }
 
-  if (expectedOrigin !== undefined && body.audience !== expectedOrigin) {
+  if (expectedOrigin !== undefined && payload.audience !== expectedOrigin) {
     return {
-      success: false,
+      ok: false,
       error: {
         type: "origin_mismatch",
-        message: `payload audience "${body.audience}" does not match expected origin "${expectedOrigin}"`,
+        message: `payload audience "${payload.audience}" does not match expected origin "${expectedOrigin}"`,
       },
     };
   }
 
-  if (body.fid !== undefined && body.fid !== body.user.fid) {
-    return {
-      success: false,
-      error: {
-        type: "fid_mismatch",
-        message: `fid "${body.fid}" does not match user.fid "${body.user.fid}"`,
-      },
-    };
-  }
-
-  return {
-    success: true,
-    action: {
-      type: ACTION_TYPE_POST,
-      ...body,
-    },
-  };
+  return { ok: true, payload };
 }