DeFi

·

March 21, 2024

Create Frames for Warpcast

Anthony Allen

How to create Frames for Warpcast and how they work. An overview including NFT Frames, transaction Frames and more. With examples created by Matcha, and the broader 0x community on Farcaster.

Frames are native Web3 applications embedded within the Warpcast social media feed. Frames first launched in February this year, increasing Farcaster Daily Active User (DAU) numbers by 20x! 

Sign up for Warpcast today!

Not only did many early users return to Warpcast following Frames, but the innovation of having crypto native features right in your feed brought tens of thousands of new users, too. 

Daily active users (DAU) on Farcaster since 2021
Farcaster user growth since 2021

So what makes Frames so interesting, how have Frames improved since launch, and how do you create a Warpcast Frame? This article covers all you need to know about using and creating Frames for Farcaster, with examples created by Matcha, and the broader 0x community.

What is a Warpcast Frame? 

A Frame is a micro application based on html that runs within a Farcaster post. When you interact with a Frame, your Farcaster ID and linked wallet address are used as metadata to customize your experience. 

By retrieving data about your Farcaster interactions and onchain transactions you have made, Warpcaster Frames can check what criteria is applicable to you specifically, and craft a journey specific to you.  

Animation showing a frame to claim Degen token

Early Frames had limited functionality. The first use cases included:

  • Image galleries that fetch and display data, such as an NFT collection, with a link to the mint page.
  • Presentations of multiple slides which the viewer can navigate through.
  • Polls that capture user input and generate an overview of responses.

Frames developed fast to become more sophisticated, soon adding more complex features, like:

  • Mint an NFT directly in a Frame using Warps.
  • Customize NFTs using Frames.
  • Interactive generative journeys using a Frame and linked NFT (see Base Quest)

While Frames may still feel fairly simple as an end user, where you are shown a still image and limited ways to interact with it, there are now plenty of ways for developers to customize them based on your Farcaster data and onchain history. That is what makes it possible to create a Frame that rewards users who swapped using Matcha Auto, for example, and prevent repeated claims from a single account.

Creating Frames for different use cases

Matcha and 0x have both been busy exploring the many applications of Frames since they launched. Here we’ll cover some of the use cases for Frames, with example of Frames we have built as well as other interesting projects from the Warpcast community.

Wallet activity Frames

As a DEX aggregator, using Matcha depends on smart contract interactions, which are logged onchain. That allows us to build Frames which reward Farcaster users who have traded on Matcha with a gift of tokens that they can claim with a single click.

Claim Optimism using a frame if you've transacted with Matcha Auto
Claim OP token if you trade over $50 using Matcha Auto.

When you click the Frame, it checks your connected wallet address (i.e. EOA, or Externally Owned Account), to see if it has interacted with the Matcha swap smart contract, and automatically sends a gift of 1000 Degen token to you if you qualify. If not, it will tell you what you need to do to be eligible.

We initially launched this Frame for anyone who swapped more than $5 using Matcha Auto on Base, and ended up giving away over 1.5 Million Degen (~$10k) to our followers! We have since created variations for other chains, including claims for WETH or WBTC swaps, and most recently Matcha gave away OP tokens for users who swapped on Optimism.

Token price Frames

0x Frames have been created by developers from within the Farcaster community in response to a bounty submission (see Bountycaster section below) posted by the 0x Warpcast account.

A frame that uses 0x protocol to fetch token prices
Fetch the price of a token using 0x.

One of the bounty winners submitted this Frame that checks the price of a token, and has since worked on making in-feed transactions available too. 

Bountycaster Frames

Bountycaster is a tool for making and fulfilling one-off tasks, where users can tag the @bountybot in a Cast and the bot will process it to extract key information such as the fulfillment criteria  reward amounts then add it to the list of bounties. 

A bounty frame showing a bounty for frames built with 0x APIs
Bounties can be found at bountycaster.xyz

Bounties are now automatically rendered as a Frame, which lets users manage the bounty, contribute more funds to the reward pool, or review transactions for completed bounties.

NFT Mint Frames

NFT Frames emerged quickly after the first experiments and have continued to evolve. NFTs in Frames are most commonly encountered as a way to quickly share and mint NFTs. These provide you with a preview of the NFT graphic and a link to the marketplace where you can buy it. More recent functionality allows you to mint the NFT directly in your feed using Warps

