Typechain target tanstack-react-query-wagmi

Create typesafe react-query queries, reduce boilerplate and bring consistent react-query hook implementations for contract methods to your dApp.

This package requires TypeScript >= 4.0. This package is also dependent on generating typescript bindings for the typechain ethers-v5 target.

TypeChain readme

React Query Hooks + Typings

The main files generated by this target are <contract-nameQueries>.ts. They declare react-query hooks for your contracts on top of wagmi's useProvider and useSigner hooks and use the typesafe factory classes generated by the typechain ethers-v5 target. The results:

• typed react-query hooks, available as contractQueries.useSomeContractMethod(...) throughout your dApp.

Peer Dependencies

• React Query
• Wagmi

Important Note about Contract factories

This target DOES NOT generate factory classes for each contract, but it does depend on them and the factories directory being in the parent directory of this targets output.

You must run typechain against the ethers-v5 target in addition to this target.

Basic setup

yarn run typechain --target tanstack-react-query-wagmi --out-dir /types/react-query-hooks src/abi/*.json
yarn run typechain --target ethers-v5 --out-dir /types

Why use this generator

This generator significantly reduces boilerplate, yields typesafe react-query results and brings a consistent react-query hook implementation for contract methods to your dApp.

It turns this:

import { useQuery } from "@tanstack/react-query";
import { BigNumber } from "ethers";
import { STAKING_ADDRESS } from "src/constants/addresses";
import { OlympusStakingv2__factory } from "src/typechain";
import { useProvider } from "wagmi";

export const useNextRebaseDate = (networkId: number) => {
  const network = networkId ? { chainId: networkId } : undefined;
  const provider = useProvider(network);
  const contract = OlympusStakingv2__factory.connect(STAKING_ADDRESS, provider);

  return useQuery<BigNumber, Error>(["useNextRebaseDate"], async () => {
    return await contract.secondsToNextEpoch();
  });
};

Into this:

  import { OlympusStakingv2Queries } from "src/typechain/react-query-hooks";

  const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);
  const { data: secondsToRebase } = contract.useSecondsToNextEpoch();

IntelliSense

Basic example

Call the constructor method of your contract queries file with the address and an optional networkId. If networkId is not passed, it will default to current network.

const contract = new OlympusStakingv2Queries(STAKING_ADDRESS, NetworkId.MAINNET);

Interact with static methods

const {data: secondsToRebase } = contract.useSecondsToNextEpoch();

Interact with non static methods / mutations

const stake = contract.useStake();
stake.mutate({ _to: address, _amount: 10000000000 });