Unable to create a type safe abstraction that runs simulation and exposes a write function

[DorianWilhelm]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

Hi,

Goal:
Create a typesafe abstracted hook that combines useSimulateContract and useWriteContract.

Description:
Hook takes the same input as useSimulateContract, runs the simulation and modifies the writeContract function from useWriteContract so that it uses the returned request from the simulation.

Problem:
The type for data.request and the input for writeContract do not match.

I have a created a stripped down version of the hook that just demonstrates the type mismatch.

I have seen a couple of these abstractions around and it seems that nobody is able to actually solve the type mismatch. Every example I have seen so far is using an as any assertion here. (e.g. see this one here from a mod of the wevm discord https://stackblitz.com/edit/wagmi-use-write-hook-wrapper?file=src/hooks/helpers/use-write-contract-callbacks.ts,src/hooks/helpers/use-write-hook-with-receipt-callback.ts )

Would love to hear if I'm making a mistake here somewhere or if this is currently just not possible.

Thank you so much 🙏

Link to Minimal Reproducible Example

https://stackblitz.com/edit/vitejs-vite-cflpir?file=src%2FuseTypedTransaction.ts

Steps To Reproduce

import { type Config, type ResolvedRegister } from '@wagmi/core';
import {
  type ContractFunctionArgs,
  type ContractFunctionName,
  type Abi,
} from 'viem';
import {
  useSimulateContract,
  type UseSimulateContractParameters,
  useWriteContract,
} from 'wagmi';

import { type config as wagmiConfig } from './config';

export const useTypedTransaction = <
  abi extends Abi,
  chainId extends (typeof wagmiConfig)['chains'][number]['id'],
  functionName extends ContractFunctionName<
    abi,
    'nonpayable' | 'payable'
  > = ContractFunctionName<abi, 'nonpayable' | 'payable'>,
  context = unknown,
  args extends ContractFunctionArgs<
    abi,
    'nonpayable' | 'payable',
    functionName
  > = ContractFunctionArgs<abi, 'nonpayable' | 'payable', functionName>,
  config extends Config = ResolvedRegister['config']
>(
  parameters: UseSimulateContractParameters<
    abi,
    functionName,
    args,
    config,
    chainId
  >
) => {
  const { data } = useSimulateContract<
    abi,
    functionName,
    args,
    config,
    chainId
  >(parameters);

  const { writeContract } = useWriteContract<config, context>();

  const write = () =>
    writeContract<abi, functionName, args, chainId>(data?.request); // unable to solve this type mismatch; only solution so far is to use an `as any` assertion.

  return {
    write,
  };
};

What Wagmi package(s) are you using?

wagmi

Wagmi Package(s) Version(s)

wagmi@^2.12.1

Viem Version

viem@^2.18.5

TypeScript Version

typescript@^5.5.3

Anything else?

No response

[flymauntains]

Note my code.

import Config from "src/settings/config";
import { estimateGas, writeContract, waitForTransactionReceipt } from '@wagmi/core'
import { toast } from "react-toastify";
import { encodeFunctionData, parseUnits } from 'viem'
import contributeABI from "src/abi/contribute.json";

export const MSG_UNSTAKE = `Your lock time has been ended, you can unstake now instead of withdraw rewards`

export const toastConfig = {
    style: {
        fontFamily: "Orbitron",
        fontSize: "20px",
        textTransform: "uppercase",
        borderColor: "black",
        borderWidth: "2px",
        borderRadius: "0px",
    }
}

export function getDefaultGas() {
    return Config.DEFAULT_GAS
}

export function formatNumber(num) {
    if (num >= 1e12) {
        return (num / 1e12).toFixed(2) + 'T';
    } else if (num >= 1e9) {
        return (num / 1e9).toFixed(2) + 'B';
    } else if (num >= 1e6) {
        return (num / 1e6).toFixed(2) + 'M';
    } else if (num >= 1e3) {
        return (num / 1e3).toFixed(2) + 'K';
    } else {
        return num.toFixed(2);
    }
}

export const handleContribute = async (errMsg, btnMsg, config, setPending, refresh, setRefresh, amount, account) => {
    if (errMsg === `` && btnMsg === 'Contribute') {
        setPending(true)
        try {
            let data = {
                address: Config.CONTRIBUTE,
                abi: contributeABI,
                functionName: 'contribute',
                args: [parseUnits(amount.toString(), Config.BEPE_DEC)],
            }
            const encodedData = encodeFunctionData(data)
            await estimateGas(config, {
                ...account,
                data: encodedData,
                to: data.address,
            })

            const txHash = await writeContract(config, {
                ...account,
                ...data,
            })

            const txPendingData = waitForTransactionReceipt(config, {
                hash: txHash
            })
            toast.promise(txPendingData, {
                pending: "Waiting for pending... 👌",
            }, toastConfig);

            const txData = await txPendingData;
            if (txData && txData.status === "success") {
                toast.success(`Successfully contributed ${formatNumber(parseFloat(amount))} $BEPE! 👍`, toastConfig)
            } else {
                toast.error("Error! Transaction is failed.", toastConfig);
            }
        } catch (error) {
            // console.log('unstake error: ', error)
            try {
                if (error?.shortMessage) {
                    toast.error(error?.shortMessage, toastConfig);
                } else {
                    toast.error("Unknown Error! Something went wrong.", toastConfig);
                }
            } catch (error) {
                toast.error("Error! Something went wrong.", toastConfig);
            }
        }
        try {
            if (setRefresh !== undefined && refresh !== undefined) {
                setRefresh(!refresh)
            }
        } catch (error) { }
        setPending(false)
        return
    }

    toast.warn(errMsg, toastConfig)
}

I think that my code is compelte soultion according to your quiz, but possible help to your quiz.