ContractWrite does not get the latest value from state

[blankia1]

Hi

Im doing an useContractWrite but one of the arguments is not filled in the real payload/input data on the Blockchain. When I console log the request I can see that the arguments are correct. However when I see the input data on the Blockchain the debouncedToEncodedData is empty. I tried a lot of different variations and probably am doing something really weird. Please advice on how to do this correctly? It feels like there is some race condition.

const [debouncedToEncodedData] = useDebounce(encodedData, 500) // Maybe really not needed?

const { config: config_request_approval } = usePrepareContractWrite({
address: contractAddress,
abi: ABI,
functionName: 'requestApproval',
gasLimit: 50000000,
args: [customERC20ContractAddress, "transfer", debouncedToEncodedData],
onSuccess(data) {
console.log("config_request_approval", "Success", "data", data, debouncedToEncodedData);
},
onError(err) {
console.error("error", err.message);
},
});

const { data, isLoading, isSuccess, write: requestApproval } = useContractWrite(config_request_approval)

Then its getting the encoded data from here:
setEncodedData(encodeFunctionData({
abi: erc20ABI,
functionName: 'transfer',
args: [debouncedTo, debouncedAmount]
}))

useEffect(() => {
requestApproval?.()
}, [encodedData])

[ombayoeco11]

requestApproval is using what? as far as i know, requestApproval is usually using 2 args. Owner Address, Spender Address. i dunno why you put function name in the arguments.

const [approve, setApprove] = useState()
const reqApprove = () => {
const { request} = usePrepareContractWrite({
address: contractAddress,
abi: ABI,
functionName: 'requestApproval',
gasLimit: 50000000,
args: [customERC20ContractAddress, spenderAddress],
});

const {data} = useContractWrite(request)
if(data) {
setApprove(data) //or you might use console.log(data) first
}

};

useEffect(() => {
reqApprove():
},[setApprove])

perhaps something like this?

[ombayoeco11]

shoot! i forgot...the hooks cannot be used inside a function.
replace usePrepareContract and useContractWrite with this one

import {  prepareWriteContract,  writeContract,  waitForTransaction } from "@wagmi/core";

const [approve, setApprove] = useState()

const reqApprove = () => {
const { request } = prepareContractWrite({
address: contractAddress,
abi: ABI,
functionName: 'requestApproval',
gasLimit: 50000000,
args: [customERC20ContractAddress, spenderAddress],
});

const { hash } = contractWrite(request)

const data = await waitForTransaction({ hash });
if(data) {
setApprove(data) //or you might use console.log(data) first
}

};

try something like this.

[blankia1]

Thanks for your help. I think I got something working now.

[Surya-Git-hub]

Thanks for your help. I think I got something working now.

hi i was also trying to encode function data to generate calldata but it was not working can you please share how you got it working.

[chilljello]

they have changed the code very often.. now i am lost from read the documentation from the official ones.. they are not working.

[MbBrainz]

@chilljello I think the current docs are pretty clear. Something i found confusing at first is that when you call the useWriteContract hook, you do not input the actual transaction data just yet. That you do when you actually call the writeContract function. This should be more clear from this part in the docs: https://wagmi.sh/react/guides/write-to-contract#_4-hook-up-the-usewritecontract-hook