Created
December 17, 2023 12:31
-
-
Save rezaiyan/7be14cca159b7f9bb723c3d0a72c6e51 to your computer and use it in GitHub Desktop.
This HTML file establishes a web interface for interacting with a smart contract deployed on Ganache CLI. It utilizes the Web3 library for Ethereum interactions and displays transaction information in a table. The displayed transactions include details such as transaction hash, sender, recipient, value, gas price, and more. Additionally, it inco…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Ganache CLI Transactions</title> | |
<style> | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
margin-top: 20px; | |
} | |
th, | |
td { | |
border: 1px solid #ddd; | |
padding: 8px; | |
text-align: left; | |
} | |
th { | |
background-color: #f2f2f2; | |
} | |
</style> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/dist/toastr.min.css" /> | |
<script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/dist/toastr.min.js"></script> | |
<script> | |
// Initialize toastr library | |
toastr.options = { | |
closeButton: true, | |
progressBar: true, | |
positionClass: 'toast-top-right', | |
timeOut: 5000, | |
}; | |
</script> | |
<script src="https://cdn.jsdelivr.net/npm/web3@1.3.6/dist/web3.min.js"></script> | |
</head> | |
<body> | |
<h1>Ganache CLI Transactions</h1> | |
<form id="contractInteractionForm"> | |
<label for="messageInput">New Message:</label> | |
<input type="text" id="messageInput" name="messageInput"> | |
<button type="button" onclick="setMessage()">Set Message</button> | |
<label for="getMessageOutput">Current Message:</label> | |
<span id="getMessageOutput"></span> | |
<button type="button" onclick="getMessage()">Get Message</button> | |
</form> | |
<script> | |
// Connect to Ganache CLI | |
const web3 = new Web3('http://localhost:8545'); | |
// Define the ABI and contract address | |
const contractABIs = Your ABI; | |
const contractAddress = 'Your contractAddress'; | |
const contract = new web3.eth.Contract(contractABIs, contractAddress); | |
// Get the latest block number and display transactions | |
web3.eth.getBlockNumber().then(latestBlockNumber => { | |
for (let blockNumber = latestBlockNumber; blockNumber > 0; blockNumber--) { | |
web3.eth.getBlock(blockNumber, (error, block) => { | |
if (!error) { | |
displayTransactions(block.transactions, blockNumber, block.timestamp); | |
} else { | |
console.error(error); | |
} | |
}); | |
} | |
}); | |
// Display transactions in a table on the HTML page | |
function displayTransactions(transactionHashes, blockNumber, timestamp) { | |
const table = document.createElement('table'); | |
const headerRow = table.insertRow(0); | |
const headers = ['Transaction Hash', 'From', 'To', 'Value (ETH)', 'Gas Price (Wei)', 'Gas Limit', 'Block Number', 'Date', 'Data']; | |
headers.forEach(headerText => { | |
const header = document.createElement('th'); | |
header.textContent = headerText; | |
headerRow.appendChild(header); | |
}); | |
// Reverse the order of transactions (newest to oldest) | |
transactionHashes.reverse().forEach(txHash => { | |
web3.eth.getTransaction(txHash, (error, transaction) => { | |
if (!error) { | |
const row = table.insertRow(-1); | |
const values = [ | |
transaction.hash, | |
transaction.from, | |
transaction.to || 'Contract Creation', | |
web3.utils.fromWei(transaction.value, 'ether'), | |
transaction.gasPrice, | |
transaction.gas, | |
blockNumber, | |
new Date(timestamp * 1000).toLocaleString(), | |
decodeFunctionCallData(transaction.input, transaction.to), | |
]; | |
values.forEach((value, index) => { | |
const cell = row.insertCell(index); | |
cell.textContent = value; | |
}); | |
} else { | |
console.error(error); | |
} | |
}); | |
}); | |
document.body.appendChild(table); | |
} | |
// Decode function call data using contract ABI | |
function decodeFunctionCallData(input, contractAddress) { | |
const contractABI = contractABIs[contractAddress]; | |
if (!contractABI) { | |
return 'ABI not available'; | |
} | |
try { | |
const decodedData = web3.eth.abi.decodeInput(contractABI, input); | |
return JSON.stringify(decodedData); | |
} catch (error) { | |
console.error(error); | |
return 'Unable to decode data'; | |
} | |
} | |
// Interaction with smart contract | |
async function setMessage() { | |
const messageInput = document.getElementById('messageInput').value; | |
const accounts = await web3.eth.getAccounts(); | |
const sender = accounts[0]; | |
try { | |
// Send the transaction | |
const transaction = await contract.methods.setMessage(messageInput).send({ from: sender }); | |
// Wait for the transaction to be mined | |
await transaction.waitConfirmation(); | |
// Update the UI or perform any other actions after the transaction is mined | |
console.log('Message set successfully!'); | |
toastr.success('Message set successfully!'); | |
} catch (error) { | |
console.error('Error setting message:', error); | |
toastr.error('Error setting message'); | |
} | |
} | |
async function getMessage() { | |
try { | |
// Retrieve the current message from the smart contract | |
const result = await contract.methods.getMessage().call(); | |
// Update the UI with the result | |
document.getElementById('getMessageOutput').textContent = result; | |
} catch (error) { | |
console.error('Error getting message:', error); | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment