Calling smart contract function from frontend is not working

Question

I've created a twitter profile contract and a function called

contract Twitter {
    //Struct for user profile
    struct Profile {
        string name;
        string username;
        string bio;
        string location;
        string profilePic;
    }

//Struct for tweets
    struct Tweet {
        uint256 _id;
        string tweetImg;
        string tweetText;
        uint256 timeStamp;
        string profileImg;
        string name;
        string username;
        uint256 likes;
    }

    mapping(address => Profile) public profiles;
    mapping(address => Tweet[]) public tweets;
    Tweet[] public allTweets;
    uint256 public tweetCounter;

    function createProfile(
        string memory _name,
        string memory _username,
        string memory _bio,
        string memory _location,
        string memory _profilePic,
        string memory _coverPic
    ) public {
        require(
            bytes(profiles[msg.sender].username).length == 0,
            "User already exists."
        );
        Profile memory newProfile = Profile(
            _name,
            _username,
            _bio,
            _location,
            _profilePic,
            _coverPic
        );
        profiles[msg.sender] = newProfile;
    }

    mapping(address => Profile) public profiles;

    //Check profile exists
    function checkProfile(address _address) public view returns (bool) {
        if (bytes(profiles[_address].username).length > 0) {
            return true;
        } else {
            return false;
        }
    }
}

And I've generated the contract address and abi by deploying the code using hardhat.

Then called the function form the frontend like this

  const checkProfileIsExist = async () => {
    try {
      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();
      const contract = new ethers.Contract(
        CONTRACT_ADDRESS,
        CONTRACT_ABI,
        signer
      );
      const response = await contract.checkProfile(account);
      console.log(response, "res");
    } catch (error) {
      console.error(error, "ERROR");
    }
  }

const onSubmit = async (data) => {
    try {
      if (disabled) return;
      const { coverPic, profilePic, name, username, location, bio } = data;
      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        CONTRACT_ADDRESS,
        CONTRACT_ABI,
        signer
        );
      const response = await contract.createProfile(
        name,
        username,
        bio,
        location,
        profilePic,
        coverPic
      );
      await response.wait();
      console.log(response, "response");
    } catch (error) {
      console.error(error, "ERROR");
    }
  };

When I run the code, The "checkProfileIsExist" function works since it's a get function. BUt the "onSubmit" function is not working. It throws the error,

contract runner does not support sending transactions (operation="sendTransaction", code=UNSUPPORTED_OPERATION, version=6.8.0)

This is my hardhat.config file,

require("@nomicfoundation/hardhat-toolbox");

/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
  solidity: "0.8.19",
  networks: {
    sepolia: {
      url: `https://eth-sepolia.g.alchemy.com/v2/${API_KEY}`,
      accounts: [
        `${PRIVATE_KEY}`,
      ],
    },
  },
};

I don't know why this error comes. No documentation is clear about it. Any help on this would be appreciated since I'm new to blockchain dev.

Answer 1

So by digging a lot, I finally found the reason for the error. The issue is with the ethers version 6. I think this version of ethers is still unstable. That's why I couldn't able to find the cause since it's new version. The compatible version of ethers is version 5.7.2. When I downgraded the version, the issue got fixed.

Answer 2

In your code const signer = provider.getSigner();, the function getSigner returns a promise, so if you add await, it will solve the issue.

The updated code will look like this:

const signer = await provider.getSigner();

Adding await ensures that the signer is properly awaited, allowing you to work with it once the promise is resolved.