A mint frame from 0x
A frame commemorating gasless swaps on Base

This Frame from 0x allows you to mint a commemorative NFT for the launch of gasless transactions on Base via Tx Relay API, using Zora mints. NFT Frames are by far the most popular type of Frame and remove most of the friction for creators who want to share their work directly with their audience. 

Customizable NFTs

More exciting than simply minting an NFT, is the ability to create custom NFT profile pictures within a Frame. Though still limited to four buttons, this is a fun way to explore generative artwork and get a mintable artifact.

Each slide lets you add a new element, such as hairstyle, clothing or accessories, and mint it for a certain amount once complete. Examples include mykbois and custompunks.

Frames and graphic NFTs - including animated gifs - make an excellent match, in-Frame video is not currently supported. This seems like an obvious next step as Frames’ development continues, though the engineering challenge is naturally more complex, and Farcaster storage limits may be a blocker. 

Social engagement Frames

One of the benefits of Frames is they can be gated to only allow interaction from certain users. This enables engagement gating, where users must first like or recast a post, or follow a caster to be able to proceed. 

While the overuse of these requirements is arguably a bit of a dampener for the overall user experience, they provide an outsized advantage to brands and influencers who wish to grow their following through incentives. 

Polls and registrations

One of the more common types of Frame is a poll Frame. This is a simple question with multiple choice answers, where users select a button that corresponds to their preferred choice, and receive a response showing the tally of previous submissions. 

Registration Frames make use of the text input field to enable form-like response collection from users, which can also be responsive to the input and show different Frames depending on the answer.

Crypto transactions using Frames 

Onchain crypto transactions can now be made directly from a Warpcast Frame, thanks to continued engineering efforts of Farcaster contributors. That means you can swap tokens directly from your feed simply by interacting with a Frame. The experience is a little unconventional, but it works!

Frame swap, a frame for ERC token trades
A frame that uses 0x to swap tokens.

Transaction Frames have been used for token swaps, but more recently they have found a strong userbase with prediction markets, where interacting with a Frame can send a transaction to bet on a yes or no outcome for the stated question, and rewards are distributed automatically to the winners. 

How to create a Warpcast Frame 

Frames are built using HTML with special meta tags, somewhat similar to how OpenGraph operates but with added interactivity. Frame functionality is specific to the Farcaster ecosystem.

There are two ways to create a Frame: code it from scratch, or use a Frame builder where you simply customize the components. We’ll focus on the latter approach here and provide links to further reading for more advanced users.

Using a no code Frame builder

Creating a Frame using a Frame builder is an easy way to get started, even if you have little technical knowledge. There are several websites including Neynar, Thirdweb and Pinata that offer no-code or low-code Frame building experience and handle the backend work for you, but it is still a bit early to expect a refined full-featured app. 

Farcaster is developing at breakneck speed, so expect a lot to change. In somewhat recent updates, sharing a link to a mint on Zora will actually automatically create a Frame, as will sharing a Paragraph user link, and it’s likely that other functions will soon follow this route.

Neynar Frame Studio

Neynar is a toolkit made specifically for building on Farcaster, with solutions for Farcaste logins, Farcaster bots and more.

Since the launch of Frames, Neynar launched Frame Studio to streamline the builder experience and substitute the dependence on Vercel, by enabling no-code Frames for a subscription of $9 monthly (fiat or crypto) and offering additional support and compute at higher tiers. 

Neynar is a good option for non devs wanting to create Frames with multiple steps. With a bit of planning you can create pretty engaging Frame journeys and even let your audience mint directly in their feed.

You can start from scratch or use a template to create image galleries, memes, linktree style business cards, eshop checkouts, or NFT stories which lead to a mint.

A preview of Neynar Frame Studio builder
Neynar Frame Studio

The Frame Studio builder will let you create a Frame that suits most needs, with buttons, text input, registrations and more, but advanced Frames will need coding skills. Mint buttons currently only support mint links to Zora, Manifold, or Hypersub, on Ethereum, Base or Zora networks.

Glass

Glass is a paid-for Frame building app in private beta. It covers a range of Frame types, each with a choice of interactions and gating mechanics that can be selected to suit various use cases.

At the moment, Glass Frames only show a preview Frame and a response Frame which follows the interaction. 

A preview of Glass frame builder on mobile
Glass frame creator on mobile

