I'm learning to set up a simple front-end website that executes smart contract methods in a testing environment, but even though MetaMask confirms the deployment of the contract, the transaction is not being executed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Deploy a Remix Contract</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
</head>
<body>
<div>
<h1>Ethereum Secret Messenger</h1>
<hr />
<label for="message"
>This site writes a secret message to the Ethereum blockchain!</label
>
<input id="userInput" type="text" />
<button id="setMessageButton">Set secret message</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
// Connect a the web3 provider
if (typeof web3 !== "undefined") {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(
new Web3.providers.HttpProvider(
"https://ropsten.infura.io/v3/3934271dae4126bf3bffc1244d2f6f"
)
);
}
// Set a default account
web3.eth.defaultAccount = web3.eth.accounts[0];
// Get the contract address
var RemixContract = new web3.eth.Contract([
{
constant: false,
inputs: [
{
name: "x",
type: "string",
},
],
name: "setMessage",
outputs: [],
payable: false,
stateMutability: "nonpayable",
type: "function",
},
{
constant: true,
inputs: [],
name: "getMessage",
outputs: [
{
name: "",
type: "string",
},
],
payable: false,
stateMutability: "view",
type: "function",
},
]);
// Get the contract abi
RemixContract.options.address =
"0xbB2a0A4c3Fa4611eF34b260Bbb4932548fF38947";
$("#setMessageButton").click(function () {
message = $("#userInput").val();
RemixContract.methods
.setMessage($("#userInput").val())
.call()
.then(console.log);
console.log($("#userInput").val());
});
</script>
</body>
</html>
- I've obtained the ether from MetaMask faucet into the Ropsten Test Network.
- Set the network to Ropsten Test Network on MetaMask.
- Deployed the smart contract on Remix IDE through the injected web3 environment
- Pointed the endpoint of Web3 in the front-end website's code to Infura's Ropsten address
- Set the Remix's contract address as well as the ABI in the front-end code
As mentioned previously, MetaMask shows the log of the Contract Deployment being confirmed, but when I try to use the method setMessage, the MetaMask pop up doesn't appear and nothing else happens. The website is running on the local port 5500 through the VSC's Live Server extension and shows no error in the log.
