Front-end and chain interaction preparation

Author of this section: @Fish

at the beginning of this lecture, we will prepare the related work of front-end and chain coordination, and prepare for the interaction between the development front-end and chain.

Add a token contract for testing

to facilitate testing, we create a new one. wtfswap/test-contracts/DebugToken.sol contract, for testing. The contract code is as follows:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract DebugToken is ERC20 {
    uint256 private _nextTokenId = 0;

    constructor(string memory name, string memory symbol) ERC20(name, symbol) {}

    function mint(address recipient, uint256 quantity) public payable {
        require(quantity > 0, "quantity must be greater than 0");
        require(
            quantity < 10000000 * 10 ** 18,
            "quantity must be less than 10000000 * 10 ** 18"
        );
        _mint(recipient, quantity);
    }
}

the contract can specify the token name at the time of deployment, and can mint tokens at will (we simply made a single mint limit).

Then we add a new deployment file ignition/modules/DebugToken.ts , used to deploy three token contracts for testing:

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";

const DebugTokenModule = buildModule("DebugToken", (m) => {
  const debugTokenA = m.contract("DebugToken", ["DebugTokenA", "DTA"], {
    id: "DebugTokenA",
  });
  const debugTokenB = m.contract("DebugToken", ["DebugTokenB", "DTB"], {
    id: "DebugTokenB",
  });
  const debugTokenC = m.contract("DebugToken", ["DebugTokenC", "DTC"], {
    id: "DebugTokenC",
  });

  return {
    debugTokenA,
    debugTokenB,
    debugTokenC,
  };
});

export default DebugTokenModule;

local Deployment Contract

we need to run a test chain node test locally, first in demo-contracts run under directory:

npx hardhat node# Start a local chain development and debugging node

then open a new terminal to deploy the Wtfswap contract and DebugToken contract respectively:

npx hardhat compile # 编译合约
npx hardhat ignition deploy ./ignition/modules/Wtfswap.ts --network localhost # 部署 Wtfswap 合约
npx hardhat ignition deploy ./ignition/modules/DebugToken.ts --network localhost # 部署 DebugToken 合约

more details can refer contract Local Development and Testing Environment and initializing Contracts and Development Environments.

It should be noted that when deployed locally, the contract address will be assigned a fixed address according to the deployment order, so to ensure that the contract address does not change in subsequent tests, please ensure that the order of deployment contracts after starting the chain remains unchanged. We are in utils/common.ts create a new method getContractAddress used to get the contract address:

export const getContractAddress = (
  contract:
    | "PoolManager"
    | "PositionManager"
    | "SwapRouter"
    | "DebugTokenA"
    | "DebugTokenB"
    | "DebugTokenC"
): `0x${string}` => {
  const isProd = process.env.NODE_ENV === "production";
  if (contract === "PoolManager") {
    return isProd
      ? "0x5FbDB2315678afecb367f032d93F642f64180aa3"
      : "0x5FbDB2315678afecb367f032d93F642f64180aa3";
  }
  if (contract === "PositionManager") {
    return isProd
      ? "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
      : "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
  }
  if (contract === "SwapRouter") {
    return isProd
      ? "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0"
      : "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0";
  }
  if (contract === "DebugTokenA") {
    return isProd
      ? "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9"
      : "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9";
  }
  if (contract === "DebugTokenB") {
    return isProd
      ? "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9"
      : "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9";
  }
  if (contract === "DebugTokenC") {
    return isProd
      ? "0x5FC8d32690cc91D4c39d9d3abcBD16989F875707"
      : "0x5FC8d32690cc91D4c39d9d3abcBD16989F875707";
  }
  throw new Error("Invalid contract");
};

in the future, we will update this method after the contract is deployed to the test network to ensure that the correct contract address can be accessed after the project is deployed.

Update contract interface code

after the contract and chain are ready, we will also update the React Hooks template of the front-end call contract. You need to enter demo update the latest interface of the contract in the directory:

npx wagmi generate

it will be updated according to our configuration utils/contracts.ts file, and then generate code to call the contract we implemented in the previous lesson. For example, you can use it in the next lecture. useReadPoolManagerGetAllPools view the transaction pool and useWritePoolManagerCreateAndInitializePoolIfNecessary create a trading pool. Specific can referDebugging Local Contracts with Wagmi CLI the description of.

Test Token Tap Page

in addition, in order to facilitate subsequent tests, we have also developed a test page to obtain test tokens.

The complete code is in wtfswap/debug.tsx this page will call our DebugToken contract and mint some tokens to the current account.

After starting the project by accessing http://localhost:3000/wtfswap/debug you can receive tokens through this tap page:

at this point, we are ready for the joint debugging of the front end and the chain. At the beginning of the next lecture, we will add relevant codes to improve our DEX front end logic.