EN

Deploy Wtfswap contract

Author of this section: @Fish

in this lecture, we will deploy Wtfswap to the test network Sepolia to formally complete our course.

Contract Deployment

similar to deploying the contract to the local test node, we can use Hardhat Ignition to deploy the contract to the test network.

First we need hardhat.config.ts configure the network information for the test network in: 

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox-viem";

const config: HardhatUserConfig = {
  solidity: {
    version: "0.8.24",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200,
      },
    },
  },
+  networks: {
+    sepolia: {
+      url: "https://api.zan.top/public/eth-sepolia", // 实际项目中需要替换为你的 ZAN 的 RPC 地址，这里用的是测试用的公共地址，可能不稳定
+      accounts: ["YOUR_PRIVATE_KEY"], // 替换为你的钱包私钥
+    },
+  },
};

export default config;

in the configuration you need to configure two key information:

  1. the RPC address of the network. The test network address of ZAN is used here. In the actual project, replace it with your RPC address. You can be in https://zan.top/service/apikeys find the RPC addresses of various available networks, except for the test network, the Ethernet main network and other Ethernet L2 networks.
  2. Wallet private key, it is important to note that you should protect your wallet private key. It is recommended to use a secure computer environment and a dedicated wallet to deploy contracts. In addition, you can also consider using CloudIDE to exchange wallets to deploy contracts, which is safer and can also avoid relying on chain poisoning (such as poisoning a package that Hardhat depends on).

Execute after configuration npx hardhat ignition deploy ./ignition/modules/Wtfswap.ts --network sepolia You can deploy the Wtfswap contract to the test network. Here is the log of the course development is deployed: 

npx hardhat ignition deploy ./ignition/modules/Wtfswap.ts --network sepolia
✔ Confirm deploy to network sepolia (11155111)? … yes
Hardhat Ignition 🚀

Deploying [ Wtfswap ]

Batch #1
  Executed Wtfswap#PoolManager

Batch #2
  Executed Wtfswap#PositionManager
  Executed Wtfswap#SwapRouter

[ Wtfswap ] successfully deployed 🚀

Deployed Addresses

Wtfswap#PoolManager - 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
Wtfswap#PositionManager - 0x59ebEa058E193B64f0E091220d5Db98288EFec57
Wtfswap#SwapRouter - 0xA8b9Fa84A4Df935e768d3cC211E3d679027d0B31

similarly, we also deployed the test Token to the test network: 

npx hardhat ignition deploy ./ignition/modules/DebugToken.ts --network sepolia
✔ Confirm deploy to network sepolia (11155111)? … yes
Hardhat Ignition 🚀

Resuming existing deployment from ./ignition/deployments/chain-11155111

Deploying [ DebugToken ]

Warning - previously executed futures are not in the module:
 - Wtfswap#PoolManager
 - Wtfswap#PositionManager
 - Wtfswap#SwapRouter

Batch #1
  Executed DebugToken#DebugTokenA
  Executed DebugToken#DebugTokenB
  Executed DebugToken#DebugTokenC

[ DebugToken ] successfully deployed 🚀

Deployed Addresses

Wtfswap#PoolManager - 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
Wtfswap#PositionManager - 0x59ebEa058E193B64f0E091220d5Db98288EFec57
Wtfswap#SwapRouter - 0xA8b9Fa84A4Df935e768d3cC211E3d679027d0B31
DebugToken#DebugTokenA - 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16
DebugToken#DebugTokenB - 0x00E6EC12a0Fc35d7064cD0d551Ac74A02bA8a5A5
DebugToken#DebugTokenC - 0x1D46AD43cc80BFb66C1D574d2B0E4abab191d1E0

as shown above, you can see that the contract has been deployed to the test network. We open PoolManager address of Contract https://sepolia.etherscan.io/address/0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896#code you can see that the contract has been successfully deployed:

however, we can see that the deployment will only publish the compiled content of the contract to the network, and the source code of the contract will not be published to the network, and we cannot see the source code on the blockchain browser. Next, we will do contract certification and submit the source code to Etherscan.

Contract Certification

the authentication of smart contracts is to allow users to view the source code of the contract and verify the legitimacy of the contract. We can use Hardhat's verify command to submit the contract source code to Etherscan. You need to be in https://etherscan.io/myapikey get your API Key, and then hardhat.config.ts configuration in:

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox-viem";

const config: HardhatUserConfig = {
  solidity: {
    version: "0.8.24",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200,
      },
    },
  },
  networks: {
    sepolia: {
      url: "https://api.zan.top/public/eth-sepolia", // 实际项目中需要替换为你的 ZAN 的 RPC 地址，这里用的是测试用的公共地址，可能不稳定
      accounts: ["YOUR_PRIVATE_KEY"], // 替换为你的钱包私钥
    },
  },
+  etherscan: {
+    apiKey: {
+      sepolia: "YOUR_ETHERSCAN_API_KEY", // 替换为你的 Etherscan API Key
+    },
+  },
};

export default config;

Next, we execute each contract separately. npx hardhat verify --network sepolia [ContractAddress] command to submit the contract source code to Etherscan. Below is the log submitted during course development.

Certified PoolManager contract: 

