Overview

A decentralized application (DApp) is an application that runs on a blockchain network, allowing users to interact with smart contracts. In this guide, we will create a simple DApp using Ethers.js, which will include writing a smart contract, deploying it, and building a front-end application to interact with it.

1. Setting Up Your Development Environment

First, you need to set up your development environment. You can use tools like Node.js and npm to create a new React application:

        
            npx create-react-app my-dapp
            cd my-dapp
            npm install ethers
            

2. Writing the Smart Contract

Next, we will write a simple smart contract in Solidity. This contract will allow users to store and retrieve a message:

        
            // contracts/SimpleStorage.sol
            // SPDX-License-Identifier: MIT
            pragma solidity ^0.8.0;

            contract SimpleStorage {
                string private message;

                function setMessage(string memory _message) public {
                    message = _message;
                }

                function getMessage() public view returns (string memory) {
                    return message;
                }
            }
            

3. Deploying the Smart Contract

To deploy the smart contract, you can use a tool like Hardhat or Truffle. Below is an example of how to deploy the contract using Hardhat:

        
            // scripts/deploy.js
            const { ethers } = require("hardhat");

            async function main() {
                const SimpleStorage = await ethers.getContractFactory("SimpleStorage");
                const simpleStorage = await SimpleStorage.deploy();
                await simpleStorage.deployed();
                console.log("SimpleStorage deployed to:", simpleStorage.address);
            }

            main().catch((error) => {
                console.error(error);
                process.exit(1);
            });
            

Run the deployment script:

        
            npx hardhat run scripts/deploy.js --network rinkeby
            

4. Building the Front-End Application

Now that we have our smart contract deployed, we can build a front-end application using React and Ethers.js to interact with the contract. Below is a simple example:

        
            // src/App.js
            import React, { useEffect, useState } from 'react';
            import { ethers } from 'ethers';
            import SimpleStorage from './artifacts/SimpleStorage.json'; // ABI file

            function App() {
                const [account, setAccount] = useState(null);
                const [provider, setProvider] = useState(null);
                const [contract, setContract] = useState(null);
                const [message, setMessage] = useState("");
                const [storedMessage, setStoredMessage] = useState("");

                useEffect(() => {
                    const connectWallet = async () => {
                        if (window.ethereum) {
                            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                            setAccount(accounts[0]);
                            const provider = new ethers.providers.Web3Provider(window.ethereum);
                            setProvider(provider);
                            const contractAddress = "DEPLOYED_CONTRACT_ADDRESS "; // Replace with your deployed contract address
                            const simpleStorageContract = new ethers.Contract(contractAddress, SimpleStorage.abi, provider);
                            setContract(simpleStorageContract);
                        } else {
                            alert("Please install MetaMask!");
                        }
                    };
                    connectWallet();
                }, []);

                const setNewMessage = async () => {
                    if (contract && account) {
                        const signer = provider.getSigner();
                        const contractWithSigner = contract.connect(signer);
                        const tx = await contractWithSigner.setMessage(message);
                        await tx.wait();
                        console.log("Message set:", message);
                    }
                };

                const getMessage = async () => {
                    if (contract) {
                        const message = await contract.getMessage();
                        setStoredMessage(message);
                    }
                };

                return (
                    

                        
Simple Storage DApp

                        {account ? 
Connected account: {account}
 : Connect Wallet}
                         setMessage(e.target.value)}
                            placeholder="Enter a message"
                        />
                        Set Message
                        Get Message
                        {storedMessage && 
Stored Message: {storedMessage}
}
                    

                );
            }

            export default App;
            

5. Conclusion

In this guide, we walked through the steps to create a simple decentralized application (DApp) using Ethers.js. We set up our development environment, wrote and deployed a smart contract, and built a front-end application to interact with it. This foundational knowledge will help you build more complex DApps on the Ethereum blockchain.