🔌 React Query + wagmi bindings for Ethers 5.x.x smartcontracts
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.
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.
- React Query
- Wagmi
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.
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
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();
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 });