how shall I call a solidity function from the front of next.js and the function receive parameter from "prompt" window?

[PatricHenry]

as I know about this, we should define the function of solidity on the front of next.js, such as below:

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

and now we should pass parameters to "params" (here is {"a":1,"b":3})and then define the "button" as below:

<button
    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
    onClick={async () =>
        await enterRaffle({
            onSuccess: handleSuccess,
            onError: (error) => console.log(error),
        })
    }
    disabled={isLoading || isFetching}
>
    {isLoading || isFetching ? (
        <div className="animate-spin spinner-border h-8 w-8 border-b-2 rounded-full"></div>
    ) : (
        "Enter Raffle"
    )}
</button>

now when we click on this button, the function "enterRaffle" would run. but how shall we do if I want to pass parameters by "prompt" window when we click on this button?

[JamesMckenna]

msgValue: entranceFee,

Every solidity function has an implied parameter and argument of "msg". From inside a function scope, we have access to msg.sender and msg.value.

So assuming you are assigning a value to "entranceFee" correctly in your code, the solidity function "enterRaffle" can access it with msg.value. In this case, the "params" key should be an empty object.

const {
runContractFunction: enterRaffle,
data: enterTxResponse,
isLoading,
isFetching,
} = useWeb3Contract({
abi: abi,
contractAddress: raffleAddress,
functionName: "enterRaffle",
msgValue: entranceFee, <-- accessible as "msg.value" inside the function scope
params: {"a":1, "b":3}, <-- should be empty object, enterRaffle function is parameter-less
})

[PatricHenry]

@JamesMckenna Thank you for you reply;
I know here "params" should be empty in this course; but in some other case the "params" should be like "{"a":1, "b":3}", such as "FundMe"； I want to know how shall we set in these situations.

[JamesMckenna]

Patrick demo's this in a later lesson. Here's some partial code.

export default function NFTBox({price, nftAddress, tokenId, marketplaceAddress, seller}){
bunch of code.
const { runContractFunction: getTokenURI } = useWeb3Contract({
abi: nftAbi,
contractAddress: nftAddress,
functionName: "tokenURI",
params: {
tokenId: tokenId <--- in this case, tokenId was injected as an constructor arg.
}
});
const argValue = "value"
const { runContractFunction: bogusCode } = useWeb3Contract({
abi: nftAbi,
contractAddress: nftAddress,
functionName: "bogusCode",
params: {
bogusCodeFuncParam : argValue
}
});

more code
}

[PatricHenry]

Patrick demo's this in a later lesson. Here's some partial code.

export default function NFTBox({price, nftAddress, tokenId, marketplaceAddress, seller}){ bunch of code. const { runContractFunction: getTokenURI } = useWeb3Contract({ abi: nftAbi, contractAddress: nftAddress, functionName: "tokenURI", params: { tokenId: tokenId <--- in this case, tokenId was injected as an constructor arg. } }); const argValue = "value" const { runContractFunction: bogusCode } = useWeb3Contract({ abi: nftAbi, contractAddress: nftAddress, functionName: "bogusCode", params: { bogusCodeFuncParam : argValue } });

more code

@JamesMckenna I have fixed this issure, thank you very much.