How to Share a Smart Contract in a Farcaster Frame (Part 1)
Ever wondered if there is a way you could share and interact with smart contracts on social media the same way you share photos and videos? Welcome to Farcaster, the decentralized social network that is changing the way we engage with blockchain technology.
Farcaster is a decentralized social network that allows users to create and share content without any central authority or control. It has a unique feature called ‘Frame’, which is a customizable container where users can embed and interact with contents, such as smart contracts, directly within the platform.
This article will guide you through the process of sharing a smart contract in a Farcaster Frame, we will go through creating and deploying a smart contract, down to embedding it and sharing it on a Farcaster Frame.
Understanding Farcaster, Warpcast and Frames
Farcaster
As stated earlier in this article, Farcaster is a decentralized social network protocol. It serves as the underlying infrastructure that enables content creation, sharing and interaction in a decentralized network. It is built on blockchain technology, ensuring that user data and interactions are not controlled by a single entity.
Warpcast
Warpcast is a front-end application that is built on top of the Farcaster protocol. It offers a seamless user experience for creating and sharing content on the Farcaster network. Users create posts, share updates and also interact with other users on Warpcast. It also supports creation and sharing of Farcaster Frames which allows embedding of smart contracts and other interactive contents.
Frames
Farcaster Frames are powerful tools that allow users to embed smart contracts and other interactive content within the Farcaster network. They provide a seamless way for users to interact with blockchain-based applications within a social network.
Note: Farcaster is a protocol on which decentralized social media platforms called Farcaster clients can be built, for example Warpcast. Farcaster itself is not a social media platform.
Creating and Sharing Smart Contract on Farcaster Frame
We have done a lot of talking already, to make sure you understand the basic components that make up the Farcaster protocol. Now let’s get technical, the interesting part (the heavy lifting).
Prerequisites
Before we proceed with this tutorial, make sure you have the following:
Basic Understanding of Blockchain Technology.
Knowledge of Solidity.
Understanding of Smart Contract development.
Have Metamask installed and Base Sepolia test ETH.
Basic Knowledge on how to use Remix IDE.
Creating a Farcaster Account
Before you get started with building, interacting and sharing content on Farcaster, you need to first create an account of Farcaster.
Navigate to the Farcaster website here
Use your mobile device to download the Warpcast application. Choose your specific mobile operating system (Android or iOS)
Open the application after download is complete and sign up. (Note: You will have to pay $5 when signing up).
Follow the sign up process and keep your Farcaster account seed phrase safe and secured.
Link Warpcast Application with Web Browser
It is important that you link your Warpcast application with the web browser on your PC. This will make interacting with smart contracts and Farcaster Frames using your Metamask wallet seamless.
Navigate to the Warpcast website here
Click on the “Log in with Phone” button
Scan the QR Code with your mobile camera
Click on the link that shows when you scan the QR Code
This will take you to the Warpcast application on your mobile device
Slide the “Yes, this was me” button
Your Warpcast account and feeds will automatically load on your desktop browser.
Create an ERC721 Smart Contract
For the purpose of this article we will create an ERC721 NFT smart contract which will be shared in a Farcaster Frame for users to mint NFTs.
Open up Remix IDE using this link
On the File explorer tab, create a new file named MakeItWork.sol inside the contracts folder
Paste the following code inside the MakeItWork.sol file you created.
// SPDX-License-Identifier: MIT
// Compatible with OpenZeppelin Contracts ^5.0.0
pragma solidity ^0.8.20;
import "@openzeppelin/[email protected]/token/ERC721/ERC721.sol";
import "@openzeppelin/[email protected]/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/[email protected]/token/ERC721/extensions/ERC721Pausable.sol";
import "@openzeppelin/[email protected]/access/Ownable.sol";
import "@openzeppelin/[email protected]/token/ERC721/extensions/ERC721Burnable.sol";
contract MakeItWork is ERC721, ERC721URIStorage, ERC721Pausable, Ownable, ERC721Burnable {
uint256 private _nextTokenId;
constructor(address initialOwner)
ERC721("MakeItWorkFirst", "MIWF")
Ownable(initialOwner)
{}
function pause() public onlyOwner {
_pause();
}
function unpause() public onlyOwner {
_unpause();
}
function safeMint(address to, string memory uri) public {
uint256 tokenId = _nextTokenId++;
_safeMint(to, tokenId);
_setTokenURI(tokenId, uri);
}
// The following functions are overrides required by Solidity.
function _update(address to, uint256 tokenId, address auth)
internal
override(ERC721, ERC721Pausable)
returns (address)
{
return super._update(to, tokenId, auth);
}
function tokenURI(uint256 tokenId)
public
view
override(ERC721, ERC721URIStorage)
returns (string memory)
{
return super.tokenURI(tokenId);
}
function supportsInterface(bytes4 interfaceId)
public
view
override(ERC721, ERC721URIStorage)
returns (bool)
{
return super.supportsInterface(interfaceId);
}
}After pasting the code, click on the Solidity compiler tab on Remix IDE and click the blue Compile MakeItWork.sol button
You will see a green tick beside the Solidity compiler tab
Copy the ABI of the smart contract and keep it safe, it will be needed when interacting with the smart contract.
Deploy Smart Contract
After creating the smart contract, the next step is to deploy the smart contract on the Base Sepolia network.
Make sure the selected network on your Metamask wallet is Base Sepolia.
On your Remix IDE, click on the Deploy and run transactions tab.
Select Injected Provider - Metamask from the ENVIRONMENT dropdown
Your Metamask wallet will popup, connect it your Remix IDE
Paste your Metamask account address beside the Deploy button and click the deploy button
Confirm the transaction when your Metamask wallet pops up and wait for the transaction to be confirmed
You should see a deployed smart contract with a contract address and also a green check of a successful transaction.
Copy the contract address of the deployed smart contract and keep it safe. We will need it when working on the Farcaster Frame implementation.
Testing your Smart Contract
It is important that you test your smart contract after development and deployment on testnet.
Click on the contract address of the deployed smart contract on your Remix IDE to show all the external and public functions and their buttons for interaction.
Click on the dropdown icon beside the `safeMint` button, to show the fields to input the function parameters
In the first parameter `to` paste your wallet address where you want the NFT to be minted to, and in the second parameter `uri` paste ipfs://YOUR-METADATA-CID. For example `ipfs://QmcW255SdUxVXEBB5QcYPYVMfk3jU9YiUHV4BVai2ULA9L`
Click on the transact button and confirm the transaction on your Metamask wallet when it pops up.
After the transaction has been confirmed, goto OpenSea testnet here and search for the wallet address where you minted the NFT to, you should see the NFT under the list of NFTs owned by that wallet address.
We have confirmed that the NFT smart contract is working perfectly. Let's proceed to uploading NFT images and metadata on IPFS (InterPlanetary File System) using Pinata.
Upload NFT Image and Metadata on Pinata
We need an image that will be used as the NFT image and to do this we will be using Pinata, a platform for storing and retrieving media files on IPFS.
Create an account on Pinata, if you don’t have one already.
Log in to your account and click on the Files tab
Click on the Add button and click File Upload
Select the image you want to use as your NFT image and upload it.
After uploading the image, you will see it in your list of files, copy the CID.
Open your code editor and create a json file named makeitwork.json
In your json file, paste the following code inside.
{
"name": "Make it Work",
"description": "First Make it Work, Then Make it Beautiful",
"external_url": "https://pinata.cloud",
"image": "ipfs://QmYEqPb6sUJM5tB2mffwZfu8vikJTjQH95BFHeckW7Czhb"
}Replace the highlighted CID in the image below, with the CID of your own image you copied.
Upload the makeitwork.json file on Pinata same way you uploaded the image earlier. You should have the following files (NFT image and Metadata file) on your Pinata account.
Here ends the Part 1 section of this article! In this part, we've covered the foundational steps of creating, deploying, and testing an ERC721 smart contract, as well as preparing NFT images and metadata using Pinata. With these essentials in place, you're now equipped to move forward to the next stage.
Proceed to Part 2, where we will focus on building a Farcaster Frame using the Frog framework. This next part will guide you through:
Building the Farcaster Frame using Frog framework.
Understanding the Farcaster Frame codebase.
Testing the Farcater Frame we have built.
Deploying the frame on Vercel.
Validating the Frame on Warpcast.
Sharing the Smart Contract Frame on Warpcast for users to interact.
Stay tuned for Part 2 to unlock the full potential of Farcaster Frames and transform the way you share and interact with smart contracts on social media. Thank you for following along, and we look forward to guiding you through the next steps!
