interframe

Live on Warpcast: https://warpcast.com/3070/0xb1cfd7bc

1. Overview
2. Integration
3. Frame Flow
4. Features
5. Technologies

Overview

interframe is a Farcaster Frame implementation of a blockchain reader for NFT collections.

Try it in action: Try me

Integration

a.k.a. interframation

This is a special note to any frame devs out there

If you'd like to refer to this frame in anyway, the home page can be retrived by fetching this url: https://interframe-eight.vercel.app/api/home

If you'd like to navigate user to a summary page for a particular token that you'd provide to interframe, fetch the /api/summary endpoint with the collection address as a tokenAddy query parameter.

Example

// Handing off frame to interframe/summary example:
// request URL: https://interframe-eight.vercel.app/api/summary?tokenAddy=0xb0349245e142635f0ea094e413502f6223d37cd7
const res = await fetch('https://interframe-eight.vercel.app/api/summary?tokenAddy=0xb0349245e142635f0ea094e413502f6223d37cd7)'
return new Response(res.body, {headers: {'Content-Type'}: 'text/html'})

Endpoints

Name	Endpoint	Notes
Homepage	https://interframe-eight.vercel.app/api/home	No query parameters required
Summary	https://interframe-eight.vercel.app/api/summary?tokenAddy=	tokenAddy: a string representing a token address
Latest mints	https://interframe-eight.vercel.app/api/latest-mints?tokenAddy=	tokenAddy: a string representing a token address
Top holders	https://interframe-eight.vercel.app/api/holders?tokenAddy=	tokenAddy: a string representing a token address

These endpoints can all be fetched with a GET request as in the example shown above.

Frame Flow

After the user selects a particular token, interframe navigates the user to view useful information about that token.

This includes a summary, top holders, latest mints, and popular casts related to the selected token.

It currently supports ERC-721 and ERC-1155 tokens on Base, Ethereum, and Zora.

Features

My Tokens (/api/select-blockchain /api/my-tokens)

Users can browse from a selection of tokens that they own.

Search (/api/search)

Users can input and submit a contract address or token name to view blockchain data about that token.

Summary (/api/summary)

The summary page gives a brief summary of a specific token.

Top Holders (/api/holders)

The top holders page allows users to nagivate through the top 10 holders of a collection.

Latest Mints (/api/latest-mints)

The latest mints page allows users to nagivate through the latest mints of a collection.

Popular Casts

Note: This feature is yet to be implemented

Technologies

interframe uses several APIs to retreive its data.

• zdk: ZDK is a Typescript abstraction of Zora's GraphQL API
  • usage: the zdk is being used in interframe to retrieve basic information about a collection. This information is served in /api/summary
  • website: ZDK
• The Graph: The Graph is a collection of decentralized GraphQL APIs
  • usage: The Graph is being used in interframe to retrieve information about top holders for collections on Ethereum and Base. This information is served in /api/holders
  • website: The Graph
• @vercel/og: This Typescript library exposes a convenience method to generate a valid OpenGraph image using JSX elements. It uses satori under the hoood.
  • usage: ImageResponse is used for generating all OpenGraph images for interframe. See: /api/images/*
  • website: Vercel OG
• Farcaster Frame: Farcaster Frame(s) are an extension of the OpenGraph protocol to generate interactive content on decentralized social platforms.
  • usage: The API routes return a valid response that adheres to the Farcaster Frames spec
  • website: Farcaster Frame spec
• Airstack: A GraphQL API for decentralized social graphs and Ethereum+ blockchains
  • usage: Airstack is used to deduce Farcaster-related information about a token. E.g. using TokenBalances query to calculate what percentage of the holder base are verified Farcaster accounts. It is also being used for the query string search functionality on /api/search/results route.
  • website: Airstack