Code trang chuyển token bằng smart contract, javascript (front-end) và solidity (back-end)

Số người xem bài viết (Post Views): 227

Đây là một ví dụ đơn giản về cách tạo một trang web để nhập thông tin và chuyển tiền sử dụng smart contract với kết hợp giữa front-end (HTML/CSS/JavaScript) và back-end (Solidity).

Đầu tiên, ta cần tạo một smart contract Solidity để lưu trữ thông tin người dùng và thực hiện chức năng chuyển tiền. Dưới đây là đoạn code Solidity đơn giản để lưu trữ thông tin người dùng và chuyển tiền:

pragma solidity ^0.8.0;

contract MyContract {
  mapping(address => uint256) public balances;

  function deposit() public payable {
    balances[msg.sender] += msg.value;
  }

  function withdraw(uint256 amount) public {
    require(balances[msg.sender] >= amount, "Insufficient balance.");
    balances[msg.sender] -= amount;
    payable(msg.sender).transfer(amount);
  }
}

Bây giờ, ta sẽ tạo một trang web front-end sử dụng HTML/CSS/JavaScript để hiển thị giao diện cho người dùng và giao tiếp với smart contract bằng cách sử dụng thư viện web3.js.

HTML/CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Transfer ETH</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Transfer ETH</h1>
    <div class="input-container">
        <label>Recipient Address:</label>
        <input type="text" id="recipient-address">
    </div>
    <div class="input-container">
        <label>Amount:</label>
        <input type="text" id="amount">
    </div>
    <button onclick="transfer()">Transfer</button>

    <script src="./web3.min.js"></script>
    <script src="./app.js"></script>
</body>
</html>

JavaScript:

// Connect to the Ethereum network using web3.js
if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
}

// Set the default account to use for transactions
web3.eth.defaultAccount = web3.eth.accounts[0];

// Load the contract ABI and address
var contractABI = [...]; // Replace with the actual ABI of the contract
var contractAddress = '0x...'; // Replace with the actual address of the contract

// Instantiate the contract object
var contract = web3.eth.contract(contractABI).at(contractAddress);

// Transfer function
function transfer() {
    var recipientAddress = document.getElementById('recipient-address').value;
    var amount = web3.toWei(document.getElementById('amount').value, 'ether');

    contract.withdraw(amount, {from: web3.eth.defaultAccount, to: recipientAddress}, function(error, result) {
        if (!error) {
            alert('Transaction successful!');
        } else {
            alert('Transaction failed: ' + error);
        }
    });
}

Trong đoạn mã JavaScript trên, ta đã kết nối tới smart contract đã triển khai trên blockchain của Ethereum bằng cách sử dụng địa chỉ của contract và ABI của contract (cách tìm ABI của smart contract).

Rate this post

Vietnam Pham

Digital Marketing Specialist

Related posts:

Để lại một bình luận Hủy