@farcaster/snap 2.9.0 → 2.10.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
 export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, type SpecVersion, SNAP_PAYLOAD_HEADER, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, isSnapHexColorString, readableTextOnHex, resolveSnapColorHex, type PaletteColor, } from "./colors.js";
-export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, getPayloadSchema, type SnapAction, type SnapGetAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, type SnapGetPayload, } from "./schemas.js";
+export { ACTION_TYPE_GET, ACTION_TYPE_POST, ACTION_TYPE_TRANSACTION_RESULT, snapResponseSchema, payloadSchema, getPayloadSchema, transactionResultPayloadSchema, snapTransactionResultSchema, type SnapAction, type SnapGetAction, type SnapTransactionResultAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, type SnapGetPayload, type SnapSendTransactionParams, type SnapTransactionResult, type SnapTransactionResultPayload, } from "./schemas.js";
 export { validateSnapResponse, type ValidationResult } from "./validator.js";
 export type { SnapRenderState } from "./render-state.js";

package/dist/index.js

@@ -1,4 +1,4 @@
 export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, SNAP_PAYLOAD_HEADER, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, isSnapHexColorString, readableTextOnHex, resolveSnapColorHex, } from "./colors.js";
-export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, getPayloadSchema, } from "./schemas.js";
+export { ACTION_TYPE_GET, ACTION_TYPE_POST, ACTION_TYPE_TRANSACTION_RESULT, snapResponseSchema, payloadSchema, getPayloadSchema, transactionResultPayloadSchema, snapTransactionResultSchema, } from "./schemas.js";
 export { validateSnapResponse } from "./validator.js";

package/dist/react/catalog-renderer.d.ts

@@ -1,5 +1,5 @@
-/**
- * Maps snap json-render catalog types to React components.
- * Keys match the snap wire-format `type` strings exactly.
- */
-export declare const SnapCatalogView: import("react").ComponentType<import("@json-render/react").CreateRendererProps>;
+import { type CreateRendererProps } from "@json-render/react";
+import { type ReactNode } from "react";
+export declare function SnapCatalogView({ spec, store, state, onAction, onStateChange, functions, loading, fallback, children, }: CreateRendererProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/catalog-renderer.js

@@ -1,6 +1,7 @@
 "use client";
-import { createRenderer } from "@json-render/react";
-import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JSONUIProvider, Renderer, } from "@json-render/react";
+import { useMemo } from "react";
 import { SnapActionButton } from "./components/action-button.js";
 import { SnapBadge } from "./components/badge.js";
 import { SnapIcon } from "./components/icon.js";
@@ -22,7 +23,7 @@ import { SnapCellGrid } from "./components/cell-grid.js";
  * Maps snap json-render catalog types to React components.
  * Keys match the snap wire-format `type` strings exactly.
  */
-export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
+const snapCatalogRegistry = {
     badge: SnapBadge,
     button: SnapActionButton,
     icon: SnapIcon,
@@ -40,4 +41,15 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
     toggle_group: SnapToggleGroup,
     bar_chart: SnapBarChart,
     cell_grid: SnapCellGrid,
-});
+};
+export function SnapCatalogView({ spec, store, state, onAction, onStateChange, functions, loading, fallback, children, }) {
+    const actionHandlers = useMemo(() => onAction
+        ? new Proxy({}, {
+            get: (_target, prop) => {
+                return (params) => onAction(String(prop), params);
+            },
+            has: () => true,
+        })
+        : undefined, [onAction]);
+    return (_jsxs(JSONUIProvider, { registry: snapCatalogRegistry, store: store, initialState: state, handlers: actionHandlers, functions: functions, onStateChange: onStateChange, children: [_jsx(Renderer, { spec: spec, registry: snapCatalogRegistry, loading: loading, fallback: fallback }), children] }));
+}

package/dist/react/components/action-button.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useStateStore } from "@json-render/react";
+import { useMemo, useState } from "react";
+import { useStateStore, useStateValue } from "@json-render/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.js";
 import { getPaginatorAction, runPaginatorAction, } from "../../ui/paginator-state.js";
