🏗 scaffold-eth

is everything you need to get started building decentralized applications powered by smart contracts

quickstart

git clone https://github.com/austintgriffith/scaffold-eth.git your-next-dapp  cd your-next-dapp

yarn install 

you might get node-gyp errors, ignore them and run:

yarn start 

in a second terminal window:

yarn chain 

in a third terminal window:

yarn deploy 

🔏 Edit your smart contract YourContract.sol in packages/buidler/contracts

📝 Edit your frontend App.jsx in packages/react-app/src

📱 Open http://localhost:3000 to see the app

📚 Keep solidity by example handy and check out the Solidity globals and units

With everything up your dev environment starts looking something like this:

React dev server, Buidler blockchain, deploy terminal, code IDE, and frontend browser.

🔁 You can yarn run deploy any time and get a fresh new contract in the frontend:

💵. Each browser has an account in the top right and you can use the faucet (bottom left) to get ⛽️ testnet eth for gas:

🔨 Once you have funds, you can call setPurpose on your contract and “write” to the purpose storage:

Look for the Buidler console.log() output in the yarn run chain terminal:

👨‍🏫 Maybe start super simple and add a counter uint8 public count = 1;

⬇️ Then a function dec() public {} that does a count = count - 1;

🔬 What happens with you subtract 1 from 0? Try it out in the app to see what happens!

🚽 UNDERFLOW!

🧫 You can iterate and learn as you go. Test your assumptions!

💵 Send testnet ETH between browsers or even on an instantwallet.io selecting localhost:

🔐 Global variables like msg.sender and msg.value are cryptographically backed and can be used to make rules

📝 Keep this cheat sheet handy

⏳ Maybe we could use block.timestamp or block.number to track time in our contract

🔏 Or maybe keep track of an address public owner; then make a rule like require( msg.sender == owner ); for an important function

🧾 Maybe create a smart contract that keeps track of a mapping ( address => uint256 ) public balance;

🏦 It could be like a decentralized bank that you function deposit() public payable {} and withdraw()

📟 Events are really handy for signaling to the frontend. Read more about events here.

📲 Spend some time in App.jsx in packages/react-app/src and learn about the 🛰 Providers

🐜 The UI framework Ant Design has a bunch of great components.

📃 Check the console log for your app to see some extra output from hooks like useContractReader and useEventListener.

🏗 You’ll notice the <Contract /> component that displays the dynamic form as scaffolding for interacting with your contract.

🔲 Try making a <Button/> that calls writeContracts.YourContract.setPurpose("👋 Hello World") to explore how your UI might work

🧬 Next learn about structs in Solidity.

🗳 Maybe an make an array YourStructName[] public proposals; that could call be voted on with function vote() public {}

🔭 Your dev environment is perfect for testing assumptions and learning by prototyping.

📝 Next learn about the fallback function

💸 Maybe add a receive() external payable {} so your contract will accept ETH?

🚁 OH! Programming decentralized money! 😎 So rad!

🛰 Ready to deploy to a testnet? Change the defaultNetwork in packages/buidler/buidler.config.js

🔐 Generate a deploy account with yarn run generate and view it with yarn run account

👩‍🎓 You can “graduate” from 🏗 scaffold-eth and start using 👷 Buidler and 📦 create-eth-app “standalone”

( You will probably want to take some of the 🔗 hooks, 🎛 components with you from 🏗 scaffold-eth so we started 🖇 eth-hooks )

🚀 Good luck!

⏱ Quickstart: 🔬 Smart Contract Sandbox

Learn how to quickly iterate on a smart contract app using the <Contract /> component.

Join the telegram support chat 💬 to ask questions and find others building with 🏗 scaffold-eth!

🎥. Watch the long form 🏗 scaffold-eth introduction on youtube for the EEA.

Tutorial 1: 🛠 Programming Decentralized Money

Learn the basics of 🏗 scaffold-eth and building on Ethereum. 👷‍♂️ Buidler, 📦 create-eth-app, 🔥 hot reloading smart contracts, 🛰 providers, 🔗 hooks, 🎛 components, and building a decentralized application. 🎥 Guided Tutorial

Tutorial 2: 🏵 The Token

Learn about tokens. [coming soon] What is a token? Why is it cool? How can I deploy one? Exotic mechanisms? (todo)

Tutorial 3: ⚖️ Minimum Viable Decentralized Exchange

