@farcaster/snap 2.0.2 → 2.1.0

package/src/react/v2/snap-view.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { type ReactNode, useEffect, useMemo } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { validateSnapResponse } from "../../validator.js";
 import type { ValidationResult } from "../../validator.js";
-import { SnapViewCore } from "../snap-view-core";
+import { SnapViewCore, SnapLoadingOverlay } from "../snap-view-core";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
 import type { SnapPage, SnapActionHandlers } from "../index";
 
 const SNAP_MAX_HEIGHT = 500;
@@ -45,6 +46,7 @@ export function SnapViewV2({
   appearance = "dark",
   onValidationError,
   validationErrorFallback,
+  loadingOverlay,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -52,6 +54,8 @@ export function SnapViewV2({
   appearance?: "light" | "dark";
   onValidationError?: (result: ValidationResult) => void;
   validationErrorFallback?: ReactNode;
+  /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+  loadingOverlay?: ReactNode;
 }) {
   const validation = useMemo(() => validateSnapResponse(snap), [snap]);
   const valid = validation.valid;
@@ -79,6 +83,7 @@ export function SnapViewV2({
       handlers={handlers}
       loading={loading}
       appearance={appearance}
+      loadingOverlay={loadingOverlay}
     />
   );
 }
@@ -96,6 +101,7 @@ export function SnapCardV2({
   validationErrorFallback,
   actionError,
   plain = false,
+  loadingOverlay,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -107,12 +113,57 @@ export function SnapCardV2({
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
   plain?: boolean;
+  /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+  loadingOverlay?: ReactNode;
 }) {
-  const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
   const isDark = appearance === "dark";
   const bg = isDark ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
   const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
   const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
+  const toggleBg = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+  const toggleBgHover = isDark
+    ? "rgba(255,255,255,0.1)"
+    : "rgba(0,0,0,0.08)";
+  const toggleText = isDark ? "rgba(255,255,255,0.82)" : "rgba(0,0,0,0.72)";
+  const accentHex = useMemo(
+    () => resolveSnapPaletteHex(snap.theme?.accent ?? "purple", appearance),
+    [snap.theme?.accent, appearance],
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isExpandable, setIsExpandable] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [snap]);
+
+  useEffect(() => {
+    const node = contentRef.current;
+    if (!node) return;
+
+    const measure = () => {
+      setIsExpandable(node.scrollHeight > SNAP_MAX_HEIGHT + 1);
+    };
+
+    measure();
+
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [snap, plain, showOverflowWarning]);
+
+  useEffect(() => {
+    if (!isExpandable) {
+      setIsExpanded(false);
+    }
+  }, [isExpandable]);
+
+  const isClipped = !showOverflowWarning && isExpandable && !isExpanded;
+  const containerMaxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : undefined;
 
   return (
     <>
@@ -121,63 +172,125 @@ export function SnapCardV2({
         position: "relative",
         width: "100%",
         maxWidth,
-        maxHeight,
-        overflow: "hidden",
-        ...(plain ? {} : {
-          borderRadius: 16,
-          border: `1px solid ${borderColor}`,
-          backgroundColor: surfaceBg,
-        }),
       }}
     >
-      <div style={plain ? undefined : { padding: 16 }}>
-      <SnapViewV2
-        snap={snap}
-        handlers={handlers}
-        loading={loading}
-        appearance={appearance}
-        onValidationError={onValidationError}
-        validationErrorFallback={validationErrorFallback}
-      />
-      </div>
-      {showOverflowWarning && (
+      <div
+        style={{
+          position: "relative",
+          maxHeight: containerMaxHeight,
+          overflow: "hidden",
+          ...(plain ? {} : {
+            borderRadius: 16,
+            border: `1px solid ${borderColor}`,
+            backgroundColor: surfaceBg,
+          }),
+        }}
+      >
         <div
-          style={{
-            position: "absolute",
-            top: SNAP_MAX_HEIGHT,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            pointerEvents: "none",
-            zIndex: 10,
-          }}
+          style={
+            isClipped
+              ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" }
+              : undefined
+          }
         >
-          <div style={{ borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }}>
-            <span
-              style={{
-                position: "absolute",
-                top: -10,
-                right: 0,
-                fontSize: 10,
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-                color: "rgba(255,100,100,0.7)",
-                background: bg,
-                padding: "1px 4px",
-                borderRadius: 3,
-              }}
-            >
-              {SNAP_MAX_HEIGHT}px
-            </span>
+          <div ref={contentRef} style={plain ? undefined : { padding: 16 }}>
+            <SnapViewV2
+              snap={snap}
+              handlers={handlers}
+              loading={loading}
+              appearance={appearance}
+              onValidationError={onValidationError}
+              validationErrorFallback={validationErrorFallback}
+              loadingOverlay={null}
+            />
           </div>
+        </div>
+        {loadingOverlay === undefined ? (
+          <SnapLoadingOverlay
+            appearance={appearance}
+            accentHex={accentHex}
+            active={loading}
+          />
+        ) : loading ? (
+          <>{loadingOverlay}</>
+        ) : null}
+        {showOverflowWarning && (
           <div
             style={{
-              height: "100%",
-              background:
-                "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
+              position: "absolute",
+              top: SNAP_MAX_HEIGHT,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              pointerEvents: "none",
+              zIndex: 10,
             }}
-          />
-        </div>
-      )}
+          >
+            <div style={{ borderTop: "1px dashed rgba(255,100,100,0.6)", position: "relative" }}>
+              <span
+                style={{
+                  position: "absolute",
+                  top: -10,
+                  right: 0,
+                  fontSize: 10,
+                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                  color: "rgba(255,100,100,0.7)",
+                  background: bg,
+                  padding: "1px 4px",
+                  borderRadius: 3,
+                }}
+              >
+                {SNAP_MAX_HEIGHT}px
+              </span>
+            </div>
+            <div
+              style={{
+                height: "100%",
+                background:
+                  "repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,100,100,0.06) 8px, rgba(255,100,100,0.06) 16px)",
+              }}
+            />
+          </div>
+        )}
+      </div>
+      {!showOverflowWarning && isExpandable ? (
+        <button
+          type="button"
+          aria-expanded={isExpanded}
+          onClick={() => setIsExpanded((value) => !value)}
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: "50%",
+            transform: "translate(-50%, 50%)",
+            appearance: "none",
+            border: `1px solid ${borderColor}`,
+            borderRadius: 9999,
+            backgroundColor: isDark ? "rgba(30,30,30,0.6)" : "rgba(255,255,255,0.6)",
+            backdropFilter: "blur(12px) saturate(180%)",
+            WebkitBackdropFilter: "blur(12px) saturate(180%)",
+            color: toggleText,
+            padding: "2px 10px",
+            fontSize: 12,
+            lineHeight: "16px",
+            fontWeight: 600,
+            cursor: "pointer",
+            zIndex: 11,
+          }}
+          onMouseEnter={(event) => {
+            event.currentTarget.style.backgroundColor = isDark
+              ? "rgba(50,50,50,0.7)"
+              : "rgba(245,245,245,0.75)";
+          }}
+          onMouseLeave={(event) => {
+            event.currentTarget.style.backgroundColor = isDark
+              ? "rgba(30,30,30,0.6)"
+              : "rgba(255,255,255,0.6)";
+          }}
+        >
+          {isExpanded ? "Show less" : "Show more"}
+        </button>
+      ) : null}
     </div>
     {actionError && (
       <div

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

@@ -6,8 +6,11 @@ import { useSnapTheme } from "../theme";
 import { POST_GRID_TAP_KEY } from "@farcaster/snap";
 
 export function SnapCellGrid({
-  element: { props },
+  element,
+  emit,
 }: ComponentRenderProps<Record<string, unknown>>) {
+  const { props } = element;
+  const on = (element as unknown as { on?: Record<string, unknown> }).on;
   const { hex, appearance } = useSnapPalette();
   const { colors } = useSnapTheme();
   const { get, set } = useStateStore();
@@ -20,8 +23,10 @@ export function SnapCellGrid({
   const gapPx = gapMap[gap] ?? 1;
 
   const select = String(props.select ?? "off");
-  const interactive = select !== "off";
   const isMultiple = select === "multiple";
+  const isSelectable = select !== "off";
+  const hasPressAction = Boolean(on?.press);
+  const interactive = isSelectable || hasPressAction;
 
   const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
   const tapPath = `/inputs/${name}`;
@@ -34,7 +39,8 @@ export function SnapCellGrid({
     }
   }
 
-  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+  const isSelected = (r: number, c: number) =>
+    isSelectable && selectedSet.has(`${r},${c}`);
 
   const handleTap = (r: number, c: number) => {
     const key = `${r},${c}`;
@@ -46,6 +52,7 @@ export function SnapCellGrid({
     } else {
       set(tapPath, key);
     }
+    if (hasPressAction) emit("press");
   };
 
   const cellMap = new Map<string, { color?: string; content?: string }>();
@@ -114,7 +121,7 @@ export function SnapCellGrid({
     );
   }
 
-  const selectionLabel = interactive && selectedSet.size > 0
+  const selectionLabel = isSelectable && selectedSet.size > 0
     ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
     : null;
 

package/src/react-native/confetti-overlay.tsx

@@ -30,7 +30,10 @@ export function ConfettiOverlay() {
           CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)]!,
         size: 6 + Math.random() * 8,
         startRotation: Math.random() * 360,
-        driftX: (Math.random() > 0.5 ? 1 : -1) * Math.random() * 40,
+        // Per-piece swirl: amplitude, frequency (full oscillations), phase.
+        swirlAmp: 20 + Math.random() * 40,
+        swirlFreq: 1 + Math.random() * 1.5,
+        swirlPhase: Math.random() * Math.PI * 2,
       })),
     // width captured once on mount; intentional stable dep
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -39,45 +42,21 @@ export function ConfettiOverlay() {
 
   const anims = useRef(
     pieces.map(() => ({
-      translateY: new Animated.Value(-20),
-      opacity: new Animated.Value(1),
-      rotate: new Animated.Value(0),
-      translateX: new Animated.Value(0),
+      progress: new Animated.Value(0),
     })),
   ).current;
 
   useEffect(() => {
     const animations = pieces.map((piece, i) => {
       const anim = anims[i]!;
-      anim.translateY.setValue(-20);
-      anim.opacity.setValue(1);
-      anim.rotate.setValue(0);
-      anim.translateX.setValue(0);
-
+      anim.progress.setValue(0);
       return Animated.sequence([
         Animated.delay(piece.delay),
-        Animated.parallel([
-          Animated.timing(anim.translateY, {
-            toValue: height + 20,
-            duration: piece.duration,
-            useNativeDriver: true,
-          }),
-          Animated.timing(anim.opacity, {
-            toValue: 0,
-            duration: piece.duration,
-            useNativeDriver: true,
-          }),
-          Animated.timing(anim.rotate, {
-            toValue: 720,
-            duration: piece.duration,
-            useNativeDriver: true,
-          }),
-          Animated.timing(anim.translateX, {
-            toValue: piece.driftX,
-            duration: piece.duration,
-            useNativeDriver: true,
-          }),
-        ]),
+        Animated.timing(anim.progress, {
+          toValue: 1,
+          duration: piece.duration,
+          useNativeDriver: true,
+        }),
       ]);
     });
 
@@ -86,17 +65,41 @@ export function ConfettiOverlay() {
     return () => composite.stop();
   }, [pieces, anims, height]);
 
+  // Sample the sine curve at fixed progress points to build an interpolation
+  // that drives horizontal swirl on the native driver.
+  const SAMPLE_COUNT = 21;
+  const samplePoints = Array.from(
+    { length: SAMPLE_COUNT },
+    (_, k) => k / (SAMPLE_COUNT - 1),
+  );
+
   return (
     <View style={[StyleSheet.absoluteFill, styles.container]} pointerEvents="none">
       {pieces.map((piece, i) => {
         const anim = anims[i]!;
-        const rotate = anim.rotate.interpolate({
-          inputRange: [0, 720],
+        const translateY = anim.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-20, height + 20],
+        });
+        const rotate = anim.progress.interpolate({
+          inputRange: [0, 1],
           outputRange: [
             `${piece.startRotation}deg`,
             `${piece.startRotation + 720}deg`,
           ],
         });
+        const opacity = anim.progress.interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: [1, 1, 0],
+        });
+        const translateX = anim.progress.interpolate({
+          inputRange: samplePoints,
+          outputRange: samplePoints.map(
+            (t) =>
+              Math.sin(t * piece.swirlFreq * Math.PI * 2 + piece.swirlPhase) *
+              piece.swirlAmp,
+          ),
+        });
         return (
           <Animated.View
             key={piece.id}
@@ -107,10 +110,10 @@ export function ConfettiOverlay() {
                 width: piece.size,
                 height: piece.size * 0.6,
                 backgroundColor: piece.color,
-                opacity: anim.opacity,
+                opacity,
                 transform: [
-                  { translateY: anim.translateY },
-                  { translateX: anim.translateX },
+                  { translateY },
+                  { translateX },
                   { rotate },
                 ],
               },

package/src/react-native/index.tsx

@@ -31,6 +31,7 @@ export function SnapCard({
   validationErrorFallback,
   actionError,
   plain = false,
+  loadingOverlay,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -49,6 +50,8 @@ export function SnapCard({
   actionError?: string | null;
   /** When true, renders without card frame (no border, background, or padding). */
   plain?: boolean;
+  /** Custom content rendered while `loading` is true. Pass `null` to render nothing. */
+  loadingOverlay?: ReactNode;
 }) {
   if (snap.version === SPEC_VERSION_2) {
     return (
@@ -64,6 +67,7 @@ export function SnapCard({
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
         plain={plain}
+        loadingOverlay={loadingOverlay}
       />
     );
   }
@@ -78,6 +82,7 @@ export function SnapCard({
       borderRadius={borderRadius}
       actionError={actionError}
       plain={plain}
+      loadingOverlay={loadingOverlay}
     />
   );
 }

package/src/react-native/snap-view-core.tsx

@@ -1,8 +1,16 @@
 import type { Spec } from "@json-render/core";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer";
+import { ConfettiOverlay } from "./confetti-overlay";
 import { useSnapTheme } from "./theme";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import {
   DEFAULT_THEME_ACCENT,
@@ -66,10 +74,16 @@ export function SnapViewCoreInner({
   snap,
   handlers,
   loading = false,
+  loadingOverlay,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
   loading?: boolean;
+  /**
+   * Custom content rendered while `loading` is true. When `undefined` (default)
+   * the built-in ActivityIndicator overlay is used. Pass `null` to render nothing.
+   */
+  loadingOverlay?: ReactNode;
 }) {
   const { mode } = useSnapTheme();
   const spec = snap.ui;
@@ -113,6 +127,12 @@ export function SnapViewCoreInner({
     setPageKey((k) => k + 1);
   }, [spec]);
 
+  const showConfetti = snap.effects?.includes("confetti") ?? false;
+  const [confettiKey, setConfettiKey] = useState(0);
+  useEffect(() => {
+    if (showConfetti) setConfettiKey((k) => k + 1);
+  }, [showConfetti, snap]);
+
   const handlersRef = useRef(handlers);
   handlersRef.current = handlers;
 
@@ -172,19 +192,16 @@ export function SnapViewCoreInner({
 
   return (
     <View style={styles.container}>
-      {loading ? (
-        <View
-          style={[
-            styles.overlay,
-            {
-              backgroundColor:
-                mode === "dark" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.2)",
-            },
-          ]}
-        >
-          <ActivityIndicator size="large" color={accentHex} />
-        </View>
-      ) : null}
+      {loading
+        ? loadingOverlay === undefined
+          ? (
+            <SnapLoadingOverlay
+              appearance={mode}
+              accentHex={accentHex}
+            />
+          )
+          : loadingOverlay
+        : null}
       <SnapCatalogView
         key={pageKey}
         spec={spec}
@@ -195,6 +212,31 @@ export function SnapViewCoreInner({
         }}
         onAction={handleAction}
       />
+      {showConfetti && <ConfettiOverlay key={confettiKey} />}
+    </View>
+  );
+}
+
+export function SnapLoadingOverlay({
+  appearance,
+  accentHex,
+}: {
+  appearance: "light" | "dark";
+  accentHex: string;
+}) {
+  return (
+    <View
+      style={[
+        styles.overlay,
+        {
+          backgroundColor:
+            appearance === "dark"
+              ? "rgba(0,0,0,0.1)"
+              : "rgba(255,255,255,0.2)",
+        },
+      ]}
+    >
+      <ActivityIndicator size="large" color={accentHex} />
     </View>
   );
 }