+import { buildActionActivityStateChanges } from "../../render-state.js";
 import { useSnapStackDirection } from "../stack-direction-context.js";
 import { ICON_MAP } from "./icon.js";
 function isExternalLinkAction(on) {
@@ -17,21 +18,36 @@ function isExternalLinkAction(on) {
         return false;
     return press.action === "open_url";
 }
+function getActionPendingPath(on) {
+    const press = on?.press;
+    if (!press?.action)
+        return "/__snap/action/pending";
+    return (buildActionActivityStateChanges({
+        actionName: press.action,
+        params: press.params ?? {},
+        pending: true,
+    }).find((change) => change.path.endsWith("/pending"))?.path ??
+        "/__snap/action/pending");
+}
 export function SnapActionButton({ element, emit, }) {
     const { props } = element;
     const label = String(props.label ?? "Action");
     const variant = String(props.variant ?? "secondary");
     const isPrimary = variant === "primary";
+    const disabled = props.disabled === true;
     const iconName = props.icon ? String(props.icon) : undefined;
     const colors = useSnapColors();
     const [hovered, setHovered] = useState(false);
     const stateStore = useStateStore();
     const paginatorAction = getPaginatorAction(element.on);
+    const actionPendingPath = useMemo(() => getActionPendingPath(element.on), [element.on]);
+    const actionPending = useStateValue(actionPendingPath) === true;
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
     const showExternalIcon = isExternalLinkAction(element.on);
     const inHorizontalStack = useSnapStackDirection() === "horizontal";
     const style = {
-        cursor: "pointer",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.62 : 1,
         ...(isPrimary
             ? {
                 backgroundColor: hovered ? colors.accentHover : colors.accent,
@@ -54,9 +70,11 @@ export function SnapActionButton({ element, emit, }) {
      */
     _jsx("div", { className: inHorizontalStack
             ? "min-w-0 flex-auto"
-            : "w-full min-w-0", style: inHorizontalStack ? { flex: "1 1 auto" } : undefined, children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("h-8 w-full gap-2 px-3 text-sm"), style: style, onClick: () => {
+            : "w-full min-w-0", style: inHorizontalStack ? { flex: "1 1 auto" } : undefined, children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("h-8 w-full gap-2 px-3 text-sm"), disabled: disabled, style: style, onClick: () => {
+                if (disabled)
+                    return;
                 if (!runPaginatorAction(stateStore, paginatorAction)) {
                     emit("press");
                 }
-            }, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label, showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
+            }, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label, actionPending && (_jsx("span", { "data-snap-action-pending-active": "true", hidden: true })), showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
 }

package/dist/react/index.d.ts

@@ -2,6 +2,7 @@ import type { Spec } from "@json-render/core";
 import type { ReactNode } from "react";
 import type { ValidationResult } from "../validator.js";
 import type { SnapRenderState } from "../render-state.js";
+import type { SnapTransactionResult } from "../schemas.js";
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
 };
@@ -55,7 +56,7 @@ export type SnapActionHandlers = {
         sellToken?: string;
         buyToken?: string;
     }) => void;
-    send_transaction?: (params: SnapSendTransactionParams) => void;
+    send_transaction?: (params: SnapSendTransactionParams) => void | Promise<void | SnapTransactionResult>;
 };
 export type { SnapRenderState };
 export declare function SnapCard({ snap, handlers, loading, appearance, maxWidth, showOverflowWarning, onValidationError, validationErrorFallback, actionError, plain, loadingOverlay, initialRenderState, onRenderStateChange, }: {

package/dist/react/snap-view-core.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createStateStore } from "@json-render/react";
 import { snapJsonRenderCatalog } from "../ui/index.js";
 import { SnapCatalogView } from "./catalog-renderer.js";
 import { SnapPreviewAccentProvider } from "./accent-context.js";
 import { SnapVersionProvider } from "./snap-version-context.js";
 import { resolveSnapPaletteHex } from "./lib/resolve-palette-hex.js";
 import { snapPreviewPrimaryCssProperties } from "./lib/preview-primary-css.js";
-import { applyStatePaths, buildInitialRenderState, cloneSnapRenderState, getUnpresentedSnapEffects, markSnapEffectsPresented, } from "../render-state.js";
+import { buildActionActivityStateChanges, buildInitialRenderState, cloneSnapRenderState, getUnpresentedSnapEffects, hasPendingSnapAction, markSnapEffectsPresented, } from "../render-state.js";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 function asRecord(value) {
     return value && typeof value === "object"
@@ -16,6 +17,11 @@ function asRecord(value) {
 function optionalString(value) {
     return value ? String(value) : undefined;
 }
+function recordValue(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
 function withDefaultElementProps(spec) {
     if (!spec || typeof spec !== "object" || !("elements" in spec))
         return spec;
@@ -165,7 +171,7 @@ export function SnapLoadingOverlay({ appearance, accentHex, active, }) {
     const trackColor = isDark
         ? "rgba(255, 255, 255, 0.12)"
         : "rgba(15, 23, 42, 0.1)";
-    return (_jsxs("div", { style: {
+    return (_jsxs("div", { "data-snap-loading-overlay": true, "data-snap-loading-active": active ? "true" : "false", style: {
             position: "absolute",
             inset: 0,
             display: "flex",
@@ -188,6 +194,20 @@ export function SnapLoadingOverlay({ appearance, accentHex, active, }) {
                     animation: "snapViewSpin 0.75s linear infinite",
                     flexShrink: 0,
                 } }), _jsx("style", { children: `
+        [data-snap-view-root]:has([data-snap-action-pending-active="true"])
+          [data-snap-loading-overlay] {
+          opacity: 1 !important;
+          pointer-events: auto !important;
+          backdrop-filter: blur(10px) saturate(1.05) !important;
+          -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
+        }
+        [data-snap-card-surface]:has([data-snap-action-pending-active="true"])
+          > [data-snap-loading-overlay] {
+          opacity: 1 !important;
+          pointer-events: auto !important;
+          backdrop-filter: blur(10px) saturate(1.05) !important;
+          -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
+        }
         @keyframes snapViewSpin {
           to { transform: rotate(360deg); }
         }
@@ -200,6 +220,9 @@ export function SnapLoadingOverlay({ appearance, accentHex, active, }) {
         }
       ` })] }));
 }
+function SnapPendingActionOverlay({ appearance, accentHex, }) {
+    return (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: false }));
+}
 const PALETTE = [
     "gray",
     "blue",
@@ -219,10 +242,23 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
         initialRenderState,
         themeAccent: snap.theme?.accent,
     }), [initialRenderState, spec.state, snap.theme?.accent]);
+    const stateStore = useMemo(() => createStateStore(initialState), [
+        initialState,
+    ]);
     const stateRef = useRef(initialState);
+    const onRenderStateChangeRef = useRef(onRenderStateChange);
+    const pendingActionCountRef = useRef(0);
     useEffect(() => {
         stateRef.current = cloneSnapRenderState(initialState);
     }, [initialState]);
+    useEffect(() => {
+        onRenderStateChangeRef.current = onRenderStateChange;
+    }, [onRenderStateChange]);
+    useEffect(() => stateStore.subscribe(() => {
+        const snapshot = cloneSnapRenderState(stateStore.getSnapshot());
+        stateRef.current = snapshot;
+        onRenderStateChangeRef.current?.(snapshot);
+    }), [stateStore]);
     useEffect(() => {
         const catalogResult = snapJsonRenderCatalog.validate(spec);
         if (!catalogResult.success) {
@@ -242,10 +278,6 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
         confetti: 0,
         fireworks: 0,
     });
-    const onRenderStateChangeRef = useRef(onRenderStateChange);
-    useEffect(() => {
-        onRenderStateChangeRef.current = onRenderStateChange;
-    }, [onRenderStateChange]);
     useEffect(() => {
         const effectsToPresent = getUnpresentedSnapEffects(stateRef.current, snapEffects);
         if (effectsToPresent.length === 0) {
@@ -262,7 +294,10 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
             return;
         }
         if (markSnapEffectsPresented(stateRef.current, effectsToPresent)) {
-            onRenderStateChangeRef.current?.(cloneSnapRenderState(stateRef.current));
+            const meta = recordValue(stateRef.current.__snapRender);
+            stateStore.update({
+                "/__snapRender/presentedEffects": meta?.presentedEffects ?? [],
+            });
         }
         setEffectRunKeys((current) => ({
             confetti: effectsToPresent.includes("confetti")
@@ -276,7 +311,7 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                     ? current.fireworks
                     : 0,
         }));
-    }, [initialState, showConfetti, showFireworks, snapEffects]);
+    }, [initialState, showConfetti, showFireworks, snapEffects, stateStore]);
     const accentName = snap.theme?.accent ?? "purple";
     const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
     const previewSurfaceStyle = useMemo(() => {
@@ -288,33 +323,52 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
             ...vars,
         };
     }, [accentName, appearance]);
+    const applyActionActivityState = useCallback((name, params, pending) => {
+        stateStore.update(Object.fromEntries(buildActionActivityStateChanges({
+            actionName: name,
+            params,
+            pending,
+        }).map(({ path, value }) => [path, value])));
+    }, [stateStore]);
+    const setActionPending = useCallback((name, params) => {
+        pendingActionCountRef.current += 1;
+        applyActionActivityState(name, params, true);
+    }, [applyActionActivityState]);
+    const setActionSettled = useCallback((name, params) => {
+        pendingActionCountRef.current = Math.max(0, pendingActionCountRef.current - 1);
+        applyActionActivityState(name, params, false);
+    }, [applyActionActivityState]);
     const handleAction = useCallback((name, params) => {
         const inputs = (stateRef.current.inputs ?? {});
         const p = (params ?? {});
+        let result;
+        setActionPending(name, p);
         switch (name) {
             case "submit":
-                handlers.submit(String(p.target ?? ""), inputs);
+                result = handlers.submit(String(p.target ?? ""), inputs);
                 break;
             case "open_url":
-                handlers.open_url(String(p.target ?? ""));
+                result = handlers.open_url(String(p.target ?? ""));
                 break;
             case "open_snap":
-                handlers.open_snap(String(p.target ?? ""));
+                result = handlers.open_snap(String(p.target ?? ""));
                 break;
             case "open_mini_app":
-                handlers.open_mini_app(String(p.target ?? ""));
+                result = handlers.open_mini_app(String(p.target ?? ""));
                 break;
             case "view_cast":
-                handlers.view_cast({ hash: String(p.hash ?? "") });
+                result = handlers.view_cast({ hash: String(p.hash ?? "") });
                 break;
             case "view_profile":
-                handlers.view_profile({ fid: Number(p.fid ?? 0) });
+                result = handlers.view_profile({ fid: Number(p.fid ?? 0) });
                 break;
             case "view_channel":
-                handlers.view_channel({ channelKey: String(p.channelKey ?? "") });
+                result = handlers.view_channel({
+                    channelKey: String(p.channelKey ?? ""),
+                });
                 break;
             case "compose_cast":
-                handlers.compose_cast({
+                result = handlers.compose_cast({
                     text: p.text ? String(p.text) : undefined,
                     channelKey: p.channelKey ? String(p.channelKey) : undefined,
                     embeds: Array.isArray(p.embeds)
@@ -323,10 +377,10 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                 });
                 break;
             case "view_token":
-                handlers.view_token({ token: String(p.token ?? "") });
+                result = handlers.view_token({ token: String(p.token ?? "") });
                 break;
             case "send_token":
-                handlers.send_token({
+                result = handlers.send_token({
                     token: String(p.token ?? ""),
                     amount: p.amount ? String(p.amount) : undefined,
                     recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
@@ -336,13 +390,13 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                 });
                 break;
             case "swap_token":
-                handlers.swap_token({
+                result = handlers.swap_token({
                     sellToken: p.sellToken ? String(p.sellToken) : undefined,
                     buyToken: p.buyToken ? String(p.buyToken) : undefined,
                 });
                 break;
             case "send_transaction":
-                handlers.send_transaction?.({
+                result = handlers.send_transaction?.({
                     chainId: String(p.chainId ?? ""),
                     to: String(p.to ?? ""),
                     data: optionalString(p.data),
@@ -356,9 +410,20 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
             default:
                 break;
         }
-    }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && effectRunKeys.confetti > 0 && (_jsx(ConfettiOverlay, {}, effectRunKeys.confetti)), showFireworks && effectRunKeys.fireworks > 0 && (_jsx(FireworksOverlay, {}, effectRunKeys.fireworks)), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapVersionProvider, { value: snap.version === "2.0" ? "2.0" : "1.0", children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
-                                applyStatePaths(stateRef.current, changes);
-                                onRenderStateChange?.(cloneSnapRenderState(stateRef.current));
-                            }, onAction: handleAction }, pageKey) }) }) })] }));
+        if (result instanceof Promise) {
+            void result.finally(() => {
+                setActionSettled(name, p);
+            }).catch(() => { });
+        }
+        else {
+            setActionSettled(name, p);
+        }
+        return result;
+    }, [handlers, setActionPending, setActionSettled]);
+    return (_jsxs("div", { "data-snap-view-root": true, style: { position: "relative", width: "100%" }, onClickCapture: (event) => {
+            if (!hasPendingSnapAction(stateRef.current))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        }, children: [showConfetti && effectRunKeys.confetti > 0 && (_jsx(ConfettiOverlay, {}, effectRunKeys.confetti)), showFireworks && effectRunKeys.fireworks > 0 && (_jsx(FireworksOverlay, {}, effectRunKeys.fireworks)), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapVersionProvider, { value: snap.version === "2.0" ? "2.0" : "1.0", children: _jsx(SnapCatalogView, { spec: spec, store: stateStore, loading: false, onAction: handleAction, children: loadingOverlay === undefined ? (_jsx(SnapPendingActionOverlay, { appearance: appearance, accentHex: accentHex })) : null }, pageKey) }) }) })] }));
 }

