Source: https://github.com/farcasterxyz/frames-v2-demo
This is an example Frame (v2) to demonstrate how you can use Frames alongside Privy's Farcaster login feature to create novel, cross-app experiences for your users.
When a user first opens this demo Frame in their Farcaster client a few things happen. Behind the scenes, Privy automatically logs the user in with their Farcaster account, creates an embedded wallet, and creates a smart account for interacting with the "Yoink!" contract. Users can then Yoink without paying for gas fees.
This app is built with NextJS, and makes uses of libraries like @farcaster/frame-sdk and viem for interacting with the blockchain and the Farcaster protocol.
To see this demo in action, share https://privy-frames-v2-demo.vercel.app/ in any Farcaster client that supports Frames (e.g. Warpcast) and interact with it.
-
Configure a new Privy app with Farcaster login enabled and a Base Sepolia smart wallet configuration. https://docs.privy.io/guide/react/wallets/smart-wallets/configuration
-
Fork this repository, clone it, and open it in your command line:
git clone https://github.com/<your-github-handle>/privy-frames-v2-demo- Install the necessary dependencies using your preferred package manager:
npm i- Initialize your environment variables by copying the contents of
.env.example.localto a new.env.localfile, and fill in the required values. You'll need to set a base URL, and your Privy app ID.
NEXT_PUBLIC_URL=<insert-the-url-for-your-frame>
PRIVY_APP_ID=<insert-your-privy-app-id>That's it! To run the demo locally, execute npm run dev and open http://localhost:3000.
You can test this Frame using Warpcast Embed Tools to preview the frame interaction. Please note that a localhost URL will not work with Warpcast Embed Tools, so you should set up a public tunnel to your local app using a tool like ngrok or Cloudflare.
src/components/Demo.tsxto see how to use Privy to seamlessly login a user in a Farcaster frame