@farcaster/snap 2.8.0 → 2.10.0

package/dist/ui/catalog.d.ts

@@ -136,6 +136,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     "trending-up": "trending-up";
                     "trending-down": "trending-down";
                 }>>;
+                disabled: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
             description: string;
         };
@@ -509,48 +510,56 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         submit: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 target: z.ZodString;
             }, z.core.$strip>;
         };
         open_url: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 target: z.ZodString;
             }, z.core.$strip>;
         };
         open_snap: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 target: z.ZodString;
             }, z.core.$strip>;
         };
         open_mini_app: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 target: z.ZodString;
             }, z.core.$strip>;
         };
         view_cast: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 hash: z.ZodString;
             }, z.core.$strip>;
         };
         view_profile: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 fid: z.ZodNumber;
             }, z.core.$strip>;
         };
         view_channel: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 channelKey: z.ZodString;
             }, z.core.$strip>;
         };
         compose_cast: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 text: z.ZodOptional<z.ZodString>;
                 channelKey: z.ZodOptional<z.ZodString>;
                 embeds: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -559,12 +568,14 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         view_token: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 token: z.ZodString;
             }, z.core.$strip>;
         };
         send_token: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 token: z.ZodString;
                 amount: z.ZodOptional<z.ZodString>;
                 recipientFid: z.ZodOptional<z.ZodNumber>;
@@ -574,6 +585,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         swap_token: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 sellToken: z.ZodOptional<z.ZodString>;
                 buyToken: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>;
