Lesson 10: where do "onSuccess" & "onError" parameters come from in "enterRaffle()" function

[tsuccar]

I don't understand why enterRaffle() below take those parameters. In Raffle.sol, we did not code those parameter and do not have those parameters. How do they get added ?

        <div className="p-5">
            <h1 className="py-4 px-4 font-bold text-3xl">Lottery</h1>
            {raffleAddress ? ( //only if the raffle address exists and not null.
                <>
                    <button
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
                        onClick={async () =>
                            await enterRaffle({
                                // **_onComplete_:**
                                // **_onErro_r**:
                                onSuccess: handleSuccess,
                                onError: (error) => console.log(error),//good practice to add these on all 'runContractFunctions'
                            })
                        }
                        disabled={isLoading || isFetching}
                    >
                        {isLoading || isFetching ? (
                            <div className="animate-spin spinner-border h-8 w-8 border-b-2 rounded-full"></div>
                        ) : (
                            "Enter Raffle"
                        )}
                    </button>
                    <div>Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH</div>
                    <div>The current number of players is: {numberOfPlayers}</div>
                    <div>The most previous winner was: {recentWinner}</div>
                </>
            ) : (
                <div>Please connect to a supported chain </div>
            )}
        </div>
    )`

[krakxn]

Do you mean this snippet specifically?

await enterRaffle({
                                // **_onComplete_:**
                                // **_onErro_r**:
                                onSuccess: handleSuccess,
                                onError: (error) => console.log(error),//good practice to add these on all 'runContractFunctions'
                            })

[tsuccar]

Yes. those.

[shoaibshebi]

Hey @tsuccar

👉 In short: these are the two methods that you will see in almost every hook provided by Moralis because all these kinds of trx calls are async and you always have to ensure that either the call is Sucess or Failed after executing. So these are always provided by default and have to do none of with your Contract parameters

👉 In detail:

As we are getting enterRaffle from there

const {
        runContractFunction: enterRaffle,
        data: enterTxResponse,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        msgValue: entranceFee,
        params: {},
    })

YOu can see that enterRaffle is the alias of runContractFunction and runContractFunction don't know anything about your actual contract enterRaffle. So functionName: "enterRaffle", this is the actually thing, that you are telling to useWeb3Contract() hook to call your enterRaffle function, and this params: {}, is telling that you are not passing any params to your actually contract

👉You can also do like that if you don't like above: Alternate method

const data = await runContractFunction({
            params: {
                  abi: abi,
                  contractAddress: raffleAddress,
                  functionName: "enterRaffle",
                 msgValue: entranceFee,
                 params: {},
            },
           onSuccess:(data)=>console.log(data),
            onError: (error) => console.log(error),
        })

Cheers 🍻
Ask me if you don't get it 👍

[tsuccar]

Thank you. @shoaibshebi for detailed answer. The alternative example you have gave, cemented it for me. I tried to find and read up on how {useWeb3Contract } from "react-moralis" is coded in documentations. npm/github is is rather quick setup docs but not detailed enough as you have explained it above.

[shoaibshebi]

My pleasure
Feel free to mention me in the questions. Will happy to help you at any point
:)

[tsuccar]

Will do. Thank you. I have a few :)