In this blog, we will walk through the process of building a simple authentication system using MetaMask for the Conflux eSpace network. This system will allow users to connect their MetaMask wallet to your React application, retrieve their Conflux address, and display their balance. We will also look at handling network switching to ensure the user is on the correct Conflux eSpace network.
Prerequisites
Before diving into the code, ensure you have the following:
- Node.js installed on your machine.
- MetaMask installed in your browser.
- Basic understanding of React and Web3.js.
Project Setup
-
Clone the repo: If you don’t have a React project setup yet, you can clone this
git clone https://github.com/Vikash-8090-Yadav/Conflux-Tutorial -
Go to the directory: Ensure you are in the correct directory
cd Conflux-Tutorial/Simple-LoginPage/Frontend
-
Install the library: Before running the project on localhost make sure that all the library are sucessfully installed
npm install -
Start the project: Please hit localhost:3000 on the webbrowser to see the full running project
npm start -
MetaMask Setup: Ensure you have MetaMask installed and set up in your browser.
First Look
Below is the image when you will open the project first time
Code Implementation
Under nav.jsx we have two important function
- HandleLogin Funciton
- Network Funciton
Network function is used to set the conflux espace network in the metamask or any wallt while someone click on the Login Page
const networks = {
espace: {
chainId: `0x${Number(71).toString(16)}`,
chainName: "espace",
nativeCurrency: {
name: "espace",
symbol: "CFX",
decimals: 18,
},
rpcUrls: ["https://evmtestnet.confluxrpc.com "],
},
};
HandleLogin function is used to check whether the wallet is connected to the Conflux espace test network or not
Here’s the code to check
const handleLogin = async () => {
setLoading(true);
if(typeof window.ethereum =="undefined"){
console.log("PLease install the metamask");
}
let web3 = new Web3(window.ethereum);
if(web3.network !=="espace"){
await window.ethereum.request({
method:"wallet_addEthereumChain",
params:[{
...networks["espace"]
}]
})
}
const accounts = await web3.eth.requestAccounts();
const Address = accounts[0];
localStorage.setItem("filWalletAddress",Address)
console.log(Address)
setAddress(Address);
setLoading(false);
window.location.reload();
};
If everything works fine then whenever you click on the login button a metamask will open and automatically shifted to the espace testnet network
Please watch this full youtube tutorial to understand better
Resources
GitHub Repo: https://github.com/Vikash-8090-Yadav/Conflux-Tutorial/blob/main/Simple-LoginPage/Frontend/src/components/nav.jsx