How to call a state changing function with web3.js (browser) and remote node?

Question

Solidity Contract:

contract MyContract {
    bytes32 public product;
    uint public amount;

    function setOrder(bytes32 _product, uint _reorderAmount,) public returns (bool success);   
}

Javascript web3js (without node.js):

<script src="./web3.min.js"></script>
<script>
web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/key"));
web3.eth.defaultAccount = "0x...address of my account...";
var myContract = web3.eth.contract([...abi...]);
var contractInstance = myContract.at('0x...contract address...');
contractInstance.setOrder(web3.toHex('ProductName'),3000);
</script>

This works when I have ganache-cli running, but not on a testnet (e.g. Ropsten). On a testnet I can only getter functions, but how do I call a setter function? What am I missing here?

Answer 1

Transactions have to be signed with the private key of the sending account.

You're using Infura as your web3 provider and are asking it to send a transaction for you. It can't do that because it doesn't know the private key for your account.

You'll need to either write code to sign the transaction yourself or (the more typical approach) use a web3 provider like MetaMask in the browser. MetaMask holds the user's private keys and signs transactions on their behalf (after prompting for approval).

Answer 2

According to the doc, you have to change the contractInstance.setOrder(web3.toHex('ProductName'),3000); method to

Send a transaction: (Your case)

contractInstance.setOrder.sendTransaction(web3.toHex('ProductName'),3000, { from: ethaddress }, function(err, result){ ... })

If you want to just call a function which does not update the state (and cost nothing):

contractInstance.product.call(param1, , function(err, result){ ... }) 

Answer 3

You need to use Web3js to sign your transaction on client side before sending it to Infura:

web3.eth.sendSignedTransaction(
  web3.eth.accounts.signTransaction(
    {
      to: contractInstance.address,
      data: contractInstance.methods.setOrder.encodeABI(
        web3.toHex('ProductName'),3000),
      gas: 100000
    }));

For more details see documentation