基于abi，动态创建dapp ui
这只是示例代码，存在bug
可以通过https://govm-net.github.io/dapp.html使用动态UI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Contract Interaction</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Smart Contract Interaction</h1>
<form id="contract-form" class="mt-4">
<div class="form-group">
<label for="abi-file">ABI File</label>
<input type="file" class="form-control" id="abi-file" accept=".json">
</div>
<div class="form-group">
<label for="contract-address">Contract Address</label>
<input type="text" class="form-control" id="contract-address" placeholder="Enter contract address">
</div>
<button type="submit" class="btn btn-primary">Load Contract</button>
</form>
<div id="contract-functions" class="mt-5"></div>
</div>
<script>
$(document).ready(function() {
let web3;
if (typeof window.ethereum !== 'undefined') {
web3 = new Web3(window.ethereum);
window.ethereum.request({ method: 'eth_requestAccounts' });
} else if (typeof window.web3 !== 'undefined') {
web3 = new Web3(window.web3.currentProvider);
} else {
alert('Please install MetaMask!');
return;
}
$('#contract-form').submit(function(event) {
event.preventDefault();
const file = $('#abi-file').prop('files')[0];
const reader = new FileReader();
reader.onload = function(event) {
const abi = JSON.parse(event.target.result);
const address = $('#contract-address').val();
const contract = new web3.eth.Contract(abi, address);
generateInterface(contract);
};
reader.readAsText(file);
});
function generateInterface(contract) {
$('#contract-functions').empty();
contract.options.jsonInterface.forEach(function(method) {
if (method.type === 'function') {
const functionName = method.name;
const inputs = method.inputs.map(input => `<input class="form-control mb-2" data-type="${input.type}" placeholder="${input.name}">`).join('');
const functionHtml = `
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">${functionName}</h5>
${inputs}
<button class="btn btn-success call-function" data-function="${functionName}">Call</button>
</div>
</div>`;
$('#contract-functions').append(functionHtml);
}
});
$('.call-function').click(function() {
const functionName = $(this).data('function');
const inputs = $(this).siblings('input').map(function() { return $(this).val(); }).get();
contract.methods[functionName](...inputs).call()
.then(result => {
alert(`Result: ${result}`);
})
.catch(error => {
alert(`Error: ${error.message}`);
});
});
}
});
</script>
</body>
</html>
