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.
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);
},
});
}