<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message DApp</title>
</head>
<body>
<h1>Decentralized Message Store</h1>
<input type="text" id="messageInput" placeholder="Enter a new message">
<button onclick="setMessage()">Set Message</button>
<p id="currentMessage">Loading message...</p>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script>
const contractAddress = 'YOUR_CONTRACT_ADDRESS';
const abi = [/* ABI from compiled contract */];
const web3 = new Web3(Web3.givenProvider);
const contract = new web3.eth.Contract(abi, contractAddress);
async function setMessage() {
const accounts = await web3.eth.getAccounts();
const message = document.getElementById('messageInput').value;
await contract.methods.setMessage(message).send({ from: accounts[0] });
loadMessage();
}
async function loadMessage() {
const message = await contract.methods.getMessage().call();
document.getElementById('currentMessage').innerText = message;
}
window.onload = loadMessage;
</script>
</body>
</html>
- Web3.js: A JavaScript library for interacting with the Ethereum blockchain.
- contract.methods.setMessage(message).send({ from: accounts[0] }): Calls the smart contract’s
setMessage
function and sends a transaction to the blockchain. - contract.methods.getMessage().call(): Calls the smart contract’s
getMessage
function to retrieve the stored message.