Rendering Snaps

const response = await fetch(snapUrl, {
  headers: {
    Accept: "application/vnd.farcaster.snap+json",
  },
});

const snap = await response.json();

import { SnapCard } from "@farcaster/snap/react";
import type { SnapPage, SnapActionHandlers } from "@farcaster/snap/react";

import { SnapCard } from "@farcaster/snap/react-native";
import type { SnapPage, SnapActionHandlers } from "@farcaster/snap/react-native";

import { useState, useCallback } from "react";
import { SnapCard } from "@farcaster/snap/react";
import { encodePayload } from "@farcaster/snap/server";
import type { SnapPage, SnapActionHandlers } from "@farcaster/snap/react";

function SnapRenderer({
  initialSnap,
  snapUrl,
  user,
  castFromContext,
}: {
  initialSnap: SnapPage;
  snapUrl: string;
  user: { fid: number; signerKey: SignerKey };
  /** When the snap is shown inside a cast, pass hash + author FID for `surface`. */
  castFromContext?: { hash: string; authorFid: number };
}) {
  const [snap, setSnap] = useState(initialSnap);
  const [currentUrl, setCurrentUrl] = useState(snapUrl);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = useCallback(
    async (target: string, inputs: Record<string, unknown>) => {
      setLoading(true);
      setError(null);

      try {
        // Build the v2 payload
        const payload = {
          fid: user.fid,
          user: { fid: user.fid },
          inputs,
          timestamp: Math.floor(Date.now() / 1000),
          audience: new URL(target).origin,
          surface: castFromContext
            ? {
                type: "cast" as const,
                cast: {
                  hash: castFromContext.hash,
                  author: { fid: castFromContext.authorFid },
                },
              }
            : { type: "standalone" as const },
        };

        // Sign with JFS and send
        const body = {
          header: encodeJFSHeader(user.signerKey),
          payload: encodePayload(payload),
          signature: signPayload(payload, user.signerKey),
        };

        const res = await fetch(target, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/vnd.farcaster.snap+json",
          },
          body: JSON.stringify(body),
        });

        // Parse the response
        const json = await res.json();

        if (!res.ok) {
          // Server returns { error: string } on failure
          throw new Error(json.error ?? `Server error (${res.status})`);
        }

        // Success — render the next snap page
        setSnap(json as SnapPage);
        setCurrentUrl(target);
      } catch (e) {
        setError(e instanceof Error ? e.message : "Action failed");
      } finally {
        setLoading(false);
      }
    },
    [user, castFromContext],
  );

  const handlers: SnapActionHandlers = {
    submit: (target, inputs) => void handleSubmit(target, inputs),
    open_url: (target) => window.open(target, "_blank"),
    open_snap: (target) => navigateToSnap(target),
    open_mini_app: (target) => openMiniApp(target),
    view_cast: ({ hash }) => navigateToCast(hash),
    view_profile: ({ fid }) => navigateToProfile(fid),
    compose_cast: (params) => openComposer(params),
    view_token: ({ token }) => openTokenView(token),
    send_token: (params) => openSendFlow(params),
    swap_token: (params) => openSwapFlow(params),
  };

  return (
    <SnapCard
      snap={snap}
      handlers={handlers}
      loading={loading}
      appearance="dark"
      actionError={error}
    />
  );
}