Getting started with Celo-composer and Metamask integration 2023

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):

@CeloAfricaDao