This tutorial continues the journey of building decentralized applications (DApps) on the Ethereum blockchain. Part 6 concluded the DAO's core functionality (voting, blacklisting, dividend distribution), and this final part focuses on creating a user interface for interaction.
Key Concepts:
Automating Token Transfers:
The initial deployment leaves the token and DAO unconnected. To simplify testing, a migration script (4_configure_relationship.js) automates token transfer to the DAO:
var Migrations = artifacts.require("./Migrations.sol");
var StoryDao = artifacts.require("./StoryDao.sol");
var TNSToken = artifacts.require("./TNSToken.sol");
var storyInstance, tokenInstance;
module.exports = function (deployer, network, accounts) {
deployer.then(function () {
return TNSToken.deployed();
}).then(function (tIns) {
tokenInstance = tIns;
return StoryDao.deployed();
}).then(function (sIns) {
storyInstance = sIns;
return balance = tokenInstance.totalSupply();
}).then(function (bal) {
return tokenInstance.transfer(storyInstance.address, bal);
})
.then(function (something) {
return tokenInstance.transferOwnership(storyInstance.address);
});
}This promise-based code sequentially deploys the token and DAO, then transfers the total token supply and ownership to the DAO's address. truffle migrate --reset executes this migration.
The Front-End (index.html):
A basic HTML structure with embedded JavaScript handles blockchain interaction:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Neverending Story</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="The Neverending Story is an community curated and moderated Ethereum dapp-story">
<link rel="stylesheet" href="assets/css/main.css"/>
</head>
<body>
<div class="grid-container">
<!-- ... (HTML structure for the DApp UI) ... -->
</div>
<🎜>
<🎜>
<🎜>
</body>
</html>(Note: The full HTML and CSS are omitted for brevity. The provided snippets illustrate the key elements.)
JavaScript Interaction (app.js and main.js):
The JavaScript code leverages Web3.js to interact with the blockchain, assuming MetaMask is installed. It handles account information, event listening, and transaction submission. (Detailed JavaScript code is omitted for brevity but key concepts are explained below).
Account Information:
The DApp dynamically displays account information based on MetaMask login status. A user's avatar is generated using the Blockies library. The code fetches and displays token balances, submission counts, and whitelist/blacklist status. Asynchronous calls are used to handle blockchain interaction.
Event Listening:
The DApp listens for contract events (e.g., Whitelisted) using Web3.js's event listening capabilities. This allows for real-time updates in the UI. The code efficiently handles both historical events and newly emitted events, preventing duplicate display.
Submitting Entries:
The UI includes a form for submitting new entries to the story. The JavaScript code handles submission, converting text to hexadecimal format before sending the transaction to the blockchain. Gas limits are set to ensure successful transaction execution.
Conclusion and Further Development:
This section provides a foundation for a basic DApp front-end. Further development, such as integrating a full-fledged front-end framework (like Vue.js or React), enhancing the UI, and adding more sophisticated features, is encouraged. The tutorial concludes with a list of suggested improvements and FAQs covering various aspects of Ethereum DApp development. The next part will cover deployment to a live environment.
The above is the detailed content of Ethereum DApps: Building a Web3 UI for a DAO Contract. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
