How to develop onchain Farcaster Frames with wallet connect and transactions

We assume you already know what Mini Apps are, else learn what Mini Apps are here. Additionally it’s assumed you know how to build Web3 Applications. If not speed run Ethereum.

You’ve built a website that accepts transactions, sends transaction or interacts with users wallets somehow. If not you’re building one.

Now to access the large onchain userbase on Farcaster you intend to turn it into a Mini App. Anyone will then be able to open your webapp right from their favorite social media app.

Yes that means you’re technically in the AppStore as some Farcaster clients are! How cool is that!?

How to build an onchain Mini App

1: make it a Mini App via metadata

First we need to set the Metadata. It is required for the Farcaster clients like Warpcast and Coinbase Wallet to recognize our webpage as mini app and render it.

Full tutorial on setting the metadata

Next we need to add the WalletConnect connector to our website. This will allow users to connect their wallets to our mini app. Farcaster clients inject a provider into your webpage, similar to browser extension wallets, that allows you to interact with the blockchain.

2: add the ability to connect wallets

Full tutorial on adding WalletConnect

Putting both together your onchain app works in Farcaster clients and you can interact with the users wallets.

For a sample of such an app, check the Morpho Deposit application we’ve built. 20 seconds to deposit into a lending protocol from your social media feed.