Learn the basics of Automated Market Makers like 🦄 Uniswap. Learn how 💰Reserves affect the 📉 price, ⚖️ trading, and 💦 slippage from low liqudity.

🏃‍♀️ SpeedRun 📹

Tutorial 4: 🚀 Connecting ETH to IPFS

Build a simple IPFS application in 🏗 scaffold-eth to learn more about distributed file storage and content addressing. 🎥 Live Tutorial

Tutorial 5: ⛽️GSN and Meta Transactions

Learn about to provide your users with better UX by abstracting away gas fees and blockchain mechanics. (todo)

Tutorial 6: 🛰 Decentralized Deployment

Learn how to deploy your smart contract to a production blockchain. Then deploy your applicaton to Surge, S3, and IPFS. Finally, register an ENS and point it at the decentralized content! 🎥 Live Tutorial

built with 🏗 scaffold-eth:

👩‍🎨 Nifty Ink

Paintings come to life as you “ink” new creations and trade them on Ethereum. A deep dive into 🖼 NFTs, 🐳 OpenSea, 🖍 react-canvas-draw, 🎨 react-color, and 🛬 onboarding user experience.

🏃‍♂️ SpeedRun 📹 (TODO)

💾 Source Code

🧙‍♂️ Instant Wallet

An instant wallet running on xDAI insired by xdai.io.

💾 Source Code

🗳 Personal Token Voting

Poll your holders! Build an example emoji voting system with 🏗 scaffold-eth. 🔏 Cryptographically signed votes but tracked off-chain with 📡 Zapier and 📑 Google Sheets.

🏃‍♂️ SpeedRun 📹

💾 Source Code

🌒 xmoon.exchange

Exchange Reddit MOONs for ETH or DAI through xDAI. Learn about different 🛰 providers and how 🌉 bridges can connect different chains with different security models.

🏃‍♂️ SpeedRun 📹

💾 Source Code

Obituary.space

Remember someone permanently on the blockchain. Write an obituary and upload a photo of a person and their memory will be encoded on the blockchain, forever.

^^^ ⛏ PR your 🏗 scaffold-eth project in above!!! ^^^

🧫 Building on Ethereum in 2020 (research)

⏱ Original Quickstart with TODO List:

First, you’ll need NodeJS>=10 plus Yarn and Git installed.

💾 install:

git clone https://github.com/austintgriffith/scaffold-eth.git rad-new-dapp  cd rad-new-dapp  git checkout quickstart  yarn install

⌚️ This will take some time. How about a quick tour of the file structure with your favorite code editor?

💡 Sometimes the install throws errors like “node-gyp”, try the next step even if you see problems.
(You can also download the Apple command line tools to fix the warning.)

🎛 frontend

yarn start

📝 Edit your frontend App.jsx in packages/react-app/src and open http://localhost:3000

⛓ blockchain

yarn run chain

Note: You’ll need to run this command in a new terminal window

🛠 Use this eth.build to double-check your local chain and account balances

⚙️ Compile your contracts:

yarn run compile

🚢 Deploy your contracts to the frontend:

yarn run deploy

🔍 Watch for changes then compile, deploy, and hot reload the frontend:

yarn run watch

🔥 Your dapp hot reloads as you build your smart contracts and frontend together 🔥

📝 Edit your smart contract SmartContractWallet.sol in packages/buidler/contracts

🤡 There is a spelling error in packages/buidler/contracts/SmartContractWallet.sol!

🤔 Can you fix it and deploy the contract locally?

☢️ Warning: It is very important that you find SmartContractWallet.sol in packages/buidler/contracts because there are other contract folders and it can get confusing.

🔬Test your contracts by editing myTest.js in packages/buidler/contracts:

yarn run test

🗝 List your local accounts:

yarn run accounts

💰 Check account balance:

yarn run balance **YOUR-ADDRESS**

💸 Send ETH:

yarn run send --from 0 --amount 0.5 --to **YOUR-ADDRESS**

🔧 Configure 👷Buidler by editing buidler.config.js in packages/buidler

✨ The BuidlerEVM provides stack traces and console.log debugging for our contracts ✨

🏃‍♂️ Speedrun (🎥 7 min):

🔬 Smart Contract Sandbox:

💾 install:

git clone https://github.com/austintgriffith/scaffold-eth.git smart-contract-sandbox  cd smart-contract-sandbox  yarn install

