Use Wagmi CLI

Author of this section: @Fish

in the previous lecture, we created a local contract project based on Hardhat, and we will continue to create more complex contracts based on this project in future DEX practical courses. As contracts become more and more complex, ABI will become larger and larger. At this time, we need a tool to help us better debug contracts. In this lecture, we will guide you to create code for contract debugging automatically by Wagmi CLI and use it in your project to prepare for the following DEX practical courses.

Initialize Wagmi CLI

follow the steps below to initialize, you can also refer official documentation of Wagmi CLI operation.

Install dependencies:

npm install --save-dev @wagmi/cli

modify Configuration demo/wagmi.config.ts , add hardhat and react plug-ins.

The complete configuration is as follows:

import { defineConfig } from "@wagmi/cli";
import { hardhat } from "@wagmi/cli/plugins";
import { react } from "@wagmi/cli/plugins";

export default defineConfig({
  out: "utils/contracts.ts",
  plugins: [
    hardhat({
      project: "../demo-contract",
    }),
    react(),
  ],
});

execute the following command to generate code:

npx wagmi generate

after execution, you will see the generated code in utils/contracts.ts In, then you can use it more conveniently in the project. utils/contracts.ts the exported React Hooks are used to call the contract.

Code generated with Wagmi CLI

we continue to modify demo/pages/web3.tsx the code that will be used before. useReadContract and useWriteContract replace with the Wagmi CLI-generated code.

// ...
-import {
-  createConfig,
-  http,
-  useReadContract,
-  useWriteContract,
-  useWatchContractEvent,
-} from "wagmi";
+import { createConfig, http, useWatchContractEvent } from "wagmi";
 import { injected, walletConnect } from "wagmi/connectors";
+import {
+  useReadMyTokenBalanceOf,
+  useWriteMyTokenMint,
+} from "@/utils/contracts";

// ...

Modification balanceOf the calling logic of the method:

// ...

-  const result = useReadContract({
-    abi: [
-      {
-        type: "function",
-        name: "balanceOf",
-        stateMutability: "view",
-        inputs: [{ name: "account", type: "address" }],
-        outputs: [{ type: "uint256" }],
-      },
-    ],
+  const result = useReadMyTokenBalanceOf({
     address: contractInfo.find((item) => item.id === chain?.id)
       ?.contractAddress as `0x${string}`,
-    functionName: "balanceOf",
     args: [account?.address as `0x${string}`],
   });

// ...

modification mint the calling logic of the method:

-  const { writeContract } = useWriteContract();
+  const { writeContract: mintNFT } = useWriteMyTokenMint();

// ...

     const CallTest = () => {
       {result.data?.toString()}
       <Button
         onClick={() => {
-          writeContract(
+          mintNFT(
             {
-              abi: [
-                {
-                  type: "function",
-                  name: "mint",
-                  stateMutability: "payable",
-                  inputs: [
-                    {
-                      internalType: "uint256",
-                      name: "quantity",
-                      type: "uint256",
-                    },
-                  ],
-                  outputs: [],
-                },
-              ],
               address: contractInfo.find((item) => item.id === chain?.id)
                 ?.contractAddress as `0x${string}`,
-              functionName: "mint",
               args: [BigInt(1)],
               value: parseEther("0.01"),
             },

in this way, we have completed the initialization and use of Wagmi CLI. Based on this, we can use Wagmi CLI to debug contracts more conveniently in the following DEX actual combat development courses, without manually moving ABI code. This not only makes your code in the project more concise, but also allows us to write some debugging code more quickly and improve development efficiency in addition to contract unit testing.