EN

Call Contract

Author of this section: @Fish, @ Xiaofu

the front-end website part of DApp is different from traditional App in that it needs to interact with the block chain. The interaction of the blockchain is mainly achieved by calling smart contracts. In this lecture, we will learn how to invoke smart contracts.

How Dapps call smart contracts

let's take Ethereum as an example. When a smart contract is deployed on the blockchain, we can call the corresponding method in the contract by constructing an Ethereum Transaction (Transaction), provided that we know the ABI file of the contract and the HASH address of the contract.

ABI is an abbreviation of Application Binary Interface, which is a Binary Interface standard used to define the functions and parameters of smart contracts. The contract HASH is the address of the contract on the blockchain, which can be obtained when the smart contract is deployed.

There are generally two ways to call the contract method through DApp: connect through the wallet plug-in and connect directly through the node RPC. We mainly introduce the first way.

Wallet by MetaMask

in the previous course, we have installed MetaMask wallet and received 0.01 SepoliaETH. We can see the balance by switching to Sepolia test network in the wallet:

after the MetaMask wallet is installed, we can see the MetaMask icon in the upper right corner of the browser, and it will also inject every page window.ethereum Object, this object is the interface between DApp and Ethereum network, through which we can call Ethereum API. For example, we could initiate a eth_chainId to obtain the ID of the current network:

await window.ethereum.request({ method: "eth_chainId" }); // 0x 1 represents ethereum MainNet

we can also use the following code to obtain the account address and other information of the current wallet: 

async function getAccount() {
  const accounts = await window.ethereum
    .request({ method: "eth_requestAccounts" })
    .catch((err) => {
      if (err.code === 4001) {
        // EIP-1193 userRejectedRequest error
        // If this happens, the user rejected the connection request.
        console.log("Please connect to MetaMask.");
      } else {
        console.error(err);
      }
    });
  const account = accounts[0];
  return account;
}

await getAccount(); // 你的账户地址

more wallet RPC and API can refer MetaMask official documentation .

Through node RPC

through the previous study, we learned that the blockchain is a decentralized network, and we can access one of the nodes to obtain data. There are many nodes in the Ethereum network, and we can pass ZAN , Infura such as the node service provider to obtain the RPC Interface.

Provided in zan.top documentation in, we can easily test RPC and call smart contract methods through RPC.

Implement relevant code in DApp

from the perspective of DApp coding, calling a contract method usually requires the following steps:

  1. Constructing transaction data
  2. add signature to transaction data by evoking wallet authorization
  3. send the signed transaction data to the blockchain network through the Node Service.

Note: When calling the read-only interface, you do not need to write data to the blockchain, so you do not need to sign the transaction, and you can directly read the data on the blockchain through the Node Service.

Call the Read method of the smart contract.

After configuring the node service, we can start calling the contract. We use the wagmi provided useReadContract Hook to read the contract data. The sample code is as follows: 

- import { http } from "wagmi";
+ import { http, useReadContract } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider, MetaMask } from '@ant-design/web3-wagmi';
- import { Address, NFTCard, ConnectButton, Connector } from "@ant-design/web3";
+ import { Address, NFTCard, ConnectButton, Connector, useAccount } from "@ant-design/web3";


+ const CallTest = () => {
+  const { account } = useAccount();
+  const result = useReadContract({
+    abi: [
+      {
+        type: 'function',
+        name: 'balanceOf',
+        stateMutability: 'view',
+        inputs: [{ name: 'account', type: 'address' }],
+        outputs: [{ type: 'uint256' }],
+      },
+    ],
+    address: '0xEcd0D12E21805803f70de03B72B1C162dB0898d9',
+    functionName: 'balanceOf',
+    args: [account?.address as `0x${string}`],
+   });
+   return (
+     <div>{result.data?.toString()}</div>
+   );
+ }

export default function Web3() {
  return (
    <WagmiWeb3ConfigProvider
      chains={[Mainnet]}
      transports={{
        [Mainnet.id]: http(),
      }}
	  wallets={[MetaMask()]}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
      <NFTCard
        address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
        tokenId={641}
      />
      <Connector>
        <ConnectButton />
      </Connector>
+     <CallTest />
    </WagmiWeb3ConfigProvider>
  );
}