⚙️ start

#run in original terminal window: yarn start #run in terminal window 2: yarn run chain #run in terminal window 3: yarn run deploy

🔏 Edit or rename your smart contract YourContract.sol in packages/buidler/contracts

📝 Edit your frontend App.jsx in packages/react-app/src

📱 Open http://localhost:3000 to see the app

☢️ Make sure are running your local chain yarn run chain and your contract is deployed with yarn run deploy

🔥 Try yarn run watch and as you change your Solidity, your frontend <Contract/> will hot reload to give you access to new variables and functions:

📽 Video Guide

📚 RTFM: Check out solidity by example and check out the Solidity globals and units

🚀 Good luck, and go get ’em!

🔏 Web3 Providers:

The frontend has three different providers that provide different levels of access to different chains:

mainnetProvider: (read only) Infura connection to main Ethereum network (and contracts already deployed like DAI or Uniswap).

localProvider: local Buidler accounts, used to read from your contracts (.env file points you at testnet or mainnet)

injectedProvider: your personal MetaMask, WalletConnect via Argent, or other injected wallet (generates burner-provider on page load)

🐜 Ant.design is the UI library with components like the grids, menus, dates, times, buttons, etc.

⛑ Helpers:

Transactor: The transactor returns a tx() function to make running and tracking transactions as simple and standardized as possible. We will bring in BlockNative’s Notify library to track our testnet and mainnet transactions.

const tx = Transactor(props.injectedProvider, props.gasPrice);

Then you can use the tx() function to send funds and write to your smart contracts:

tx({   to: readContracts[contractName].address,   value: parseEther("0.001"), });

tx(writeContracts["SmartContractWallet"].updateOwner(newOwner));

☢️ Warning: You will need to update the configuration for react-app/src/helpers/Transactor.js to use your BlockNative dappId

🖇 Hooks:

Commonly used Ethereum hooks located in packages/react-app/src/:

usePoller(fn, delay): runs a function on app load and then on a custom interval

