@farcaster/snap 2.1.1 → 2.2.0

package/src/server/verify.ts

@@ -1,9 +1,11 @@
 import {
-  compact,
   decode,
   decodePayload as jfsDecodePayload,
   encodePayload as jfsEncodePayload,
+  toJsonFarcasterSignature,
   verify,
+  type JsonFarcasterSignature,
+  type DecodedJsonFarcasterSignature,
 } from "@farcaster/jfs";
 import { hexToBytes, type Hex } from "viem";
 import {
@@ -11,12 +13,39 @@ import {
   getActiveEd25519SignerKeysFromHubHttp,
 } from "./hubs";
 
-export async function verifyJFSRequestBody<TPayload>(
-  requestBody: {
-    header: string;
-    payload: string;
-    signature: string;
-  },
+/**
+ * Parse a JFS object or string into normalized form (see {@link toJsonFarcasterSignature} / `uncompact`).
+ */
+export function parseJfs(
+  text: string,
+): { ok: true; jfs: JsonFarcasterSignature } | { ok: false; error: string } {
+  const trimmed = text.trim();
+
+  let jfsFromJson: unknown;
+  try {
+    jfsFromJson = JSON.parse(trimmed);
+  } catch {
+    jfsFromJson = undefined;
+  }
+
+  if (jfsFromJson !== undefined && isJfsObject(jfsFromJson)) {
+    return { ok: true, jfs: jfsFromJson };
+  }
+
+  const jfsFromString = tryUncompactJfsString(trimmed);
+  if (jfsFromString) {
+    return { ok: true, jfs: jfsFromString };
+  }
+
+  return {
+    ok: false,
+    error:
+      "invalid JFS envelope: must be JSON with header, payload, and signature fields, or a JFS compact string (three dot-separated segments)",
+  };
+}
+
+export async function verifyJFS<TPayload>(
+  jfs: JsonFarcasterSignature,
   options: {
     hubHttpBaseUrl?: string;
   } = {},
@@ -31,23 +60,16 @@ export async function verifyJFSRequestBody<TPayload>(
       data: TPayload;
     }
 > {
-  let compactJfs: string;
-  try {
-    compactJfs = compact({
-      header: requestBody.header,
-      payload: requestBody.payload,
-      signature: requestBody.signature,
-    });
-  } catch (error) {
+  const decoded = tryDecodeJfs<TPayload>(jfs);
+  if (!decoded) {
     return {
       valid: false,
-      error: error instanceof Error ? error : new Error(String(error)),
+      error: new Error("invalid JFS envelope"),
     };
   }
 
-  let decoded: ReturnType<typeof decode<TPayload>>;
   try {
-    decoded = decode<TPayload>(compactJfs);
+    await verify({ data: jfs, strict: true, keyTypes: ["app_key"] });
   } catch (error) {
     return {
       valid: false,
@@ -55,15 +77,26 @@ export async function verifyJFSRequestBody<TPayload>(
     };
   }
 
-  try {
-    await verify({ data: compactJfs, strict: true, keyTypes: ["app_key"] });
-  } catch (error) {
-    return {
-      valid: false,
-      error: error instanceof Error ? error : new Error(String(error)),
-    };
-  }
+  return hubVerifyDecodedPayload(decoded, options);
+}
 
+/**
+ * Verify that the signing key for a JFS payload is an active signer for the FID.
+ */
+async function hubVerifyDecodedPayload<TPayload>(
+  decoded: DecodedJsonFarcasterSignature<TPayload>,
+  options: { hubHttpBaseUrl?: string },
+): Promise<
+  | {
+      valid: false;
+      error: Error;
+    }
+  | {
+      valid: true;
+      signingUserFid: number;
+      data: TPayload;
+    }
+> {
   const { header, payload } = decoded;
 
   const keys = await getActiveEd25519SignerKeysFromHubHttp(
@@ -121,6 +154,46 @@ export function encodePayload<TPayload>(payload: TPayload): string {
   return jfsEncodePayload(payload);
 }
 
+/**
+ * Normalize a compact JFS string to `{ header, payload, signature }` using
+ * `@farcaster/jfs` {@link toJsonFarcasterSignature} (which delegates to `uncompact` for strings).
+ * Returns null if the string is malformed.
+ */
+function tryUncompactJfsString(value: string): JsonFarcasterSignature | null {
+  try {
+    return toJsonFarcasterSignature(value.trim());
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Fully decode a JFS envelope or compact string via `@farcaster/jfs` {@link decode}:
+ * parsed header object, parsed payload, signature bytes.
+ */
+function tryDecodeJfs<TPayload>(
+  input: JsonFarcasterSignature | string,
+): DecodedJsonFarcasterSignature<TPayload> | null {
+  try {
+    return decode<TPayload>(input);
+  } catch {
+    return null;
+  }
+}
+
+function isJfsObject(v: unknown): v is JsonFarcasterSignature {
+  return (
+    v !== null &&
+    typeof v === "object" &&
+    "header" in v &&
+    typeof v.header === "string" &&
+    "payload" in v &&
+    typeof v.payload === "string" &&
+    "signature" in v &&
+    typeof v.signature === "string"
+  );
+}
+
 function bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
   if (a.length !== b.length) return false;
   let diff = 0;

package/src/stack-horizontal-utils.ts

@@ -0,0 +1,27 @@
+import { Children, isValidElement, type ReactNode } from "react";
+
+/**
+ * True when every rendered child comes from a catalog `button` element.
+ * json-render passes `{ element: { type, props, ... } }` into each catalog component.
+ */
+function isRenderableChild(c: ReactNode): boolean {
+  if (c == null) return false;
+  if (typeof c === "boolean") return false;
+  return true;
+}
+
+export function horizontalChildrenAreAllButtons(children: ReactNode): boolean {
+  const items = Children.toArray(children).filter(isRenderableChild);
+  if (items.length === 0) return false;
+  for (const child of items) {
+    if (!isValidElement(child)) return false;
+    const typ = (child.props as { element?: { type?: unknown } }).element?.type;
+    if (typ !== "button") return false;
+  }
+  return true;
+}
+
+/** Direct snap catalog children under a stack (used for all-button grid column count). */
+export function countRenderableChildren(children: ReactNode): number {
+  return Children.toArray(children).filter(isRenderableChild).length;
+}

package/src/ui/catalog.ts

@@ -92,7 +92,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     stack: {
       props: stackProps,
       description:
-        "Layout container — direction: vertical (default) | horizontal. Children are element ids in order.",
+        "Layout container — direction: vertical (default) | horizontal. Children are element ids in order. Horizontal stacks use a single flex row so peers stay side-by-side and shrink with min-width 0. Nested stacks participate as flexible row peers. All-button horizontal stacks use an equal N-column grid where N is the number of buttons (1–6). Optional `columns` (`2`–`6`) forces an explicit equal grid for mixed children.",
     },
     text: {
       props: textProps,
@@ -107,7 +107,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     cell_grid: {
       props: cellGridProps,
       description:
-        "Cell grid — sparse colored cells on a rows×cols grid. Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
+        "Cell grid — sparse colored cells on a rows×cols grid. Cell color is a palette name or literal #rrggbb hex (hex ignores page accent). Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
     },
   },
   actions: {

package/src/ui/cell-grid.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { PALETTE_COLOR_VALUES } from "../colors.js";
+import { isSnapHexColorString, PALETTE_COLOR_VALUES } from "../colors.js";
 import {
   GRID_MIN_COLS,
   GRID_MAX_COLS,
@@ -8,10 +8,23 @@ import {
   GRID_GAP_VALUES,
 } from "../constants.js";
 
+/** Palette name or `#rrggbb`; input is trimmed so palette and hex rules match runtime resolvers. */
+const cellGridCellColorSchema = z.preprocess(
+  (v) => (typeof v === "string" ? v.trim() : v),
+  z.union([
+    z.enum(PALETTE_COLOR_VALUES),
+    z
+      .string()
+      .refine(isSnapHexColorString, {
+        message: "cell_grid cell hex color must be #rrggbb",
+      }),
+  ]),
+);
+
 const cellGridCellSchema = z.object({
   row: z.number().int().nonnegative(),
   col: z.number().int().nonnegative(),
-  color: z.enum(PALETTE_COLOR_VALUES).optional(),
+  color: cellGridCellColorSchema.optional(),
   content: z.string().optional(),
 });
 

package/src/ui/stack.ts

@@ -8,6 +8,14 @@ export const stackProps = z.object({
   direction: z.enum(STACK_DIRECTIONS).optional(),
   gap: z.enum(STACK_GAPS).optional(),
   justify: z.enum(STACK_JUSTIFY).optional(),
+  /** Horizontal stacks only: fixed column grid (`2`–`6`). Prefer omitting this when children are stacks — they flex as row peers automatically. */
+  columns: z.union([
+    z.literal(2),
+    z.literal(3),
+    z.literal(4),
+    z.literal(5),
+    z.literal(6),
+  ]).optional(),
 });
 
 export type StackProps = z.infer<typeof stackProps>;

package/src/verify.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { verifyJFSRequestBody } from "./server/verify";
+import { verifyJFS } from "./server/verify";
 
 const validRequestBody = `{
   "header":"eyJmaWQiOjI2MTMxOSwidHlwZSI6ImFwcF9rZXkiLCJrZXkiOiIweGY0ZGQyNjczYTUzMjEwYzQ3ZGYzZjFmNTk0NjZlZTdhMTM3ZmQxOGQ5NTVjMmU2OGExMmQwOTE2MGE2NmMyMTUifQ",
@@ -11,7 +11,7 @@ const validRequestBody = `{
 const HUB_SIGNER_KEY_HEX =
   "f4dd2673a53210c47df3f1f59466ee7a137fd18d955c2e68a12d09160a66c215";
 
-describe("verifyJFSRequestBody", () => {
+describe("verifyJFS", () => {
   beforeEach(() => {
     vi.stubGlobal(
       "fetch",
@@ -53,7 +53,7 @@ describe("verifyJFSRequestBody", () => {
   });
 
   it("accepts JSON JFS body and verifies crypto + hub signer list", async () => {
-    const result = await verifyJFSRequestBody(JSON.parse(validRequestBody));
+    const result = await verifyJFS(JSON.parse(validRequestBody));
     expect(result.valid).toBe(true);
     if (result.valid) {
       expect(result.data).toEqual({