@farcaster/snap 2.0.3 → 2.1.0

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

@@ -1,6 +1,6 @@
 "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, SnapLoadingOverlay } from "../snap-view-core";
@@ -116,16 +116,55 @@ export function SnapCardV2({
   /** 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 (
     <>
     <div
@@ -133,73 +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}
-        loadingOverlay={null}
-      />
-      </div>
-      {loadingOverlay === undefined ? (
-        <SnapLoadingOverlay
-          appearance={appearance}
-          accentHex={accentHex}
-          active={loading}
-        />
-      ) : loading ? (
-        <>{loadingOverlay}</>
-      ) : null}
-      {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/snap-view-core.tsx

@@ -1,6 +1,7 @@
 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 {
   type ReactNode,
@@ -126,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;
 
@@ -205,6 +212,7 @@ export function SnapViewCoreInner({
         }}
         onAction={handleAction}
       />
+      {showConfetti && <ConfettiOverlay key={confettiKey} />}
     </View>
   );
 }

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

@@ -95,6 +95,9 @@ function SnapCardV1Inner({
   const isExpandable = contentHeight > SNAP_MAX_HEIGHT + 1;
   const isClipped = isExpandable && !isExpanded;
 
+  const isDark = mode === "dark";
+  const pillBg = isDark ? "rgba(40,40,40,0.92)" : "rgba(255,255,255,0.92)";
+  const pillBgPressed = isDark ? "rgba(60,60,60,0.95)" : "rgba(240,240,240,0.95)";
   return (
     <>
       <View style={cardStyles.frameRing}>
@@ -138,37 +141,29 @@ function SnapCardV1Inner({
               ? <SnapLoadingOverlay appearance={mode} accentHex={accentHex} />
               : loadingOverlay
             : null}
-          {isExpandable ? (
-            <View
-              style={[
-                cardStyles.expandRow,
-                plain
-                  ? cardStyles.expandRowPlain
-                  : { borderTopColor: colors.border },
+        </View>
+        {isExpandable ? (
+          <View pointerEvents="box-none" style={cardStyles.expandFloat}>
+            <Pressable
+              style={({ pressed }) => [
+                cardStyles.expandButton,
+                {
+                  backgroundColor: pressed ? pillBgPressed : pillBg,
+                  borderColor: colors.border,
+                },
               ]}
+              onPress={() => {
+                setIsExpanded((value) => !value);
+              }}
             >
-              <Pressable
-                style={({ pressed }) => [
-                  cardStyles.expandButton,
-                  {
-                    backgroundColor: pressed
-                      ? colors.mutedHover
-                      : colors.muted,
-                  },
-                ]}
-                onPress={() => {
-                  setIsExpanded((value) => !value);
-                }}
+              <Text
+                style={[cardStyles.expandButtonText, { color: colors.text }]}
               >
-                <Text
-                  style={[cardStyles.expandButtonText, { color: colors.text }]}
-                >
-                  {isExpanded ? "Show less" : "Show more"}
-                </Text>
-              </Pressable>
-            </View>
-          ) : null}
-        </View>
+                {isExpanded ? "Show less" : "Show more"}
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
       </View>
       {actionError && (
         <Text
@@ -231,30 +226,27 @@ const cardStyles = StyleSheet.create({
   frameRing: { alignSelf: "stretch" },
   card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
   body: { paddingHorizontal: 16, paddingVertical: 16 },
-  expandRow: {
+  expandFloat: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: -14,
+    height: 28,
     alignItems: "center",
-    paddingHorizontal: 16,
-    paddingTop: 10,
-    paddingBottom: 12,
-    borderTopWidth: StyleSheet.hairlineWidth,
-  },
-  expandRowPlain: {
-    paddingHorizontal: 0,
-    paddingTop: 8,
-    paddingBottom: 0,
-    borderTopWidth: 0,
+    justifyContent: "center",
   },
   expandButton: {
     minWidth: 92,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 9999,
+    borderWidth: 1,
     paddingHorizontal: 10,
-    paddingVertical: 6,
+    paddingVertical: 4,
   },
   expandButtonText: {
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: 12,
+    lineHeight: 16,
     fontWeight: "600",
   },
   actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },