Docs
Tapp Card
Tapp Card
A card for Tapp.
This component support two types of card, TS Viewer and Farcaster.
For TS Viewer
For Farcaster
Installation
npx @token-kit/cli@latest add tapp-cardUsage
import TappCard from "@/registry/default/ui/tapp-card";<TappCard
chainId={11155111}
contract="0x3490FFc64A4E65aBb749317f7860E722Ba65a2b5"
tokenId="473843023"
/>Environment Variables
There are two environment used in this component, espacially for farcaster:
NEXT_PUBLIC_NEYNAR_CLIENT_ID, for signing Warpcast, you can access it in Neynar website.NEXT_PUBLIC_FRAME_RENDER_URL, for rendering frame, you can set your own proxy.
Custome Frame Proxy
For farcaster frame, we use @frames.js/render, it need proxies for routing frame requests.
const frameState = useFrame({
homeframeUrl: `https://farcaster-tokenscript-frame.vercel.app/api/view/${chainId}/${contract}?tokenId=${tokenId}`,
frameActionProxy: "http://localhost:3000/frames", // <-- proxy
frameGetProxy: "http://localhost:3000/frames", // <-- proxy
connectedAddress: undefined,
frameContext: fallbackFrameContext,
signerState,
});We provide a default proxy (https://frame-render.vercel.app/frames) that cannot be used as a product environment. You can create your own proxy. You can add app/frames/route.tsx.
import {
GET as originalGET,
POST as originalPOST,
} from "@frames.js/render/next";
import { NextRequest, NextResponse } from "next/server";
export function OPTIONS() {
return NextResponse.json(
{},
{
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
},
},
);
}
const handleRequest =
(handler: (req: NextRequest) => Promise<Response>) =>
async (req: NextRequest) => {
const response = await handler(req);
response.headers.set("Access-Control-Allow-Origin", "*");
return response;
};
export const GET = handleRequest(originalGET);
export const POST = handleRequest(originalPOST);Attachments
For more details about Frame Render and Neynar Sign button, please access the following link: