@farcaster/snap-hono 2.0.5 → 2.1.0

package/dist/index.d.ts

@@ -12,7 +12,8 @@ export type SnapHandlerOptions = {
      */
     path?: string;
     /**
-     * When true, skip JFS signature verification only. POST bodies must still be JFS-shaped JSON.
+     * When true, skip JFS signature verification only. POST bodies must still be a JFS envelope:
+     * JSON `{ header, payload, signature }` or the same compact dot-separated string as GET’s `X-Snap-Payload`.
      * When omitted, default to {@link envSkipJFSVerification}.
      */
     skipJFSVerification?: boolean;
@@ -38,7 +39,7 @@ export type SnapHandlerOptions = {
  * Register GET and POST snap handlers on `app` at `options.path` (default `/`).
  *
  * - GET  → calls `snapFn(ctx)` with `ctx.action.type === "get"` and returns the response.
- * - POST → parses the JFS-shaped JSON body; verifies it via {@link verifyJFSRequestBody} unless
+ * - POST → parses the JFS envelope (JSON object or compact string); verifies via {@link verifyJFSRequestBody} unless
  *          `skipJFSVerification` is true, then calls `snapFn(ctx)` with the parsed post action and returns the response.
  *
  * All parsing, schema validation, signature verification, and error responses

package/dist/index.js

@@ -1,5 +1,5 @@
 import { cors } from "hono/cors";
-import { MEDIA_TYPE, ACTION_TYPE_GET, } from "@farcaster/snap";
+import { MEDIA_TYPE, ACTION_TYPE_GET, SNAP_PAYLOAD_HEADER, } from "@farcaster/snap";
 import { parseRequest } from "@farcaster/snap/server";
 import { brandedFallbackHtml } from "./fallback.js";
 import { payloadToResponse, snapHeaders } from "./payloadToResponse.js";
@@ -9,7 +9,7 @@ import { renderSnapPageToPng, renderWithDedup, etagForPage, } from "./og-image.j
  * Register GET and POST snap handlers on `app` at `options.path` (default `/`).
  *
  * - GET  → calls `snapFn(ctx)` with `ctx.action.type === "get"` and returns the response.
- * - POST → parses the JFS-shaped JSON body; verifies it via {@link verifyJFSRequestBody} unless
+ * - POST → parses the JFS envelope (JSON object or compact string); verifies via {@link verifyJFSRequestBody} unless
  *          `skipJFSVerification` is true, then calls `snapFn(ctx)` with the parsed post action and returns the response.
  *
  * All parsing, schema validation, signature verification, and error responses
@@ -102,8 +102,21 @@ export function registerSnapHandler(app, snapFn, options = {}) {
                 ]),
             });
         }
