Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eucalyptus-viminalis/interframe

interframe
https://github.com/eucalyptus-viminalis/interframe

Last synced: 2 months ago
JSON representation

interframe

Host: GitHub
URL: https://github.com/eucalyptus-viminalis/interframe
Owner: eucalyptus-viminalis
Created: 2024-02-02T19:39:00.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-07-22T06:12:10.000Z (6 months ago)
Last Synced: 2024-08-11T13:31:05.567Z (5 months ago)
Language: TypeScript
Homepage: https://warpcast.com/3070/0xb1cfd7bc
Size: 3.08 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-frames - Interframe

README

# interframe

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

1. [Overview](https://github.com/eucalyptus-viminalis/interframe#overview)
2. [Integration](https://github.com/eucalyptus-viminalis/interframe#integration)
3. [Frame Flow](https://github.com/eucalyptus-viminalis/interframe#frame-flow)
4. [Features](https://github.com/eucalyptus-viminalis/interframe#features)
5. [Technologies](https://github.com/eucalyptus-viminalis/interframe#technnologies)

## Overview

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

Try it in action: [Try me](https://warpcast.com/3070/0xb1cfd7bc)

## 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**
```ts
// 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

> 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](https://docs.zora.co/docs/zora-api/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](https://thegraph.com/)
- `@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](https://vercel.com/docs/functions/og-image-generation)
- `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](https://docs.farcaster.xyz/reference/frames/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](https://www.airstack.xyz/)