🥪Airstack Frog Middleware

Build your Farcaster Frames with Airstack frog middleware. Seamlessly integrate profiles, follows, trending mints, tokens, and everything onchain.

The Airstack Frog Middleware is available as a community-built middleware and can be easily incorporated into any Frog app by installing the Airstack Frames SDK. (The Airstack Frog Middleware can also be accessed via the Airstack Frog Recipes)

Onchain Data Middleware

You can use the onchainData middleware to seamlessly incorporate the interactor's onchain data directly into your Farcaster Frames. Simply specify the onchain data to retrieve in the features field and integrate the middleware into the desired route for data access:

TypeScript

import { onchainData } from "@airstack/frog";

const onchainDataMiddleware = onchainData({
  features: {
    userDetails: {},
  },
  env: "dev",
});

app.frame(
  "/",
  // Add Onchain Data Middleware to the routes that need to access
  // User's onchain data
  onchainDataMiddleware,
  async function (c) {
    const { status } = c;
    if (status === "response") console.log(c.var);
    c.res({});
  }
);

JavaScript

const { onchainData } = require("@airstack/frog");

const onchainDataMiddleware = onchainData({
  apiKey: process.env.AIRSTACK_API_KEY,
  features: {
    userDetails: {},
  },
  env: "dev",
});

app.frame("/", onchainDataMiddleware, async function (c) {
  const { status } = c;
  if (status === "response") console.log(c.var);
  c.res({});
});

Response

{
  "userDetails": {
    "profileName": "betashop.eth",
    "fnames": ["betashop", "betashop.eth", "jasongoldberg.eth"],
    "profileImage": {
      "extraSmall": "https://assets.airstack.xyz/image/social/TQjjhuaajVkwqgzZVvgFQYU1qxNfVHQgSmZjTcXRrzQ=/extra_small.jpg",
      "small": "https://assets.airstack.xyz/image/social/TQjjhuaajVkwqgzZVvgFQYU1qxNfVHQgSmZjTcXRrzQ=/small.jpg",
      "medium": "https://assets.airstack.xyz/image/social/TQjjhuaajVkwqgzZVvgFQYU1qxNfVHQgSmZjTcXRrzQ=/medium.jpg",
      "large": "https://assets.airstack.xyz/image/social/TQjjhuaajVkwqgzZVvgFQYU1qxNfVHQgSmZjTcXRrzQ=/large.jpg",
      "original": "https://assets.airstack.xyz/image/social/TQjjhuaajVkwqgzZVvgFQYU1qxNfVHQgSmZjTcXRrzQ=/original_image.jpg"
    },
    "userAssociatedAddresses": [
      "0x66bd69c7064d35d146ca78e6b186e57679fba249",
      "0xeaf55242a90bb3289db8184772b0b98562053559"
    ],
    "followerCount": 65820,
    "followingCount": 2303
  }
}

Allow List Middleware

Enhance your Farcaster Frames with user's onchain data using the allowList middleware from Airstack Frog Recipes. Effortlessly set up by specifying your criteria in the allowListCriteria field and incorporating the middleware into the route where you wish to access the data:

TypeScript

import { allowList } from "@airstack/frog";

const allowListMiddleware = allowList({
  allowListCriteria: {
    eventIds: [166577],
    tokens: [
      {
        tokenAddress: "0xe03ef4b9db1a47464de84fb476f9baf493b3e886",
        chain: TokenBlockchain.Zora,
      },
    ],
  },
});

app.frame("/", allowListMiddleware, async function (c) {
  const { status } = c;
  if (status === "response") console.log(c.var);
  c.res({});
});

JavaScript

const { allowList } = require("@airstack/frog");

const allowListMiddleware = allowList({
  allowListCriteria: {
    eventIds: [166577],
    tokens: [
      {
        tokenAddress: "0xe03ef4b9db1a47464de84fb476f9baf493b3e886",
        chain: TokenBlockchain.Zora,
      },
    ],
  },
});

app.frame("/", allowListMiddleware, async function (c) {
  const { status } = c;
  if (status === "response") console.log(c.var);
  c.res({});
});

Response

{
  "isAllowed": true
}

Developer Support

If you have any questions or need help regarding building Farcaster Frames with Airstack Frog Middleware & Recipes, please join our Airstack's Telegram group.

More Resources

• Onchain Data Middleware Reference

• Allow List Middleware Reference