Getting started with Celo-composer and Metamask integration.

Hello Devs 👋🤗

The Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a number of frameworks, examples, and Celo specific functionality to help you get started with your next dApp.

This tutorial will guide you through the process of using Celo Composer to develop and launch new dApps. We'll break down key blockchain concepts into digestible parts, making it easier for you to learn and apply your newfound knowledge efficiently.

Prerequisites

• Node

• Git (v2.38 or higher)

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 tutorial, you'll be able to integrate Celo into your decentralized wallet, fund your testnet for development, and successfully create and deploy a new dApp 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

NOTE: This is the main key to recover your Metamask account. Keep it restricted.

Blast! 💥 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

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

Ohkay! 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 Portfolio_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 portfolio_celo_dapp/

• Install NPM dependencies using Yarn

yarn install

• Launch your project with your desired code editor

NOTE: 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="e56ffb028c98378602f3985302673390bd50cac7e43b6f7485b99165061e0adfd"

• Open the terminal and navigate to /packages/hardhat directory

• Run the command to deploy smart-contract using Yarn

yarn deploy

Yah! 👏🏻 You have successfully deployed your smart contracts on the Celo blockchain.

NOTE: 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! 🎉

These five stages form the core process of setting up and integrating Celo Composer with MetaMask for building decentralized applications on Celo. Each step provides the foundation needed for a smooth development experience on the Celo blockchain.

Here is a list of what we have covered for Celo Composer and MetaMask Integration. 🥳

• ✅Setup and configure Metamask

• ✅Connect Celo to Metamask

• ✅Fund your testnet wallet

• ✅Setup a new dApp

• ✅Deploy smart contract

Contribute to the project

The Celo Africa DAO is a decentralized autonomous organization committed to promoting the growth and adoption of the Celo blockchain throughout Africa. By focusing on Web3 innovation, community education, and increasing market awareness, the DAO empowers local developers, entrepreneurs, and communities to harness blockchain technology. It achieves this through developer workshops, university events, community collaborations, and Twitter Spaces sessions.

Celo Africa DAO Socials 👇🏻

Join Celo Africa DAO on Slack: @CeloAfricaDao

Follow Celo Africa DAO handles on X (Twitter) @CeloAfricaDao

Join Celo Africa DAO on Telegram: @CeloAfricaDao