How to Build Farcaster Frames and Why Do You Need It in Your dApp?

The seemingly simple Frames feature within Farcaster has been met with a lot of love and optimism from the crypto industry. ElectricCapital’s founder stated that when a new social app breaks through on a new platform, it feeds into a tenfold growth in the space. Now, when the crypto infrastructure is nearly complete, A16Z’s investors are saying that the power of Farcaster and Frames is akin to the Ajax/open web impact of Web2 in 2005.

Organizations are also very enthusiastic about this new idea. ETHGlobal already held the Farcaster Frames hackathon. Frames kicked off DeSoc’s new wave of social dApp innovation. Based on the Frame, developers can embed their own application dApp into the Farcaster client to enable users to realize a variety of interactive experiences based on the post. Developers in the Farcaster community are proud to call themselves Framers. Hundreds of Framers have already developed a lot of wonderful projects with Frames.

In this article, we will discuss building decentralized social apps and how you can build Farcaster Frames on your own!

Table of contents:

1. What is Farcaster?
2. Understanding Farcaster Frames
3. Components and Tools for Building Farcaster Frames
4. Step-by-Step Guide: How to Build Farcaster Frames
5. Why Farcaster Frames are Essential for Your dApp
6. Use Cases and Examples
7. Summary

What is Farcaster?

Farcaster app is a decentralized social network based on Ethereum. It belongs to the same class of protocol as Nostr.

The Farcaster protocol is divided into 3 layers. The first layer is the chain layer (Ethereum). Users must register their accounts in the chain layer, which is only responsible for account registration and query functions.

The second layer is the data layer (Delta Graph). It consists of many nodes (Hubs). Users’ information is stored in the Hubs, which then synchronize the data with each other.

The third layer is the application layer, where users can develop their own mobile or desktop applications. It should be noted that this is not only the terminal application but also another server-side application. This application can cache all the data in the hub and then realize the search, indexing, and other more advanced functions. This would make the dApps built on Farcaster more similar to current social apps.

Understanding Farcaster Frames

The project was not popular at the start but is now gaining momentum thanks to the launch of Farcaster Frames. This new feature allows you to turn any publication into an interactive experience.

Like regular social media posts, framesJs displays content in static images or videos. Still, the Farcaster Frames feature also allows for interactive elements in the form of buttons, allowing posts to dynamically respond to user actions.

Farcaster Frames also protects users from the risks associated with interacting with third-party apps and sites, such as wallet draining and spoofing. Frames transform Farcaster exponentially.

Components and Tools for Building Farcaster Frames

To be very honest with you, a notice developer can hardly cope with Farcaster dApp development. For this purpose, you require:

• Previous programming experience with JavaScript or TypeScript
• An Ethereum node endpoint with the Token API enabled
• Node.js and pnpm installed
• FramesJs installed 
• Neynar API Key
• An account on Farcaster
• A code editor (e.g., VSCode, Atom)

Farcaster API plays a big role in building Frames for Farcaster. So, it must also be carefully researched.

Step-by-Step Guide: How to Build Farcaster Frames

It takes 10 steps to build Farcaster Frame. Here is a step-by-step guide from IdeaSoft blockchain department devs for building Frames for Farcaster:

1. Get DFX. It serves as the command-line interface for the IC SDK, a development kit crafted by DFINITY to manage ICP canister smart contracts.
2. Get Azle and initialize a new Azle project. It serves as a library for crafting ICP canister smart contracts in Typescript and Javascript. Specifically, Azle functions as a Canister Development Kit (CDK) or an interface utilized by the IC SDK, furnishing Typescript and Javascript with all the necessary capabilities to create and administer canister smart contracts.
3. Develop Farcaster Frame and configure Express Server in src/index.ts. A Frame is established with Farcaster-specific OpenGraph tags. Azle offers a Server method that enables the passing of a callback function required to return a node httpServer instance.
4. Provide the Farcaster Frame for the REST API call and update src/index.ts with the complete code. Here, you must move your Farcaster Frame to the REST API and then update src/index.ts with the new code.
5. Deploy the application. Deploy your frame locally to test the application. You will see a success message in the shell if everything is OK. Then, deploy on the mainnet or production to have a functional application.
6. Preview the Farcaster Frame using their Frame Validator. You can preview the Farcaster Frame using their Frame Validator tool. Please note that only mainnet production endpoints are supported. Local endpoints are not compatible. Input the endpoint received and then click Load.

