Table of contents
No headings in the article.
Hello Devs 👋
The Celo-composer, a contract-kit by Celo that lowers the stress and challenges associated with developing decentralized applications with rapid deployment capabilities, has seen various improvements over the years.
Similar to how Metamask's UI was improved, new features have also been added.
This tutorial will cover how to use the Celo-composer to develop and launch new dApps. In today's post, we'll break down a blockchain topic into small parts to make it easier for you to learn and use your new knowledge.
Developer Tools 🛠️
NodeJs
NPM
NPM Module
- Yarn
npm install yarn -g
Here is a list of what we have to cover ⌛
Setup and configure Metamask
Connect Celo to Metamask
Fund your testnet wallet
Setup a new dApp
Deploy smart contract
By the end of this post, you will be able to integrate Celo into your decentralized wallet, fund your testnet for development purposes, and create and deploy a new dApp while successfully deploying it on the Celo blockchain.
Step 1: Setup and configure Metamask
If you already have the Metamask extension installed on your browser, feel free to skip this section.
Visit metamask.io
Select “Download” to download the extension
- On the Chrome Web Store. Select “Add to Browser”
- Select “Add Extension” on the pop-up
- Agree with the Term of Use and select “Create New Wallet”
- Select “I agree” to go to the next step
- Create a password, agree with the Term of Use and select “Create New Wallet” again
- Secure your wallet
HINT: ⚠️ This is the main key to recover your Metamask account. Keep it confidential.
Boom!🔥 Your Metamask extension is successfully set up.
Step 2: Connect Celo to Metamask
With a few clicks, we can add the Celo Alfajores testnet to the list of networks provided by Metamask.
- Click the network dropdown at the top left corner to view available networks
- Switch the “Show test networks” button
Visit chainlist.org
Check the “Include testnets” checkbox in the search bar
Search for “Celo Alfajores Testnet” in the search field
Click “Connect Wallet” on the Celo Alfajores Testnet grid
HINT: Follow the Metamask prompts to approve adding the test network to your wallet and “Switch network” for continuity.
Congrats! 🎉 You have successfully added Celo Alfajores testnet to your Metamask.
Step 3: Fund your testnet wallet
Currently, your wallet balance would be zero. There is a need to fund this wallet for testing and deployment purposes.
Visit faucet.celo.org
Paste your wallet address in the “Account Address” field
Select “Faucet” to fund your wallet
Yay! 💰 Your wallet has been automatically funded. Open Metamask to see your balance.
Step 4: Setup a new dApp
The instructions below demonstrate how to create a new dApp project using the Celo-composer contract kit without committing any errors.
Open your terminal
Navigate to your project directory
Run the command for the Celo-composer CLI
npx @celo/celo-composer create
- Choose front-end framework
Celo Composer CLI
? Choose front-end framework: (Use arrow keys)
❯ React
React Native (With Expo)
React Native (without Expo)
Flutter
Angular
- Choose web3 library for frontend
Celo Composer CLI
? Choose front-end framework: React
? Choose web3 library for react app: (Use arrow keys)
react-celo
❯ rainbowkit-celo
- Choose smart-contract framework
Celo Composer CLI
? Choose front-end framework: React
? Choose web3 library for react app: rainbowkit-celo
? Choose smart-contract framework: (Use arrow keys)
❯ Hardhat
Truffle
None
- Create a subgraph
Celo Composer CLI
? Choose front-end framework: React
? Choose web3 library for react app: rainbowkit-celo
? Choose smart-contract framework: Hardhat
? Create a subgraph: (Use arrow keys)
Yes
❯ No
- Insert project name e.g crowdfunding_celo_dapp
Celo Composer CLI
? Choose front-end framework: React
? Choose web3 library for react app: rainbowkit-celo
? Choose smart-contract framework: Hardhat
? Create a subgraph: No
? Project name: crowdfunding_celo_dapp
- Navigate to your newly created project
cd crowdfunding_celo_dapp/
- Install NPM dependencies using Yarn
yarn install
- Launch your project with your desired code editor
HINT: The smart contract and the frontend frameworks are located in the packages directory.
Step 5: Deploy smart contract
Few configurations are needed to connect your decentralized wallet with your smart contract while deploying your smart contract on the Celo blockchain.
Open Metamask and click the three stacked dots at the top right corner
Select “Account details”
- Select “Show private key” and insert your password
- Copy the private key
Rename the .envexample in the /packages/hardhat directory to .env
Populate the PRIVATE_KEY variable with your private key
PRIVATE_KEY="85ffb028c98378602f3985302673390bd50cac7e43b6f7485b99165061e0adfd"
Open the terminal and navigate to /packages/hardhat directory
Run the command to deploy smart-contract using Yarn
yarn run deploy
Hoo-rah! 🎉 You have successfully deployed your smart contracts on the Celo blockchain.
HINT: Deploying smart contracts generates gas fees, which serve as the transaction cost. Check your Metamask account balance to see how much this transaction cost you.
Congratulations! 🎉
This is how far we've gotten with the Celo-composer and Metamask integration 2023 conversation. For building on Celo, the five stages discussed in this tutorial act as requirements. In my next piece, I'll discuss how to customize new dApps on the Celo blockchain, as well as how to test and interact with our decentralized apps.
Here is a list of what we have covered ⌛
✅Setup and configure Metamask
✅Connect Celo to Metamask
✅Fund your testnet wallet
✅Setup a new dApp
✅Deploy smart contract
About Azeez
Azeez Abidoye is a professional software and blockchain developer who has garnered experiences over the years in the Information and Technology industry. Having worked with a crypto escrow company, he is currently a core contributor in the Celo Africa DAO as a Technical Ambassador.
He’s highly skilled in the development of Solidity, blockchain and dApps, API integration and testing, mentorship and training in software development, public speaking and idea pitching among others.
Contribute to the project
The Celo Africa DAO is a decentralized autonomous organization dedicated to fostering the growth and adoption of the Celo blockchain across the African continent. With a focus on driving Web3 innovation, community education, and market awareness, the DAO aims to empower local developers, entrepreneurs, and communities to embrace blockchain technology. Through a series of developer workshops, university events, community collaborations, and Twitter Spaces sessions.
Join Celo Africa DAO on Slack:
https://join.slack.com/t/celoafricadao/shared_invite/zt-23tvfsfcm-d8gshT~gQSHzzrDcXCuxHg
Follow Celo Africa DAO handles on X (Twitter):