usePoller(() => {   //do something cool at start and then every three seconds }, 3000);

useBalance(address, provider, [pollTime]): poll for the balance of an address from a provider

const localBalance = useBalance(address, localProvider);

useBlockNumber(provider,[pollTime]): get current block number from a provider

const blockNumber = useBlockNumber(props.provider);

useGasPrice([speed]): gets current “fast” price from ethgasstation

const gasPrice = useGasPrice();

useExchangePrice(mainnetProvider, [pollTime]): gets current price of Ethereum on the Uniswap exchange

const price = useExchangePrice(mainnetProvider);

useContractLoader(provider): loads your smart contract interface

const readContracts = useContractLoader(localProvider); const writeContracts = useContractLoader(injectedProvider);

useContractReader(contracts, contractName, variableName, [pollTime]): reads a variable from your contract and keeps it in the state

const title = useContractReader(props.readContracts, contractName, "title"); const owner = useContractReader(props.readContracts, contractName, "owner");

useEventListener(contracts, contractName, eventName, [provider], [startBlock]): listens for events from a smart contract and keeps them in the state

const ownerUpdates = useEventListener(   readContracts,   contractName,   "UpdateOwner",   props.localProvider,   1 );

📦 Components:

Your commonly used React Ethereum components located in packages/react-app/src/:

📬 <Address />: A simple display for an Ethereum address that uses a Blockie, lets you copy, and links to Etherescan.

  <Address value={address} />   <Address value={address} size="short" />   <Address value={address} size="long" blockexplorer="https://blockscout.com/poa/xdai/address/"/>   <Address value={address} ensProvider={mainnetProvider}/>

🖋 <AddressInput />: An input box you control with useState for an Ethereum address that uses a Blockie and ENS lookup/display.

  const [ address, setAddress ] = useState("")   <AddressInput     value={address}     ensProvider={props.ensProvider}     onChange={(address)=>{       setAddress(address)     }}   />

TODO GIF

💵 <Balance />: Displays the balance of an address in either dollars or decimal.

<Balance   address={address}   provider={injectedProvider}   dollarMultiplier={price} />

👤 <Account />: Allows your users to start with an Ethereum address on page load but upgrade to a more secure, injected provider, using Web3Modal. It will track your address and localProvider in your app’s state:

const [address, setAddress] = useState(); const [injectedProvider, setInjectedProvider] = useState(); const price = useExchangePrice(mainnetProvider);

<Account   address={address}   setAddress={setAddress}   localProvider={localProvider}   injectedProvider={injectedProvider}   setInjectedProvider={setInjectedProvider}   dollarMultiplier={price} />

💡 Notice: the <Account /> component will call setAddress and setInjectedProvider for you.

☢️ Warning: You will need to update the configuration for Web3Modal to use your Infura Id

📡 <Provider />: You can choose to display the provider connection status to your users with:

<Provider name={"mainnet"} provider={mainnetProvider} /> <Provider name={"local"} provider={localProvider} /> <Provider name={"injected"} provider={injectedProvider} />

💡 Notice: you will need to check the network id of your injectedProvider compared to your localProvider or mainnetProvider and alert your users if they are on the wrong network!

📄 Smart Contract Wallet:

📝 Edit your smart contract SmartContractWallet.sol in packages/buidler/contracts

📝 Then edit the SmartContractWallet.js React component in packages/react-app/src

▶️ Run yarn run compile and yarn run deploy or just yarn run watch

🛠 Run this eth.build with your contract address to ask it who its owner is.

📚 OpenZeppelin Contracts — TODO

You can import any of the OpenZeppelin contracts:

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

🛰 The Graph — TODO

⛽️ GSN — TODO

📤 Save to your Git

Create a new repo with the same name as this project and then:

git remote add origin https://github.com/**YOUR_GITHUB_USERNAME**/**YOUR_COOL_PROJECT_NAME**.git git push -u origin master

🛳 Ship it!

You can deploy your static site and your dapp can go live:

yarn run build  # ship it!  yarn run surge  OR  yarn run s3  OR  yarn run ipfs

🏗 scaffold-eth

开始构建由智能合约支持的分散应用程序所需的一切都是

quickstart

git clone https://github.com/austintgriffith/scaffold-eth.git your-next-dapp  cd your-next-dapp

yarn install 

您可能会得到节点gyp错误，忽略它们并运行：

yarn start 

在第二个终端窗口：

yarn chain 

在第三个终端窗口：

yarn deploy 

🔏 编辑智能合约你的合同.sol在包/制造商/合同中

📝 编辑前端应用程序jsx在软件包中/react app/src

📱 打开http://localhost：3000查看应用程序

📚 将solidity作为示例放在手边，查看solidity全局参数和单元

在您的开发环境中开始如下所示：

<>

React开发服务器、Builder区块链blockchain、部署终端、代码IDE和前端浏览器。

🔁 您可以随时运行部署并在前端获得新的合同：

💵. 每个浏览器的右上角都有一个帐户，您可以使用水龙头（左下角）获取⛽️气体测试网eth:

🔨 一旦你有了资金，你就可以在你的合同上调用setPurpose并“写”到目的存储器中：

<>

寻找构建者控制台.log（）纱线运行链终端的输出：

👨‍🏫 也许从super-simple开始，添加一个计数器uint8 public count=1；

⬇️ 然后是一个函数dec（）public{}，它执行count=count-1；

🔬 从0减去1会怎么样？在应用程序中试试看会发生什么！

🚽 下溢！

🧫 你可以边走边学。测试你的假设！

💵 在浏览器之间或甚至在instantwallet.io选择本地主机：

🔐 全局变量如消息发送者以及消息值有密码支持，可用于制定规则

📝 把这张备忘单放在手边

⏳ 也许我们可以利用块.时间戳或者区块编号跟踪合同中的时间

🔏 或者跟踪地址的公共所有者，然后制定一个规则，比如require（消息发送者==所有者）；对于重要功能

🧾 也许可以创建一个智能合约来跟踪映射（address=&gt；uint256）public balance；

🏦 它可以像一个分散的银行，您可以使用deposit（）public payment{}和draft（）

📟 事件对于向前端发出信号非常方便。在这里阅读更多关于事件的信息。

📲 花点时间在应用程序jsx在packages/react app/src中，了解🛰 提供商

🐜 UI框架Ant设计有很多很棒的组件。

📃 查看应用程序的控制台日志，查看useContractReader和useEventListener等钩子的额外输出。

🏗 您会注意到&lt；Contract/&gt；组件将动态表单显示为与合同交互的支架。

🔲 试着按一下按钮来呼叫writeContracts.YourContract.setPurpose(“👋 Hello World“）来探索用户界面的工作方式

🧬 下一步了解坚固结构。

🗳 可能是一个数组YourStructName[]public propositions；可以使用函数vote（）public{}对该调用进行投票

🔭 您的开发环境非常适合测试假设和通过原型学习。

📝 接下来了解回退功能

💸 也许添加一个receive（）external payment{}以便您的合同将接受ETH？

🚁 哦！编程分散资金！😎 太棒了！

🛰 准备好部署到测试网了吗？在packages/buidler中更改defaultNetwork/builder.config.js

🔐 使用yarn run Generate生成部署帐户，并使用yarn run account查看它

👩‍🎓 你可以从🏗 脚手架eth并开始使用👷 Buidler和📦 创建eth应用程序“独立”

（您可能需要🔗 钩子，🎛 来自的组件🏗 我们就这样开始了🖇 eth挂钩）

🚀 祝你好运！

⏱ Quickstart: 🔬 Smart Contract Sandbox

Learn how to quickly iterate on a smart contract app using the <Contract /> component.

Join the telegram support chat 💬 to ask questions and find others building with 🏗 scaffold-eth!

了解如何使用&lt；contract/&gt；组件在智能合约应用程序上快速迭代。

加入telegram支持聊天💬 问问题，找其他人🏗 脚手架eth！

🎥. 注意长形🏗 在youtube上为欧洲经济区提供eth介绍。

Tutorial 1: 🛠 Programming Decentralized Money

了解令牌。什么是代币？为什么这么酷？如何部署？奇异的机制？（todo）

Learn the basics of 🏗 scaffold-eth and building on Ethereum. 👷‍♂️ Buidler, 📦 create-eth-app, 🔥 hot reloading smart contracts, 🛰 providers, 🔗 hooks, 🎛 components, and building a decentralized application. 🎥 Guided Tutorial

Tutorial 2: 🏵 The Token

Learn about tokens. [coming soon] What is a token? Why is it cool? How can I deploy one? Exotic mechanisms? (todo)

Tutorial 3: ⚖️ Minimum Viable Decentralized Exchange

学习自动化做市商的基本知识，如🦄 Uniswap。了解如何💰储备影响📉 价格，⚖️ 交易，以及💦 从低液体中滑落。

🏃‍♀️ 快跑📹

Tutorial 4: 🚀 Connecting ETH to IPFS

Build a simple IPFS application in 🏗 scaffold-eth to learn more about distributed file storage and content addressing. 🎥 Live Tutorial

Tutorial 5: ⛽️GSN and Meta Transactions

Learn about to provide your users with better UX by abstracting away gas fees and blockchain mechanics. (todo)

在中构建一个简单的IPFS应用程序🏗 scaffold eth以了解有关分布式文件存储和内容寻址的更多信息。🎥 Live Tutorial

Tutorial 6: 🛰 Decentralized Deployment

了解如何通过抽象汽油费和区块链blockchain机制为用户提供更好的用户体验。（todo）

Learn how to deploy your smart contract to a production blockchain. Then deploy your applicaton to Surge, S3, and IPFS. Finally, register an ENS and point it at the decentralized content! 🎥 Live Tutorial

built with 🏗 scaffold-eth:

👩‍🎨 Nifty Ink

Paintings come to life as you “ink” new creations and trade them on Ethereum. A deep dive into 🖼 NFTs, 🐳 OpenSea, 🖍 react-canvas-draw, 🎨 react-color, and 🛬 onboarding user experience.

了解如何将智能合约部署到生产区块链blockchain。然后将您的应用程序部署到Surge、S3和IPFS。最后，注册一个ENS并指向分散的内容！🎥 现场教程

💾 Source Code

🧙‍♂️ Instant Wallet

An instant wallet running on xDAI insired by xdai.io.

💾 Source Code

当您在以太坊eth上“墨水”新作品并将其交易时，绘画就变得栩栩如生。深入研究🖼 NFTs公司，🐳 外海，🖍 反应画布绘制，🎨 反应颜色，以及🛬 入职用户体验。

🗳 Personal Token Voting

🏃‍♂️ 快跑📹 （待办事项）

💾 源代码xdai.io公司.

💾 源代码！用🏗 脚手架eth。🔏 加密签名的投票，但通过📡 扎皮尔和📑 谷歌表格。

🏃‍♂️ 快跑📹

💾 通过交换源代码。了解不同的🛰 供应商和方式🌉 网桥可以用不同的安全模型连接不同的链。

🌒 xmoon.exchange

🏃‍♂️ 快跑📹

💾 源代码

🏃‍♂️ SpeedRun 📹

💾 Source Code

Obituary.space

永远记住区块链blockchain上的某人。写一篇讣告，上传一个人的照片，他们的记忆将永远被编码在区块链blockchain上。

^^^⛏ 公共关系🏗 脚手架eth项目在上面！！！^^^

🧫 Building on Ethereum in 2020 (research)

⏱ Original Quickstart with TODO List:

First, you’ll need NodeJS>=10 plus Yarn and Git installed.

💾 install:

git clone https://github.com/austintgriffith/scaffold-eth.git rad-new-dapp  cd rad-new-dapp  git checkout quickstart  yarn install

首先，您需要安装NodeJS&gt；=10+纱线和Git。

💾 安装：

⌚️这需要一些时间。用你最喜欢的代码编辑器快速浏览一下文件结构如何？

yarn start

💡 有时安装会抛出“node gyp”之类的错误，即使看到问题也要尝试下一步。
（您也可以下载Apple命令行工具来修复该警告。）

🎛 前端

yarn run chain

📝 编辑前端应用程序jsx在packages/react app/src和open中http://localhost：3000

⛓ 区块链blockchain

注意：您需要在新的终端窗口中运行此命令

yarn run compile

🛠 用这个以太币建造再次检查本地连锁店和账户余额

yarn run deploy

⚙️ 编制合同：

yarn run watch

🚢 将合同部署到前端：

🔍 观察更改，然后编译、部署和热重新加载前端：

🔥 你的dapp热重新加载你的智能合约和前端一起🔥

📝 编辑智能合约智能合约钱包.sol在包/制造商/合同中

🤡 包/编译程序/合同中存在拼写错误/智能合约钱包.sol!

在🤔 你能修复它并在本地部署合同吗？

yarn run test

☢️ 警告：你发现智能合约钱包.sol在packages/buidler/contracts中，因为还有其他合同文件夹，它可能会令人困惑。

yarn run accounts

🔬通过编辑测试你的合同我的测试.js在包/制造商/合同中：

yarn run balance **YOUR-ADDRESS**

🗝 列出您的本地帐户：

yarn run send --from 0 --amount 0.5 --to **YOUR-ADDRESS**

💰 支票账户余额：

💸 发送ETH:

🏃‍♂️ Speedrun (🎥 7 min):

🔧 配置👷编辑编译程序builder.config.js打包/内置

🔬 Smart Contract Sandbox:

✨ BuidlerEVM提供堆栈跟踪和控制台.log调试我们的合同✨

git clone https://github.com/austintgriffith/scaffold-eth.git smart-contract-sandbox  cd smart-contract-sandbox  yarn install

#run in original terminal window: yarn start #run in terminal window 2: yarn run chain #run in terminal window 3: yarn run deploy

💾 安装：

⚙️ 开始

🔏 编辑或重命名智能合约你的合同.sol在包/制造商/合同中

📝 编辑前端应用程序jsx在软件包中/react app/src

📱 打开http://localhost：3000查看应用程序

☢️ 确保您正在运行您的本地chain yarn run chain，并且您的合同是使用yarn run deploy部署的

🔥 试试yarn run watch，当你改变你的稳定性时，你的前端&lt；Contract/&gt；将热重新加载，让你可以访问新的变量和函数：

📽 视频指南

🔏 Web3 Providers:

📚 RTFM：通过示例检查solidity，并检查solidity全局参数和单位

🚀 祝你好运，去找他们！

前端有三个不同的提供商，它们提供对不同链的不同访问级别：

mainnetProvider:（只读）到以太坊eth主网络的Infura连接（以及像DAI或Uniswap一样部署的合同）。

localProvider：本地Buidler帐户，用于读取您的合同（.env文件指向testnet或mainnet）

⛑ Helpers:

injectedProvider：您的个人元掩码、WalletConnect via Argent或其他注入钱包（在页面加载时生成burner provider）

const tx = Transactor(props.injectedProvider, props.gasPrice);

🐜 蚂蚁设计是包含网格、菜单、日期、时间、按钮等组件的UI库

tx({   to: readContracts[contractName].address,   value: parseEther("0.001"), });

tx(writeContracts["SmartContractWallet"].updateOwner(newOwner));

☢️ Warning: You will need to update the configuration for react-app/src/helpers/Transactor.js to use your BlockNative dappId

🖇 Hooks:

Commonly used Ethereum hooks located in packages/react-app/src/:

usePoller(fn, delay): runs a function on app load and then on a custom interval

usePoller(() => {   //do something cool at start and then every three seconds }, 3000);

useBalance(address, provider, [pollTime]): poll for the balance of an address from a provider

const localBalance = useBalance(address, localProvider);

useBlockNumber(provider,[pollTime]): get current block number from a provider

const blockNumber = useBlockNumber(props.provider);

useGasPrice([speed]): gets current “fast” price from ethgasstation

const gasPrice = useGasPrice();

useExchangePrice(mainnetProvider, [pollTime]): gets current price of Ethereum on the Uniswap exchange

const price = useExchangePrice(mainnetProvider);

useContractLoader(provider): loads your smart contract interface

const readContracts = useContractLoader(localProvider); const writeContracts = useContractLoader(injectedProvider);

useContractReader(contracts, contractName, variableName, [pollTime]): reads a variable from your contract and keeps it in the state

const title = useContractReader(props.readContracts, contractName, "title"); const owner = useContractReader(props.readContracts, contractName, "owner");

useEventListener(contracts, contractName, eventName, [provider], [startBlock]): listens for events from a smart contract and keeps them in the state

const ownerUpdates = useEventListener(   readContracts,   contractName,   "UpdateOwner",   props.localProvider,   1 );

📦 Components:

Your commonly used React Ethereum components located in packages/react-app/src/:

📬 <Address />: A simple display for an Ethereum address that uses a Blockie, lets you copy, and links to Etherescan.

  <Address value={address} />   <Address value={address} size="short" />   <Address value={address} size="long" blockexplorer="https://blockscout.com/poa/xdai/address/"/>   <Address value={address} ensProvider={mainnetProvider}/>

🖋 <AddressInput />: An input box you control with useState for an Ethereum address that uses a Blockie and ENS lookup/display.

  const [ address, setAddress ] = useState("")   <AddressInput     value={address}     ensProvider={props.ensProvider}     onChange={(address)=>{       setAddress(address)     }}   />

TODO GIF

💵 <Balance />: Displays the balance of an address in either dollars or decimal.

<Balance   address={address}   provider={injectedProvider}   dollarMultiplier={price} />

👤 <Account />: Allows your users to start with an Ethereum address on page load but upgrade to a more secure, injected provider, using Web3Modal. It will track your address and localProvider in your app’s state:

const [address, setAddress] = useState(); const [injectedProvider, setInjectedProvider] = useState(); const price = useExchangePrice(mainnetProvider);

<Account   address={address}   setAddress={setAddress}   localProvider={localProvider}   injectedProvider={injectedProvider}   setInjectedProvider={setInjectedProvider}   dollarMultiplier={price} />

💡 Notice: the <Account /> component will call setAddress and setInjectedProvider for you.

☢️ Warning: You will need to update the configuration for Web3Modal to use your Infura Id

📡 <Provider />: You can choose to display the provider connection status to your users with:

<Provider name={"mainnet"} provider={mainnetProvider} /> <Provider name={"local"} provider={localProvider} /> <Provider name={"injected"} provider={injectedProvider} />

💡 Notice: you will need to check the network id of your injectedProvider compared to your localProvider or mainnetProvider and alert your users if they are on the wrong network!

📄 Smart Contract Wallet:

📝 Edit your smart contract SmartContractWallet.sol in packages/buidler/contracts

📝 Then edit the SmartContractWallet.js React component in packages/react-app/src

▶️ Run yarn run compile and yarn run deploy or just yarn run watch

🛠 Run this eth.build with your contract address to ask it who its owner is.

📚 OpenZeppelin Contracts — TODO

You can import any of the OpenZeppelin contracts:

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

🛰 The Graph — TODO

⛽️ GSN — TODO

📤 Save to your Git

Create a new repo with the same name as this project and then:

git remote add origin https://github.com/**YOUR_GITHUB_USERNAME**/**YOUR_COOL_PROJECT_NAME**.git git push -u origin master

🛳 Ship it!

You can deploy your static site and your dapp can go live:

yarn run build  # ship it!  yarn run surge  OR  yarn run s3  OR  yarn run ipfs