feat(react, actions): Generate a combined simulate-write-wait hook (e.g., swwContractName, useSwwContractName)

[thanhhoa214]

Introduction

First off, I want to say thank you for the incredible work on Wagmi CLI. The react and actions plugins are a massive developer experience win and save an enormous amount of my time, I'm using it as a go-to for all my wagmi project.

Problem

The current plugins generate useWriteContractNameFunction mutation hooks, which is fantastic. However, in practice, I've found that I never use this hook directly.

My typical workflow for any contract write operation involves a three-step process by redefining using useMutation:

1. Simulate: Call simulateContractName to prepare the transaction and, most importantly, check for simulation errors before prompting the user.
2. Write: Use writeContractName with the reused params from simulate call in step 1.
3. Wait: Take the hash from the write result and pass it to waitForTransactionReceipt to get the final confirmation and handle the complete loading state for the user.

Proposed Solution

I'd like to propose an enhancement: automatically generate a higher-order hook that encapsulates this entire simulate-write-wait (sww) flow.

Following the existing naming convention, if the CLI generates useWriteErc20Approve, it would also generate a hook named useSwwErc20Approve.

Code Example: Current vs. Expected

Here is a practical example of the boilerplate required today versus the ideal experience with this new feature.

👎 Current Verbose Workflow

To wire up a single "Approve" button, I need to combine three hooks and manage all their states manually.

const purchaseM = useMutation(
  ...
  toast.loading('Minting your NFT...', { duration: Infinity })
  const args = [wagmiConfig, { args: [] }] as const
  await simulateShopPurchase(...args)
  const hash = await writeShopPurchase(...args)
  await waitForTransactionReceipt(wagmiConfig, { hash })
  ...
);

<button loading={purchaseM.isPending} />

👍 Expected Simplified Workflow

import { useSwwErc20Approve } from 'generated-wagmi';

function ApproveButton() {
  const {
    write,       // The function to initiate the *entire* flow
    data: receipt, // The final transaction receipt
    isPending,   // A single, combined loading state for all 3 steps
    error,       // A single, combined error state
    // (Optional) Could also expose sub-states if needed
    // isSimulating, isWriting, isWaiting 
  } = useSwwErc20Approve();

  const handleSubmit = () => {
    // The hook internally handles simulation before writing
    write({
      args: [/* spender */, /* amount */],
    });
  };

  return (
    <>
      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? "Approving..." : "Approve"}
      </button>
      {error && <p>Error: {error.message}</p>}
      {receipt && <p>Success!</p>}
    </>
  );
}

Why This Is Useful

• Reduces Boilerplate: Drastically cuts down on the repetitive logic needed for every write action.
• Improves DX: Provides a much simpler, production-ready experience that mirrors how developers actually use write hooks.
• Simplified State Management: Consolidates multiple loading states and error states into one, making UI development much easier.

This would apply to the actions plugin as well, perhaps by generating an async swwContractName function that takes the simulation args and returns a promise that resolves with the transaction receipt.

Please upvote if you get the same usage pattern.