package/dist/react/v1/snap-view.js

@@ -49,7 +49,7 @@ export function SnapCardV1({ snap, handlers, loading = false, appearance = "dark
             position: "relative",
             width: "100%",
             maxWidth,
-        }, children: [_jsxs("div", { style: {
+        }, children: [_jsxs("div", { "data-snap-card-surface": true, style: {
                     position: "relative",
                     overflow: "hidden",
                     ...(plain ? {} : {

package/dist/react/v2/snap-view.js

@@ -90,7 +90,7 @@ export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark
                     position: "relative",
                     width: "100%",
                     maxWidth,
-                }, children: [_jsxs("div", { style: {
+                }, children: [_jsxs("div", { "data-snap-card-surface": true, style: {
                             position: "relative",
                             maxHeight: containerMaxHeight,
                             overflow: "hidden",

package/dist/react-native/components/snap-action-button.js

@@ -22,6 +22,7 @@ export function SnapActionButton({ element, emit, }) {
     const label = String(props.label ?? "Action");
     const variant = String(props.variant ?? "secondary");
     const isPrimary = variant === "primary";
+    const disabled = props.disabled === true;
     const iconName = props.icon ? String(props.icon) : undefined;
     const textColor = isPrimary ? "#fff" : colors.text;
     const iconColor = isPrimary ? "#fff" : colors.text;
@@ -37,7 +38,10 @@ export function SnapActionButton({ element, emit, }) {
                     ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
                     : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
                 pressed && styles.pressed,
-            ], onPress: () => {
+                disabled && styles.disabled,
+            ], disabled: disabled, onPress: () => {
+                if (disabled)
+                    return;
                 if (runPaginatorAction(stateStore, paginatorAction))
                     return;
                 void (async () => {
@@ -85,4 +89,5 @@ const styles = StyleSheet.create({
         paddingVertical: 6,
     },
     pressed: { opacity: 0.88 },
+    disabled: { opacity: 0.62 },
 });

package/dist/react-native/snap-view-core.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createStateStore } from "@json-render/react-native";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer.js";
 import { ConfettiOverlay } from "./confetti-overlay.js";
@@ -8,7 +9,7 @@ import { SnapVersionProvider } from "./snap-version-context.js";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { DEFAULT_THEME_ACCENT, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "@farcaster/snap";
-import { applyStatePaths, buildInitialRenderState, cloneSnapRenderState, getUnpresentedSnapEffects, markSnapEffectsPresented, } from "../render-state.js";
+import { buildActionActivityStateChanges, buildInitialRenderState, cloneSnapRenderState, getUnpresentedSnapEffects, hasPendingSnapAction, markSnapEffectsPresented, } from "../render-state.js";
 function asRecord(value) {
     return value && typeof value === "object"
         ? value
@@ -17,6 +18,11 @@ function asRecord(value) {
 function optionalString(value) {
     return value ? String(value) : undefined;
 }
+function recordValue(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
 function withDefaultElementProps(spec) {
     if (!spec || typeof spec !== "object" || !("elements" in spec))
         return spec;
@@ -54,10 +60,26 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
         initialRenderState,
         themeAccent: snap.theme?.accent,
     }), [initialRenderState, spec.state, snap.theme?.accent]);
+    const stateStore = useMemo(() => createStateStore(initialState), [
+        initialState,
+    ]);
     const stateRef = useRef(initialState);
+    const onRenderStateChangeRef = useRef(onRenderStateChange);
+    const pendingActionCountRef = useRef(0);
+    const [hasPendingAction, setHasPendingAction] = useState(false);
+    const [actionActivityVersion, setActionActivityVersion] = useState(0);
     useEffect(() => {
         stateRef.current = cloneSnapRenderState(initialState);
     }, [initialState]);
+    useEffect(() => {
+        onRenderStateChangeRef.current = onRenderStateChange;
+    }, [onRenderStateChange]);
+    useEffect(() => stateStore.subscribe(() => {
+        const snapshot = cloneSnapRenderState(stateStore.getSnapshot());
+        stateRef.current = snapshot;
+        setHasPendingAction(hasPendingSnapAction(snapshot));
+        onRenderStateChangeRef.current?.(snapshot);
+    }), [stateStore]);
     useEffect(() => {
         const catalogResult = snapJsonRenderCatalog.validate(spec);
         if (!catalogResult.success) {
@@ -77,10 +99,6 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
         confetti: 0,
         fireworks: 0,
     });
-    const onRenderStateChangeRef = useRef(onRenderStateChange);
-    useEffect(() => {
-        onRenderStateChangeRef.current = onRenderStateChange;
-    }, [onRenderStateChange]);
     useEffect(() => {
         const effectsToPresent = getUnpresentedSnapEffects(stateRef.current, snapEffects);
         if (effectsToPresent.length === 0) {
@@ -97,7 +115,10 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
             return;
         }
         if (markSnapEffectsPresented(stateRef.current, effectsToPresent)) {
-            onRenderStateChangeRef.current?.(cloneSnapRenderState(stateRef.current));
+            const meta = recordValue(stateRef.current.__snapRender);
+            stateStore.update({
+                "/__snapRender/presentedEffects": meta?.presentedEffects ?? [],
+            });
         }
         setEffectRunKeys((current) => ({
             confetti: effectsToPresent.includes("confetti")
@@ -111,47 +132,70 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
                     ? current.fireworks
                     : 0,
         }));
-    }, [initialState, showConfetti, showFireworks, snapEffects]);
+    }, [initialState, showConfetti, showFireworks, snapEffects, stateStore]);
     const handlersRef = useRef(handlers);
     handlersRef.current = handlers;
+    const applyActionActivityState = useCallback((name, params, pending) => {
+        stateStore.update(Object.fromEntries(buildActionActivityStateChanges({
+            actionName: name,
+            params,
+            pending,
+        }).map(({ path, value }) => [path, value])));
+    }, [stateStore]);
+    const setActionPending = useCallback((name, params) => {
+        pendingActionCountRef.current += 1;
+        setHasPendingAction(true);
+        setActionActivityVersion((version) => version + 1);
+        applyActionActivityState(name, params, true);
+    }, [applyActionActivityState]);
+    const setActionSettled = useCallback((name, params) => {
+        pendingActionCountRef.current = Math.max(0, pendingActionCountRef.current - 1);
+        applyActionActivityState(name, params, false);
+        if (pendingActionCountRef.current === 0) {
+            setHasPendingAction(false);
+        }
+        setActionActivityVersion((version) => version + 1);
+    }, [applyActionActivityState]);
     const handleAction = useCallback((name, params) => {
         const inputs = (stateRef.current.inputs ?? {});
         const p = (params ?? {});
         const h = handlersRef.current;
+        let result;
+        setActionPending(name, p);
         switch (name) {
             case "submit":
-                h.submit(String(p.target ?? ""), inputs);
+                result = h.submit(String(p.target ?? ""), inputs);
                 break;
             case "open_url":
-                h.open_url(String(p.target ?? ""));
+                result = h.open_url(String(p.target ?? ""));
                 break;
             case "open_snap":
-                h.open_snap(String(p.target ?? ""));
+                result = h.open_snap(String(p.target ?? ""));
                 break;
             case "open_mini_app":
-                h.open_mini_app(String(p.target ?? ""));
+                result = h.open_mini_app(String(p.target ?? ""));
                 break;
             case "view_cast":
-                h.view_cast({ hash: String(p.hash ?? "") });
+                result = h.view_cast({ hash: String(p.hash ?? "") });
                 break;
             case "view_profile":
-                h.view_profile({ fid: Number(p.fid ?? 0) });
+                result = h.view_profile({ fid: Number(p.fid ?? 0) });
                 break;
             case "view_channel":
-                h.view_channel({ channelKey: String(p.channelKey ?? "") });
+                result = h.view_channel({ channelKey: String(p.channelKey ?? "") });
                 break;
             case "compose_cast":
-                h.compose_cast({
+                result = h.compose_cast({
                     text: p.text ? String(p.text) : undefined,
                     channelKey: p.channelKey ? String(p.channelKey) : undefined,
                     embeds: Array.isArray(p.embeds) ? p.embeds : undefined,
                 });
                 break;
             case "view_token":
-                h.view_token({ token: String(p.token ?? "") });
+                result = h.view_token({ token: String(p.token ?? "") });
                 break;
             case "send_token":
-                h.send_token({
+                result = h.send_token({
                     token: String(p.token ?? ""),
                     amount: p.amount ? String(p.amount) : undefined,
                     recipientFid: p.recipientFid ? Number(p.recipientFid) : undefined,
@@ -161,13 +205,13 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
                 });
                 break;
             case "swap_token":
-                h.swap_token({
+                result = h.swap_token({
                     sellToken: p.sellToken ? String(p.sellToken) : undefined,
                     buyToken: p.buyToken ? String(p.buyToken) : undefined,
                 });
                 break;
             case "send_transaction":
-                h.send_transaction?.({
+                result = h.send_transaction?.({
                     chainId: String(p.chainId ?? ""),
                     to: String(p.to ?? ""),
                     data: optionalString(p.data),
@@ -181,11 +225,20 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
             default:
                 break;
         }
-    }, []);
-    return (_jsxs(View, { style: styles.container, children: [loading ? (loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: mode, accentHex: accentHex })) : (loadingOverlay)) : null, _jsx(SnapVersionProvider, { value: snap.version === "2.0" ? "2.0" : "1.0", children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
-                        applyStatePaths(stateRef.current, changes);
-                        onRenderStateChange?.(cloneSnapRenderState(stateRef.current));
-                    }, onAction: handleAction }, pageKey) }), showConfetti && effectRunKeys.confetti > 0 && (_jsx(ConfettiOverlay, {}, effectRunKeys.confetti)), showFireworks && effectRunKeys.fireworks > 0 && (_jsx(FireworksOverlay, {}, effectRunKeys.fireworks))] }));
+        if (result instanceof Promise) {
+            void result.finally(() => {
+                setActionSettled(name, p);
+            }).catch(() => { });
+        }
+        else {
+            setActionSettled(name, p);
+        }
+        return result;
+    }, [setActionPending, setActionSettled]);
+    const showLoadingOverlay = loading ||
+        hasPendingAction ||
+        (actionActivityVersion >= 0 && pendingActionCountRef.current > 0);
+    return (_jsxs(View, { style: styles.container, onStartShouldSetResponderCapture: () => hasPendingSnapAction(stateRef.current), children: [showLoadingOverlay ? (loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: mode, accentHex: accentHex })) : (loadingOverlay)) : null, _jsx(SnapVersionProvider, { value: snap.version === "2.0" ? "2.0" : "1.0", children: _jsx(SnapCatalogView, { spec: spec, store: stateStore, loading: false, onAction: handleAction }, pageKey) }), showConfetti && effectRunKeys.confetti > 0 && (_jsx(ConfettiOverlay, {}, effectRunKeys.confetti)), showFireworks && effectRunKeys.fireworks > 0 && (_jsx(FireworksOverlay, {}, effectRunKeys.fireworks))] }));
 }
 export function SnapLoadingOverlay({ appearance, accentHex, }) {
     return (_jsx(View, { style: [

package/dist/react-native/types.d.ts

@@ -1,5 +1,6 @@
 import type { Spec } from "@json-render/core";
 import type { SnapRenderState } from "../render-state.js";
+import type { SnapTransactionResult } from "../schemas.js";
 export type { SnapRenderState };
 export type JsonValue = string | number | boolean | null | JsonValue[] | {
     [key: string]: JsonValue;
@@ -54,5 +55,5 @@ export type SnapActionHandlers = {
         sellToken?: string;
         buyToken?: string;
     }) => void;
-    send_transaction?: (params: SnapSendTransactionParams) => void;
+    send_transaction?: (params: SnapSendTransactionParams) => void | Promise<void | SnapTransactionResult>;
 };