+        const skipJFSVerification = options.skipJFSVerification !== undefined
+            ? options.skipJFSVerification
+            : envSkipJFSVerification();
+        const parsed = await parseRequest(c.req.raw, {
+            skipJFSVerification,
+            requestOrigin: snapOriginFromRequest(c.req.raw),
+        });
+        if (!parsed.success) {
+            const msg = "message" in parsed.error
+                ? parsed.error.message
+                : "failed to parse request";
+            return c.json({ error: msg }, 400);
+        }
         const response = await snapFn({
-            action: { type: ACTION_TYPE_GET },
+            action: parsed.action,
             request: c.req.raw,
         });
         return payloadToResponse(response, {
@@ -171,6 +184,7 @@ function stripAuthHeaders(request) {
     const headers = new Headers(request.headers);
     headers.delete("cookie");
     headers.delete("authorization");
+    headers.delete(SNAP_PAYLOAD_HEADER);
     return new Request(request.url, { method: request.method, headers });
 }
 function resourcePathFromRequest(url) {

package/dist/og-image.js

@@ -1,4 +1,4 @@
-import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, resolveSnapColorHex, } from "@farcaster/snap";
 import satori from "satori";
 import { Resvg, initWasm } from "@resvg/resvg-wasm";
 /** Content width inside the OG card (`OG_CARD_OUTER_WIDTH_PX` − horizontal padding 24px×2). */
@@ -164,9 +164,7 @@ function accentHex(accent) {
         PALETTE_LIGHT_HEX[DEFAULT_THEME_ACCENT]);
 }
 function colorHex(color, accent) {
-    if (!color || color === "accent")
-        return accent;
-    return PALETTE_LIGHT_HEX[color] ?? accent;
+    return resolveSnapColorHex(color, { accentHex: accent, appearance: "light" });
 }
 function mapText(el) {
     const size = String(el.size ?? "md");

package/dist/payloadToResponse.js

@@ -1,4 +1,4 @@
-import { MEDIA_TYPE, validateSnapResponse, snapResponseSchema, } from "@farcaster/snap";
+import { MEDIA_TYPE, validateSnapResponse, snapResponseSchema, SNAP_PAYLOAD_HEADER, } from "@farcaster/snap";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 const DEFAULT_LINK_MEDIA_TYPES = [MEDIA_TYPE, "text/html"];
 export function payloadToResponse(payload, options = {}) {
@@ -32,7 +32,7 @@ function errorResponse(error, issues) {
 export function snapHeaders(resourcePath, currentMediaType, availableMediaTypes) {
     return {
         "Content-Type": `${currentMediaType}; charset=utf-8`,
-        Vary: "Accept",
+        Vary: `Accept, ${SNAP_PAYLOAD_HEADER}`,
         Link: buildSnapAlternateLinkHeader(resourcePath, availableMediaTypes),
     };
 }

package/dist/renderSnapPage.js

@@ -1,4 +1,4 @@
-import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_COLOR_ACCENT, } from "@farcaster/snap";
+import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, resolveSnapColorHex, } from "@farcaster/snap";
 export function extractPageMeta(spec) {
     let title = "Farcaster Snap";
     let description = "";
@@ -82,9 +82,7 @@ function accentHex(accent) {
         : PALETTE_LIGHT_HEX[DEFAULT_THEME_ACCENT];
 }
 function colorHex(color, accent) {
-    if (!color || color === PALETTE_COLOR_ACCENT)
-        return accent;
-    return PALETTE_LIGHT_HEX[color] ?? accent;
+    return resolveSnapColorHex(color, { accentHex: accent, appearance: "light" });
 }
 /** Readable foreground for a hex background (YIQ contrast check). */
 function fgForBg(hex) {
@@ -304,8 +302,8 @@ function renderElement(key, spec, accent) {
             const gapMap = isHorizontal ? hGap : vGap;
             const gapVal = gapMap[String(p.gap ?? "md")] ?? (isHorizontal ? "8px" : "16px");
             const dir = isHorizontal ? "row" : "column";
-            const wrap = isHorizontal ? "flex-wrap:wrap;" : "";
-            const align = isHorizontal ? "align-items:center;" : "";
+            const wrapStyle = isHorizontal ? "flex-wrap:nowrap;" : "";
+            const alignItems = isHorizontal ? "align-items:stretch;" : "";
             const justifyMap = {
                 start: "flex-start",
                 center: "center",
@@ -315,7 +313,7 @@ function renderElement(key, spec, accent) {
             };
             const jc = p.justify ? justifyMap[String(p.justify)] : undefined;
             const childIds = el.children ?? [];
-            let html = `<div style="display:flex;width:100%;flex-direction:${dir};gap:${gapVal};${wrap}${align}${jc ? `justify-content:${jc};` : ""}">`;
+            let html = `<div style="display:flex;width:100%;min-width:0;box-sizing:border-box;flex-direction:${dir};gap:${gapVal};${wrapStyle}${alignItems}${jc ? `justify-content:${jc};` : ""}">`;
             for (const childKey of childIds) {
                 const flex = isHorizontal ? "flex:1;min-width:0;" : "";
                 html += `<div style="${flex}">${renderElement(childKey, spec, accent)}</div>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Hono integration for Farcaster Snap servers",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@resvg/resvg-wasm": "^2.6.2",
     "satori": "^0.10.0",
-    "@farcaster/snap": "2.1.1"
+    "@farcaster/snap": "2.2.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"

package/src/index.ts

@@ -4,6 +4,7 @@ import {
   MEDIA_TYPE,
   type SnapFunction,
   ACTION_TYPE_GET,
+  SNAP_PAYLOAD_HEADER,
 } from "@farcaster/snap";
 import { parseRequest } from "@farcaster/snap/server";
 import { brandedFallbackHtml } from "./fallback";
@@ -29,7 +30,8 @@ export type SnapHandlerOptions = {
   path?: string;
 
   /**
-   * When true, skip JFS signature verification only. POST bodies must still be JFS-shaped JSON.
+   * When true, skip JFS signature verification only. POST bodies must still be a JFS envelope:
+   * JSON `{ header, payload, signature }` or the same compact dot-separated string as GET’s `X-Snap-Payload`.
    * When omitted, default to {@link envSkipJFSVerification}.
    */
   skipJFSVerification?: boolean;
@@ -59,7 +61,7 @@ export type SnapHandlerOptions = {
  * Register GET and POST snap handlers on `app` at `options.path` (default `/`).
  *
  * - GET  → calls `snapFn(ctx)` with `ctx.action.type === "get"` and returns the response.
- * - POST → parses the JFS-shaped JSON body; verifies it via {@link verifyJFSRequestBody} unless
+ * - POST → parses the JFS envelope (JSON object or compact string); verifies via {@link verifyJFSRequestBody} unless
  *          `skipJFSVerification` is true, then calls `snapFn(ctx)` with the parsed post action and returns the response.
  *
  * All parsing, schema validation, signature verification, and error responses
@@ -175,8 +177,26 @@ export function registerSnapHandler(
       });
     }
 
+    const skipJFSVerification =
+      options.skipJFSVerification !== undefined
+        ? options.skipJFSVerification
+        : envSkipJFSVerification();
+
+    const parsed = await parseRequest(c.req.raw, {
+      skipJFSVerification,
+      requestOrigin: snapOriginFromRequest(c.req.raw),
+    });
+
+    if (!parsed.success) {
+      const msg =
+        "message" in parsed.error
+          ? parsed.error.message
+          : "failed to parse request";
+      return c.json({ error: msg }, 400);
+    }
+
     const response = await snapFn({
-      action: { type: ACTION_TYPE_GET },
+      action: parsed.action,
       request: c.req.raw,
     });
 
@@ -261,6 +281,7 @@ function stripAuthHeaders(request: Request): Request {
   const headers = new Headers(request.headers);
   headers.delete("cookie");
   headers.delete("authorization");
+  headers.delete(SNAP_PAYLOAD_HEADER);
   return new Request(request.url, { method: request.method, headers });
 }
 

package/src/og-image.ts

@@ -1,5 +1,9 @@
 import type { SnapHandlerResult, SnapSpec } from "@farcaster/snap";
-import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import {
+  DEFAULT_THEME_ACCENT,
+  PALETTE_LIGHT_HEX,
+  resolveSnapColorHex,
+} from "@farcaster/snap";
 import satori from "satori";
 import { Resvg, initWasm } from "@resvg/resvg-wasm";
 
@@ -250,8 +254,7 @@ function accentHex(accent: string | undefined): string {
 }
 
 function colorHex(color: string | undefined, accent: string): string {
-  if (!color || color === "accent") return accent;
-  return PALETTE_LIGHT_HEX[color as keyof typeof PALETTE_LIGHT_HEX] ?? accent;
+  return resolveSnapColorHex(color, { accentHex: accent, appearance: "light" });
 }
 
 function mapText(el: El): VNode {

package/src/payloadToResponse.ts

@@ -3,6 +3,7 @@ import {
   type SnapHandlerResult,
   validateSnapResponse,
   snapResponseSchema,
+  SNAP_PAYLOAD_HEADER,
 } from "@farcaster/snap";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 
@@ -43,13 +44,10 @@ export function payloadToResponse(
 }
 
 function errorResponse(error: string, issues: unknown[]): Response {
-  return new Response(
-    JSON.stringify({ error, issues }),
-    {
-      status: 400,
-      headers: { "Content-Type": "application/json; charset=utf-8" },
-    },
-  );
+  return new Response(JSON.stringify({ error, issues }), {
+    status: 400,
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+  });
 }
 
 export function snapHeaders(
@@ -59,7 +57,7 @@ export function snapHeaders(
 ) {
   return {
     "Content-Type": `${currentMediaType}; charset=utf-8`,
-    Vary: "Accept",
+    Vary: `Accept, ${SNAP_PAYLOAD_HEADER}`,
     Link: buildSnapAlternateLinkHeader(resourcePath, availableMediaTypes),
   };
 }

package/src/renderSnapPage.ts

@@ -7,7 +7,7 @@ import type {
 import {
   DEFAULT_THEME_ACCENT,
   PALETTE_LIGHT_HEX,
-  PALETTE_COLOR_ACCENT,
+  resolveSnapColorHex,
 } from "@farcaster/snap";
 
 // ─── OG meta ────────────────────────────────────────────
@@ -130,8 +130,7 @@ function accentHex(accent: PaletteColor | undefined): string {
 }
 
 function colorHex(color: string | undefined, accent: string): string {
-  if (!color || color === PALETTE_COLOR_ACCENT) return accent;
-  return (PALETTE_LIGHT_HEX as Record<string, string>)[color] ?? accent;
+  return resolveSnapColorHex(color, { accentHex: accent, appearance: "light" });
 }
 
 /** Readable foreground for a hex background (YIQ contrast check). */
@@ -395,8 +394,8 @@ function renderElement(key: string, spec: SnapSpec, accent: string): string {
       const gapVal =
         gapMap[String(p.gap ?? "md")] ?? (isHorizontal ? "8px" : "16px");
       const dir = isHorizontal ? "row" : "column";
-      const wrap = isHorizontal ? "flex-wrap:wrap;" : "";
-      const align = isHorizontal ? "align-items:center;" : "";
+      const wrapStyle = isHorizontal ? "flex-wrap:nowrap;" : "";
+      const alignItems = isHorizontal ? "align-items:stretch;" : "";
       const justifyMap: Record<string, string> = {
         start: "flex-start",
         center: "center",
@@ -406,7 +405,7 @@ function renderElement(key: string, spec: SnapSpec, accent: string): string {
       };
       const jc = p.justify ? justifyMap[String(p.justify)] : undefined;
       const childIds = el.children ?? [];
-      let html = `<div style="display:flex;width:100%;flex-direction:${dir};gap:${gapVal};${wrap}${align}${
+      let html = `<div style="display:flex;width:100%;min-width:0;box-sizing:border-box;flex-direction:${dir};gap:${gapVal};${wrapStyle}${alignItems}${
         jc ? `justify-content:${jc};` : ""
       }">`;
       for (const childKey of childIds) {