Now, you know how to create Farcaster Frame in 6 steps. Let`s move to why you need Frames for building decentralized social apps of a new generation.

Why Farcaster Frames are Essential for Your dApp

With Farcaster Frames, we encounter a novel Web 3 fundamental that eludes the capabilities of Web 2. We mean a simple method to operate application X while a user remains within application Y, requiring minimal coordination between the two. This feat surpasses even Facebook’s capabilities at the pinnacle of its popularity.

We highlight 3 reasons why Farcaster Frames are essential for dApps.

Enhanced Embeds

Frame serves as an interactive embed, akin to envisioning Google crafting a Frame for Google Slides. Instead of merely displaying an image preview of the first slide when linking to a Google Slides presentation, the Frame showcases the image preview along with the buttons below. These buttons facilitate navigation forward and backward through the slides, allowing users to view the entire slideshow directly within the Frame. This concept embodies a relatively straightforward Frame implementation.

Integrated Embeds

Now, let’s delve deeper into the concept. Consider OpenSea’s functionality where users can “fave” any NFT to add it to their favorites. If OpenSea adopted Frames, whenever a user shares an NFT page from OpenSea on the feed, a button beneath the image could enable adding it as a favorite. 

Here’s how it would function: 

• Upon receiving the signed message, the OpenSea backend deciphers it to retrieve the ID of the user who clicked the button and then queries the associated address.
• Given that not all Farcaster users possess a wallet address linked to their accounts, OpenSea’s backend could determine the course of action if no wallet address is found or display a message within the Frame indicating the absence of a wallet for that user. 
• If a user does have a wallet address, OpenSea could seamlessly add the NFT to the user’s favorites, enabling users to “fave” NFTs without navigating away from the feed.

So, businesses can easily opt for hosting Frames on their product and let users interact with them directly.

Sponsored Interactions

How can Frames drive blockchain activity? Wouldn’t there need to be a transaction for that to occur? Indeed, there is, but the server can sponsor and orchestrate the transaction. 

Consider the scenario of minting the first NFT in a Frame, where users can mint the NFT on Base with just a single click. Here’s the mechanism:

• The developer establishes an NFT contract and allocates funds upfront to cover the cost of each mint. 
• When a user clicks the mint button within the Frame, the server identifies the connected address for that user and proceeds to mint the NFT from the developer’s wallet to the user’s address. 
• While a transaction occurs, the user isn’t executing the transaction, nor are they bearing the cost.

You might ponder the possibility of users paying for the transaction themselves. Here’s a conceivable approach:

• Envision a service where users can delegate a smart contract or server to handle funds on their behalf, akin to PayPal’s functionality but with cooler options. 
• Users would create accounts on this service and fund them accordingly. 
• Subsequently, when users engage with a Frame from this service, the service receives the signed request, identifies the user’s account, and executes the on-chain action (e.g., minting, sending) using the preloaded balance associated with that user.

This capability exists today, and it’s plausible that we’ll witness Frames incorporating such functionality in the near future.

Use Cases and Examples

Need Farcaster Frames example? Here are 10 at once! Click on a link to move to them:

1. Doom in a Frame
2. Degen Casino
3. Neynar Survey
4. FID Checker
5. Spoiler Alert
6. Chess on Farcaster
7. Base’s RPG Quest
8. Sell Anything on Farcaster
9. Faucets Frame
10. Cookiecaster Frame

Creating Farcaster Frame is now trendy. You can find different Garcaster Frames on your own with minimal effort.

Summary

Decentralized social has always been a widely viewed track, whether it is the underlying data infrastructure, protocols, or application layer. Multiple projects have made attempts. We believe that combining decentralized finance and social will bring great changes and have a broad development prospect. Although Frames and many social applications are still in the early stages, we will keep a high interest in this direction.