0

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>
  1. I've obtained the ether from MetaMask faucet into the Ropsten Test Network.
  2. Set the network to Ropsten Test Network on MetaMask.
  3. Deployed the smart contract on Remix IDE through the injected web3 environment
  4. Pointed the endpoint of Web3 in the front-end website's code to Infura's Ropsten address
  5. 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.

1

You are using .call(), it doesn't create a transaction. It is used to query a contract.

If you want to modify a contract you need to use .send().

2
  • Thank you for your answer. I changed .call() to .send({ from: senderAddress }) which is the same address as where the smart contract was sent from as well as the address specified in MetaMask. However, I'm getting the error that WalletMiddleware - Invalid "from" address. { "originalError": {} } – Kevvv May 8 '20 at 17:28
  • @Kevvv It seems your code doesn't connect to MetaMask. – Ismael May 9 '20 at 4:08
1

It seems , your code is not able to connect to metamask, Try changing

web3 = new Web3(web3.currentProvider);

to

web3 = new Web3(window.web3.currentProvider);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.