Building a simple Celo wallet with React Celo and Solidity

Building a simple Celo wallet with React Celo and Solidity
none 0.0 0

Building a Simple Celo Wallet using React-Celo

Celo is an open-source platform that makes financial tools accessible to anyone with a mobile phone. The Celo Wallet is the decentralized client side interface that allows users to interact with the Celo Blockchain.

This article will guide you through the process of creating a simple Celo Wallet application using React and React-Celo, a wrapper library that simplifies interaction with the Celo Blockchain.


A good understanding of JavaScript, React is needed for this article.


Before we get started, ensure that you have the following installed and setup on your machine:

  • Node.js and npm: Node.js is a JavaScript runtime environment while npm is a package manager for Node.js packages.
  • Create-React-App: This is a tool by Facebook for creating new React applications.
  • A code editor, like Visual Studio Code.
  • Celo Extension Wallet: A browser extension that allows you to create and manage Celo accounts.

Setting up the Project

Let’s start by creating a new React application using Create-React-App. Open your terminal and run the following command:

mkdir celo-wallet

cd celo-wallet

npx create-react-app celo-wallet

Now, we need to install the @celo/contractkit and @celo-tools/use-contractkit packages. These will allow us to interact with the Celo blockchain.

npm install @celo/contractkit @celo-tools/use-contractkit

Connecting to the Celo Network

To connect our application to the Celo network, we need to set up the CeloProvider and ContractKit. Create a new file in your src folder and name it celo.js

Now, open the celo.js file and add the following code:

import { newKit } from '@celo/contractkit';

let kit;

export const getKit = () => {
    if (!kit) {
        kit = newKit('');
    return kit;

In this file, we are setting up a connection to the Celo Alfajores Testnet. The newKit function creates a new instance of ContractKit that we can use to interact with the Celo network.

Connecting to the Celo Wallet

Now, let’s set up a connection to the Celo Extension Wallet. First, create a new file named useWallet.js in the src directory.`

Then, open useWallet.js and add the following code:

import { useState } from 'react';
import { newKitFromWeb3 } from '@celo/contractkit';
import { useDappVersion } from '@celo-tools/use-contractkit';

export function useWallet() {
  const [accounts, setAccounts] = useState([]);
  const { network } = useDappVersion();
  async function connectWallet() {
    if (window.celo) {
      try {
        await window.celo.enable();
        const web3 = window.celo;
        let kit = newKitFromWeb3(web3);
        let accounts = await kit.web3.eth.getAccounts();
      } catch (error) {
        console.log("Error connecting wallet: ", error);
    } else {
      console.log('Celo extension not found');

  return { connectWallet, accounts, network };

This hook checks if the Celo Extension is available and connects to it, fetching all the accounts related to the Celo

Wallet and setting it in the local state.

Building the User Interface

Now let’s build a simple interface for our Celo wallet. Open the App.js file and replace the existing content with the following:

import React from 'react';
import { useWallet } from './useWallet';

function App() {
  const { connectWallet, accounts, network } = useWallet();

  return (
    <div className="App">
      <button onClick={connectWallet}>Connect to a Celo Wallet</button>
      {accounts.length > 0 &&
          <h2>Connected Accounts</h2>
          {, index) => (
            <p key={index}>{account}</p>
          <h2>Connected Network</h2>

export default App;

The button calls connectWallet when clicked, which prompts the user to connect their Celo Wallet. Once connected, it displays the accounts and network name.

Now you can run your application with npm start and try connecting your Celo Wallet!


You’ve built a simple Celo wallet application using React-Celo! With this basic foundation, you can expand this application to include more complex features, such as displaying balance, sending transactions, or interacting with Celo-based DApps. Be sure to explore the Celo ContractKit documentation for more functionalities and capabilities.

About Us

Joel Obafemi

A marketer, copywriter, and collab manager for web3 brands. You can connect with me on LinkedIn.


Source Code


Congratulations on being among the top voted proposals this week! This is now approved by @Celo_Academy for you to get started whenever you’d like. :mortar_board: :seedling:

1 Like

Hi @Joel , I’ll be reviewing this article

Are you a reviewer? never seen you before . If you are not approved as reviewer you can leave reviewing to reviewers .

Yes I am. You can check the group, was added by Joe last week

1 Like

Hi @Joel, you’ll need to add indentation to your code blocks

1 Like

Alright. I’ll do that now.

1 Like

I’ve fixed the code indentation.

1 Like

Okay, you can move to publish