@farcaster/snap-hono 1.2.0 → 1.3.0

package/dist/renderSnapPage.js

@@ -1,13 +1,59 @@
-const PALETTE = {
-    gray: "#8F8F8F",
-    blue: "#006BFF",
-    red: "#FC0036",
-    amber: "#FFAE00",
-    green: "#28A948",
-    teal: "#00AC96",
-    purple: "#8B5CF6",
-    pink: "#F32782",
-};
+import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_COLOR_ACCENT, } from "@farcaster/snap";
+export function extractPageMeta(page) {
+    let title = "Farcaster Snap";
+    let description = "";
+    let imageUrl;
+    let imageAlt;
+    for (const el of page.elements.children) {
+        if (el.type === "text") {
+            const style = el.style;
+            const content = el.content;
+            if (style === "title" && title === "Farcaster Snap" && content) {
+                title = content;
+            }
+            else if ((style === "body" || style === "caption") &&
+                !description &&
+                content) {
+                description = content;
+            }
+        }
+        if (el.type === "image" && !imageUrl) {
+            imageUrl = el.url;
+            imageAlt = el.alt;
+        }
+    }
+    return {
+        title,
+        description: description || title,
+        imageUrl,
+        imageAlt,
+    };
+}
+function buildOgMeta(opts) {
+    const { title, description, pageUrl, ogImageUrl, imageAlt, siteName } = opts;
+    const imgUrl = ogImageUrl ?? undefined;
+    const twitterCard = imgUrl ? "summary_large_image" : "summary";
+    const lines = [
+        `<meta name="description" content="${esc(description)}">`,
+        `<meta property="og:title" content="${esc(title)}">`,
+        `<meta property="og:description" content="${esc(description)}">`,
+        `<meta property="og:url" content="${esc(pageUrl)}">`,
+        `<meta property="og:type" content="website">`,
+        `<meta property="og:locale" content="en_US">`,
+    ];
+    if (siteName) {
+        lines.push(`<meta property="og:site_name" content="${esc(siteName)}">`);
+    }
+    if (imgUrl) {
+        lines.push(`<meta property="og:image" content="${esc(imgUrl)}">`);
+        lines.push(`<meta property="og:image:alt" content="${esc(imageAlt ?? title)}">`);
+    }
+    lines.push(`<meta name="twitter:card" content="${twitterCard}">`, `<meta name="twitter:title" content="${esc(title)}">`, `<meta name="twitter:description" content="${esc(description)}">`);
+    if (imgUrl) {
+        lines.push(`<meta name="twitter:image" content="${esc(imgUrl)}">`);
+    }
+    return lines.join("\n");
+}
 const FC_ICON = `<svg viewBox="0 0 520 457" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M519.801 0V61.6809H458.172V123.31H477.054V123.331H519.801V456.795H416.57L416.507 456.49L363.832 207.03C358.81 183.251 345.667 161.736 326.827 146.434C307.988 131.133 284.255 122.71 260.006 122.71H259.8C235.551 122.71 211.818 131.133 192.979 146.434C174.139 161.736 160.996 183.259 155.974 207.03L103.239 456.795H0V123.323H42.7471V123.31H61.6262V61.6809H0V0H519.801Z" fill="currentColor"/></svg>`;
 function esc(s) {
     return s
@@ -17,17 +63,18 @@ function esc(s) {
         .replace(/"/g, "&quot;");
 }
 function accentHex(accent) {
-    return PALETTE[accent ?? "purple"] ?? PALETTE.purple;
+    return accent && PALETTE_LIGHT_HEX[accent]
+        ? PALETTE_LIGHT_HEX[accent]
+        : PALETTE_LIGHT_HEX[DEFAULT_THEME_ACCENT];
 }
 function colorHex(color, accent) {
-    if (!color || color === "accent")
+    if (!color || color === PALETTE_COLOR_ACCENT)
         return accent;
-    return PALETTE[color] ?? accent;
+    return PALETTE_LIGHT_HEX[color] ?? accent;
 }
 // ─── Element renderers ──────────────────────────────────
 function renderElement(el, accent) {
-    const type = el.type;
-    switch (type) {
+    switch (el.type) {
         case "text":
             return renderText(el, accent);
         case "image":
@@ -52,14 +99,8 @@ function renderElement(el, accent) {
             return renderGroup(el, accent);
         case "divider":
             return `<hr style="border:none;border-top:1px solid #E5E7EB;margin:4px 0">`;
-        case "spacer": {
-            const sizes = {
-                small: "8px",
-                medium: "16px",
-                large: "24px",
-            };
-            return `<div style="height:${sizes[el.size ?? "medium"] ?? "16px"}"></div>`;
-        }
+        case "spacer":
+            return renderSpacer(el);
         default:
             return "";
     }
@@ -84,9 +125,7 @@ function renderImage(el) {
     return `<div style="aspect-ratio:${ratio};border-radius:8px;overflow:hidden;background:#F3F4F6"><img src="${url}" alt="${esc(el.alt ?? "")}" style="width:100%;height:100%;object-fit:cover"></div>`;
 }
 function renderGrid(el) {
-    const cols = el.cols;
-    const rows = el.rows;
-    const cells = el.cells;
+    const { cols, rows, cells } = el;
     const cellSize = el.cellSize ?? "auto";
     const gap = el.gap ?? "small";
     const gapPx = {
@@ -110,9 +149,7 @@ function renderGrid(el) {
     return `<div style="display:grid;grid-template-columns:repeat(${cols},1fr);gap:${gapPx[gap] ?? "2px"}">${cellsHtml}</div>`;
 }
 function renderProgress(el, accent) {
-    const value = el.value;
-    const max = el.max;
-    const label = el.label;
+    const { value, max, label } = el;
     const color = colorHex(el.color, accent);
     const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
     const labelHtml = label
@@ -121,12 +158,12 @@ function renderProgress(el, accent) {
     return `<div>${labelHtml}<div style="height:8px;background:#E5E7EB;border-radius:4px;overflow:hidden"><div style="height:100%;width:${pct}%;background:${color};border-radius:4px"></div></div></div>`;
 }
 function renderBarChart(el, accent) {
-    const bars = el.bars;
+    const { bars } = el;
     const max = el.max ?? Math.max(...bars.map((b) => b.value), 1);
     const defaultColor = colorHex(el.color, accent);
     let html = `<div style="display:flex;align-items:flex-end;gap:12px;height:120px">`;
     for (const bar of bars) {
-        const color = bar.color ? PALETTE[bar.color] ?? defaultColor : defaultColor;
+        const color = colorHex(bar.color, defaultColor);
         const pct = max > 0 ? (bar.value / max) * 100 : 0;
         html += `<div style="flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end">`;
         html += `<div style="font-size:11px;color:#6B7280;margin-bottom:4px">${bar.value}</div>`;
@@ -139,7 +176,7 @@ function renderBarChart(el, accent) {
 }
 function renderList(el) {
     const style = el.style ?? "ordered";
-    const items = el.items;
+    const { items } = el;
     let html = "";
     for (let i = 0; i < items.length; i++) {
         const item = items[i];
@@ -156,7 +193,7 @@ function renderList(el) {
     return `<div>${html}</div>`;
 }
 function renderButtonGroup(el, accent) {
-    const options = el.options;
+    const { options } = el;
     const layout = el.style ?? "row";
     const dir = layout === "stack" ? "column" : "row";
     let html = `<div style="display:flex;flex-direction:${dir};gap:8px">`;
@@ -167,12 +204,8 @@ function renderButtonGroup(el, accent) {
     return html;
 }
 function renderSlider(el, accent) {
-    const label = el.label;
-    const min = el.min;
-    const max = el.max;
+    const { label, min, max, minLabel, maxLabel } = el;
     const value = el.value ?? (min + max) / 2;
-    const minLabel = el.minLabel;
-    const maxLabel = el.maxLabel;
     const labelHtml = label
         ? `<div style="font-size:13px;color:#6B7280;margin-bottom:4px">${esc(label)}</div>`
         : "";
@@ -190,7 +223,7 @@ function renderTextInput(el) {
 }
 function renderToggle(el, accent) {
     const label = esc(el.label);
-    const value = el.value;
+    const { value } = el;
     const bg = value ? accent : "#D1D5DB";
     const tx = value ? "20px" : "2px";
     return `<div style="display:flex;align-items:center;justify-content:space-between">
@@ -198,10 +231,17 @@ function renderToggle(el, accent) {
 <div style="width:44px;height:24px;background:${bg};border-radius:12px;position:relative;opacity:0.7"><div style="width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:${tx};transition:left .2s"></div></div>
 </div>`;
 }
+function renderSpacer(el) {
+    const sizes = {
+        small: "8px",
+        medium: "16px",
+        large: "24px",
+    };
+    return `<div style="height:${sizes[el.size ?? "medium"] ?? "16px"}"></div>`;
+}
 function renderGroup(el, accent) {
-    const children = el.children;
     let html = `<div style="display:flex;gap:12px">`;
-    for (const child of children) {
+    for (const child of el.children) {
         html += `<div style="flex:1">${renderElement(child, accent)}</div>`;
     }
     html += `</div>`;
@@ -229,18 +269,29 @@ function renderButtons(buttons, layout, accent) {
         const bg = style === "primary" ? accent : "transparent";
         const color = style === "primary" ? "#fff" : accent;
         const border = style === "primary" ? "none" : `2px solid ${accent}`;
-        html += `<button onclick="showModal()" style="flex:1;padding:10px 16px;border-radius:10px;background:${bg};color:${color};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit">${label}</button>`;
+        const pad = style === "primary" ? "18px 16px" : "10px 16px";
+        const minH = style === "primary" ? "min-height:52px;" : "";
+        html += `<button onclick="showModal()" style="flex:1;${minH}padding:${pad};border-radius:10px;background:${bg};color:${color};border:${border};font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box">${label}</button>`;
     }
     html += `</div>`;
     return html;
 }
 // ─── Main renderer ──────────────────────────────────────
-export function renderSnapPage(snap, snapOrigin) {
+export function renderSnapPage(snap, snapOrigin, opts) {
     const page = snap.page;
     const accent = accentHex(page.theme?.accent);
-    // Extract title for <title> tag
-    const titleEl = page.elements.children.find((el) => el.type === "text" && el.style === "title");
-    const pageTitle = titleEl ? esc(titleEl.content) : "Farcaster Snap";
+    const meta = extractPageMeta(page);
+    const pageTitle = esc(meta.title);
+    const resourcePath = opts?.resourcePath ?? "/";
+    const pageUrl = snapOrigin.replace(/\/$/, "") + resourcePath;
+    const ogMeta = buildOgMeta({
+        title: meta.title,
+        description: meta.description,
+        pageUrl,
+        ogImageUrl: opts?.ogImageUrl,
+        imageAlt: meta.imageAlt ?? meta.imageUrl ? meta.title : undefined,
+        siteName: opts?.siteName,
+    });
     const snapUrl = encodeURIComponent(snapOrigin + "/");
     // Render elements
     let elementsHtml = "";
@@ -255,6 +306,7 @@ export function renderSnapPage(snap, snapOrigin) {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${pageTitle}</title>
+${ogMeta}
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0A0A0A;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap-hono",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Hono integration for Farcaster Snap servers",
   "repository": {
     "type": "git",
@@ -26,7 +26,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@farcaster/snap": "1.4.0"
+    "@resvg/resvg-wasm": "^2.6.2",
+    "satori": "^0.10.0",
+    "@farcaster/snap": "1.5.0"
   },
   "peerDependencies": {
     "hono": ">=4.0.0"

package/src/fallback.ts

@@ -0,0 +1,81 @@
+const FARCASTER_ICON_SVG = `<svg aria-hidden="true" focusable="false" viewBox="0 0 520 457" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M519.801 0V61.6809H458.172V123.31H477.054V123.331H519.801V456.795H416.57L416.507 456.49L363.832 207.03C358.81 183.251 345.667 161.736 326.827 146.434C307.988 131.133 284.255 122.71 260.006 122.71H259.8C235.551 122.71 211.818 131.133 192.979 146.434C174.139 161.736 160.996 183.259 155.974 207.03L103.239 456.795H0V123.323H42.7471V123.31H61.6262V61.6809H0V0H519.801Z" fill="currentColor"/></svg>`;
+
+export function brandedFallbackHtml(
+  snapOrigin: string,
+  og?: { ogImageUrl?: string; resourcePath?: string; siteName?: string },
+): string {
+  const snapUrl = encodeURIComponent(snapOrigin + "/");
+  const testUrl = `https://farcaster.xyz/~/developers/snaps?url=${snapUrl}`;
+  const pageUrl = snapOrigin + (og?.resourcePath ?? "/");
+
+  const ogLines = [
+    `<meta name="description" content="An interactive embed for Farcaster.">`,
+    `<meta property="og:title" content="Farcaster Snap">`,
+    `<meta property="og:description" content="An interactive embed for Farcaster.">`,
+    `<meta property="og:url" content="${escHtml(pageUrl)}">`,
+    `<meta property="og:type" content="website">`,
+    `<meta property="og:locale" content="en_US">`,
+  ];
+  if (og?.siteName) {
+    ogLines.push(
+      `<meta property="og:site_name" content="${escHtml(og.siteName)}">`,
+    );
+  }
+  if (og?.ogImageUrl) {
+    ogLines.push(
+      `<meta property="og:image" content="${escHtml(og.ogImageUrl)}">`,
+      `<meta name="twitter:image" content="${escHtml(og.ogImageUrl)}">`,
+      `<meta name="twitter:card" content="summary_large_image">`,
+    );
+  } else {
+    ogLines.push(`<meta name="twitter:card" content="summary">`);
+  }
+  ogLines.push(
+    `<meta name="twitter:title" content="Farcaster Snap">`,
+    `<meta name="twitter:description" content="An interactive embed for Farcaster.">`,
+  );
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Farcaster Snap</title>
+${ogLines.join("\n")}
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0A0A0A;color:#FAFAFA;min-height:100vh;display:flex;align-items:center;justify-content:center}
+.c{text-align:center;max-width:400px;padding:48px 32px}
+.logo{color:#8B5CF6;margin-bottom:24px}
+.logo svg{width:48px;height:42px}
+h1{font-size:24px;font-weight:700;margin-bottom:8px}
+p{color:#A1A1AA;font-size:15px;line-height:1.5;margin-bottom:32px}
+.btns{display:flex;flex-direction:column;gap:12px}
+a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:opacity .15s}
+a:hover{opacity:.85}
+.p{background:#8B5CF6;color:#fff}
+.s{background:#1A1A2E;color:#FAFAFA;border:1px solid #2D2D44}
+.s svg{width:20px;height:18px}
+</style>
+</head>
+<body>
+<div class="c">
+<div class="logo">${FARCASTER_ICON_SVG}</div>
+<h1>Farcaster Snap</h1>
+<p>This is a Farcaster Snap &mdash; an interactive embed that lives in the feed.</p>
+<div class="btns">
+<a href="${testUrl}" class="p">Test this snap</a>
+<a href="https://farcaster.xyz" class="s">${FARCASTER_ICON_SVG} Sign up for Farcaster</a>
+</div>
+</div>
+</body>
+</html>`;
+}
+
+function escHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/src/index.ts

@@ -1,9 +1,23 @@
 import type { Hono } from "hono";
 import { cors } from "hono/cors";
-import { MEDIA_TYPE, type SnapFunction } from "@farcaster/snap";
+import {
+  createDefaultDataStore,
+  MEDIA_TYPE,
+  type SnapFunction,
+  ACTION_TYPE_GET,
+} from "@farcaster/snap";
 import { parseRequest } from "@farcaster/snap/server";
+import { brandedFallbackHtml } from "./fallback";
 import { payloadToResponse, snapHeaders } from "./payloadToResponse";
 import { renderSnapPage } from "./renderSnapPage";
+import {
+  renderSnapPageToPng,
+  renderWithDedup,
+  etagForPage,
+  type OgOptions,
+} from "./og-image";
+
+const defaultData = createDefaultDataStore();
 
 export type SnapHandlerOptions = {
   /**
@@ -23,6 +37,13 @@ export type SnapHandlerOptions = {
    * over the default branded fallback.
    */
   fallbackHtml?: string;
+
+  /**
+   * Open Graph configuration. Set to `false` to disable OG tag injection and
+   * the `/~/og-image` route. Pass an `OgOptions` object to customize rendering.
+   * @default true
+   */
+  og?: boolean | OgOptions;
 };
 
 /**
@@ -42,15 +63,100 @@ export function registerSnapHandler(
   options: SnapHandlerOptions = {},
 ): void {
   const path = options.path ?? "/";
+  const ogEnabled = options.og !== false;
+  const ogOptions =
+    typeof options.og === "object" ? options.og : ogEnabled ? {} : undefined;
 
   app.use(path, cors({ origin: "*" }));
 
+  // ─── /~/og-image PNG route ────────────────────────────
+  if (ogEnabled && ogOptions) {
+    const imgPath = ogImagePath(path);
+
+    app.get(imgPath, async (c) => {
+      const resourcePath = resourcePathFromRequest(c.req.url);
+      const key = resourcePath;
+
+      const renderFn = async (): Promise<{ png: Uint8Array; etag: string }> => {
+        const snap = await snapFn({
+          action: { type: ACTION_TYPE_GET },
+          request: stripAuthHeaders(c.req.raw),
+          data: defaultData,
+        });
+        const snapJson = JSON.stringify(snap);
+        const etag = etagForPage(snapJson);
+        const t0 = Date.now();
+        const png = await renderSnapPageToPng(snap, ogOptions);
+        const elapsed = Date.now() - t0;
+        return { png, etag, elapsed } as { png: Uint8Array; etag: string } & {
+          elapsed: number;
+        };
+      };
+
+      try {
+        // Adapter cache check
+        const adapter = ogOptions.cache;
+        if (adapter) {
+          const hit = await adapter.get(key);
+          if (hit) {
+            return new Response(hit.png as BodyInit, {
+              status: 200,
+              headers: {
+                "Content-Type": "image/png",
+                ETag: hit.etag,
+                "X-OG-Cache": "HIT",
+                ...ogCacheHeaders(ogOptions),
+              },
+            });
+          }
+        }
+
+        const result = await renderWithDedup(key, async () => {
+          const r = await renderFn();
+          return r;
+        });
+
+        const { png, etag } = result;
+        const elapsed = (result as typeof result & { elapsed?: number })
+          .elapsed;
+
+        if (adapter) {
+          await adapter
+            .set(key, { png, etag }, ogOptions.cdnMaxAge ?? 86400)
+            .catch(() => undefined);
+        }
+
+        return new Response(png as BodyInit, {
+          status: 200,
+          headers: {
+            "Content-Type": "image/png",
+            ETag: etag,
+            "X-OG-Cache": "MISS",
+            ...(elapsed != null ? { "X-OG-Render-Ms": String(elapsed) } : {}),
+            ...ogCacheHeaders(ogOptions),
+          },
+        });
+      } catch {
+        return new Response(null, {
+          status: 500,
+          headers: { "Cache-Control": "no-store" },
+        });
+      }
+    });
+  }
+
+  // ─── Main snap route ───────────────────────────────────
   app.get(path, async (c) => {
     const resourcePath = resourcePathFromRequest(c.req.url);
     const accept = c.req.header("Accept");
     if (!clientWantsSnapResponse(accept)) {
       const fallbackHtml =
-        options.fallbackHtml ?? (await getFallbackHtml(c.req.raw, snapFn));
+        options.fallbackHtml ??
+        (await getFallbackHtml(
+          c.req.raw,
+          snapFn,
+          ogEnabled ? buildOgImageUrl(c.req.raw, path) : undefined,
+        ));
       return new Response(fallbackHtml, {
         status: 200,
         headers: snapHeaders(resourcePath, "text/html", [
@@ -61,8 +167,9 @@ export function registerSnapHandler(
     }
 
     const response = await snapFn({
-      action: { type: "get" },
+      action: { type: ACTION_TYPE_GET },
       request: c.req.raw,
+      data: defaultData,
     });
 
     return payloadToResponse(response, {
@@ -103,7 +210,11 @@ export function registerSnapHandler(
       }
     }
 
-    const response = await snapFn({ action: parsed.action, request: raw });
+    const response = await snapFn({
+      action: parsed.action,
+      request: raw,
+      data: defaultData,
+    });
 
     return payloadToResponse(response, {
       resourcePath: resourcePathFromRequest(raw.url),
@@ -112,6 +223,35 @@ export function registerSnapHandler(
   });
 }
 
+// ─── Helpers ──────────────────────────────────────────────
+
+function ogImagePath(snapPath: string): string {
+  const p = snapPath.replace(/\/+$/, "") || "/";
+  return p === "/" ? "/~/og-image" : `${p}/~/og-image`;
+}
+
+function buildOgImageUrl(request: Request, snapPath: string): string {
+  const origin = snapOriginFromRequest(request);
+  return origin + ogImagePath(snapPath);
+}
+
+function ogCacheHeaders(
+  opts: import("./og-image").OgOptions,
+): Record<string, string> {
+  const cdnMaxAge = opts.cdnMaxAge ?? 86400;
+  const browserMaxAge = opts.browserMaxAge ?? 60;
+  return {
+    "Cache-Control": `public, max-age=${browserMaxAge}, s-maxage=${cdnMaxAge}, stale-while-revalidate=604800`,
+  };
+}
+
+function stripAuthHeaders(request: Request): Request {
+  const headers = new Headers(request.headers);
+  headers.delete("cookie");
+  headers.delete("authorization");
+  return new Request(request.url, { method: request.method, headers });
+}
+
 function resourcePathFromRequest(url: string): string {
   const u = new URL(url);
   return u.pathname + u.search;
@@ -120,20 +260,27 @@ function resourcePathFromRequest(url: string): string {
 async function getFallbackHtml(
   request: Request,
   snapFn: SnapFunction,
+  ogImageUrl?: string,
 ): Promise<string> {
+  const origin = snapOriginFromRequest(request);
+  const siteName =
+    process.env.SNAP_OG_SITE_NAME?.trim() ||
+    process.env.OG_SITE_NAME?.trim() ||
+    undefined;
+  const resourcePath = resourcePathFromRequest(request.url);
+
   try {
     const snap = await snapFn({
-      action: { type: "get" },
-      request,
+      action: { type: ACTION_TYPE_GET },
+      request: stripAuthHeaders(request),
+      data: defaultData,
     });
-    return renderSnapPage(snap, snapOriginFromRequest(request));
+    return renderSnapPage(snap, origin, { ogImageUrl, resourcePath, siteName });
   } catch {
-    return brandedFallbackHtml(snapOriginFromRequest(request));
+    return brandedFallbackHtml(origin, { ogImageUrl, resourcePath, siteName });
   }
 }
 
-const FARCASTER_ICON_SVG = `<svg aria-hidden="true" focusable="false" viewBox="0 0 520 457" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M519.801 0V61.6809H458.172V123.31H477.054V123.331H519.801V456.795H416.57L416.507 456.49L363.832 207.03C358.81 183.251 345.667 161.736 326.827 146.434C307.988 131.133 284.255 122.71 260.006 122.71H259.8C235.551 122.71 211.818 131.133 192.979 146.434C174.139 161.736 160.996 183.259 155.974 207.03L103.239 456.795H0V123.323H42.7471V123.31H61.6262V61.6809H0V0H519.801Z" fill="currentColor"/></svg>`;
-
 function snapOriginFromRequest(request: Request): string {
   const fromEnv = process.env.SNAP_PUBLIC_BASE_URL?.trim();
   if (fromEnv) return fromEnv.replace(/\/$/, "");
@@ -147,46 +294,6 @@ function snapOriginFromRequest(request: Request): string {
   return "https://snap.farcaster.xyz";
 }
 
-function brandedFallbackHtml(snapOrigin: string): string {
-  const snapUrl = encodeURIComponent(snapOrigin + "/");
-  const testUrl = `https://farcaster.xyz/~/developers/snaps?url=${snapUrl}`;
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Farcaster Snap</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box}
-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0A0A0A;color:#FAFAFA;min-height:100vh;display:flex;align-items:center;justify-content:center}
-.c{text-align:center;max-width:400px;padding:48px 32px}
-.logo{color:#8B5CF6;margin-bottom:24px}
-.logo svg{width:48px;height:42px}
-h1{font-size:24px;font-weight:700;margin-bottom:8px}
-p{color:#A1A1AA;font-size:15px;line-height:1.5;margin-bottom:32px}
-.btns{display:flex;flex-direction:column;gap:12px}
-a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:opacity .15s}
-a:hover{opacity:.85}
-.p{background:#8B5CF6;color:#fff}
-.s{background:#1A1A2E;color:#FAFAFA;border:1px solid #2D2D44}
-.s svg{width:20px;height:18px}
-</style>
-</head>
-<body>
-<div class="c">
-<div class="logo">${FARCASTER_ICON_SVG}</div>
-<h1>Farcaster Snap</h1>
-<p>This is a Farcaster Snap &mdash; an interactive embed that lives in the feed.</p>
-<div class="btns">
-<a href="${testUrl}" class="p">Test this snap</a>
-<a href="https://farcaster.xyz" class="s">${FARCASTER_ICON_SVG} Sign up for Farcaster</a>
-</div>
-</div>
-</body>
-</html>`;
-}
-
 function clientWantsSnapResponse(accept: string | undefined): boolean {
   if (!accept || accept.trim() === "") return false;
   const want = MEDIA_TYPE.toLowerCase();