wagmi

Replace WagmiConfig with WagmiProvider, add a QueryClientProvider wrapper, and use createConfig with per-chain transports instead of createClient. Rename hooks: useContractRead becomes useReadContract, useContractWrite becomes useWriteContract, and usePrepareContractWrite is replaced by useSimulateContract.

Use useReadContract with the contract address, an ABI declared with as const, the function name, and args. The hook returns data typed from the ABI, plus isLoading and error states from TanStack Query. For batched reads, use useReadContracts to send a single multicall.

wagmi v2 delegates all caching to TanStack Query, so the app must be wrapped in both WagmiProvider and QueryClientProvider. Create a QueryClient instance and pass it to QueryClientProvider inside WagmiProvider.

Yes, set ssr: true in createConfig and use cookieStorage via createStorage. In the root layout, call cookieToInitialState with the request cookies and pass the result to WagmiProvider to avoid hydration mismatches.

Read the current allowance with useReadContract, compare it to the required amount, and call approve via useWriteContract only if the allowance is insufficient. Wait for the approval receipt with useWaitForTransactionReceipt, refetch the allowance, then execute the main transaction.

The ABI array must be declared with as const for TypeScript to infer function names, argument types, and return types. Without as const, args become unknown[] and autocomplete is lost.