@farcaster/snap 1.15.3 → 1.16.0

package/src/react/components/action-button.tsx

@@ -1,18 +1,34 @@
 "use client";
 
 import { useState } from "react";
+import { ExternalLink } from "lucide-react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
+function isExternalLinkAction(
+  on: Record<string, unknown> | undefined,
+): boolean {
+  if (!on) return false;
+  const press = on.press as
+    | { action?: string; params?: Record<string, unknown> }
+    | undefined;
+  if (!press || press.action !== "open_url") return false;
+  return press.params?.isSnap !== true;
+}
+
 export function SnapActionButton({
-  element: { props },
+  element,
   emit,
 }: {
-  element: { props: Record<string, unknown> };
+  element: {
+    props: Record<string, unknown>;
+    on?: Record<string, unknown>;
+  };
   emit: (name: string) => void;
 }) {
+  const { props } = element;
   const label = String(props.label ?? "Action");
   const variant = String(props.variant ?? "secondary");
   const isPrimary = variant === "primary";
@@ -21,6 +37,7 @@ export function SnapActionButton({
   const [hovered, setHovered] = useState(false);
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
+  const showExternalIcon = isExternalLinkAction(element.on);
 
   const style = isPrimary
     ? {
@@ -29,7 +46,9 @@ export function SnapActionButton({
         borderColor: "transparent",
       }
     : {
-        backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+        backgroundColor: hovered
+          ? `color-mix(in srgb, ${colors.accent} 15%, transparent)`
+          : colors.muted,
         color: colors.text,
         borderColor: "transparent",
       };
@@ -47,6 +66,9 @@ export function SnapActionButton({
       >
         {Icon && <Icon size={16} />}
         {label}
+        {showExternalIcon && (
+          <ExternalLink size={14} style={{ opacity: 0.6 }} />
+        )}
       </Button>
     </div>
   );

package/src/react/components/badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@neynar/ui/badge";
-import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -16,14 +16,13 @@ export function SnapBadge({
   const colors = useSnapColors();
 
   const badgeColor = colors.colorHex(color);
-  const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
   const style =
     variant === "outline"
       ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
-      : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+      : { backgroundColor: `${badgeColor}20`, color: badgeColor, borderColor: "transparent" };
 
   return (
     <Badge variant={variant} className="gap-1" style={style}>

package/src/react/index.tsx

@@ -1,19 +1,11 @@
 "use client";
 
 import type { Spec } from "@json-render/core";
-import { snapJsonRenderCatalog } from "../ui/index.js";
-import { SnapCatalogView } from "./catalog-renderer";
-import { SnapPreviewAccentProvider } from "./accent-context";
-import { resolveSnapPaletteHex } from "./lib/resolve-palette-hex";
-import { snapPreviewPrimaryCssProperties } from "./lib/preview-primary-css";
-import {
-  type CSSProperties,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import type { ReactNode } from "react";
+import type { ValidationResult } from "../validator.js";
+import { SPEC_VERSION_2 } from "../constants";
+import { SnapCardV1 } from "./v1/snap-view";
+import { SnapCardV2 } from "./v2/snap-view";
 
 // ─── Public types ──────────────────────────────────────
 
@@ -53,333 +45,50 @@ export type SnapActionHandlers = {
   swap_token: (params: { sellToken?: string; buyToken?: string }) => void;
 };
 
-// ─── Internal helpers ──────────────────────────────────
+// ─── SnapCard ────────────────────────────────────────
 
-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;
-      }
-    }
-  }
-}
-
-const CONFETTI_COLORS = [
-  "#8B5CF6",
-  "#EC4899",
-  "#3B82F6",
-  "#10B981",
-  "#F59E0B",
-  "#EF4444",
-  "#06B6D4",
-];
-
-function ConfettiOverlay() {
-  const pieces = useMemo(
-    () =>
-      Array.from({ length: 80 }, (_, i) => ({
-        id: i,
-        left: Math.random() * 100,
-        delay: Math.random() * 1.2,
-        duration: 2.5 + Math.random() * 2,
-        color:
-          CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
-        size: 6 + Math.random() * 8,
-        rotation: Math.random() * 360,
-      })),
-    [],
-  );
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        pointerEvents: "none",
-        zIndex: 20,
-      }}
-    >
-      {pieces.map(({ id, left, delay, duration, color, size, rotation }) => (
-        <div
-          key={id}
-          style={{
-            position: "absolute",
-            left: `${left}%`,
-            top: -20,
-            width: size,
-            height: size * 0.6,
-            backgroundColor: color,
-            borderRadius: 2,
-            transform: `rotate(${rotation}deg)`,
-            animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
-          }}
-        />
-      ))}
-      <style>{`@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${
-        Math.random() > 0.5 ? "" : "-"
-      }40px)}}`}</style>
-    </div>
-  );
-}
-
-function SnapLoadingOverlay({
-  appearance,
-  accentHex,
-  active,
-}: {
-  appearance: "light" | "dark";
-  accentHex: string;
-  active: boolean;
-}) {
-  const isDark = appearance === "dark";
-  const tint = isDark ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)";
-  const trackColor = isDark
-    ? "rgba(255, 255, 255, 0.12)"
-    : "rgba(15, 23, 42, 0.1)";
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 10,
-        background: tint,
-        backdropFilter: active ? "blur(10px) saturate(1.05)" : "none",
-        WebkitBackdropFilter: active
-          ? "blur(10px) saturate(1.05)"
-          : "none",
-        opacity: active ? 1 : 0,
-        pointerEvents: active ? "auto" : "none",
-        transition: "opacity 0.28s ease, backdrop-filter 0.28s ease",
-      }}
-      aria-hidden={!active}
-      aria-busy={active ? true : undefined}
-      aria-live={active ? "polite" : undefined}
-      aria-label={active ? "Loading" : undefined}
-    >
-      <div
-        data-snap-loading-spinner
-        style={{
-          width: 30,
-          height: 30,
-          borderRadius: "50%",
-          border: `2.5px solid ${trackColor}`,
-          borderTopColor: accentHex,
-          opacity: 0.88,
-          animation: "snapViewSpin 0.75s linear infinite",
-          flexShrink: 0,
-        }}
-      />
-      <style>{`
-        @keyframes snapViewSpin {
-          to { transform: rotate(360deg); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          [data-snap-loading-spinner] {
-            animation: none;
-            border-top-color: ${accentHex};
-            opacity: 0.75;
-          }
-        }
-      `}</style>
-    </div>
-  );
-}
-
-const PALETTE = [
-  "gray",
-  "blue",
-  "red",
-  "amber",
-  "green",
-  "teal",
-  "purple",
-  "pink",
-] as const;
-
-// ─── SnapView ──────────────────────────────────────────
-
-export function SnapView({
+export function SnapCard({
   snap,
   handlers,
   loading = false,
   appearance = "dark",
+  maxWidth = 480,
+  showOverflowWarning = false,
+  onValidationError,
+  validationErrorFallback,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
   loading?: boolean;
   appearance?: "light" | "dark";
+  maxWidth?: number;
+  /** When true, extends to 700px and shows a warning overlay below 500px. When false, clips at 500px. Only applies to v2 snaps. */
+  showOverflowWarning?: boolean;
+  onValidationError?: (result: ValidationResult) => void;
+  validationErrorFallback?: ReactNode;
 }) {
-  const spec = snap.ui;
-  const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
-
-  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 showConfetti = snap.effects?.includes("confetti");
-
-  // Increment key each time a new snap with confetti arrives so the overlay
-  // unmounts/remounts and restarts its animation on every trigger.
-  const confettiEpochRef = useRef(0);
-  const lastConfettiSnapRef = useRef<typeof snap | null>(null);
-  if (showConfetti && snap !== lastConfettiSnapRef.current) {
-    confettiEpochRef.current++;
-    lastConfettiSnapRef.current = snap;
-  }
-
-  const accentName = snap.theme?.accent ?? "purple";
-
-  const accentHex = useMemo(
-    () => resolveSnapPaletteHex(accentName, appearance),
-    [accentName, appearance],
-  );
-
-  const previewSurfaceStyle = useMemo(() => {
-    const vars: Record<string, string> = {};
-    for (const c of PALETTE)
-      vars[`--snap-color-${c}`] = resolveSnapPaletteHex(c, appearance);
-    return {
-      ...snapPreviewPrimaryCssProperties(accentName, appearance),
-      ...vars,
-    } as CSSProperties;
-  }, [accentName, appearance]);
-
-  const handleAction = useCallback(
-    (name: unknown, params: unknown) => {
-      const inputs = (stateRef.current.inputs ?? {}) as Record<
-        string,
-        JsonValue
-      >;
-      const p = (params ?? {}) as Record<string, unknown>;
-      switch (name) {
-        case "submit":
-          handlers.submit(String(p.target ?? ""), inputs);
-          break;
-        case "open_url":
-          handlers.open_url(String(p.target ?? ""));
-          break;
-        case "open_mini_app":
-          handlers.open_mini_app(String(p.target ?? ""));
-          break;
-        case "view_cast":
-          handlers.view_cast({ hash: String(p.hash ?? "") });
-          break;
-        case "view_profile":
-          handlers.view_profile({ fid: Number(p.fid ?? 0) });
-          break;
-        case "compose_cast":
-          handlers.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":
-          handlers.view_token({ token: String(p.token ?? "") });
-          break;
-        case "send_token":
-          handlers.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":
-          handlers.swap_token({
-            sellToken: p.sellToken ? String(p.sellToken) : undefined,
-            buyToken: p.buyToken ? String(p.buyToken) : undefined,
-          });
-          break;
-        default:
-          break;
-      }
-    },
-    [handlers],
-  );
-
-  return (
-    <div style={{ position: "relative", width: "100%" }}>
-      {showConfetti && <ConfettiOverlay key={`confetti-${confettiEpochRef.current}`} />}
-      <SnapLoadingOverlay
+  if (snap.version === SPEC_VERSION_2) {
+    return (
+      <SnapCardV2
+        snap={snap}
+        handlers={handlers}
+        loading={loading}
         appearance={appearance}
-        accentHex={accentHex}
-        active={loading}
+        maxWidth={maxWidth}
+        showOverflowWarning={showOverflowWarning}
+        onValidationError={onValidationError}
+        validationErrorFallback={validationErrorFallback}
       />
+    );
+  }
 
-      <div style={previewSurfaceStyle}>
-        <SnapPreviewAccentProvider
-          pageAccent={snap.theme?.accent}
-          appearance={appearance}
-        >
-          <SnapCatalogView
-            key={pageKey}
-            spec={spec}
-            state={initialState}
-            loading={false}
-            onStateChange={(changes) => {
-              applyStatePaths(stateRef.current, changes);
-            }}
-            onAction={handleAction}
-          />
-        </SnapPreviewAccentProvider>
-      </div>
-    </div>
+  return (
+    <SnapCardV1
+      snap={snap}
+      handlers={handlers}
+      loading={loading}
+      appearance={appearance}
+      maxWidth={maxWidth}
+    />
   );
 }