Web3 & DApp Development Fundamentals · 课时

处理交易与事件

学习从 DApp 发送交易、处理交易确认，并监听智能合约事件以更新用户界面。

第 3 / 3 课11 个步骤

处理交易与事件 是 CoddyKit 上的免费 Web3 & DApp Development Fundamentals 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Web3 & DApp Development Fundamentals 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web3 & DApp Development Fundamentals 课程共包含 3 节课。

本课时的部分内容尚未翻译，以英文显示。

Making DApps Dynamic

So far, you've learned how to connect your DApp to the blockchain and read data. But what if you want to change data or perform actions?

This lesson teaches you how to send transactions from your DApp to modify blockchain state and how to listen for real-time updates using smart contract events.

What is a Blockchain Transaction?

A blockchain transaction is a signed message that changes the state of the blockchain. Every transaction costs a small fee called gas, paid in Ether (ETH).

Common DApp transactions include:

Sending Ether to another address.
Calling a smart contract function that writes or modifies data.
Deploying a new smart contract.

Sending Transactions from Your DApp

To send a transaction that calls a smart contract function, your DApp needs to:

Connect to a blockchain provider (e.g., MetaMask).
Get a signer (the connected user's wallet).
Call the desired contract function, passing any required parameters.

The user's wallet will then prompt them to confirm and sign the transaction.

Calling a Write Function Example

Here's how you might call a simple setValue function on a smart contract using Ethers.js. Remember, contract refers to your instantiated contract object.

// Assuming 'contract' is an Ethers.js Contract instance
// and 'signer' is obtained from the connected wallet.

async function updateValue(newValue) {
  try {
    const tx = await contract.connect(signer).setValue(newValue);
    console.log("Transaction sent: ", tx.hash);
    // Wait for the transaction to be mined
    await tx.wait();
    console.log("Transaction confirmed!");
  } catch (error) {
    console.error("Error sending transaction:", error);
  }
}

Waiting for Transaction Confirmation

After sending a transaction, it's not immediately processed. It goes into a transaction pool and waits to be included in a block by a miner or validator.

The await tx.wait() call is crucial. It pauses your DApp's execution until the transaction is mined and confirmed on the blockchain, ensuring your UI reflects the latest state.

Understanding Transaction Receipts

When tx.wait() resolves, it returns a transaction receipt. This receipt contains important information about the transaction's outcome:

blockHash and blockNumber: Where it was included.
gasUsed: The actual gas consumed.
status: Indicates if the transaction was successful (1) or failed (0).

Always check the status to ensure the contract call executed as expected!

Introducing Smart Contract Events

Smart contract events are a powerful mechanism for your contracts to 'broadcast' information to external applications (like your DApp) when something significant happens.

Think of them as logs or notifications that DApps can listen to. They are a cost-effective way to communicate data from the blockchain without storing it directly on-chain.

Emitting Events in Solidity

In Solidity, you first define an event with its parameters, then use the emit keyword to trigger it within a function. Here's a simple example:

pragma solidity ^0.8.0;

contract MyContract {
  uint public value;

  // Define an event
  event ValueChanged(address indexed user, uint oldValue, uint newValue);

  function setValue(uint _newValue) public {
    uint _oldValue = value;
    value = _newValue;
    // Emit the event
    emit ValueChanged(msg.sender, _oldValue, _newValue);
  }
}

Listening for Events in Your DApp

Your DApp can subscribe to specific events emitted by a contract. When an event occurs, your DApp receives the event data, allowing you to update the UI or trigger other actions in real-time.

This avoids constant 'polling' (repeatedly asking the blockchain for updates), making your DApp more efficient.

// Assuming 'contract' is an Ethers.js Contract instance

contract.on("ValueChanged", (user, oldValue, newValue, event) => {
  console.log(`Value changed by ${user}`);
  console.log(`From ${oldValue} to ${newValue}`);
  // Update your DApp's UI here, e.g., display the new value
  updateDisplay(newValue);
});

console.log("Listening for ValueChanged events...");

Quick Check: Tx & Events

When calling a smart contract function that modifies state from your DApp, what is the primary purpose of using await tx.wait()?

在交互式课程中回答

Recap & Next Steps

You've learned how to make your DApps truly interactive!

You can now send transactions to modify blockchain state.
You know how to wait for confirmation and handle transaction receipts.
You understand how smart contract events provide real-time updates to your DApp.

These skills are fundamental for building dynamic and responsive decentralized applications. Keep practicing to master DApp interaction!

免费开始

用 AI 导师学习 Web3 & DApp Development Fundamentals — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 29
课程: 105

免费开始学习查看完整课程

常见问题解答

「处理交易与事件」课时是免费的吗？

是的 — 「处理交易与事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web3 & DApp Development Fundamentals 课程的其余内容，请升级到 CoddyKit PRO。 Web3 & DApp Development Fundamentals 课程共包含 3 节课。

「处理交易与事件」这节课中我会学到什么？

学习从 DApp 发送交易、处理交易确认，并监听智能合约事件以更新用户界面。你通过在浏览器中直接运行的动手代码来练习 Web3 & DApp Development Fundamentals，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web3 & DApp Development Fundamentals 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web3 & DApp Development Fundamentals 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「处理交易与事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web3 & DApp Development Fundamentals 课中编写并运行代码吗？

能。每节 Web3 & DApp Development Fundamentals 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

React 与 Web3 框架
集成钱包
处理交易与事件

← 返回 Web3 & DApp Development Fundamentals