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.