1. Introduction

Creating a user-friendly interface for Ethers.js interactions allows users to easily send transactions, check balances, and interact with smart contracts. This guide will walk you through building a simple web application using HTML, CSS, and JavaScript.

2. Setting Up Your Project

First, create a new directory for your project and initialize it:

mkdir ethers-interface
cd ethers-interface
npm init -y
npm install ethers

3. Create the HTML Structure

Create an index.html file with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethers.js User Interface</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ethers.js User Interface</h1>

    <div id="app">
        <h2>Check Balance</h2>
        <input type="text" id="address" placeholder="Enter Ethereum address">
        <button id="checkBalance">Check Balance</button>
        <p id="balanceResult"></p>

        <h2>Send Ether</h2>
        <input type="text" id="recipient" placeholder="Recipient Address">
        <input type="text" id="amount" placeholder="Amount in Ether">
        <button id="sendEther">Send Ether</button>
        <p id="sendResult"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

4. Styling the Interface

Create a styles.css file to style your application:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

h1 {
    text-align: center;
}

#app {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 10px 0;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    color: #333;
}

5. Implementing the JavaScript Logic

Create a script.js file to handle Ethers.js interactions:

const { ethers } = require("ethers");

async function checkBalance() {
    const address = document.getElementById("address").value;
    const provider = new ethers.providers.Web3Provider(window.ethereum);

    try {
        const balance = await provider.getBalance(address);
        const balanceInEther = ethers.utils.formatEther(balance);
        document.getElementById("balanceResult").innerText = `Balance: ${balance InEther} ETH`;
    } catch (error) {
        console.error("Error fetching balance:", error);
        document.getElementById("balanceResult").innerText = "Error fetching balance. Please check the address.";
    }
}

async function sendEther() {
    const recipient = document.getElementById("recipient").value;
    const amount = document.getElementById("amount").value;
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();

    try {
        const tx = await signer.sendTransaction({
            to: recipient,
            value: ethers.utils.parseEther(amount)
        });
        await tx.wait();
        document.getElementById("sendResult").innerText = `Transaction successful! Hash: ${tx.hash}`;
    } catch (error) {
        console.error("Error sending Ether:", error);
        document.getElementById("sendResult").innerText = "Error sending Ether. Please check the details.";
    }
}

document.getElementById("checkBalance").addEventListener("click", checkBalance);
document.getElementById("sendEther").addEventListener("click", sendEther);

6. Connecting to MetaMask

Ensure that users have MetaMask installed and connected to your application. You can prompt users to connect their wallet:

async function connectWallet() {
    if (window.ethereum) {
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        console.log("Wallet connected!");
    } else {
        alert("Please install MetaMask!");
    }
}

window.onload = connectWallet;

7. Conclusion

By following these steps, you can create a user-friendly interface for Ethers.js interactions that allows users to check balances and send Ether easily. This enhances the overall user experience and makes blockchain interactions more accessible.