npx hardhat verify --network sepolia 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
Successfully submitted source code for contract
contracts/wtfswap/PoolManager.sol:PoolManager at 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
for verification on the block explorer. Waiting for verification result...

Successfully verified contract PoolManager on the block explorer.
https://sepolia.etherscan.io/address/0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896#code

authenticate the PositionManager contract (you need to use the PoolManager contract address as a parameter): 

npx hardhat verify --network sepolia 0x59ebEa058E193B64f0E091220d5Db98288EFec57 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
Successfully submitted source code for contract
contracts/wtfswap/PositionManager.sol:PositionManager at 0x59ebEa058E193B64f0E091220d5Db98288EFec57
for verification on the block explorer. Waiting for verification result...

Successfully verified contract PositionManager on the block explorer.
https://sepolia.etherscan.io/address/0x59ebEa058E193B64f0E091220d5Db98288EFec57#code

authenticate the swarouter contract (you need to use the PoolManager contract address as a parameter): 

npx hardhat verify --network sepolia 0xA8b9Fa84A4Df935e768d3cC211E3d679027d0B31 0xF35DE8597A617cfA23de794BCBB4c2f8fc9bC896
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
Successfully submitted source code for contract
contracts/wtfswap/SwapRouter.sol:SwapRouter at 0xA8b9Fa84A4Df935e768d3cC211E3d679027d0B31
for verification on the block explorer. Waiting for verification result...

Successfully verified contract SwapRouter on the block explorer.
https://sepolia.etherscan.io/address/0xA8b9Fa84A4Df935e768d3cC211E3d679027d0B31#code

To authenticate each DebugToken contract (Token information is required as a parameter): 

npx hardhat verify --network sepolia 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16 "DebugTokenA" "DTA"
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
Successfully submitted source code for contract
contracts/wtfswap/test-contracts/DebugToken.sol:DebugToken at 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16
for verification on the block explorer. Waiting for verification result...

Successfully verified contract DebugToken on the block explorer.
https://sepolia.etherscan.io/address/0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16#code

npx hardhat verify --network sepolia 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16 "DebugTokenB" "DTB"
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
The contract 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16 has already been verified on Etherscan.
https://sepolia.etherscan.io/address/0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16#code
npx hardhat verify --network sepolia 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16 "DebugTokenC" "DTC"
[INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

sourcify: {
  enabled: true
}

Or set 'enabled' to false to hide this message.

For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
The contract 0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16 has already been verified on Etherscan.
https://sepolia.etherscan.io/address/0x5AAB2806D12E380c24C640a8Cd94906d7fA59b16#code

front-end deployment

the front-end deployment we had in the previous course Next.js Deployment I have already talked about it, so I won't repeat it here. You can refer to that section to deploy the front end.

However, we need to change the contract address before deployment, because our contract has been deployed to the test network. You need to modify demo/utils/common.ts in getContractAddress methods, and builtInTokens configuration.

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

const builtInTokens: Record<string, Token> = {
  //... 内容太多，不在这里展开，请参考 ../demo/utils/common.ts 中的代码。
};

As shown above, we will use the contract address of the Sepolia test network in the production environment and the contract address of the local test network in the development environment.

Finally, we also need to put demo/components/WtfLayout/index.tsx in Mainnet network changed Sepolia network, also need to add Sepolia network RPC, we used here ZAN the RPC service. 

import React from "react";
import Header from "./Header";
import styles from "./styles.module.css";
import {
  MetaMask,
  OkxWallet,
  TokenPocket,
  WagmiWeb3ConfigProvider,
  WalletConnect,
  Hardhat,
-  Mainnet,
+  Sepolia,
} from "@ant-design/web3-wagmi";
import { useAccount } from "wagmi";

interface WtfLayoutProps {
  children: React.ReactNode;
}

const LayoutContent: React.FC<WtfLayoutProps> = ({ children }) => {
  const { address } = useAccount();
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    setLoading(false);
  }, []);

  if (loading || !address) {
    return <div className={styles.connectTip}>Please Connect First.</div>;
  }
  return children;
};

const WtfLayout: React.FC<WtfLayoutProps> = ({ children }) => {
  return (
    <WagmiWeb3ConfigProvider
      eip6963={{
        autoAddInjectedWallets: true,
      }}
-      chains={[Mainnet, Hardhat]}
+      chains={[Sepolia, Hardhat]}
+      transports={{
+        [Hardhat.id]: http("http://127.0.0.1:8545"),
+        [Sepolia.id]: http("https://api.zan.top/public/eth-sepolia"),
+      }}
      ens
      wallets={[
        MetaMask(),
        WalletConnect(),
        TokenPocket({
          group: "Popular",
        }),
        OkxWallet(),
      ]}
      walletConnect={{
        projectId: "c07c0051c2055890eade3556618e38a6",
      }}
    >
      <div className={styles.layout}>
        <Header />
        <LayoutContent>{children}</LayoutContent>
      </div>
    </WagmiWeb3ConfigProvider>
  );
};

export default WtfLayout;

At this point, we have completed all the main contents of Wtfswap course, you can visit https://wtf-dapp.vercel.app/wtfswap experience the final version, spread the flowers .