Subscriptions are $6.99 payable in fiat or crypto (choice of payment includes several tokens on Base, Optimism or Ethereum mainnet). Glass also works on mobile which may be handy for on-the-go creators. 

QuestCaster

This Frame builder is a pretty stripped-back alpha version that is built on Base L3 Syndicate Frame Chain. It is meant to let you create gated NFT mints where a user has to like, follow or be a token holder in order to mint the NFT you upload. In testing, this tool failed to generate a link and I wasn’t able to mint. It may work better on your setup, or development may be paused. 

Advanced no code Frames

The potential of Framesis growing exponentially so to really take advantage of all the possibilities you will need a bit of technical knowledge. 

Readers who want to build a more advanced Frame and have a basic knowledge of apps development but no real coding expertise may benefit from this no code walkthrough demonstrated by Andrew Chu on Bubble

Alternatively, you can turn to AI with this Frame building GPT you can use in ChatGPT. This may can help you work your way to develop your dream Frame through trial and error. 

Testing your Frames

Once you have created a Frame, make sure you check that it works! Warpcast has a built-in Frame validator that will let you test your Frame before sharing it in public. Just visit warpcast.com/~/developers/frames and enter the URL of your Frame to try it out. 

Coding Frames as a developer

For professional developers, there are multiple avenues to take for building a Frame from scratch. Rather than attempting to cover all the information posted elsewhere, here are a few resources that can help get you started: 

Frames and the future of desocial

Farcaster is just one of many desocial (decentralized social media) apps in the Ethereum space. With so much competition, Frames are the innovation that was needed to unite users on one channel and spark the network effect that social apps depend on. 

Join Matcha on Warpcast!

We are very excited about the current state of Frames and the progress that is being made every week. Bringing onchain transactions to your social feed is a catalyst for adoption that will radically change the Web3 landscape for crypto users, both old and new.

Matcha and 0x have already deployed multiple Frames and we’re excited to be among this early cohort of builders, exploring a world where your onchain and online activity combine into one. Follow Matcha and 0x on Warpcast to see what we build next!

Contents
Subscribe to our newsletter
By submitting you're confirming that you agree with our Terms and Conditions.
Yay! You’re signed up.
Oops! Something went wrong, but it's not your fault.
DeFi

·

March 21, 2024

Create Frames for Warpcast

How to create Farcaster Frames

How to create Frames for Warpcast and how they work. An overview including NFT Frames, transaction Frames and more. With examples created by Matcha, and the broader 0x community on Farcaster.

Frames are native Web3 applications embedded within the Warpcast social media feed. Frames first launched in February this year, increasing Farcaster Daily Active User (DAU) numbers by 20x! 

Sign up for Warpcast today!

Not only did many early users return to Warpcast following Frames, but the innovation of having crypto native features right in your feed brought tens of thousands of new users, too. 

Daily active users (DAU) on Farcaster since 2021
Farcaster user growth since 2021

So what makes Frames so interesting, how have Frames improved since launch, and how do you create a Warpcast Frame? This article covers all you need to know about using and creating Frames for Farcaster, with examples created by Matcha, and the broader 0x community.

What is a Warpcast Frame? 

A Frame is a micro application based on html that runs within a Farcaster post. When you interact with a Frame, your Farcaster ID and linked wallet address are used as metadata to customize your experience. 

By retrieving data about your Farcaster interactions and onchain transactions you have made, Warpcaster Frames can check what criteria is applicable to you specifically, and craft a journey specific to you.  

Animation showing a frame to claim Degen token

Early Frames had limited functionality. The first use cases included:

  • Image galleries that fetch and display data, such as an NFT collection, with a link to the mint page.
  • Presentations of multiple slides which the viewer can navigate through.
  • Polls that capture user input and generate an overview of responses.

Frames developed fast to become more sophisticated, soon adding more complex features, like:

  • Mint an NFT directly in a Frame using Warps.
  • Customize NFTs using Frames.
  • Interactive generative journeys using a Frame and linked NFT (see Base Quest)

While Frames may still feel fairly simple as an end user, where you are shown a still image and limited ways to interact with it, there are now plenty of ways for developers to customize them based on your Farcaster data and onchain history. That is what makes it possible to create a Frame that rewards users who swapped using Matcha Auto, for example, and prevent repeated claims from a single account.

Creating Frames for different use cases

