Moralis Airbnb project, Error in interacting with smart contracts through react

Moralis General
#1

I want to make a front end page for interacting with smart contracts. In the Airbnb tutorial the addRentals function is used inside the ide to store the details of the rentals. I want to create a react page which will allow me to interact with the smart contract functions, allowing me to enter the details into the page and then storing it in DB. I have tried using the web3Executefunction() providing the abi, contract address and the params but it doesn’t seem to work.

error
error1584×388 19.2 KB

the front end react code for calling the function



 const contractProcessor = useWeb3ExecuteFunction();
 const [nameS, setNameS] = useState();
  const [cityS, setCityS] = useState();
  const [latS, setLatS] = useState();
  const [longS, setLongS] = useState();
  const [unoDescriptionS, setUnoDescriptionS] = useState();
  const [dosDescriptionS, setDosDescriptionS] = useState();
  const [pricePerDayS, setPricePerDayS] = useState();
  const [datesBookedS, setDatesBookedS] = useState([]);
async function saveRentals() {

let options = {
      contractAddress: "xxxxxxxxxxx",
      functionName: "addRentals",
      abi: [
        {
          inputs: [
            {
              internalType: "string",
              name: "_name",
              type: "string",
            },
            {
              internalType: "string",
              name: "_city",
              type: "string",
            },
            {
              internalType: "string",
              name: "_lat",
              type: "string",
            },
            {
              internalType: "string",
              name: "_long",
              type: "string",
            },
            {
              internalType: "string",
              name: "_unoDescription",
              type: "string",
            },
            {
              internalType: "string",
              name: "_dosDescription",
              type: "string",
            },
            {
              internalType: "string",
              name: "_imgUrl",
              type: "string",
            },
            {
              internalType: "uint256",
              name: "_pricePerDay",
              type: "uint256",
            },
            {
              internalType: "string[]",
              name: "_datesBooked",
              type: "string[]",
            },
          ],
          name: "addRentals",
          outputs: [],
          stateMutability: "nonpayable",
          type: "function",
        },
      ],
      params: {
        _name: nameS,
        _city: cityS,
        _lat: latS,
        _long: longS,
        _unoDescription: unoDescriptionS,
        _dosDescription: dosDescriptionS,
        _imgUrl: img,
        _pricePerDay: pricePerDayS,
        _datesBooked: datesBookedS,
      },
    };
 await contractProcessor.fetch({
      params: options,
      onSuccess: () => {
        console.log("success");
      },
      onError: (error) => {
        console.log(error.data.message);
      },
    });
}
#2

In your onError, you can just log it directly to see what you can use and what the error is.

Make sure everything is correct; address, ABI, params, chain if it’s not Ethereum.

#3

Is it necessary to specify the chain if it’s not ethereum? I am using polygon matic.
I think I have some error in the params, but I am not able to find the error. Can you check once?
Here is the code of the smart contract. Here I am trying to call the addRentals function through my react page.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract airbnb {

    address public owner;
    uint256 private counter;

    constructor() {
        counter = 0;
        owner = msg.sender;
     }

    struct rentalInfo {
        string name;
        string city;
        string lat;
        string long;
        string unoDescription;
        string dosDescription;
        string imgUrl;
        
        uint256 pricePerDay;
        string[] datesBooked;
        uint256 id;
        address renter;
    }

    event rentalCreated (
        string name,
        string city,
        string lat,
        string long,
        string unoDescription,
        string dosDescription,
        string imgUrl,
        
        uint256 pricePerDay,
        string[] datesBooked,
        uint256 id,
        address renter
    );

    event newDatesBooked (
        string[] datesBooked,
        uint256 id,
        address booker,
        string city,
        string imgUrl 
    );

    mapping(uint256 => rentalInfo) rentals;
    uint256[] public rentalIds;


    function addRentals(
        string memory _name,
        string memory _city,
        string memory _lat,
        string memory _long,
        string memory _unoDescription,
        string memory _dosDescription,
        string memory _imgUrl,
        
        uint256 _pricePerDay,
        string[] memory _datesBooked
    ) public {
        require(msg.sender == owner, "Only owner of smart contract can put up rentals");
        rentalInfo storage newRental = rentals[counter];
        newRental.name = _name;
        newRental.city = _city;
        newRental.lat = _lat;
        newRental.long = _long;
        newRental.unoDescription = _unoDescription;
        newRental.dosDescription = _dosDescription;
        newRental.imgUrl = _imgUrl;
        
        newRental.pricePerDay = _pricePerDay;
        newRental.datesBooked = _datesBooked;
        newRental.id = counter;
        newRental.renter = owner;
        rentalIds.push(counter);
        emit rentalCreated(
               _name, 
                _city, 
                _lat, 
                _long, 
                _unoDescription, 
                _dosDescription, 
                _imgUrl, 
               
                _pricePerDay, 
                _datesBooked,  
                counter, 
                owner);
        counter++;
    }

    function checkBookings(uint256 id, string[] memory newBookings) private view returns (bool){
        
        for (uint i = 0; i < newBookings.length; i++) {
            for (uint j = 0; j < rentals[id].datesBooked.length; j++) {
                if (keccak256(abi.encodePacked(rentals[id].datesBooked[j])) == keccak256(abi.encodePacked(newBookings[i]))) {
                    return false;
                }
            }
        }
        return true;
    }


    function addDatesBooked(uint256 id, string[] memory newBookings) public payable {
        
        require(id < counter, "No such Rental");
        require(checkBookings(id, newBookings), "Already Booked For Requested Date");
        require(msg.value == (rentals[id].pricePerDay * 1 ether * newBookings.length) , "Please submit the asking price in order to complete the purchase");
    
        for (uint i = 0; i < newBookings.length; i++) {
            rentals[id].datesBooked.push(newBookings[i]);
        }

        payable(owner).transfer(msg.value);
        emit newDatesBooked(newBookings, id, msg.sender, rentals[id].city,  rentals[id].imgUrl);
    
    }

    function getRental(uint256 id) public view returns (string memory, uint256, string[] memory){
        require(id < counter, "No such Rental");

        rentalInfo storage s = rentals[id];
        return (s.name,s.pricePerDay,s.datesBooked);
    }
}
#4

Yes you will have to specify the chain if it’s not Ethereum, so try adding chain: "polygon" to your options. And log only error in your onError to find out the error.

#5

You can log the whole error as @alex mentioned or console.log(error.message) to get the error message.
Since you’re trying to interact with the contract, make sure the connected wallet is on the polygon network rather.

#6

Thankyou all for the assistance, my issue is resolved now.