refer to the above code to add the calling contract's balanceOf method, we created a new CallTest component, and then in WagmiWeb3ConfigProvider this component has been added. Because useReadContract must be in WagmiWeb3ConfigProvider internal can work normally, so we can't export default function Web3() { this line of code is used directly below. useReadContract . In the actual project WagmiWeb3ConfigProvider it should usually be the outermost layer of your project components, so that all components of your project can work properly with related Hooks.

balanceOf it is a method used to get how many NFT contracts are under a certain address. So we also need to use @ant-design/web3 provided useAccount Hook to get the address of the currently connected account. The account address is then balanceOf the parameters of the method are passed in, so that you can get how many NFT are under the current account address. If there is no accident, you will get. 0 the result.

The abi field in the code defines the type of the method, so that wagmi knows how to handle the input and return of the method, and the transaction information of the blockchain that converts the object in JavaScript. Usually abi is automatically generated through contract code, which we will cover in the next chapter.

Call the write method of the smart contract.

Just reading the contract is not enough, a real DApp will definitely involve writing data to the smart contract. Writing data to a smart contract is usually done by executing the smart contract on the blockchain, and the data in the contract is rewritten during the execution of the method.

Next, we try to call the next lesson using the contract. mint method, mint method is not a method in the ERC721 specification, it is defined by the contract itself. In this contract, call mint method needs to consume GAS as well as at least 0.01ETH of the cost to get NFT.

The code that needs to be changed is as follows: 

+ import { parseEther } from "viem";
+ import { Button, message } from "antd";
- import { http, useReadContract } from "wagmi";
+ import { http, useReadContract, useWriteContract } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider, MetaMask } from '@ant-design/web3-wagmi';
import { Address, NFTCard, ConnectButton, Connector, useAccount } from "@ant-design/web3";

const CallTest = () => {

// ...
+ const { writeContract } = useWriteContract();

  return (
    <div>
      {result.data?.toString()}
+      <Button
+        onClick={() => {
+          writeContract(
+            {
+              abi: [
+                {
+                  type: "function",
+                  name: "mint",
+                  stateMutability: "payable",
+                  inputs: [
+                    {
+                      internalType: "uint256",
+                      name: "quantity",
+                      type: "uint256",
+                    },
+                  ],
+                  outputs: [],
+                },
+              ],
+              address: "0xEcd0D12E21805803f70de03B72B1C162dB0898d9",
+              functionName: "mint",
+              args: [BigInt(1)],
+              value: parseEther("0.01"),
+            },
+            {
+              onSuccess: () => {
+                message.success("Mint Success");
+              },
+              onError: (err) => {
+                message.error(err.message);
+              },
+            }
+          );
+        }}
+      >
+        mint
+      </Button>
    </div>
  );
};

// ...

in the above code, we use viem this library, it is wagmi A library that depends on the bottom layer, you need to install it in the project:

npm I viem --save

in this code, we implement the Click mint button to call the contract's mint method, passing in parameters 1 , in the implementation logic of the contract, this means to cast an NFT. Since the price per NFT casting is 0.01 ETH , so we also need to send in the transaction. 0.01 ETH Cost, so as to successfully cast NFT. So the above will be configured in the calling contract. value: parseEther("0.01") . In the execution of the contract method in Ethereum, the contract cannot directly extract the caller's ETH, so we need to actively send ETH to the contract when calling the contract, which is a consideration in the security design of the contract.

The success and failure of the contract call will be prompted, if the account is not connected, the error of the account is not connected. So you need to first click the connect button we implemented in the previous lesson to connect your account address.

If your account does not have enough GAS, an error pop-up window similar to the following will appear after clicking:

if your account has enough ETH, an authorization pop-up window similar to the following will appear after clicking:

click reject after that, the contract call will not be executed and will not consume any of your ETH. In the next chapter, we will guide you to deploy a test contract and experience the complete process in a test environment. Of course, if you are rich, you can also click confirm, which will execute the contract call, consume your ETH, and get an NFT.