".send()" web3.js in the browser for a deployed contract, it doesn't work correctly

Question

I am not a native English speaker, so my English is not very good. I apologize if my sentences are not correct.

I have deployed the following contract.

pragma solidity >=0.4.22 <0.9.0;
pragma experimental ABIEncoderV2;

contract Test {
    struct Content {
        uint256 id;
        string name;
        string text;
    }

    Content[] public contents;
    mapping(address => uint256[]) writeAddress;

    event WrittenContent(address indexed sender, uint256 _id);

    function getWriteAddress() public view returns(uint256[] memory){
        return writeAddress[msg.sender];
    }

    function writeContent(string memory _name, string memory _text) public returns(uint256){
        uint256 id = contents.length;
        Content memory newContent = Content(id, _name, _text);
        contents.push(newContent);
        writeAddress[msg.sender].push(id);
        emit WrittenContent(msg.sender,id);
        return id;
    }

I would like to access the contract functions from the browser, but ".send()" is not working properly. Metamask and web3.js are connected, and the ABI file has also been loaded.

async function contentAdd(){
    var name = "name text";
    var text = "test";

    const data = contract.methods.writeContent(name, text).encodeABI();
    const gasEstimate = await web3.eth.estimateGas({
      to: 'CONTRACT_ADDRESS',
      data: data
      });


    return window.contract.methods.writeContent(name, text).send({ from: YourAddress, gas: gasEstimate })
    .on('transactionHash', function(hash) {
        console.log("Transaction Hash: " + hash);
    })
    .on('confirmation', function(confirmationNumber, receipt) {
        console.log("Confirmation Number: " + confirmationNumber);
        console.log(receipt);
    })
    .on('receipt', function(receipt) {
        console.log("Receipt: " + receipt);
        })
    .on('error', console.error);

Other functions with ".call()" are working properly.

    var id = 0 /*int number*/
    return window.contract.methods.contents(id).call()
        .then(function(result){
            console.log(result);
        }).catch(function(err){
          console.log(err);
        });

It seems that gas fees are not a problem either. Furthermore, when I execute the function "writeContent()" from the Remix IDE, no errors are displayed, and the text is saved. I'm not sure what the cause is.

One thing that caught my attention is that when I looked at Etherscan, calling the function from Remix IDE showed the Method part in hexadecimal, while it appeared as "transfer" in web3.js.

Do we need to add the payable modifier to the Solidity function to execute ".send()" from web3.js?

Answer 1

I was able to do it in the following way.

async function contentAdd(){
        var name = "name";
        var text = "test";

        const data = contract.methods.writeContent(name, text).encodeABI();
        
        const gasEstimate = await web3.eth.estimateGas({
          to: contractAddress, //Your Contract Address
          data: data
        });

        //Transaction object
        const txObject = {
          from: YourAddress, // Your Account
          to: contractAddress, // Your Contract Address
          data: data,
          gas: gasEstimate,
        };

        // Send transaction
        return web3.eth.sendTransaction(txObject, function(error, hash) {
          if (!error) {
            console.log("Transaction Hash: " + hash);
          } else {
            console.error(error);
          }
        });
}

But I don't know that is the best way.