rezaiyan/SmartContract.html

## SmartContract.html
<!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>
	<!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>