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.
Requirement
A good understanding of JavaScript, React is needed for this article.
Prerequisites
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('https://alfajores-forno.celo-testnet.org');
}
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();
setAccounts(accounts);
} 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 &&
<div>
<h2>Connected Accounts</h2>
{accounts.map((account, index) => (
<p key={index}>{account}</p>
))}
<h2>Connected Network</h2>
<p>{network.name}</p>
</div>
}
</div>
);
}
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!
Conclusion
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.
