Launch Explorer API Studio

⛓ī¸Onchain Data

Learn how to use the Onchain Data Middleware to inject the onchain data of the user interacting with your Frames.js Frames.

The Onchain Data Frames.js middleware enables you to easily enrich your Frames.js Frames with the interactor's onchain data with just a few lines of code. Some data that you can inject into your Frames.js Frames are:

  • Farcaster profile details

  • ERC20/721/1155 token balances

  • ERC20/721/1155 token mints

  • token transfers

  • Farcaster followers/followings

  • Farcaster channels participated in

  • Farcaster casts

Get Started

First, install the Airstack Frames SDK:

npm install @airstack/frames

Get User's Farcaster Profile Details

You can use the onchainDataFramesjsMiddleware to fetch Farcaster profile details by adding USER_DETAILS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the Farcaster profile details data from `ctx.userDetails`
    console.log(ctx.userDetails);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `USER_DETAILS` to the `features` array
        features: [Features.USER_DETAILS],
      }),
    ],
  }
);

Get User's ERC20 Balances

You can use the onchainDataFramesjsMiddleware to fetch user's ERC20 balances by adding ERC20_BALANCES to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's ERC20 balances from `ctx.erc20Balances`
    console.log(ctx.erc20Balances);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `ERC20_BALANCES` to the `features` array
        features: [Features.ERC20_BALANCES],
      }),
    ],
  }
);

Get User's NFT Balances

You can use the onchainDataFramesjsMiddleware to fetch user's NFT balances by adding NFT_BALANCES to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's NFT balances from `ctx.nftBalances`
    console.log(ctx.nftBalances);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `NFT_BALANCES` to the `features` array
        features: [Features.NFT_BALANCES],
      }),
    ],
  }
);

Get User's ERC20 Mints

You can use the onchainDataFramesjsMiddleware to fetch user's ERC20 mints by adding ERC20_MINTS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's ERC20 mints from `ctx.erc20Mints`
    console.log(ctx.erc20Mints);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `ERC20_MINTS` to the `features` array
        features: [Features.ERC20_MINTS],
      }),
    ],
  }
);

Get User's NFT Mints

You can use the onchainDataFramesjsMiddleware to fetch user's NFT mints by adding NFT_MINTS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's NFT mints from `ctx.nftMints`
    console.log(ctx.nftMints);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `NFT_MINTS` to the `features` array
        features: [Features.NFT_MINTS],
      }),
    ],
  }
);

Get User's POAPs

You can use the onchainDataFramesjsMiddleware to fetch user's POAPs by adding POAPS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's POAPs from `ctx.poaps`
    console.log(ctx.poaps);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `POAPS` to the `features` array
        features: [Features.POAPS],
      }),
    ],
  }
);

Get Token Transfers Sent From The User

You can use the onchainDataFramesjsMiddleware to fetch all token transfers sent from the user by adding TOKEN_TRANSFERS_SENT to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's sent token transfers
    // from `ctx.tokenTransfersSent`
    console.log(ctx.tokenTransfersSent);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `TOKEN_TRANSFERS_SENT` to the `features` array
        features: [Features.TOKEN_TRANSFERS_SENT],
      }),
    ],
  }
);

Get Token Transfers Received By The User

You can use the onchainDataFramesjsMiddleware to fetch all token transfers received by the user by adding TOKEN_TRANSFERS_RECEIVED to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's token transfers received
    // from `ctx.tokenTransfersReceived`
    console.log(ctx.tokenTransfersReceived);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `TOKEN_TRANSFERS_RECEIVED` to the `features` array
        features: [Features.TOKEN_TRANSFERS_RECEIVED],
      }),
    ],
  }
);

Get User's Farcaster Followers

You can use the onchainDataFramesjsMiddleware to fetch all user's Farcaster followers by adding FARCASTER_FOLLOWERS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster followers
    // from `ctx.farcasterFollowers`
    console.log(ctx.farcasterFollowers);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_FOLLOWERS` to the `features` array
        features: [Features.FARCASTER_FOLLOWERS],
      }),
    ],
  }
);

Get User's Farcaster Followings

You can use the onchainDataFramesjsMiddleware to fetch all user's Farcaster followings by adding FARCASTER_FOLLOWINGS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster Followings from `ctx.farcasterFollowings`
    console.log(ctx.farcasterFollowings);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_FOLLOWINGS` to the `features` array
        features: [Features.FARCASTER_FOLLOWINGS],
      }),
    ],
  }
);

Get Farcaster Channels Participated By User

You can use the onchainDataFramesjsMiddleware to fetch all the Farcaster channels the user participated in by adding FARCASTER_CHANNELS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's participated channels
    // from `ctx.farcasterChannels`
    console.log(ctx.farcasterChannels);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_CHANNELS` to the `features` array
        features: [Features.FARCASTER_CHANNELS],
      }),
    ],
  }
);

Get Farcaster User's Cast

You can use the onchainDataFramesjsMiddleware to fetch all the Farcaster casts casted by a user by adding FARCASTER_CASTS to the features' list:

import { createFrames, Button } from "frames.js/next";
import {
  onchainDataFramesjsMiddleware as onchainData,
  Features,
} from "@airstack/frames";

const frames = createFrames();

const handleRequest = frames(
  async (ctx) => {
    // Fetch the user's Farcaster casts from `ctx.farcasterCasts`
    console.log(ctx.farcasterCasts);
    return {
      image: (<div></div>),
      buttons: [],
    };
  },
  {
    middleware: [
      // Add Onchain Data Middleware
      onchainData({
        apiKey: process.env.NEXT_PUBLIC_AIRSTACK_API_KEY as string,
        // Add `FARCASTER_CHANNELS` to the `features` array
        features: [Features.FARCASTER_CASTS],
      }),
    ],
  }
);

Developer Support

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

More Resources

PreviousAirstack Frames.js MiddlewareNextAllow List

Last updated