| Date: Fri, 5 Apr 2024 04:52:26 +0800 Subject: [PATCH 042/219] style: title font weight and Flex center --- src/components/StablecoinsTable.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx index 59a73f78a83..f92a25edc59 100644 --- a/src/components/StablecoinsTable.tsx +++ b/src/components/StablecoinsTable.tsx @@ -60,6 +60,7 @@ const StablecoinsTable = ({ |
- |
- |
- |
{url && (
From 281155ebc0a5185a1fe12bca1c2699ae2db7faf1 Mon Sep 17 00:00:00 2001
From: iepn |
From 85a511b093874460d5817fdcde7509c4b2cd2604 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari |
gas, addr, val, argOst, argLen, retOst, retLen | `success` | mem[retOst:retOst+retLen-1] := returndata |
From 0891bb2f6dc1d42696f5992ea3cf1188dc224c72 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari  Croath Liu 📖 💻  Hayatti 🖋 🐛 |
+  Jeffrey Owoloko 🚧  Colin McKerracher 🚧 Hayatti 🖋 🐛 Jeffrey Owoloko 🚧 |
+ Colin McKerracher 🚧  writegr 🐛 |
|---|
Artem Vorotnikov
🖋 📆 💬
Liam Arzola
🐛
shao
📖 🌍
Hiroyuki Naito
📖
Hiroyuki Naito
📖 🚧
AlehN
📖
Jeffrey Owoloko
🚧
Colin McKerracher
🚧
writegr
🐛
Cardo
🚧
Colin McKerracher
🚧
writegr
🐛
Cardo
🚧
shravanandoria
🚧
Cardo
🚧
shravanandoria
🚧
Rashid Ma
🐛
Rashid Ma
🐛
James Prestwich
🖋
Rashid Ma
🐛
James Prestwich
🖋
Dai Wentao
🐛
Rashid Ma
🐛
James Prestwich
🖋
Dai Wentao
🐛
kuhant
🔧
ArtificialPB
🔧
Pedrojok01
🚧
Vid Kersic
🔧
Vid Kersic
🔧 🐛
Tantan Fu
🚧
Dharmik Dholariya
🐛
Timur Badretdinov
🔧
James Prestwich
🖋
Dai Wentao
🐛
kuhant
🔧
Lucas Aschenbach
🖋
Dai Wentao
🐛
kuhant
🔧
Lucas Aschenbach
🖋
juliettech
✅
Dai Wentao
🐛
kuhant
🔧
Lucas Aschenbach
🖋
0xayot
📖
kuhant
🔧
Lucas Aschenbach
🖋
0xayot
📖
Louis
🖋 🐛
+ 
+
+
+
+)
+```
+
+如果你细致地检查这段代码，就会发现我们在用户界面中的哪里使用了各种状态变量：
+
+- 在第 6-12 行，如果用户的钱包已连接 \(即 `walletAddress.length > 0`\)，我们就在 ID 为“walletButton;”的按钮中显示用户 `walletAddress` 的截短版，否则我们就只显示“连接钱包”。
+- 在第 17 行，我们显示在 `message` 字符串中获取的智能合约中存储的当前消息。
+- 在第 23-26 行，我们使用一个[受控组件，](https://reactjs.org/docs/forms.html#controlled-components)以用于在文本字段中输入更改时更新 `newMessage` 状态变量。
+
+除了状态变量之外，你还将看到，在分别单击 ID 为 `publishButton` 和 `walletButton` 的按钮时，会调用 `connectWalletPressed` 和 `onUpdatePressed`。
+
+最后，我们来看看 `HelloWorld.js` 组件是在哪里添加的。
+
+如果你打开 `App.js` 文件，将会看到我们的 `HelloWorld.js` 组件是在第 7 行添加的。此文件是 React 中的主要组件，作为所有其他组件的容器。
+
+最后，让我们再看看另一个为你提供的文件，`interact.js`。
+
+#### `interact.js` 文件 {#the-interact-js-file}
+
+因为我们建议采用 [M-V-C](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) 规范，我们需要一个单独的文件包含用来管理我们的去中心化应用程序的逻辑、数据和规则的所有函数，然后我们就能将这些函数导出到前端 \(`HelloWorld.js` 组件\)。
+
+👆🏽这就是 `interact.js` 文件的确切目的！
+
+进入 `src` 目录中的 `util` 文件夹，然后你就会发现我们引入了 `interact.js` 文件，它包含所有的智能合约交互以及钱包函数和变量。
+
+```javascript
+// interact.js
+
+//export const helloWorldContract;
+
+export const loadCurrentMessage = async () => {}
+
+export const connectWallet = async () => {}
+
+const getCurrentWalletConnected = async () => {}
+
+export const updateMessage = async (message) => {}
+```
+
+你会发现在文件的开头，我们注释了 `helloWorldContract` 对象。 在之后的教程里，我们会删除这个对象的注释，并且在这个变量中实例化智能合约，然后我们可以将其导出到 `HelloWorld.js` 组件。
+
+`helloWorldContract` 对象之后的四个未实现函数会发挥以下作用：
+
+- `loadCurrentMessage` — 这个函数处理加载智能合约中存储的信息的逻辑。 它会使用 [Alchemy Web3 API](https://github.com/alchemyplatform/alchemy-web3)，向 Hello World 智能合约发起一个_读取_调用。
+- `connectWallet` — 这个函数会将用户的 MetaMask 连接到我们的去中心化应用程序。
+- `getCurrentWalletConnected` — 这个函数会在页面加载时检查是否已经有以太坊帐户连接到我们的去中心化应用程序，并且相应更新我们的用户界面。
+- `updateMessage` — 这个函数会更新智能合约中存储的消息。 它会向 Hello World 智能合约发起一个_写入_调用，所以用户的 MetaMask 钱包需要签名一个以太坊交易来更新此消息。
+
+现在我们已经了解所操作的对象，让我们看看如何从智能合约中读取吧！
+
+### 第三步：从你的智能合约中读取 {#step-3-read-from-your-smart-contract}
+
+为了从智能合约中读取，你需要成功设置以下内容：
+
+- 一个到以太坊链的应用程序接口连接
+- 一个已加载的智能合约实例
+- 一个用来调用智能合约函数的函数
+- 一个监听器，用于监听智能合约中你正读取的数据出现变化时的更新
+
+听起来步骤可能很多，但是不要担心！ 我们会引导你逐步完成这些步骤！ :\)
+
+#### 建立一个到以太坊链的应用程序接口连接 {#establish-an-api-connection-to-the-ethereum-chain}
+
+还记得我们在教程的第二部分怎么用我们的 [Alchemy Web3 密钥从我们的智能合约中读取](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract#step-1-install-web3-library)吗？ 你在去中心化应用程序中也需要一个 Alchemy Web3 密钥来从链上读取。
+
+如果你还没有提前准备好，首先，我们来安装 [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3)，导航到 `starter-files` 的根目录，然后在你的终端运行以下内容：
+
+```text
+npm install @alch/alchemy-web3
+```
+
+[Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3) 是 [Web3.js](https://docs.web3js.org/) 的包装器，提供增强的应用程序接口方法和其他重要优势，让 Web3 开发者的工作更轻松。 它设计成只需经过最少的配置即可使用，因此你可以直接在你的应用程序中开始使用它！
+
+然后，在你的项目目录中安装 [dotenv](https://www.npmjs.com/package/dotenv) 程序包，我们就有了一个在获取我们应用程序接口密钥后安全存储它的地方。
+
+```text
+npm install dotenv --save
+```
+
+对于我们的去中心化应用程序，将不再使用 HTTP 应用程序接口密钥，**而是改用 Websockets 应用程序接口密钥**，因为它会允许我们设置一个监测智能合约中消息变化的监听器。
+
+在你获得应用程序接口密钥后，在你的根目录中创建 `.env` 文件，并在其中添加你的 Alchemy Websockets URL。 在这之后，你的 `.env` 文件应该如下所示：
+
+```javascript
+REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/Current Message:
+{message}
+ +New Message:
+ +
+ setNewMessage(e.target.value)}
+ value={newMessage}
+ />
+
+ {status}
+ + ++ {" "} + 🦊 + You must install MetaMask, a virtual Ethereum wallet, in your + browser. + +
+ + ), + } + } +} +``` + +那么，这一大段代码究竟是做什么的呢？ + +首先，该函数会检查你的浏览器是否启用了 `window.ethereum`。 + +`window.ethereum` 是一个由 MetaMask 和其他钱包提供商注入的全局应用程序接口，它允许网站请求用户的以太坊帐户。 如果被批准，它可以读取用户连接的区块链上的数据，并建议用户签署消息和交易。 参阅 [MetaMask 文档](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents)了解更多信息！ + +如果 `window.ethereum` _ 不存在_，则表示未安装 MetaMask。 这会导致返回一个 JSON 对象，其中返回的 `address` 是一个空字符串，而 `status` JSX 对象指示用户必须安装 MetaMask。 + +现在如果 `window.ethereum` _存在_，那么事情就会变得有趣。 + +使用 try/catch 循环，我们将尝试通过调用 [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts) 连接到 MetaMask。 调用此函数将在浏览器中打开 MetaMask，提示用户将他们的钱包连接到你的去中心化应用程序。 + +- 如果用户选择连接，`method: "eth_requestAccounts"` 将返回一个数组，其中包含连接到去中心化应用程序的用户的所有帐户地址。 总之，我们的 `connectWallet` 函数将返回一个 JSON 对象，其中包含此数组中的_第一个 _ `address` \（见第 9 行\），并返回一条 `status` 信息，提示用户向智能合约写入信息。 +- 如果用户拒绝连接，则 JSON 对象将包含返回的 `address` 的空字符串和反映用户拒绝连接的 `status` 信息。 + +现在我们已经编写了这个 `connectWallet` 函数，下一步是调用它到我们的 `HelloWorld.js` 组件中。 + +#### 将 `connectWallet` 函数添加到你的 `HelloWorld.js` 用户界面组件中 {#add-the-connectWallet-function-to-your-HelloWorld-js-ui-component} + +导航到 `HelloWorld.js` 文件中的 `connectWalletPressed` 函数，并将其更新为以下内容： + +```javascript +// HelloWorld.js + +const connectWalletPressed = async () => { + const walletResponse = await connectWallet() + setStatus(walletResponse.status) + setWallet(walletResponse.address) +} +``` + +注意我们的大部分函数是如何从 `interact.js` 文件中的 `HelloWorld.js` 组件中抽象出来的？ 这就是我们遵守 M-V-C 规范的原因！ + +在 `connectWalletPressed` 中，我们只需对导入的 `connectWallet` 函数进行 await 调用，并使用其响应，通过变量的状态挂钩更新我们的 `status` 和 `walletAddress ` 变量。 + +现在，让我们保存两个文件 \(`HelloWorld.js` 和 `interact.js`\) ，并测试一下我们目前的用户界面。 + +打开浏览器，在地址栏中输入 [localhost:3000](http://localhost:3000/)，然后按页面右上角的“Connect Wallet”按钮。 + +如果你安装了 MetaMask，系统会提示你将钱包连接到去中心化应用程序。 接受邀请并连接。 + +你会看到钱包按钮现在反映你的地址已连接！ 太棒了 🔥 ！ + +接下来，尝试刷新页面......有点儿奇怪。 我们的钱包按钮提示我们连接 MetaMask，尽管它已经连接...... + +然而，不要害怕！ 我们可以通过实现 `getCurrentWalletConnected` 轻松解决这个问题（明白了吗？），它将检查一个地址是否已经连接到我们的去中心化应用程序，并相应地更新我们的用户界面！ + +#### `getCurrentWalletConnected` 函数 {#the-getcurrentwalletconnected-function} + +将 `interact.js` 文件中的 `getCurrentWalletConnected` 函数更新如下： + +```javascript +// interact.js + +export const getCurrentWalletConnected = async () => { + if (window.ethereum) { + try { + const addressArray = await window.ethereum.request({ + method: "eth_accounts", + }) + if (addressArray.length > 0) { + return { + address: addressArray[0], + status: "👆🏽 Write a message in the text-field above.", + } + } else { + return { + address: "", + status: "🦊 Connect to MetaMask using the top right button.", + } + } + } catch (err) { + return { + address: "", + status: "😥 " + err.message, + } + } + } else { + return { + address: "", + status: ( + ++ {" "} + 🦊 + You must install MetaMask, a virtual Ethereum wallet, in your + browser. + +
+ + ), + } + } +} +``` + +这段代码与我们刚刚在上一步中编写的 `connectWallet` 函数 _非常相似_ 。 + +主要区别在于，这里我们调用了 `eth_accounts` 方法，它只是返回一个数组，其中包含当前连接到我们的去中心化应用程序的 MetaMask 地址，而不是调用 `eth_requestAccounts` 方法来打开 MetaMask 以供用户连接他们的钱包。 + +为了看看这个函数在实际应用中的效果，让我们在 `HelloWorld.js` 组件的 `useEffect` 函数中调用它： + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) +}, []) +``` + +请注意，我们使用调用 `getCurrentWalletConnected` 的响应来更新我们的 `walletAddress` 和 `status` 状态变量。 + +现在我们已经添加了这段代码，让我们刷新浏览器窗口，看看最新的效果如何。 + +很不错！ 按钮应显示你已连接，并显示已连接钱包地址的预览 — 即使在你刷新后也是如此！ + +#### 实现 `addWalletListener` {#implement-addwalletlistener} + +我们的去中心化应用程序钱包设置的最后一步是实现钱包监听器，以便我们的用户界面在钱包状态发生变化时更新，例如当用户断开或切换帐户时。 + +在你的 `HelloWorld.js` 文件中，按照以下方式修改你的 `addWalletListener` 函数： + +```javascript +// HelloWorld.js + +function addWalletListener() { + if (window.ethereum) { + window.ethereum.on("accountsChanged", (accounts) => { + if (accounts.length > 0) { + setWallet(accounts[0]) + setStatus("👆🏽 Write a message in the text-field above.") + } else { + setWallet("") + setStatus("🦊 Connect to MetaMask using the top right button.") + } + }) + } else { + setStatus( ++ {" "} + 🦊 + You must install MetaMask, a virtual Ethereum wallet, in your browser. + +
+ ) + } +} +``` + +我敢打赌，到了这一步你可能已经无需我们帮助就能理解这里发生的情况了，但为了确保详尽无遗，我们还是快速梳理一下： + +- 首先，我们的函数检查是否启用了 `window.ethereum` \（即 MetaMask 已安装\）。 + - 如果未启用，我们只需将 `status` 状态变量设置为提示用户安装 MetaMask 的 JSX 字符串。 + - 如果启用，我们会在第 3 行设置监听器 `window.ethereum.on("accountsChanged")` 监听 MetaMask 钱包中的状态变化，变化包括用户将其他帐户连接到去中心化应用程序、切换帐户或断开帐户。 如果至少连接了一个帐户，`walletAddress` 状态变量将更新为监听器返回的 `accounts` 数组中的第一个帐户。 否则，`walletAddress` 设置为空字符串。 + +最后，但同样重要的一点是，我们必须在 `useEffect` 函数中调用它： + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) + + addWalletListener() +}, []) +``` + +就是这样！ 我们已经成功完成了所有钱包功能的编程！ 现在，我们来完成最后一个任务：更新智能合约中存储的消息！ + +### 第六步：实现 `updateMessage` 函数 {#step-6-implement-the-updateMessage-function} + +好嘞，伙计们，我们已经来到最后阶段了！ 在 `interact.js` 文件中的 `updateMessage` 函数中，我们将执行以下操作： + +1. 确保我们想要在智能合约中发布的消息有效 +2. 使用 MetaMask 钱包签署每项交易 +3. 从 `HelloWorld.js` 前端组件调用这个函数 + +这不会太耗时；我们把这个去中心化应用程序做完！ + +#### 输入错误处理 {#input-error-handling} + +显然，我们在函数开头加入一些输入错误处理代码是有意义的做法。 + +如果未安装 MetaMask 扩展，或者钱包尚未连接 \（即传入的 `address` 为空字符串\），亦或是 `message` 为空字符串，我们希望函数能够提前返回。 让我们在 `updateMessage` 函数中添加以下错误处理代码： + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + if (!window.ethereum || address === null) { + return { + status: + "💡 Connect your MetaMask wallet to update the message on the blockchain.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Your message cannot be an empty string.", + } + } +} +``` + +现在，我们已经实现了正确的输入错误处理，接下来就是通过 MetaMask 来签署交易的时候了！ + +#### 签署交易 {#signing-our-transaction} + +如果你已经对传统的 web3 以太坊交易驾轻就熟，那么接下来我们要编写的代码将会非常熟悉。 在输入错误处理代码下方，向 `updateMessage` 函数添加以下内容： + +```javascript +// interact.js + +//set up transaction parameters +const transactionParameters = { + to: contractAddress, // Required except during contract publications. + from: address, // must match user's active address. + data: helloWorldContract.methods.update(message).encodeABI(), +} + +//sign the transaction +try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + View the status of your transaction on Etherscan! + ++ ℹ️ Once the transaction is verified by the network, the message will be + updated automatically. + + ), + } +} catch (error) { + return { + status: "😥 " + error.message, + } +} +``` + +让我们来详细解析下这些代码的工作原理。 首先，我们设置了交易参数，具体内容如下： + +- `to` 指定接收者地址\（我们的智能合约\） +- `from` 指定交易的签名者，即我们传入函数的 `address` 变量 +- `data` 包含对我们的“Hello World”智能合约中 `update` 方法的调用，其中将 `message` 字符串变量作为输入 + +接下来，我们进行对 `window.ethereum.request` 进行异步调用，请求 MetaMask 对交易进行签名。 请注意，在第 11 和 12 行中，我们指定了以太坊方法 `eth_sendTransaction`，并传入了我们的 `transactionParameters`。 + +此时，MetaMask 将在浏览器中打开，并提示用户签署或拒绝交易。 + +- 如果交易成功，该函数将返回一个 JSON 对象，其中 `status` JSX 字符串会提示用户前往 Etherscan 查看更多关于他们交易的信息。 +- 如果交易失败，该函数将返回一个 JSON 对象，其中 `status` 字符串会传递错误消息。 + +综上所述，我们的 `updateMessage` 函数应如下所示： + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + //input error handling + if (!window.ethereum || address === null) { + return { + status: + "💡 Connect your MetaMask wallet to update the message on the blockchain.", + } + } + + if (message.trim() === "") { + return { + status: "❌ Your message cannot be an empty string.", + } + } + + //set up transaction parameters + const transactionParameters = { + to: contractAddress, // Required except during contract publications. + from: address, // must match user's active address. + data: helloWorldContract.methods.update(message).encodeABI(), + } + + //sign the transaction + try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + View the status of your transaction on Etherscan! + +
+ ℹ️ Once the transaction is verified by the network, the message will + be updated automatically. + + ), + } + } catch (error) { + return { + status: "😥 " + error.message, + } + } +} +``` + +最后但同样重要的是，我们需要将 `updateMessage` 函数与我们的 `HelloWorld.js` 组件进行连接。 + +#### 将 `updateMessage` 函数连接到 `HelloWorld.js` 前端 {#connect-updatemessage-to-the-helloworld-js-frontend} + +我们的 `onUpdatePressed` 函数应当通过异步调用导入的 `updateMessage` 函数，并根据交易成功或失败的结果来修改 `status` 状态变量： + +```javascript +// HelloWorld.js + +const onUpdatePressed = async () => { + const { status } = await updateMessage(walletAddress, newMessage) + setStatus(status) +} +``` + +这个实现非常干净且简单。 你猜怎么着... 你的去中心化应用程序终于完工了！ + +现在就去测试一下 **Update** 按钮吧！ + +### 开发你的去中心化应用程序 {#make-your-own-custom-dapp} + +哇哦，你成功完成了本教程的全部内容！ 回顾一下，你已经学习了如何： + +- 使用 MetaMask 钱包连接你的去中心化应用程序项目 +- 使用 [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) 应用程序接口从你的智能合约中读取数据 +- 使用 MetaMask 对以太坊交易签名 + +现在，你已经完全掌握本教程中的技能，可以着手开发属于自己的个性化去中心化应用程序项目了！ 一如既往，如果你有任何问题，欢迎随时在 [Alchemy Discord](https://discord.gg/gWuC7zB) 频道联系我们寻求帮助。 🧙♂️ + +完成本教程后，请在 Twitter 上标记我们 [@alchemyplatform](https://twitter.com/AlchemyPlatform)，告诉我们你的体验如何，或者你是否有任何反馈！ diff --git a/public/content/translations/zh/developers/tutorials/how-to-mock-solidity-contracts-for-testing/index.md b/public/content/translations/zh/developers/tutorials/how-to-mock-solidity-contracts-for-testing/index.md index 122112b79c6..01d01f8fd24 100644 --- a/public/content/translations/zh/developers/tutorials/how-to-mock-solidity-contracts-for-testing/index.md +++ b/public/content/translations/zh/developers/tutorials/how-to-mock-solidity-contracts-for-testing/index.md @@ -9,7 +9,7 @@ tags: - "测试" - "模拟" skill: intermediate -published: 2020-05-02 +published: 2020年05月02日 source: soliditydeveloper.com sourceUrl: https://soliditydeveloper.com/mocking-contracts --- @@ -87,8 +87,8 @@ contract PrivateERC20Mock is PrivateERC20 { 你将得到以下错误消息之一： -- `PrivateERC20Mock.sol: 类型错误：重写函数缺少"override"修饰符。(TypeError: Overriding function is missing "override" specifier.)` -- `PrivateERC20.sol：类型错误：尝试重写非virtual函数。 您是否忘记了添加“virtual”关键字？(TypeError: Trying to override non-virtual function. Did you forget to add "virtual"?.)` +- `PrivateERC20Mock.sol: 类型错误：重写函数缺少"override"修改器。(TypeError: Overriding function is missing "override" specifier.)` +- `PrivateERC20.sol：类型错误：尝试重写非virtual函数。 你是否忘记了添加“virtual”关键字？(TypeError: Trying to override non-virtual function. Did you forget to add "virtual"?.)` 由于使用的是新的 Solidity 0.6 版本，所以必须为可被重写的函数添加 `virtual` 关键字，为执行重写的函数添加 override。 因此，我们为两个 `isPublic` 函数添加这些关键字。 diff --git a/public/content/translations/zh/developers/tutorials/kickstart-your-dapp-frontend-development-wth-create-eth-app/index.md b/public/content/translations/zh/developers/tutorials/kickstart-your-dapp-frontend-development-wth-create-eth-app/index.md new file mode 100644 index 00000000000..3fe08c87523 --- /dev/null +++ b/public/content/translations/zh/developers/tutorials/kickstart-your-dapp-frontend-development-wth-create-eth-app/index.md @@ -0,0 +1,110 @@ +--- +title: 使用 create-eth-app 启动去中心化应用程序前端开发 +description: 如何使用 create-eth-app 及其功能的概述 +author: "Markus Waas" +tags: + - "create-eth-app" + - "前端" + - "javascript" + - "ethers.js" + - "图表" + - "deFi" +skill: beginner +lang: zh +published: 2020-04-27 +source: soliditydeveloper.com +sourceUrl: https://soliditydeveloper.com/create-eth-app +--- + +上一次，我们了解 [Solidity](https://soliditydeveloper.com/solidity-overview-2020) 大的框架时，已经提到了 [create-eth-app](https://github.com/PaulRBerg/create-eth-app)。 现在，你将了解如何使用它，它集成了哪些功能以及如何对其进行扩展等内容。 这个应用程序由 [Sablier](http://sablier.com/) 创始人 Paul Razvan Berg 首创，它将启动你的前端开发，并且提供多个可选集成供你选择。 + +## 安装 {#installation} + +安装需要 Yarn 0.25 或更高版本 (`npm install yarn --global`)。 安装就像运行程序一样简单： + +```bash +yarn create eth-app my-eth-app +cd my-eth-app +yarn react-app:start +``` + +这是正后台使用 [create-react-app](https://github.com/facebook/create-react-app)。 要查看你的应用程序，请打开 `http://localhost:3000/`。 当你准备好部署到生产环境中时，使用 yarn build 创建一个缩小的捆绑包。 一个简单的托管它的方法是使用 [ Netlify](https://www.netlify.com/)。 你可以创建一个 GitHub 存储库，将其添加到 Netlify，设置构建命令，这样就完成了！ 你的应用程序将被托管并可供所有人使用。 所有这些都是免费的。 + +## 功能 {#features} + +### React 和 create-react-app {#react--create-react-app} + +首先，我们来了解应用程序的核心：React 和 _create-react-app_ 带来的所有附加功能。 如果你不想集成以太坊，那么仅使用它是一个很好的选择。 [React](https://reactjs.org/) 本身使构建交互式 UI 变得非常容易。 它可能不像 [Vue](https://vuejs.org/) 那样方便初学者，但仍然被广泛使用。 它具有更多的功能，最重要的是还有数千个附加库可供选择。 _create-react-app_ 也使它非常容易开始使用，具有的功能包括： + +- React、JSX、ES6、TypeScript、Flow 语法支持。 +- ES6 之外的语言附加功能，如对象扩展运算符。 +- 自动添加前缀的 CSS，所以你不需要 -webkit- 或其他前缀。 +- 快速交互式单元测试运行程序，内置对覆盖率报告的支持。 +- 对常见错误发出警告的实时开发服务器。 +- 一个用于捆绑JS、CSS和图片的构建脚本，带有哈希值和资源映射。 + +尤其是 _create-eth-app_ 正在使用新的 [hooks effect](https://reactjs.org/docs/hooks-effect.html)。 这是一种编写强大而又非常小巧的所谓功能组件的方法。 关于如何在 _create-eth-app_ 中使用 Apollo，请看下面关于 Apollo 的部分。 + +### Yarn Workspace {#yarn-workspaces} + +[Yarn Workspace](https://classic.yarnpkg.com/en/docs/workspaces/)允许你拥有多个包， 但可以从根目录对他们进行管理，而且可以使用 `yarn install` 一次性安装所有依赖项。 这对于较小的附加包，例如智能合约地址/ABI 管理（关于你在哪里部署了哪些智能合约以及如何与它们通信的信息）或图集成等，尤其有意义，这两个包都是 `create-eth-app` 的一部分。 + +### ethers.js {#ethersjs} + +虽然 [Web3](https://docs.web3js.org/) 仍被广泛使用，但 [ethers.js](https://docs.ethers.io/) 作为一种替代方案，在过去一年中获得了更多的关注，并且已集成到 _create-eth-app_ 中。 你可以使用这个操作，将它更改为 Web3，或者考虑升级为 [ethers.js v5](https://docs-beta.ethers.io/)，该版本即将完成测试阶段。 + +### 图表 {#the-graph} + +与 [Restful API](https://restfulapi.net/) 相比，[GraphQL](https://graphql.org/) 是处理数据的另一种方式。 与 Restful Api 相比，它们有几个优势，特别是对于去中心化的区块链数据来说更是如此。 如果你对这背后的原因感兴趣，可以看看 [GraphQL 将为去中心化网络提供动力](https://medium.com/graphprotocol/graphql-will-power-the-decentralized-web-d7443a69c69a)。 + +通常你会直接从你的智能合约中获取数据。 想要读取上次交易的时间吗？ 只需调用 `MyContract.methods.latestTradeTime().call()`，它会从以太坊节点获取数据并传输到你的去中心化应用程序中。 但如果你需要数百个不同的数据点，该怎么办？ 这将导致在节点上进行数百次数据提取操作，每次都有[往返延时](https://wikipedia.org/wiki/Round-trip_delay_time)，使你的去中心化应用程序缓慢且效率低下。 一个变通的办法是在你的合约中设置一个取数器调用函数，一次性返回多个数据。 但这并不总是理想的。 + +然后你可能对历史数据也感兴趣。 你不仅想知道上次交易的时间，还想知道自己做过的所有交易的时间。 使用 _create-eth-app_ 子图包，阅读[文档](https://thegraph.com/docs/define-a-subgraph)并使其适合你自己的合约。 如果你正在寻找受欢迎的智能合约，甚至可能已经有了一个子图。 可以查看[子图浏览器](https://thegraph.com/explorer/)。 + +有了子图后，你可以在去中心化应用程序中编写一个简单的查询来检索所有重要的区块链数据，包括你需要的历史数据，并且只需一次提取操作即可。 + +### Apollo {#apollo} + +由于 [Apollo Boost](https://www.apollographql.com/docs/react/get-started/) 集成，你可以轻松将图集成到 React 去中心化应用程序中。 特别是在使用 [React hooks 和 Apollo](https://www.apollographql.com/blog/apollo-client-now-with-react-hooks-676d116eeae2) 时，获取数据就像在你的组件中写一个 GraphQl 查询一样简单： + +```js +const { loading, error, data } = useQuery(myGraphQlQuery) + +React.useEffect(() => { + if (!loading && !error && data) { + console.log({ data }) + } +}, [loading, error, data]) +``` + +## 模板 {#templates} + +在顶部，你可以从几个不同的模板中进行选择。 到目前为止，你可以使用 Aave、Comp、UniSwap 或 sablier 集成。 它们都增加了重要的服务智能合约地址以及预先制作的子图集成。 只需将模板添加到创建命令，例如 `yarn create eth-app my-eth-app --with-template aave`。 + +### Aave {#aave} + +[Aave](https://aave.com/) 是一个去中心化的货币借贷市场。 存款人向市场提供流动性以赚取被动收入，而借款人则可以利用抵押物进行借贷。 Aave 的一个独特功能是那些[闪电贷](https://docs.aave.com/developers/guides/flash-loans)，让你可以在没有任何抵押品的情况下借钱，只要你在一次交易中返还贷款即可。 例如，这对于在套利交易中为你提供额外的现金很有用。 + +为你赢得利益的交易代币被称为 _aTokens_。 + +当你选择将 Aave 与 _create-eth-app_ 集成时，你将获得[子图集成](https://docs.aave.com/developers/getting-started/using-graphql)。 Aave 使用 The Graph，并且已经在 [Ropsten](https://thegraph.com/explorer/subgraph/aave/protocol-ropsten) 和 [Mainnet](https://thegraph.com/explorer/subgraph/aave/protocol) 上以[原始](https://thegraph.com/explorer/subgraph/aave/protocol-raw)或[格式化](https://thegraph.com/explorer/subgraph/aave/protocol)形式为你提供了几个现成的子图。 + + + +### Compound {#compound} + +[ Compound ](https://compound.finance/) 类似于 Aave。 集成中已包含新的 [Compound v2 Subgraph](https://medium.com/graphprotocol/https-medium-com-graphprotocol-compound-v2-subgraph-highlight-a5f38f094195)。 在这里，赚取利益的代币竟然被称为_ cTokens_。 + +### Uniswap {#uniswap} + +[Uniswap](https://uniswap.exchange/) 是一个去中心化的交易所 (DEX)。 流动性供应商可以通过为交易双方提供所需的代币或以太币来赚取费用。 它正在被广泛使用，因此对于非常多的各种代币来说，它的流动性是最高的当中的一个。 例如，你可以轻松地将其集成到你的去中心化应用程序中，让用户可以将他们的以太币换成 DAI 币。 + +遗憾的是，在撰写本文时，集成仅针对 Uniswap v1，而不是 [刚刚发布的 v2](https://uniswap.org/blog/uniswap-v2/)。 + +### Sablier {#sablier} + +[Sablier](https://sablier.com/) 允许用户进行流支付。 完成最初的设置后，你实际上是不断地得到你的货币，而不是在某个支付日，并且不需要进行进一步的管理。 该集成包含了它[自己的子图](https://thegraph.com/explorer/subgraph/sablierhq/sablier)。 + +## 接下来是什么？ {#whats-next} + +如果你对 _create-eth-app_ 有任何疑问，请访问 [Sablier 社区服务器](https://discord.gg/bsS8T47)，在那里你可以与 _create-eth-app_ 的作者取得联系。 作为接下来的第一步，你可能希望集成一个 UI 框架，例如 [Material UI](https://material-ui.com/)，为你实际需要的数据编写 GraphQL 查询并设置部署。 diff --git a/public/content/translations/zh/developers/tutorials/logging-events-smart-contracts/index.md b/public/content/translations/zh/developers/tutorials/logging-events-smart-contracts/index.md index e47c608f3ab..1edade90aac 100644 --- a/public/content/translations/zh/developers/tutorials/logging-events-smart-contracts/index.md +++ b/public/content/translations/zh/developers/tutorials/logging-events-smart-contracts/index.md @@ -15,7 +15,7 @@ sourceUrl: https://ethereumdev.io/logging-data-with-events/ address: "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE" --- -在 solidity 中，[事件](/developers/docs/smart-contracts/anatomy/#events-and-logs)是智能合约可触发的调度信号。 去中心化应用程序或其他任何连接到以太坊 JSON-PRC 应用程序接口的程序，都可以监听这些事件并执行相应操作。 还可以为事件编制索引，便于以后可以搜索事件历史。 +在solidity中，[事件](/developers/docs/smart-contracts/anatomy/#events-and-logs)是智能合约可触发的调度信号。 去中心化应用程序或其他任何连接到以太坊 JSON-PRC 应用程序接口的程序，都可以监听这些事件并执行相应操作。 还可以为事件编制索引，便于以后可以搜索事件历史。 ## 事件 {#events} @@ -55,12 +55,12 @@ contract Counter { 注意： -- **第 5 行**：我们声明了事件及其包含的内容、旧值以及新值。 +- **第5行**：我们声明了事件及其包含的内容、旧值以及新值。 -- **第 13 行**：当我们增加 count 变量的值时，我们会触发事件。 +- **第13行**：当我们增加count变量的值时，我们会触发事件。 -如果我们现在部署合约并调用 increment 函数，如果您在名为 logs 的数组内单击新交易，我们将看到 Remix 会自动显示它。 +如果我们现在部署合约并调用increment函数，如果你在名为logs的数组内单击新交易，我们将看到Remix会自动显示它。  -日志在调试智能合约时非常有用，另一方面，如果您构建一个不同人使用的应用，并且使分析更容易跟踪和了解您的智能合约的使用情况，那么日志也是非常重要的手段。 交易生成的日志显示在常见区块浏览器中，例如，您还可以使用日志创建链下脚本，以便监听特定事件并在事件发生时采取行动。 +日志在调试智能合约时非常有用，另一方面，如果你构建一个不同人使用的应用，并且使分析更容易跟踪和了解你的智能合约的使用情况，那么日志也是非常重要的手段。 交易生成的日志显示在常见区块浏览器中，例如，你还可以使用日志创建链下脚本，以便监听特定事件并在事件发生时采取行动。 diff --git a/public/content/translations/zh/developers/tutorials/merkle-proofs-for-offline-data-integrity/index.md b/public/content/translations/zh/developers/tutorials/merkle-proofs-for-offline-data-integrity/index.md index 64b9bb27f35..52a2697eca7 100644 --- a/public/content/translations/zh/developers/tutorials/merkle-proofs-for-offline-data-integrity/index.md +++ b/public/content/translations/zh/developers/tutorials/merkle-proofs-for-offline-data-integrity/index.md @@ -3,8 +3,6 @@ title: 离线数据完整性的默克尔证明 description: 在链上确保链下数据的完整性 author: Ori Pomerantz tags: - - "默克尔" - - "完整性" - "存储" skill: advanced lang: zh @@ -17,7 +15,7 @@ published: 2021-12-30 为了解决这个问题，以太坊生态系统开发了[许多以去中心化方式存储数据的 代替方法](/developers/docs/storage/)。 通常情况下， 需要在可用性与价格之间进行取舍。 然而，完整性通常可以得到保证。 -本篇文章中，您将学习**如何**在以下情况下确保数据的完整性：不将数据存储在区块链上，而是使用 [Merkle 证明](https://computersciencewiki.org/index.php/Merkle_proof)。 +本篇文章中，你将学习**如何**在以下情况下确保数据的完整性：不将数据存储在区块链上，而是使用 [Merkle 证明](https://computersciencewiki.org/index.php/Merkle_proof)。 ## 工作原理 {#how-does-it-work} @@ -27,7 +25,7 @@ published: 2021-12-30  -根哈希是唯一需要存储在链上的部分。 为了证明一个特定值，您需要提供所有与之合并才能获取根的哈希值。 例如，要证明 `C`，您需要提供 `D`、`H(A-B)` 和 `H(E-H)`。 +根哈希是唯一需要存储在链上的部分。 为了证明一个特定值，你需要提供所有与之合并才能获取根的哈希值。 例如，要证明 `C`，你需要提供 `D`、`H(A-B)` 和 `H(E-H)`。  @@ -59,7 +57,7 @@ const dataArray = [ ] ``` -例如，将每条数据编码为单个 256 位整数，并以非 JSON 的格式存储。 然而，这意味着在提取合约中的数据时，可以大大减少处理工作，从而显著降低了燃料成本。 [您可以在链上读取 JSON 格式的数据](https://github.com/chrisdotn/jsmnSol)，但请尽量避免这么做。 +例如，将每条数据编码为单个 256 位整数，并以非 JSON 的格式存储。 然而，这意味着在提取合约中的数据时，可以大大减少处理工作，从而显著降低了燃料成本。 [你可以在链上读取 JSON 格式的数据](https://github.com/chrisdotn/jsmnSol)，但请尽量避免这么做。 ```javascript // The array of hash values, as BigInts @@ -78,7 +76,7 @@ const hash = (x) => 以太币哈希函数的预期结果是一个带十六进制数字的 JavaScript 字符串，如 `0x60A7`，并用另一个相同结构的字符串响应。 然而，对于代码的其他部分，使用 `BigInt` 类型更为容易，所以我们将转换为一个十六进制字符串，然后再转回 BigInt。 ```javascript -// Symetrical hash of a pair so we won't care if the order is reversed. +// Symmetrical hash of a pair so we won't care if the order is reversed. const pairHash = (a, b) => hash(hash(a) ^ hash(b)) ``` @@ -195,7 +193,7 @@ contract MerkleProof { } // setRoot ``` -为默克尔根设置和获取函数。 在生产系统中，让每个人都更新默克尔根是一个*非常糟糕的主意*。 这里这样做是为了简化示例代码。 **不要在数据完整性非常重要的系统上执行**。 +为默克尔根设置和获取函数。 在生产系统中，让每个人都更新默克尔根是一个_非常糟糕的主意_。 这里这样做是为了简化示例代码。 **不要在数据完整性非常重要的系统上执行**。 ```solidity function hash(uint _a) internal pure returns(uint) { @@ -207,7 +205,7 @@ contract MerkleProof { } ``` -此函数生成一个配对哈希值。 它只是将 `hash` 和 `pairHash` 函数的 JavaScript 代码变成 Solidity。 +此函数生成一个配对哈希值。 它只是将 `hash` 和 `pairHash` 函数的 JavaScript 代码转变为 Solidity。 **注意：**这是又一次对可读性的优化。 根据[函数定义](https://www.tutorialspoint.com/solidity/solidity_cryptographic_functions.htm)，也许可以将数据存储为 [`bytes32`](https://docs.soliditylang.org/en/v0.5.3/types.html#fixed-size-byte-arrays) 类型值并避免转换。 @@ -240,4 +238,4 @@ contract MerkleProof { 在现实中，你可能永远不会独立实现默克尔树。 有很多广为人知并经过审核的程序库可供使用，一般来说，最好不要自己独立实现加密基元。 但我希望你们现在能够更好地理解默克尔证明，并能够决定何时值得使用。 -请注意，虽然默克尔证明能维持*完整性*，但并不维持*可用性*。 如果数据存储方决定禁止访问，而且你不能构建默克尔树来访问你的资产，那么知道没有人可以拿走你的资产也只能作为一种小小的慰藉而已。 所以默克尔树最好和某种去中心化存储一起使用，例如星际文件系统。 +请注意，虽然默克尔证明能维持_完整性_，但并不维持_可用性_。 如果数据存储方决定禁止访问，而且你不能构建默克尔树来访问你的资产，那么知道没有人可以拿走你的资产也只能作为一种小小的慰藉而已。 所以默克尔树最好和某种去中心化存储一起使用，例如星际文件系统。 diff --git a/public/content/translations/zh/developers/tutorials/secure-development-workflow/index.md b/public/content/translations/zh/developers/tutorials/secure-development-workflow/index.md index 0ecc39f28d4..737456713af 100644 --- a/public/content/translations/zh/developers/tutorials/secure-development-workflow/index.md +++ b/public/content/translations/zh/developers/tutorials/secure-development-workflow/index.md @@ -15,19 +15,19 @@ sourceUrl: https://github.com/crytic/building-secure-contracts/blob/master/devel ## 智能合约开发清单 {#smart-contract-development-checklist} -这是一个高级别的过程，我们建议在您编写智能合约时遵循。 +这是一个高级别的过程，我们建议在你编写智能合约时遵循。 检查已知的安全问题： -- 使用 [Slither](https://github.com/crytic/slither) 审核您的合约。 该程序有 40 多个内置检测器，可以应对常见的脆弱性。 在每次签入时使用新代码运行它，确保它获得一个干净的报告（或使用分类模式来消除某些问题）。 -- 使用 [Crytic](https://crytic.io/) 审核您的合约。 它可以检查 Slither 未涉及的 50 个问题。 Crytic 还可以帮助您的团队成员保持联系，通过在 GitHub 上的拉取请求轻松显示安全问题。 +- 使用 [Slither](https://github.com/crytic/slither) 审核你的合约。 该程序有 40 多个内置检测器，可以应对常见的脆弱性。 在每次签入时使用新代码运行它，确保它获得一个干净的报告（或使用分类模式来消除某些问题）。 +- 使用 [Crytic](https://crytic.io/) 审核你的合约。 它可以检查 Slither 未涉及的 50 个问题。 Crytic 还可以帮助你的团队成员保持联系，通过在 GitHub 上的拉取请求轻松显示安全问题。 -考虑您的智能合约的特殊功能： +考虑你的智能合约的特殊功能： -- 您的合约是否可以升级？ 使用 [`slither-check-upgradeability`](https://github.com/crytic/slither/wiki/Upgradeability-Checks) 或 [Crytic](https://blog.trailofbits.com/2020/06/12/upgradeable-contracts-made-safer-with-crytic/) 检查您的可升级代码是否有缺陷。 我们记录了 17 种升级可能出现的问题。 -- 您的合约是否声明符合 ERC 的要求？ 使用 [`slither-check-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) 对它们进行审核。 这个工具能立即识别出六个常见规范的偏差。 -- 您在 Truffle 中设有单元测试吗？ 将它们添加到 [`slither-prop`](https://github.com/crytic/slither/wiki/Property-generation)。 它可以根据您的具体代码自动生成一套强大的安全属性，用于 ERC20 功能。 -- 您是否与第三方代币集成？ 在依赖外部合约之前，请先查看我们的[代币集成清单](/developers/tutorials/token-integration-checklist/)。 +- 你的合约是否可以升级？ 使用 [`slither-check-upgradeability`](https://github.com/crytic/slither/wiki/Upgradeability-Checks) 或 [Crytic](https://blog.trailofbits.com/2020/06/12/upgradeable-contracts-made-safer-with-crytic/) 检查你的可升级代码是否有缺陷。 我们记录了 17 种升级可能出现的问题。 +- 你的合约是否声明符合 ERC 的要求？ 使用 [`slither-check-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) 对它们进行审核。 这个工具能立即识别出六个常见规范的偏差。 +- 你在 Truffle 中设有单元测试吗？ 将它们添加到 [`slither-prop`](https://github.com/crytic/slither/wiki/Property-generation)。 它可以根据你的具体代码自动生成一套强大的安全属性，用于 ERC20 功能。 +- 你是否与第三方代币集成？ 在依赖外部合约之前，请先查看我们的[代币集成清单](/developers/tutorials/token-integration-checklist/)。 目视检查代码的关键安全功能。 @@ -38,19 +38,19 @@ sourceUrl: https://github.com/crytic/building-secure-contracts/blob/master/devel 记录关键安全属性，并使用自动化测试生成器对其进行评估： - 学习 [记录代码的安全属性](/developers/tutorials/guide-to-smart-contract-security-tools/)。 一开始是艰难的，但它是实现良好结果的最重要的活动。 这也是使用本教程中任何高级技术的先决条件。 -- 在 Solidity 中定义安全属性，用于 [Echidna](https://github.com/crytic/echidna) 和 [Manticore](https://manticore.readthedocs.io/en/latest/verifier.html)。 重点是您的状态机、访问控制、算术运算、外部交互和标准一致性。 +- 在 Solidity 中定义安全属性，用于 [Echidna](https://github.com/crytic/echidna) 和 [Manticore](https://manticore.readthedocs.io/en/latest/verifier.html)。 重点是你的状态机、访问控制、算术运算、外部交互和标准一致性。 - 使用 [ Slither 的 Python API](/developers/tutorials/how-to-use-slither-to-find-smart-contract-bugs/) 定义安全属性。 重点是继承、变量依赖项、访问控制和其他结构问题。 -- 在每次提交时，使用 [Crytic](https://crytic.io) 运行您的属性测试。 Crytic 可以使用和评估安全属性测试，因此团队中的每个人都可以轻松地看到他们通过 GitHub。 测试失败会阻止提交。 +- 在每次提交时，使用 [Crytic](https://crytic.io) 运行你的属性测试。 Crytic 可以使用和评估安全属性测试，因此团队中的每个人都可以轻松地看到他们通过 GitHub。 测试失败会阻止提交。 最后，请注意自动化工具无法轻易找到的问题： -- 缺乏隐私：当您的事务在池中排队时，其他所有人都可以看到您的事务 +- 缺乏隐私：当你的事务在池中排队时，其他所有人都可以看到你的事务 - 抢先提前交易 - 加密操作 - 与外部 DeFi 组件的风险互动 ## 寻求帮助 {#ask-for-help} -[以太坊的办公时间](https://calendly.com/dan-trailofbits/ethereum-office-hours)为每周二下午。 这些 1 小时的 1 对 1 会议是一个机会，您可以向我们询问有关安全的任何问题，使用我们的工具进行故障排除，并获得专家对您当前方法的反馈。 我们将帮助您消化本指南。 +[以太坊的办公时间](https://calendly.com/dan-trailofbits/ethereum-office-hours)为每周二下午。 这些 1 小时的 1 对 1 会议是一个机会，你可以向我们询问有关安全的任何问题，使用我们的工具进行故障排除，并获得专家对你当前方法的反馈。 我们将帮助你消化本指南。 -加入我们的 Slack: [ Empire Hacking](https://join.slack.com/t/empirehacking/shared_invite/zt-h97bbrj8-1jwuiU33nnzg67JcvIciUw)。 如果您有任何问题，可以随时在 #crytic 和 #ethereum 频道上联系我们。 +加入我们的 Slack: [ Empire Hacking](https://join.slack.com/t/empirehacking/shared_invite/zt-h97bbrj8-1jwuiU33nnzg67JcvIciUw)。 如果你有任何问题，可以随时在 #crytic 和 #ethereum 频道上联系我们。 diff --git a/public/content/translations/zh/developers/tutorials/sending-transactions-using-web3-and-alchemy/index.md b/public/content/translations/zh/developers/tutorials/sending-transactions-using-web3-and-alchemy/index.md index 885c97821b5..6c3c84a6963 100644 --- a/public/content/translations/zh/developers/tutorials/sending-transactions-using-web3-and-alchemy/index.md +++ b/public/content/translations/zh/developers/tutorials/sending-transactions-using-web3-and-alchemy/index.md @@ -13,51 +13,56 @@ source: Alchemy 文档 sourceUrl: https://docs.alchemy.com/alchemy/tutorials/sending-txs --- -本文是面向初学者的指南，介绍如何用 Web3 发送以太坊交易。 向以太坊区块链发送交易主要有三个步骤：创建、签署和广播。 我们将对这三个方面进行讨论，希望能回答您可能遇到的所有问题！ 在本教程中，我们将使用 [Alchemy](https://www.alchemy.com/) 将我们的交易发送到以太坊链。 可以[点击此处创建一个免费 Alchemy 帐户](https://auth.alchemyapi.io/signup)。 +本文是面向初学者的指南，介绍如何用 Web3 发送以太坊交易。 向以太坊区块链发送交易主要有三个步骤：创建、签署和广播。 我们将对这三个方面进行讨论，希望能回答你可能遇到的所有问题！ 在本教程中，我们将使用 [Alchemy](https://www.alchemy.com/) 将我们的交易发送到以太坊链。 可以[点击此处创建一个免费 Alchemy 帐户](https://auth.alchemyapi.io/signup)。 -**注意：**本指南适用于在应用程序*后端*签署交易。 如果想在前端集成交易签署，请查看将 [Web3 与浏览器提供程序集成](https://docs.alchemy.com/reference/api-overview#with-a-browser-provider)。 +**注意：**本指南适用于在应用程序_后端_签署交易。 如果想在前端集成交易签署，请查看将 [Web3 与浏览器提供程序集成](https://docs.alchemy.com/reference/api-overview#with-a-browser-provider)。 ## 基本概念 {#the-basics} -像大多数区块链开发人员刚开始的时候一样，您可能已经对如何发送交易（应该非常简单）进行了一些研究，然后阅读了大量的指南，发现每个人有不同的解读，让您有点不知所措和困惑。 如果您已上了那条船，就不要担心，我们在某些时候都会这样！ 所以，在开始之前，让我们弄清楚一些事情： +像大多数区块链开发人员刚开始的时候一样，你可能已经对如何发送交易（应该非常简单）进行了一些研究，然后阅读了大量的指南，发现每个人有不同的解读，让你有点不知所措和困惑。 如果你已上了那条船，就不要担心，我们在某些时候都会这样！ 所以，在开始之前，让我们弄清楚一些事情： -### 1. Alchemy 不会存储您的私钥 {#alchemy-does-not-store-your-private-keys} +### 1. Alchemy 不会存储你的私钥 {#alchemy-does-not-store-your-private-keys} -- 这意味着 Alchemy 无法代表您签署和发送交易。 这样做的原因是出于安全考虑。 Alchemy 绝不会要求您分享您的私钥，您也绝不应该与托管节点（或任何人）分享您的私钥。 -- 您可以使用 Alchemy 的核心应用程序接口读取区块链，但要写入它，您需要使用其他方式签署交易然后通过 Alchemy 发送它们（任何其他[节点服务](/developers/docs/nodes-and-clients/nodes-as-a-service/)也是如此）。 +- 这意味着 Alchemy 无法代表你签署和发送交易。 这样做的原因是出于安全考虑。 Alchemy 绝不会要求你分享你的私钥，你也绝不应该与托管节点（或任何人）分享你的私钥。 +- 你可以使用 Alchemy 的核心应用程序接口读取区块链，但要写入它，你需要使用其他方式签署交易然后通过 Alchemy 发送它们（任何其他[节点服务](/developers/docs/nodes-and-clients/nodes-as-a-service/)也是如此）。 -### 2. 什么是 "签名者"？ {#what-is-a-signer} +### 2. 什么是“签名者”？ {#what-is-a-signer} -- 签名者将使用您的私钥为您签署交易。 在本教程中，我们将使用 [Alchemy Web3](https://docs.alchemyapi.io/alchemy/documentation/alchemy-web3) 签署我们的交易，但您也可以使用任何其他 Web3 库。 +- 签名者将使用你的私钥为你签署交易。 在本教程中，我们将使用 [Alchemy Web3](https://docs.alchemyapi.io/alchemy/documentation/alchemy-web3) 签署我们的交易，但你也可以使用任何其他 Web3 库。 - 在前端，一个很好的签名者示例是 [MetaMask](https://metamask.io/)，它将代表你签署和发送交易。 ### 3. 为什么我需要在我的交易上签名？ {#why-do-i-need-to-sign-my-transactions} - 每个想要在以太坊网络上发送交易的用户都必须在交易上签名（使用他们的私钥），以验证交易的来源是其所声称的那个人。 -- 保护这个私钥非常重要，因为拥有这个私钥就可以完全控制您的以太坊帐户，允许您（或任何有权限的人）代表您进行交易。 +- 保护这个私钥非常重要，因为拥有这个私钥就可以完全控制你的以太坊帐户，允许你（或任何有权限的人）代表你进行交易。 ### 4. 如何保护我的私钥？ {#how-do-i-protect-my-private-key} -- 有许多方法来保护您的私钥，并使用它来发送交易。 在本教程中，我们将使用 `.env` 文件。 然而，你也可以使用一个单独的存储私钥的服务提供器，使用一个密钥库文件，或其他选项。 +- 有许多方法来保护你的私钥，并使用它来发送交易。 在本教程中，我们将使用 `.env` 文件。 然而，你也可以使用一个单独的存储私钥的服务提供器，使用一个密钥库文件，或其他选项。 ### 5. `eth_sendTransaction` 和 `eth_sendRawTransaction` 之间有什么区别？ {#difference-between-send-and-send-raw} `eth_sendTransaction` 和 `eth_sendRawTransaction` 都是 Ethereum API 函数，用于将交易广播到 Ethereum 网络，以便将其添加到未来的区块中。 它们在处理交易签名的方式上有所不同。 -- [`eth_sendTransaction`](https://docs.web3js.org/api/web3-eth/function/sendTransaction) 用于发送*未签名的*交易，这意味着您发送到的节点必须管理您的私钥，以便它能够在将交易广播到链中之前对交易进行签名。 由于 Alchemy 没有用户私钥，因此他们不支持这种方法。 -- [`eth_sendRawTransaction`](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction) 用于广播已经签名的交易。 这意味着您首先必须使用 [`signTransaction(tx, private_key)`](https://docs.web3js.org/api/web3-eth-accounts/function/signTransaction)，然后将结果发送到 `eth_sendRawTransaction`。 +- [`eth_sendTransaction`](https://docs.web3js.org/api/web3-eth/function/sendTransaction) 用于发送_未签名的_交易，这意味着你向其发送交易的节点必须管理你的私钥，以便该节点能够在将交易广播到链上之前对交易进行签名。 由于 Alchemy 没有用户私钥，因此他们不支持这种方法。 +- [`eth_sendRawTransaction`](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction) 用于广播已经签名的交易。 这意味着你首先必须使用 [`signTransaction(tx, private_key)`](https://docs.web3js.org/api/web3-eth-accounts/function/signTransaction)，然后将结果发送到 `eth_sendRawTransaction`。 -当使用 web3 时，通过调用函数 [web3.eth.sendSignedTransaction](https://docs.web3js.org/api/web3-eth/function/sendSignedTransaction) 来访问`eth_sendRawTransaction`。 +当使用 web3 时，通过调用函数 [web3.eth.sendSignedTransaction](https://docs.web3js.org/api/web3-eth/function/sendSignedTransaction) 来访问 `eth_sendRawTransaction`。 这就是我们将在本教程中使用的函数。 ### 6. Web3 库是什么？ {#what-is-the-web3-library} - Web3.js 是一个围绕标准 JSON-RPC 调用的封装库，在以太坊开发中使用相当普遍。 -- 有许多针对不同语言的 web3 库。 在本教程中，我们将使用 [Alchemy Web3](https://docs.alchemy.com/reference/api-overview)，它用 JavaScript 编写。 您可以在[这里](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries)查看其他选项。 +- 有许多针对不同语言的 web3 库。 在本教程中，我们将使用 [Alchemy Web3](https://docs.alchemy.com/reference/api-overview)，它用 JavaScript 编写。 你可以在[这里](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries)查看其他选项，例如 [ethers.js](https://docs.ethers.org/v5/)。 好了，现在我们把这些问题都解决了，让我们继续学习教程。 请随时在 Alchemy [discord](https://discord.gg/gWuC7zB) 中提问！ +### 7. 如何发起安全、燃料优化且私密的交易？ {how-to-send-secure-gas-optimized-and-private-transactions} + +- [Alchemy 有一套交易应用程序接口。](https://docs.alchemy.com/reference/transact-api-quickstart)。 你可以使用它们发起强化交易，在交易发生之前模拟交易，发起私密交易，和发起燃料优化交易。 +- 你也可以使用 [Notify 应用程序接口](https://docs.alchemy.com/docs/alchemy-notify)在你的交易被从内存池添加到链上时收到提醒。 + **注意：**本指南需要使用 Alchemy 帐户、以太坊地址或安装 MetaMask 钱包、NodeJs 和 npm。 如果没有，按以下步骤操作： 1. [创建一个免费的 Alchemy 帐户](https://auth.alchemyapi.io/signup) @@ -66,13 +71,13 @@ sourceUrl: https://docs.alchemy.com/alchemy/tutorials/sending-txs ## 发送交易的步骤 {#steps-to-sending-your-transaction} -### 1. 在 Rinkeby 测试网上创建一个 Alchemy 程序 {#create-an-alchemy-app-on-the-rinkeby-testnet} +### 1. 在 Sepolia 测试网上创建一个 Alchemy 应用程序 {#create-an-alchemy-app-on-the-sepolia-testnet} -导航到您的 [Alchemy 仪表板](https://dashboard.alchemyapi.io/)并创建一个新的应用程序，选择 Rinkeby（或任何其他测试网）作为您的网络。 +导航到你的 [Alchemy 仪表板](https://dashboard.alchemyapi.io/)并创建一个新的应用程序，选择 Sepolia（或任何其他测试网）作为你的网络。 -### 2. 从 Rinkeby faucet 请求 ETH {#request-eth-from-rinkeby-faucet} +### 2. 从 Sepolia 水龙头请求以太币 {#request-eth-from-sepolia-faucet} -按照 [Alchemy Rinkeby 水龙头](https://www.rinkebyfaucet.com/)相关说明接收以太币。 确保包含您的 **Rinkeby** 以太坊地址（来自 MetaMask）而不是其他网络。 按照说明操作后，请仔细检查您是否已在钱包中收到以太币。 +请参考 [Alchemy Sepolia](https://www.sepoliafaucet.com/) 的说明来接收以太币。 确保包含你的 **Sepolia** 以太坊地址（来自 MetaMask），而不是其他网络。 按照说明操作后，请仔细检查你是否已在钱包中收到以太币。 ### 3. 创建一个新的项目目录，并使用 `cd` 命令进入该目录。 {#create-a-new-project-direction} @@ -87,6 +92,8 @@ cd sendtx-example 在你的项目目录中运行以下命令，以安装 [Alchemy Web3](https://docs.alchemy.com/reference/api-overview)： +注意，如果你想要使用 ethers.js 库， 请按照[这里](https://docs.alchemy.com/docs/how-to-send-transactions-on-ethereum)的说明操作。 + ``` npm install @alch/alchemy-web3 ``` @@ -101,10 +108,10 @@ npm install dotenv --save ### 6. 创建 `.env` 文件 {#create-the-dotenv-file} -在您的项目目录中创建一个 `.env` 文件并添加以下内容（替换”`your-api-url`“和”`your-private-key`“） +在你的项目目录中创建一个 `.env` 文件并添加以下内容（替换“`your-api-url`”和“`your-private-key`”） -- 要找到您的 Alchemy API URL，请导航到您刚刚在仪表板上创建的应用程序详细信息页面。 点击右上角的“查看密钥”，然后获取 HTTP URL。 -- 要使用 MetaMask 查找您的私钥，请查看此[指南](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key)。 +- 要找到你的 Alchemy 应用程序接口 URL，请导航到你刚刚在仪表板上创建的应用程序详细信息页面。点击右上角的“View Key”，然后获取 HTTP URL。 +- 要使用 MetaMask 查找你的私钥，请查看此[指南](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key)。 ``` API_URL = "your-api-url" @@ -112,14 +119,14 @@ PRIVATE_KEY = "your-private-key" ```
.env！ 请确保永远不要与任何人共享或公开您的 .env 文件，因为这样做会泄露您的私钥。 如果您使用版本控制，请将您的 .env 添加到 gitignore 文件中。
+不要提交 .env！ 请确保永远不要与任何人共享或公开你的 .env 文件，因为这样做会泄露你的私钥。 如果你使用版本控制，请将你的 .env 添加到 gitignore 文件中。