Call multiple hooks from a single button?

[raffle-x-dev]

I wonder if there's a way (sure there is) to call multiple hooks from a single "onClick="
I need to set an allowance for an erc20 token, send ETH from caller's wallet, and call a mint function once the first two operations are done. What's the best practice to do this? So far I only have separate block of codes for the 3 parts. Need to put them together but I'm struggling a bit, cause wagmi hooks operate only inside components and if I put everything inside one component I have naming problems.

//Allowance:

function ApproveButton ({
  takerAddress,
  onClick,
  sellTokenAddress,
  disabled,
}: {
  takerAddress: Address;
  onClick: () => void;
  sellTokenAddress: Address;
  disabled?: boolean;
}) {
  const { address, isConnecting, isDisconnected } = useAccount()

  const { data: allowance, refetch } = useContractRead({
    address: ERC20_ADDR,
    abi: ERC20abi,
    functionName: "allowance",
    args: [address, exchangeProxy],
  });
  console.log(allowance)

  const { config } = usePrepareContractWrite({
    address: ERC20_ADDR,
    abi: ERC20abi,
    functionName: "approve",
    args: [exchangeProxy, MAX_ALLOWANCE],
  });

  const {
    data: writeContractResult,
    writeAsync: approveAsync,
    error,
  } = useContractWrite(config);

  const { isLoading: isApproving } = useWaitForTransaction({
    hash: writeContractResult ? writeContractResult.hash : undefined,
    onSuccess(data) {
      refetch();
    }

  });

  return (
    <div>
      <button
        onClick={async () => {
          const writtenValue = await approveAsync();
        }}>
        {isApproving ? "Approving…" : "Approve"}
      </button>
    </div>
  )
}


//MINT MYTOKEN HOOK

const {data: d103, isLoading: l103, isSuccess: s103, write: mintMYTOKEN} = useContractWrite({
  ...mytokenContract,
  functionName: 'mintMYTOKEN',
  args: [BigInt(Qty)]
})

<button onClick={() => mintMYTOKEN()}>Mint</button>`




//SEND ETH (this should be inside a component according to Wagmi)

const { config } = usePrepareSendTransaction({
    to: 'MYTOKEN_ADDR',
    value: BigInt(100 * 1e15),
  })
  const { data, isLoading, isSuccess, isError, sendTransaction } =
    useSendTransaction(config)

//this is a try to make ETH + mint together, but doesn't work
<button onClick={async () => {
  const sendEth = await sendTransaction();  //returns: "TypeError: sendTransaction is not a function"
  mintMYTOKEN();
}}>`

[OoXooOx]

You can use useEffect and track isSuccess for approve. After is success inside useEffect you can execute write()
useEffect(() => {
approveIsSuccess &&
writeMint({
args: [2],
});
}, [approveIsSuccess])