Let a thousand Moxie frames bloom.
This project is a Farcaster Frame built using frames.js the Airstack validator and node package.
- Frames.js with TailwindCSS for styling
- Airstack API integration for Far Score and Moxie earnings data
- Cast Action Install
- Airstack validator integration for Moxie everyday rewards
- Ready for deployment on Vercel
- Clone this repository
- Install dependencies:
npm install- Create a
.envfile in the root directory with the following content:
AIRSTACK_API_KEY=your_airstack_api_key_hereReplace your_airstack_api_key_here with your actual Airstack API key.
To run the project locally:
npm run devThis will start both the Next.js development server and the frames.js debugger.
- Push your code to a GitHub repository.
- Connect your repository to Vercel.
- In the Vercel deployment settings, add the following environment variables:
AIRSTACK_API_KEY: Your Airstack API key
- Deploy the project.
Important: Make sure to use the short Vercel URL in your APP_URL environment variable. Redeploy if needed.
This project includes the Airstack validator, which you need to earn Moxie rewards when users interact with your Farcaster Frame.
The project includes two main API routes:
/api/farscore: Fetches user social capital data from Airstack./api/moxie-earnings: Retrieves Moxie earnings data for a user.
These routes are used internally by the Frame to display user information and earnings.
The project includes a Cast Action install button. Make sure to customize the link with your own frame url. The Cast Action is defined in the /api/cast-action/route.tsx file.
Check your frame at https://warpcast.com/~/developers/frames . Be sure to use the short url that vercel gives you (Warpcast doesn't like long urls), and add /frames to the end (as in the screenshot above).
Contributions are welcome! Please feel free to submit a Pull Request.