• 介绍
• 前端应用
• 如何使用
• 发送token
• hardhat Tutorials , hardhat 教程
• Contact 联系方式
• 介绍
如果您想快速开始使用您的 dApp 或使用前端查看整个项目的外观,您可以使用 我们的样板存储库。
• 包含什么
- 我们在本教程中使用的 Solidity 合约
- 测试合约的全部功能
- 使用 ethers.js 与合约交互的最小 React 前端
• Solidity 合约和测试
在 repo 的根目录中,您会找到我们通过本教程与 Token
合约一起构建的 Hardhat 项目。刷新你对它实现的记忆:
- 代币的总供应量是固定的,无法更改。
- 整个供应分配到部署合约的地址。
- 任何人都可以收到代币。
- 任何拥有至少一个代币的人都可以转移代币。
- 代币是不可分割的。您可以转移 1、2、3 或 37 个代币,但不能转移 2.5 个。
• 前端应用
在 frontend
中,你会发现一个简单的应用程序,它允许用户做两件事:
- 检查连接钱包的余额
- 发送代币到一个地址
这是一个单独的 npm 项目,它是使用 create-react-app
创建的,所以这意味着它使用了 webpack 和 babel。
• 前端文件架构
src/
包含所有代码src/components
包含反应组件Dapp.js
是唯一具有业务逻辑的文件。如果您将其用作样板,您可以在此处用您自己的代码替换代码- 每个其他组件都只呈现 HTML,没有逻辑。
src/contracts
有合约的 ABI 和地址,这些是由部署脚本自动生成的
• 如何使用
先克隆仓库,然后准备合约部署:
cd hardhat-boilerplate
npm install
npx hardhat node
在这里,我们只安装 npm 项目的依赖项,并通过运行 npx hardhat node
启动一个 Hardhat Network 实例,您可以使用 MetaMask 连接到该实例。在同一目录中的不同终端中,运行:
npx hardhat --network localhost run scripts/deploy.js
这会将合约部署到 Hardhat Network。完成后,启动 react web 应用:
cd frontend
npm install
npm run start
然后在你的浏览器中打开 http://127.0.0.1:3000/ 你应该会看到这个:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMQg3UfN-1658429473916)(/front-5.png)]
在 MetaMask 中将您的网络设置为“127.0.0.1:8545”。
现在单击 Web 应用程序中的按钮。然后你应该看到这个:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bfeQV5jd-1658429473917)(https://user-images.githubusercontent.com/28084126/180290883-096572f1-8ca0-4c0e-bea8-e78d3904b1e6.png)]
• 发送token
这里发生的情况是显示当前钱包余额的前端代码检测到余额为“0”,因此您将无法尝试转账功能。通过运行:
npx hardhat --network localhost faucet <你的地址>
您将运行我们包含的自定义 Hardhat 任务,该任务使用部署帐户的余额向您的地址发送 100 MHT 和 1 ETH。这将允许您将令牌发送到另一个地址。
您可以在 /tasks/faucet.js
中查看任务的代码,这是从hardhat.config.js
。
$ npx hardhat --network localhost faucet 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90
Transferred 1 ETH and 100 tokens to 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90
在您运行“npx hardhat node”的终端中,您还应该看到:
eth_sendTransaction
Contract call: Token#transfer
Transaction: 0x460526d98b86f7886cd0f218d6618c96d27de7c745462ff8141973253e89b7d4
From: 0xc783df8a850f42e7f7e57013759c285caa701eb6
To: 0x7c2c195cd6d34b8f845992d380aadb2730bb9c6f
Value: 0 ETH
Gas used: 37098 of 185490
Block #8: 0x6b6cd29029b31f30158bfbd12faf2c4ac4263068fd12b6130f5655e70d1bc257
console.log:
Transferring from 0xc783df8a850f42e7f7e57013759c285caa701eb6 to 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90 100 tokens
显示合约中 transfer()
函数的 console.log
输出,这是运行水龙头任务后 Web 应用程序的外观:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIx7a316-1658429473918)(/front-6.png)]
尝试使用它并阅读代码。它充满了解释正在发生的事情的评论,并清楚地表明什么代码是以太坊样板以及什么是实际的 dApp 逻辑。这应该使存储库易于为您的项目重用。
• hardhat Tutorials , hardhat 教程
CN 中文 Github hardhat 教程 : github.com/565ee/hardhat_CN
CN 中文 CSDN hardhat 教程 : blog.csdn.net/wx468116118
EN 英文 Github hardhat Tutorials : github.com/565ee/hardhat_EN
• Contact 联系方式
Homepage : 565.ee
微信公众号 : wx468116118
微信 QQ : 468116118
GitHub : github.com/565ee
CSDN : blog.csdn.net/wx468116118
Email : 468116118@qq.com