Deploy Contract
Author of this section: @LiKang
this session will guide you to deploy the developed smart contract and replace the contract in the DApp with the newly deployed contract.
Compile
click in the Icon panel Solidity Compiler icon to enter the compiler interface. The basic configuration items of the compiler are displayed by default on the interface. Click Advanced Configurations button to open the Advanced Configuration panel. In Advanced Configurations menu, you can change the EVM version, enable optimizations, and set the number of times the bytecode is expected to run during the contract lifetime (the default is 200). For more information on contract optimization, refer to Solidity documentation on Optimizer .
In File explorer open a file in to compile. If you have multiple files open, make sure that the file you want to compile is selected in the editor.
There are three situations that trigger compilation:
- using Shortcut Keys
control/command + s - In File explorer right click on the file and select compile option
- Click the "Compile" button
当编译完成时 Solidity Compiler 图标旁会有一个绿色的完成标志，就像上边图片上的样子。并且 Remix 会为每个已编译合约创建三个 JSON 文件。这些文件可以在 File explorer 插件中看到：
artifacts/<contractName>.json: 包含libraries的链接、bytecode、部署后的bytecode、gas estimation、identifiers和ABI。它用于将库地址与文件进行关联。artifacts/<contractName_metadata>.json: 包含Soliditycompile the output metadata.artifacts/build-info/ <dynamic_hash>.json: contains information aboutsolccompiler version, compiler input and output information.
Just like in the picture below:
ABI is a JSON Array that describes the contract interface.
Click ABI you can copy exports:
deployment
click deploy&Run can send transactions to the current ENVIRONMENT in.
Next, we try to deploy the contract to the test network Sepolia through MetaMask. Please switch your MetaMask to the test network Sepolia first (of course, you can also switch to other test networks that you are used to).
Click ENVIRONMENT the drop-down selection box of, you can see that there are many options to choose from, we choose Injected Provider - MetaMask .
Subsequently, MetaMask the pop-up window will pop up and prompt to connect it to Remix . Will MetaMask connect Remix after that, the side panel will update to show the connected network and account. Deploying to the test network also requires the tokens of the test network. You can find the corresponding token tap of the test network on the network to recharge and use.
Now that the wallet connection is complete, you can begin to deploy the contract. Since a simple ERC721 smart contracts, therefore Remix set the default Gas Limit 3 million is sufficient without specifying the value sent with the deployment. To do this, you can deploy the contract by following these steps:
- make sure
ENVIRONMENTsetInjected Provider - MetaMask - make sure the connected account is the account you want to deploy
- use the default
GAS LIMIT:3000000 - no need to adjust the set
VALUE:0 - Ensure that the selected contract is
MyToken.sol - click
Deploy - click
transactsend Deployment Transaction MetaMaskthe pop-up window will pop up and click to confirm the deployment contract.
After the transaction is deployed, you will Remix the terminal sees the details of the deployment transaction. In addition, the contract will appear on the side panel of Deployed Contracts partially below. It is collapsed by default and can be expanded by clicking the small arrow.
You can try to expand and then call mint , as shown in the following figure:
the call here will also evoke the transaction confirmation pop-up window of MetaMask. After clicking confirm, the transaction can be initiated, which is the same as the process of DApp initiating the transaction.
So far, we have successfully deployed a contract in the test network.
Docking DApp
in the DApp developed above, we already have a page that can call the contract. We only need to fill in the address of the contract into the DApp to call the contract.
In addition to the address, we also need to switch to the test network. The specific code is as follows:
import { createConfig, http, useReadContract, useWriteContract } from "wagmi";
- import { mainnet } from "wagmi/chains";
+ import { mainnet, sepolia } from "wagmi/chains";
import {
WagmiWeb3ConfigProvider,
MetaMask,
+ Sepolia,
} from "@ant-design/web3-wagmi";
import {
Address,
NFTCard,
Connector,
ConnectButton,
useAccount,
} from "@ant-design/web3";
import { injected } from "wagmi/connectors";
import { Button, message } from "antd";
import { parseEther } from "viem";
const config = createConfig({
- chains: [mainnet],
+ chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
+ [sepolia.id]: http(),
},
connectors: [
injected({
target: "metaMask",
}),
],
});
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",
+ address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
functionName: "balanceOf",
args: [account?.address as `0x${string}`],
});
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",
+ address: "0x418325c3979b7f8a17678ec2463a74355bdbe72c", // use your own contract address
functionName: "mint",
args: [1],
value: parseEther("0.01"),
},
{
onSuccess: () => {
message.success("Mint Success");
},
onError: (err) => {
message.error(err.message);
},
}
);
}}
>
mint
</Button>
</div>
);
};
export default function Web3() {
return (
<WagmiWeb3ConfigProvider
config={config}
+ chains={[Sepolia]}
wallets={[MetaMask()]}
>
<Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
<NFTCard
address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
tokenId={641}
/>
<Connector>
<ConnectButton />
</Connector>
<CallTest />
</WagmiWeb3ConfigProvider>
);
};Then switch to Sepolia test network in the DApp page and click mint if the button goes smoothly, the transaction confirmation pop-up window of MetaMask will be triggered:
refresh the page after the transaction is completed, and you will find that before balanceOf the result became 1 , which means that you have successfully cast an NFT. Of course, a truly experienced DApp will add events to the smart contract, listen for contract events on the front end, and then automatically update the results. However, we will not introduce this part of the incident in this introductory course.
Complete example
here is a complete example of the course:
you can also refer to Github project source code https://github.com/ant-design/ant-design-web3-demo .
At this point, we have completed the deployment and invocation of the contract. I hope you can learn something from it. Thank you! 🎉