TypeScript compatibility issues with viem v2 / wagmi v3

[emberdragonc]

TypeScript compatibility issues with viem v2 / wagmi v3

Summary

When integrating @metamask/smart-accounts-kit with a fresh Next.js 15 + wagmi v3 + viem v2 project, several TypeScript errors occur due to version mismatches and API changes. This issue documents the problems and workarounds.

Environment

• @metamask/smart-accounts-kit: latest
• wagmi: 3.4.2
• viem: 2.x
• next: 15.x
• typescript: 5.7.x

Issues Encountered

1. sendTransaction requires kzg property (viem v2)

Error:

Property 'kzg' is missing in type '{ to: `0x${string}`; data: `0x${string}`; value: bigint; }' 
but required in type 'ExactRequired<{ kzg?: Kzg; }>'.

Cause: viem v2 added EIP-4844 (blob transaction) support, making kzg required in the type signature even for non-blob transactions.

Workaround:

const txHash = await walletClient.sendTransaction({
  to: tx.to,
  data: tx.data,
  value: BigInt(tx.value || '0'),
} as unknown as Parameters<typeof walletClient.sendTransaction>[0]);

Suggested fix: The SDK's transaction types should be compatible with viem v2's stricter typing, or provide type-safe wrappers that handle the kzg property correctly.

2. useBalance no longer supports token parameter (wagmi v3)

Error:

'token' does not exist in type 'UseBalanceParameters'

Cause: wagmi v3 removed the token parameter from useBalance. ERC20 balances now require useReadContract with the ERC20 ABI.

Workaround:

// Before (wagmi v1/v2)
const { data: usdcBalance } = useBalance({
  address,
  token: USDC_ADDRESS,
});

// After (wagmi v3)
const erc20Abi = [{
  name: 'balanceOf',
  type: 'function',
  stateMutability: 'view',
  inputs: [{ name: 'account', type: 'address' }],
  outputs: [{ name: 'balance', type: 'uint256' }],
}] as const;

const { data: usdcBalance } = useReadContract({
  address: USDC_ADDRESS,
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [address],
});

Suggested fix: Update SDK examples and documentation to reflect wagmi v3 API changes.

3. Transport type inference issues with dynamic chain IDs

Error:

Type '{ [x: number]: HttpTransport<undefined, false>; }' is missing the following properties 
from type 'Record<8453 | 84532, Transport<string, Record<string, any>, EIP1193RequestFn>>': 8453, 84532

Cause: Using computed property keys [targetChain.id] for transports doesn't satisfy the literal type requirements.

Workaround:

// Before
const config = createConfig({
  chains: [targetChain],
  transports: {
    [targetChain.id]: http(),
  },
});

// After - explicitly list all chains
const config = createConfig({
  chains: [base, baseSepolia],
  transports: {
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
});

Recommendations

1. Pin compatible versions - Document tested version combinations in the README
2. Provide type-safe wrappers - Export helper functions that handle viem v2's stricter types
3. Update examples - Ensure all code examples work with wagmi v3 + viem v2
4. Add integration tests - Test against latest wagmi/viem versions in CI

Related

• viem v2 migration guide: https://viem.sh/docs/migration-guide
• wagmi v2 migration guide: https://wagmi.sh/react/guides/migrate-from-v1-to-v2

---

Happy to submit a PR with documentation updates or type compatibility improvements if helpful!