type
status
date
slug
summary
tags
category
icon
password
项目梗概：
教你如何使用相关工具连接Metamask钱包并且使用ERC20合约来铸造代币。
项目分为前端和合约两个板块，内容难度偏入门。
👜 环境安装
NodeJs:https://nodejs.org/zh-cn
Yarn: npm install yarn -g
Chrome 应用商店中安装MetaMask
📝 智能合约
安装相关依赖
选择TS项目后 一路回车到底
智能合约的编写
在contracts文件夹中新建AshCoin.sol文件
创建完成后需要下载相关依赖 npm install @openzeppelin/contracts
编译Solidity合约
在完成了合约的编写后，需要将其进行对应的编译
编译成功会生成合约的 ABI 文件进行调用。
编译后会生成以下文件（默认在
artifacts/ 目录中）：artifacts/
├── contracts/
│ ├── AshCoin.sol/
│ │ ├── AshCoin.json # 包含ABI、字节码等完整信息
│ │ └── AshCoin.dbg.json # 调试信息
├── build-info/ # 编译元数据
└── @openzeppelin/ # 依赖库的编译产物
快速构建合约方式
根据官方的低代码方式 仅需勾选对应的合约类型后即可生成对应的合约内容
相关合约函数作用可根据 OpenZeppelin官方文档进行对照学习
智能合约的测试
在智能合约部署上线之前，需要对编写的合约进行单元测试以保证合约能够正常跑通
在根目录下新建test文件夹，创建AshCoin.t.ts
编写测试单元
测试指令
在完成了测试单元的编写后，在终端输入相关指令后会对合约进行完整测试并给出反馈
如果能走到这一步，那么恭喜你。你的合约通过了测试已经能够正常进行部署，接下来就是进行前端页面的构建与合约进行交互。
📝 前端开发
框架安装
该项目的前端开发框架为NextJs，使用需要在了解React的基础上并结合官网的文档合并使用。Next文档地址：https://nextjs.org/
建议安装名称为：frontend 文件位置与contracts同级
静态设计
目标页面
能够在本地链上使用账户进行Coin的铸造
Mint出口
在app下中的page.tsx中编写Mint页面的出口
Navbar组件
该组件位于页面顶部，作用是为了展示相关页面路由以及用户的钱包连接（至关重要）
Mint组件
该组件核心功能为提供输入框用于调用合约中的铸造函数，通过钱包进行交易后达成代币的成功铸造，并展示账户的相关余额。
前置重点：
- 在本地链调用我们的合约之前 我们需要进行相关配置。打开contracts找到hardhat.config.ts
- 在Metamask配置好本地链并且创建自定义网络
- 在contracts的终端中输入 npx hardhat node 创建本地钱包地址
启动成功后会为你提供20个本地账户，选择第一条Account0的地址进行复制，然后导入到小狐狸钱包当中（选择私钥导入）
- 在contracts的终端中输入 npx hardhat run ./scripts/deploy.ts --network localhost，将合约部署在本地链上,并复制其中的合约地址并赋值于Mint.tsx中的ContractAddress
- 完成以上操作后，便可以在frontend终端中启动项目
- Author:Ashland
- URL:http://preview.tangly1024.com/article/257cccc0-3782-803e-99f2-cce5a74cef42
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