Matcha and 0x have both been busy exploring the many applications of Frames since they launched. Here we’ll cover some of the use cases for Frames, with example of Frames we have built as well as other interesting projects from the Warpcast community.

Wallet activity Frames

As a DEX aggregator, using Matcha depends on smart contract interactions, which are logged onchain. That allows us to build Frames which reward Farcaster users who have traded on Matcha with a gift of tokens that they can claim with a single click.

Claim Optimism using a frame if you've transacted with Matcha Auto
Claim OP token if you trade over $50 using Matcha Auto.

When you click the Frame, it checks your connected wallet address (i.e. EOA, or Externally Owned Account), to see if it has interacted with the Matcha swap smart contract, and automatically sends a gift of 1000 Degen token to you if you qualify. If not, it will tell you what you need to do to be eligible.

We initially launched this Frame for anyone who swapped more than $5 using Matcha Auto on Base, and ended up giving away over 1.5 Million Degen (~$10k) to our followers! We have since created variations for other chains, including claims for WETH or WBTC swaps, and most recently Matcha gave away OP tokens for users who swapped on Optimism.

Token price Frames

0x Frames have been created by developers from within the Farcaster community in response to a bounty submission (see Bountycaster section below) posted by the 0x Warpcast account.

A frame that uses 0x protocol to fetch token prices
Fetch the price of a token using 0x.

One of the bounty winners submitted this Frame that checks the price of a token, and has since worked on making in-feed transactions available too. 

Bountycaster Frames

Bountycaster is a tool for making and fulfilling one-off tasks, where users can tag the @bountybot in a Cast and the bot will process it to extract key information such as the fulfillment criteria  reward amounts then add it to the list of bounties. 

A bounty frame showing a bounty for frames built with 0x APIs
Bounties can be found at bountycaster.xyz

Bounties are now automatically rendered as a Frame, which lets users manage the bounty, contribute more funds to the reward pool, or review transactions for completed bounties.

NFT Mint Frames

NFT Frames emerged quickly after the first experiments and have continued to evolve. NFTs in Frames are most commonly encountered as a way to quickly share and mint NFTs. These provide you with a preview of the NFT graphic and a link to the marketplace where you can buy it. More recent functionality allows you to mint the NFT directly in your feed using Warps

A mint frame from 0x
A frame commemorating gasless swaps on Base

This Frame from 0x allows you to mint a commemorative NFT for the launch of gasless transactions on Base via Tx Relay API, using Zora mints. NFT Frames are by far the most popular type of Frame and remove most of the friction for creators who want to share their work directly with their audience. 

Customizable NFTs

More exciting than simply minting an NFT, is the ability to create custom NFT profile pictures within a Frame. Though still limited to four buttons, this is a fun way to explore generative artwork and get a mintable artifact.

Each slide lets you add a new element, such as hairstyle, clothing or accessories, and mint it for a certain amount once complete. Examples include mykbois and custompunks.

Frames and graphic NFTs - including animated gifs - make an excellent match, in-Frame video is not currently supported. This seems like an obvious next step as Frames’ development continues, though the engineering challenge is naturally more complex, and Farcaster storage limits may be a blocker. 

Social engagement Frames

One of the benefits of Frames is they can be gated to only allow interaction from certain users. This enables engagement gating, where users must first like or recast a post, or follow a caster to be able to proceed. 

While the overuse of these requirements is arguably a bit of a dampener for the overall user experience, they provide an outsized advantage to brands and influencers who wish to grow their following through incentives. 

Polls and registrations

One of the more common types of Frame is a poll Frame. This is a simple question with multiple choice answers, where users select a button that corresponds to their preferred choice, and receive a response showing the tally of previous submissions. 

Registration Frames make use of the text input field to enable form-like response collection from users, which can also be responsive to the input and show different Frames depending on the answer.

Crypto transactions using Frames 

Onchain crypto transactions can now be made directly from a Warpcast Frame, thanks to continued engineering efforts of Farcaster contributors. That means you can swap tokens directly from your feed simply by interacting with a Frame. The experience is a little unconventional, but it works!

Frame swap, a frame for ERC token trades
A frame that uses 0x to swap tokens.

Transaction Frames have been used for token swaps, but more recently they have found a strong userbase with prediction markets, where interacting with a Frame can send a transaction to bet on a yes or no outcome for the stated question, and rewards are distributed automatically to the winners. 

How to create a Warpcast Frame 

