Integrating Smart Contracts with Celo Web App


The integration of blockchain technology and web development has led to an exciting ecosystem where decentralized applications (dApps) offer secure, transparent, and user-friendly solutions. One such ecosystem is Celo, a mobile-first blockchain platform that aims to make financial tools accessible to anyone with a smartphone. A central component of Celo’s ecosystem are smart contracts, programmable scripts that facilitate, verify, or execute the negotiation or implementation of a digital contract.


To get the most from this tutorial, you should have a basic understanding of blockchain technology, smart contracts, and web development. Familiarity with the Solidity programming language and web development frameworks like JavaScript is also essential. It will be helpful if you are comfortable using libraries and SDKs for blockchain integration.

Tutorial: GITHUB repo


To follow along, you will need:

  • Development environment setup for web applications (JavaScript)
  • Celo SDK or library for integration
  • Node.js and npm installed on your machine.
  • A Celo Wallet or Celo extension wallet.
  • Hardhat installed for smart contract development and testing.

We will explore the basics of smart contracts and their role in the Celo ecosystem. Then, from the blockchain, we’ll cover how to deploy contracts, and efficiently query and update smart contract data.

Building a simple Celo Web App linked with Celo Wallet

Let’s build a simple app that fetches the balance of a Celo account.

Step 1: Set Up a New JavaScript Project

In your terminal, create a new JavaScript project:

mkdir CeloApp
cd CeloApp
npm init -y

Step 2: Install Dependencies

We will use “@celo/contractkit” to interact with the Celo blockchain and “web3” for some utility functions:

npm install @celo/contractkit web3 hardhat

Step 3: Interacting with Celo Network

Create a new file CeloClient.js:

const { newKit } = require('@celo/contractkit');
const kit = newKit('');

module.exports = kit;

Here, we’re connecting to the Alfajores Testnet.

Step 4: Fetching Account Balance

Create a new function that will fetch the balance of a Celo account. Add the following function to the CeloClient.js file:

const { newKit } = require('@celo/contractkit');

const kit = newKit('');

const getBalance = async (address) => {
  const totalBalance = await kit.getTotalBalance(address);
  return totalBalance.celo.toString();

module.exports = { kit, getBalance };

Step 5: Display Balance in JavaScript

Now, let’s use this function in our app to display the balance of a Celo account. Create a new file App.js and modify it like this:

const { getBalance } = require('./CeloClient');

const fetchBalance = async () => {
  const celoBalance = await getBalance('0xYourCeloAddress');
  console.log('Your Celo Balance:', celoBalance);


Replace ‘0xYourCeloAddress’ with your own Celo account address.


This is a basic example that demonstrates how to interact with Celo’s smart contracts using JavaScript. For real-world apps, you’ll need to implement authentication, error handling, more complex smart contract interactions, etc. Also, remember that you should never expose sensitive data, like private keys, within your application code.


You have gained a comprehensive understanding of how to integrate smart contracts with web apps in the Celo ecosystem. You have acquired the knowledge and skills needed to build a feature-rich, secure, and user-friendly dApp that leverages the potential of the Celo blockchain and web technology. You can do more integration with DeFi applications by following up with this tutorial and more on smart contracts integration with web apps in Celo Academy.

About the Author

Imole Peter L.

A web3 enthusiast, content writer for web3 brands, visual artist, and seasoned author (Pen name: Sasani Eldis). Connect with me on LinkedIn


  1. JavaScript
  2. Celo ContractKit
  3. Web3
  4. Celo Network
  5. Celo Official Website
  6. Solidity Documentation
  7. Hardhat Documentation
  8. Node.js Documentation

Congratulations on your proposal being chosen as a standout this week at Celo Academy! As you prepare your tutorial, please ensure you follow our guidelines found here: Celo Sage Guidelines and Best Practices. Thank you for helping improve the experience of the developers learning at Celo Academy.


I’ll be reviewing this @SasaniEldis


Thanks @Jorshimayor. Good to have you


It’s not clear that this article passed review and publishing. It’s also unclear where this is showing how to connect a smart contract to a mobile application as specified in the title.

Thank you!


I appreciate you for sharing this. Deepen knowledge into JavaScript.