使用scaffold-eth脚手架快速构建 Web3 Dapp 应用

最新推荐文章于 2024-06-20 12:58:13 发布

99Kies

最新推荐文章于 2024-06-20 12:58:13 发布

阅读量1.2k

点赞数

分类专栏：区块链文章标签：区块链 scaffold-eth ethereum 以太坊

本文链接：https://blog.csdn.net/qq_19381989/article/details/120456123

版权

区块链专栏收录该内容

9 篇文章 3 订阅

订阅专栏

使用scaffold-eth脚手架快速搭建一个Web3 Dapp应用

前言
上手开发
总结
关于作者

前言

Scaffold-eth 是以太坊上优秀作品的集合，让开发人员可以使用最先进的工具来快速学习和发布基于以太坊的Dapp。

Scaffold-eth不是产品本身，而是其他优秀产品的组合。它允许你快速构建和迭代你的智能合约和前端。它利用：

hardhat：用于运行本地网络、部署和测试智能合约。
React：使用许多预制组件和hooks来构建前端。
Ant：用于构建你的UI，可以轻松更改为Bootstrap或者其他库。
Surge：发布你的应用。
Tenderly / The Graph / Etherscan / Infura / Blocknative 等等。
支持 L2 / Sidechains。

上手开发

环境要求

在这里插入图片描述

部署 Scaffold-eth 脚手架

获取项目源代码

git clone https://github.com/austintgriffith/scaffold-eth.git

在第一个命令行面板里，下载并启动 👷‍ Hardhat chain:

cd scaffold-eth
yarn install
yarn chain

在这里插入图片描述

在第二个命令行窗口里启动你的前端应用:

cd scaffold-eth
yarn start

在这里插入图片描述

在第三个命令行窗口里，部署 /scaffold-eth/packages/hardhat/contracts/ 下的合约。

cd scaffold-eth
yarn deploy

在这里插入图片描述
主分支下的案例合约是一个类似set string的合约，你可以在 /scaffold-eth/packages/hardhat/contracts/下找到这个合约并修改这个新合约的内容然后重新部署。
如果你对其他的合约项目感兴趣，可以切换仓库的分支部署不同的dapp服务。
可以切换的案例分支
比如nft的案例分支 https://github.com/scaffold-eth/scaffold-eth/tree/simple-nft-example

通过部署的React前端应用调用合约方法

回到刚才的话题，这时候我们合约部署了，前端和本地测试链都启动了。
在这里我们先贴一下我们刚才deploy的合约内容。

pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract YourContract {

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!";

  constructor() {
    // what should we do on deploy?
  }

  function setPurpose(string memory newPurpose) public {
      purpose = newPurpose;
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}