React Native DApp 开发全栈实战·从 0 到 1 系列（一键发token）

前言

本文通过 OpenZeppelin 与 ethers.js 打通前端与合约，实现 ERC20 代币的一键发行，完成最小可行闭环。

前置准备

启动自定义网络：ganache 把账号导入钱包中
使用hardhat构建编写，编译合约
OpenZeppelin简化合约开发
表格总结：

工具	作用	一条命令
Ganache	本地测试链	`ganache-cli`
Hardhat	编译	`npx hardhat compile`
MetaMask	浏览器钱包	把 Ganache 私钥导入即可

合约部分

合约说明 ：基于ERC20实现标准代币，不设权限所有账号都可以发布自己的代币

typescript 复制代码

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

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

contract MyToken is ERC20 {
    // 一键发币：部署时把全部供应量打给部署者
    constructor(
        string memory name,
        string memory symbol,
        uint256 totalSupply
    ) ERC20(name, symbol) {
        _mint(msg.sender, totalSupply * 10 ** decimals());
    }
}

编译说明 ：编译合约生成代币xx.json文件，用于前端部分使用

编译指令 ：npx hardhat compile

编译说明 ：执行此指令会生成新的文件夹《contracts》在此文件中找到对应的json文件

前端使用 ：例如：/contracts/MyToken.sol/MyToken.json,把MyToken.json导入到前端项目中

补充说明 ：关于hardhat相关的内容可以查看作者写的另一篇文章《智能合约开发、测试、部署全流程（实操篇）》

前端部分

一键发币核心代码

typescript 复制代码

import { useRouter } from "expo-router";
import { abi, bytecode } from "@/abi/MyToken.json";//合约编译生成的.json
import * as ethers from 'ethers';
const provider = new ethers.providers.Web3Provider(window.ethereum);
const router=useRouter();//路由
const deploy = async () => {
        await provider.send('eth_requestAccounts', []); // 唤起钱包
        const signer = await provider.getSigner();
        const factory = new ethers.ContractFactory(abi, bytecode, signer);
        console.log(factory)
        const contract = await factory.deploy(name,symbol,supply);
        await contract.deployed();
        console.log("tokenAddress",contract.address);
        console.log(contract)
        if(contract.address){
        //部署成功后进行后续操作 例如：
            router.push({
                pathname:"/home/addToken",
                params:{
                    address:contract.address
                }
            })
        }
    }

合约交互核心代币

ini 复制代码

# 代币部署成功后，查看代币基本信息，以及调用代币事件
import { useRouter,useLocalSearchParams } from "expo-router";
import { abi, bytecode } from "@/abi/MyToken.json";//合约编译生成的.json
import * as ethers from 'ethers';
import { useState } from 'react';
//读取代币基本信息
const { address } = useLocalSearchParams();//合约地址
const [TokenName,setTokenName]=useState('');
const [TokenSymbol,setTokenSymbol]=useState(''); 
const [TokenDecimals,setTokenDecimals]=useState(0);
const [TokenTotalSupply,setTokenTotalSupply]=useState(0);
const tokenDetailFn= async ()=>{
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    // await provider.send('eth_requestAccounts', []); // 唤起钱包
    // const signer = await provider.getSigner();
    const contract = new ethers.Contract(address as string, abi, provider);
    const name = await contract.name();
    const symbol = await contract.symbol();
    const decimals = await contract.decimals();
    const totalSupply = await contract.totalSupply();
    const totalReadable = ethers.utils.formatUnits(totalSupply, decimals);//代币单位转换
    console.log(name,symbol,decimals,totalReadable)
    setTokenName(name);
    setTokenSymbol(symbol);
    setTokenDecimals(decimals);
    setTokenTotalSupply(Number(totalReadable));
    //也可以调用合约的事件：如下表
}

代币事件列表

事件	触发时机	参数
`Transfer`	发生代币转移（`transfer`、`transferFrom` 成功时）	`from`, `to`, `value`
`Approval`	授权额度被更新（`approve`/`permit` 成功时）	`owner`, `spender`, `value`

效果图

总结

以上就是实现 ERC20 代币的一键发行，完成最小可行闭环，如果想进一步完善可以补充权限管理、白名单、Mint 策略等高级功能。