Frames are built using HTML with special meta tags, somewhat similar to how OpenGraph operates but with added interactivity. Frame functionality is specific to the Farcaster ecosystem.

There are two ways to create a Frame: code it from scratch, or use a Frame builder where you simply customize the components. We’ll focus on the latter approach here and provide links to further reading for more advanced users.

Using a no code Frame builder

Creating a Frame using a Frame builder is an easy way to get started, even if you have little technical knowledge. There are several websites including Neynar, Thirdweb and Pinata that offer no-code or low-code Frame building experience and handle the backend work for you, but it is still a bit early to expect a refined full-featured app. 

Farcaster is developing at breakneck speed, so expect a lot to change. In somewhat recent updates, sharing a link to a mint on Zora will actually automatically create a Frame, as will sharing a Paragraph user link, and it’s likely that other functions will soon follow this route.

Neynar Frame Studio

Neynar is a toolkit made specifically for building on Farcaster, with solutions for Farcaste logins, Farcaster bots and more.

Since the launch of Frames, Neynar launched Frame Studio to streamline the builder experience and substitute the dependence on Vercel, by enabling no-code Frames for a subscription of $9 monthly (fiat or crypto) and offering additional support and compute at higher tiers. 

Neynar is a good option for non devs wanting to create Frames with multiple steps. With a bit of planning you can create pretty engaging Frame journeys and even let your audience mint directly in their feed.

You can start from scratch or use a template to create image galleries, memes, linktree style business cards, eshop checkouts, or NFT stories which lead to a mint.

A preview of Neynar Frame Studio builder
Neynar Frame Studio

The Frame Studio builder will let you create a Frame that suits most needs, with buttons, text input, registrations and more, but advanced Frames will need coding skills. Mint buttons currently only support mint links to Zora, Manifold, or Hypersub, on Ethereum, Base or Zora networks.

Glass

Glass is a paid-for Frame building app in private beta. It covers a range of Frame types, each with a choice of interactions and gating mechanics that can be selected to suit various use cases.

At the moment, Glass Frames only show a preview Frame and a response Frame which follows the interaction. 

A preview of Glass frame builder on mobile
Glass frame creator on mobile

Subscriptions are $6.99 payable in fiat or crypto (choice of payment includes several tokens on Base, Optimism or Ethereum mainnet). Glass also works on mobile which may be handy for on-the-go creators. 

QuestCaster

This Frame builder is a pretty stripped-back alpha version that is built on Base L3 Syndicate Frame Chain. It is meant to let you create gated NFT mints where a user has to like, follow or be a token holder in order to mint the NFT you upload. In testing, this tool failed to generate a link and I wasn’t able to mint. It may work better on your setup, or development may be paused. 

Advanced no code Frames

The potential of Framesis growing exponentially so to really take advantage of all the possibilities you will need a bit of technical knowledge. 

Readers who want to build a more advanced Frame and have a basic knowledge of apps development but no real coding expertise may benefit from this no code walkthrough demonstrated by Andrew Chu on Bubble

Alternatively, you can turn to AI with this Frame building GPT you can use in ChatGPT. This may can help you work your way to develop your dream Frame through trial and error. 

Testing your Frames

Once you have created a Frame, make sure you check that it works! Warpcast has a built-in Frame validator that will let you test your Frame before sharing it in public. Just visit warpcast.com/~/developers/frames and enter the URL of your Frame to try it out. 

Coding Frames as a developer

For professional developers, there are multiple avenues to take for building a Frame from scratch. Rather than attempting to cover all the information posted elsewhere, here are a few resources that can help get you started: 

Frames and the future of desocial

Farcaster is just one of many desocial (decentralized social media) apps in the Ethereum space. With so much competition, Frames are the innovation that was needed to unite users on one channel and spark the network effect that social apps depend on. 

Join Matcha on Warpcast!

We are very excited about the current state of Frames and the progress that is being made every week. Bringing onchain transactions to your social feed is a catalyst for adoption that will radically change the Web3 landscape for crypto users, both old and new.

Matcha and 0x have already deployed multiple Frames and we’re excited to be among this early cohort of builders, exploring a world where your onchain and online activity combine into one. Follow Matcha and 0x on Warpcast to see what we build next!

Subscribe for an instantly better inbox

By submitting you're confirming that you agree with our Terms and Conditions.
Yay! You’re signed up.
Oops! Something went wrong while submitting the form.