@@ -581,6 +593,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         send_transaction: {
             description: string;
             params: z.ZodObject<{
+                activityKey: z.ZodOptional<z.ZodString>;
                 chainId: z.ZodString;
                 to: z.ZodString;
                 data: z.ZodOptional<z.ZodString>;
@@ -591,20 +604,6 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 maxPriorityFeePerGas: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>;
         };
-        send_calls: {
-            description: string;
-            params: z.ZodObject<{
-                version: z.ZodOptional<z.ZodLiteral<"1.0">>;
-                chainId: z.ZodString;
-                atomicRequired: z.ZodOptional<z.ZodBoolean>;
-                id: z.ZodOptional<z.ZodString>;
-                calls: z.ZodArray<z.ZodObject<{
-                    to: z.ZodOptional<z.ZodString>;
-                    data: z.ZodOptional<z.ZodString>;
-                    value: z.ZodOptional<z.ZodString>;
-                }, z.core.$strip>>;
-            }, z.core.$strip>;
-        };
         paginator_next: {
             description: string;
             params: z.ZodObject<{

package/dist/ui/catalog.js

@@ -21,6 +21,9 @@ import { cellGridProps } from "./cell-grid.js";
 const snapClientParams = z.object({
     client_action: z.record(z.string(), z.unknown()),
 });
+const activityParams = {
+    activityKey: z.string().min(1).max(64).optional(),
+};
 /**
  * json-render catalog for snap elements.
  *
@@ -101,31 +104,31 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     actions: {
         submit: {
             description: "POST to snap server with signed body (fid, inputs, timestamp, signature); response is next snap page.",
-            params: z.object({ target: z.string() }),
+            params: z.object({ target: z.string(), ...activityParams }),
         },
         open_url: {
             description: "Open external URL in browser.",
-            params: z.object({ target: z.string() }),
+            params: z.object({ target: z.string(), ...activityParams }),
         },
         open_snap: {
             description: "Open a snap URL inline. The client renders the target as a snap rather than opening a browser.",
-            params: z.object({ target: z.string() }),
+            params: z.object({ target: z.string(), ...activityParams }),
         },
         open_mini_app: {
             description: "Open target URL as a Farcaster mini app.",
-            params: z.object({ target: z.string() }),
+            params: z.object({ target: z.string(), ...activityParams }),
         },
         view_cast: {
             description: "Navigate to a cast by hash.",
-            params: z.object({ hash: z.string() }),
+            params: z.object({ hash: z.string(), ...activityParams }),
         },
         view_profile: {
             description: "Navigate to a user profile by FID.",
-            params: z.object({ fid: z.number() }),
+            params: z.object({ fid: z.number(), ...activityParams }),
         },
         view_channel: {
             description: "Navigate to a Farcaster channel by channel key.",
-            params: z.object({ channelKey: z.string() }),
+            params: z.object({ channelKey: z.string(), ...activityParams }),
         },
         compose_cast: {
             description: "Open the cast composer with optional pre-filled content.",
@@ -133,11 +136,12 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
                 text: z.string().optional(),
                 channelKey: z.string().optional(),
                 embeds: z.array(z.string()).optional(),
+                ...activityParams,
             }),
         },
         view_token: {
             description: "View a token in the wallet. Token is a CAIP-19 identifier.",
-            params: z.object({ token: z.string() }),
+            params: z.object({ token: z.string(), ...activityParams }),
         },
         send_token: {
             description: "Open send flow for a token. Token is CAIP-19.",
@@ -146,6 +150,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
                 amount: z.string().optional(),
                 recipientFid: z.number().optional(),
                 recipientAddress: z.string().optional(),
+                ...activityParams,
             }),
         },
         swap_token: {
@@ -153,6 +158,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({
                 sellToken: z.string().optional(),
                 buyToken: z.string().optional(),
+                ...activityParams,
             }),
         },
         send_transaction: {
@@ -166,20 +172,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
                 gasPrice: z.string().optional(),
                 maxFeePerGas: z.string().optional(),
                 maxPriorityFeePerGas: z.string().optional(),
-            }),
-        },
-        send_calls: {
-            description: "Request one or more EVM calls through the host wallet using wallet_sendCalls.",
-            params: z.object({
-                version: z.literal("1.0").optional(),
-                chainId: z.string(),
-                atomicRequired: z.boolean().optional(),
-                id: z.string().optional(),
-                calls: z.array(z.object({
-                    to: z.string().optional(),
-                    data: z.string().optional(),
-                    value: z.string().optional(),
-                })),
+                ...activityParams,
             }),
         },
         paginator_next: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/index.ts

@@ -32,11 +32,15 @@ export {
 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,
@@ -45,6 +49,9 @@ export {
   type SnapFunction,
   type SnapPayload,
   type SnapGetPayload,
+  type SnapSendTransactionParams,
+  type SnapTransactionResult,
+  type SnapTransactionResultPayload,
 } from "./schemas";
 export { validateSnapResponse, type ValidationResult } from "./validator";
 export type { SnapRenderState } from "./render-state";

package/src/react/catalog-renderer.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { createRenderer } from "@json-render/react";
+import {
+  JSONUIProvider,
+  Renderer,
+  type ComponentRegistry,
+  type CreateRendererProps,
+} from "@json-render/react";
+import { useMemo, type ReactNode } from "react";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapActionButton } from "./components/action-button";
 import { SnapBadge } from "./components/badge";
@@ -24,7 +30,7 @@ import { SnapCellGrid } from "./components/cell-grid";
  * 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,
@@ -42,4 +48,52 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   toggle_group: SnapToggleGroup,
   bar_chart: SnapBarChart,
   cell_grid: SnapCellGrid,
-});
+} satisfies ComponentRegistry;
+
+export function SnapCatalogView({
+  spec,
+  store,
+  state,
+  onAction,
+  onStateChange,
+  functions,
+  loading,
+  fallback,
+  children,
+}: CreateRendererProps & { children?: ReactNode }) {
+  const actionHandlers = useMemo(
+    () =>
+      onAction
+        ? new Proxy<Record<string, (params: Record<string, unknown>) => unknown>>(
+            {},
+            {
+              get: (_target, prop) => {
+                return (params: Record<string, unknown>) =>
+                  onAction(String(prop), params);
+              },
+              has: () => true,
+            },
+          )
+        : undefined,
+    [onAction],
+  );
+
+  return (
+    <JSONUIProvider
+      registry={snapCatalogRegistry}
+      store={store}
+      initialState={state}
+      handlers={actionHandlers}
+      functions={functions}
+      onStateChange={onStateChange}
+    >
+      <Renderer
+        spec={spec}
+        registry={snapCatalogRegistry}
+        loading={loading}
+        fallback={fallback}
+      />
+      {children}
+    </JSONUIProvider>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
-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";
@@ -10,6 +10,7 @@ import {
   getPaginatorAction,
   runPaginatorAction,
 } from "../../ui/paginator-state";
+import { buildActionActivityStateChanges } from "../../render-state";
 import { useSnapStackDirection } from "../stack-direction-context";
 import { ICON_MAP } from "./icon";
 
@@ -24,6 +25,22 @@ function isExternalLinkAction(
   return press.action === "open_url";
 }
 
+function getActionPendingPath(on: Record<string, unknown> | undefined) {
+  const press = on?.press as
+    | { action?: unknown; params?: Record<string, unknown> }
+    | undefined;
+  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,
@@ -38,18 +55,25 @@ export function SnapActionButton({
   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" as const,
+    cursor: disabled ? ("not-allowed" as const) : ("pointer" as const),
+    opacity: disabled ? 0.62 : 1,
     ...(isPrimary
       ? {
           backgroundColor: hovered ? colors.accentHover : colors.accent,
@@ -83,8 +107,10 @@ export function SnapActionButton({
         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");
           }
@@ -94,6 +120,9 @@ export function SnapActionButton({
       >
         {Icon && <Icon size={16} />}
         {label}
+        {actionPending && (
+          <span data-snap-action-pending-active="true" hidden />
+        )}
         {showExternalIcon && (
           <ExternalLink size={14} style={{ opacity: 0.6 }} />
         )}

package/src/react/index.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import type { ValidationResult } from "../validator.js";
 import { SPEC_VERSION_2 } from "../constants";
 import type { SnapRenderState } from "../render-state";
+import type { SnapTransactionResult } from "../schemas";
 import { SnapCardV1 } from "./v1/snap-view";
 import { SnapCardV2 } from "./v2/snap-view";
 
@@ -36,18 +37,6 @@ export type SnapSendTransactionParams = {
   maxPriorityFeePerGas?: string;
 };
 
-export type SnapSendCallsParams = {
-  version?: "1.0";
-  chainId: string;
-  atomicRequired?: boolean;
-  id?: string;
-  calls: Array<{
-    to?: string;
-    data?: string;
-    value?: string;
-  }>;
-};
-
 export type SnapActionHandlers = {
   submit: (target: string, inputs: Record<string, JsonValue>) => void;
   open_url: (target: string) => void;
@@ -69,8 +58,9 @@ export type SnapActionHandlers = {
     recipientAddress?: string;
   }) => void;
   swap_token: (params: { sellToken?: string; buyToken?: string }) => void;
-  send_transaction?: (params: SnapSendTransactionParams) => void;
-  send_calls?: (params: SnapSendCallsParams) => void;
+  send_transaction?: (
+    params: SnapSendTransactionParams,
+  ) => void | Promise<void | SnapTransactionResult>;
 };
 
 export type { SnapRenderState };