There have been many different ways to build Frames on Farcaster, even though Frames are just over a month old, but none have shocked us like Frog. Frog (Frame Open Graph) is a Frame building kit created by wevm, the same team behind the wagmi and viem Ethereum libraries. One of the best features of Frog is the ability to add community plugins through Hono middleware, and that’s exactly what we’ve done with Pinata Frame Analytics. Right now, you can easily start using analytics in your Frog frames, and today we’ll show you how.
This tutorial will walk you through building a basic “ribbit counter” using Frog and analytics on Next.js, - let’s get started!
Setup
The first thing you’ll need is a free Pinata Account. Once you’re logged in, we’re going to need three things:
- API Key JWT - You can get this by following these instructions, which includes visiting the Keys Page and creating a API Key. It should return an API Key, API Secret, and a JWT which is the one we want to use.
- Dedicated Gateway - Every Pinata Account includes a pre-generated Dedicated Gateway which you can find on the Gateways Tab, just make sure to copy the domain you see for your account (should look something like <span class="code-inline">tomato-abundant-mule-738.mypinata.cloud</span>).
- Farcaster Integration - You will of course need your Farcaster account which you can connect to your Pinata account with these instructions.
After you have your Pinata account requirements, we can start our project. Frog supports several different frameworks such as Vercel, Bun, and more. For this tutorial, we’ll use Next.js utilizing their scaffolding command:
Once it’s complete, and you <span class="code-inline">cd</span> into the repo, run <span class="code-inline">npm install</span>, then make a new file called <span class="code-inline">.env.local</span> and add the following variables:
For <span class="code-inline">PINATA_JWT</span>, you will want to paste the JWT you made earlier, and in the <span class="code-inline">GATEWAY_URL</span> you will want to paste the gateway domain just as it appears on your dashboard (e.g. <span class="code-inline">tomato-abundant-mule-738.mypinata.cloud</span>). With those saved, we also need to install the Pinata FDK with this command:
Now we can run <span class="code-inline">npm run dev</span> and start building!
Building the Frame
If you used the Frog Next.js scaffolding, it will already have some boilerplate in the main file we’re going to edit <span class="code-inline">app/api/[[...routes]]/route.ts</span>. We’ll replace most of that boilerplate code soon, but for now, we’ll import and initial the <span class="code-inline">pinata-fdk</span> at the top.
/** @jsxImportSource frog/jsx */
import { Button, Frog } from "frog";
import { handle } from "frog/vercel";
import { PinataFDK } from "pinata-fdk"; // import fdk
// initialize
const pinataFdk = new PinataFDK({
pinata_jwt: process.env.PINATA_JWT as string,
pinata_gateway: process.env.GATEWAY_URL as string,
});
app/api/[[...routes]]/route.ts
This will use the variables inside <span class="code-inline">.env.local</span> to create an instance of our <span class="code-inline">pinataFdk</span>. Once you deploy this to Vercel, make sure you paste the contents of your <span class="code-inline">.env.local</span> file into the deployment environment variables so that it will work in production! Next, we’ll alter the boilerplate just a bit, as we’ll be adding some state that will keep track of our ribbits.
Deploying and Testing
To really see our analytics in action, you will want to deploy the project to Vercel, keeping in mind to include your <span class="code-inline">.env.local</span> file contents in the Environment Variables. Once you get your url, something like <span class="code-inline">ribbit-counter.vercel.app</span>, head over to the Warpcast Frame Validator which you can visit here. Paste in your frame domain, and make sure to include <span class="code-inline">/api</span> at the end. Now you can test in production and see your analytics counts go up!
That’s a wrap! If you want to view the example repo for this project you can find it here. Of course, this is only scratching the surface of what you could do with Frog and analytics, and we’ll continue to explore those options as time goes on. Follow our /pinata channel for more updates and other Farcaster tools and tutorials.
Happy pinning!
Steve Simkins
Head of Developer Relations
Published on
March 6, 2024
Ready to build with IPFS?
Explore our plans