{"author":{"address":"0x56af91a252c1009c5a065eac15aa2ec9a278a0dd","user":"https://learnblockchain.cn/people/16052"},"content":{"body":"\u003e 在本教程中，我们将通过一个 React 组件 `TxForm` 学习如何使用 `@tonconnect/ui-react` 库来发送 TON 交易。我们将使用一个简单的“回声合约”（EchoContract），该合约会将发送的金额返回给发送者，用于测试目的。\r\n\r\n# 准备工作\r\n\r\n在开始之前，请确保你已安装了以下依赖项：\r\n- `React`\r\n- `@tonconnect/ui-react`：用于连接和管理 TON 钱包\r\n- `@ton/ton`：用于与 TON 区块链交互的库\r\n- `react-json-view`：用于编辑 JSON 数据\r\n\r\n# 代码解析\r\n\r\n首先，让我们解析 `TxForm` 组件的代码。\r\n\r\n### 导入依赖项\r\n\r\n```javascript\r\nimport { useCallback, useState } from \"react\";\r\nimport ReactJson, { InteractionProps } from \"react-json-view\";\r\nimport \"./style.scss\";\r\nimport {\r\n  SendTransactionRequest,\r\n  useTonConnectUI,\r\n  useTonWallet,\r\n} from \"@tonconnect/ui-react\";\r\nimport {\r\n  Address,\r\n  beginCell,\r\n  Cell,\r\n  loadMessage,\r\n  storeMessage,\r\n  Transaction,\r\n} from \"@ton/core\";\r\nimport { useTonClient } from \"../../hooks/useTonClient\";\r\nimport { TonClient } from \"@ton/ton\";\r\n```\r\n\r\n这里，我们导入了 React 的 `useState` 和 `useCallback` 钩子，`react-json-view` 组件用于编辑 JSON，以及 `@tonconnect/ui-react` 和 `@ton/ton` 库中的相关功能。\r\n\r\n### 默认交易对象\r\n\r\n```javascript\r\nconst defaultTx: SendTransactionRequest = {\r\n  // ...（省略了具体内容）\r\n};\r\n```\r\n\r\n`defaultTx` 是一个包含默认交易信息的对象，包括有效时间、消息列表（接收地址、金额、状态初始化和有效载荷）。\r\n\r\n### 等待交易完成的函数\r\n\r\n```javascript\r\nconst waitForTransaction = async (\r\n  options: WaitForTransactionOptions,\r\n  client: TonClient\r\n): Promise\u003cTransaction | null\u003e =\u003e {\r\n  // ...（省略了具体内容）\r\n};\r\n```\r\n\r\n`waitForTransaction` 函数用于等待交易完成，并返回完成的交易信息。\r\n\r\n### `TxForm` 组件\r\n\r\n```javascript\r\nexport function TxForm() {\r\n  // ...（省略了具体内容）\r\n}\r\n```\r\n\r\n`TxForm` 是一个 React 组件，用于配置并发送交易。\r\n\r\n#### 状态定义\r\n\r\n```javascript\r\nconst [tx, setTx] = useState(defaultTx);\r\nconst [finalizedTx, setFinalizedTx] = useState\u003cTransaction | null\u003e(null);\r\nconst [msgHash, setMsgHash] = useState\u003cstring\u003e(\"\");\r\nconst [loading, setLoading] = useState\u003cboolean\u003e(false);\r\nconst { client } = useTonClient();\r\nconst wallet = useTonWallet();\r\nconst [tonConnectUi] = useTonConnectUI();\r\n```\r\n\r\n这里定义了组件的状态，包括交易信息、最终交易结果、消息哈希、加载状态、TON 客户端实例、钱包实例和 TonConnect UI 实例。\r\n\r\n#### 处理 JSON 编辑\r\n\r\n```javascript\r\nconst onChange = useCallback((value: InteractionProps) =\u003e {\r\n  setTx(value.updated_src as SendTransactionRequest);\r\n}, []);\r\n```\r\n\r\n`onChange` 回调函数用于处理 `react-json-view` 组件中的编辑操作。\r\n\r\n#### 发送交易按钮\r\n\r\n```javascript\r\n\u003cbutton\r\n  // ...（省略了具体内容）\r\n\u003e\r\n  {loading ? \"Loading...\" : \"Send transaction\"}\r\n\u003c/button\u003e\r\n```\r\n\r\n这是一个按钮，用于发送交易。当点击按钮时，会调用 `tonConnectUi.sendTransaction` 方法发送交易，并使用 `waitForTransaction` 函数等待交易完成。\r\n\r\n# 完整代码\r\n\r\n完整的 `TxForm` 组件代码如下：\r\n\r\n```javascript\r\nexport function TxForm() {\r\n  // ...（省略了具体内容）\r\n  return (\r\n    \u003cdiv className=\"send-tx-form\"\u003e\r\n      \u003ch3\u003eConfigure and send transaction\u003c/h3\u003e\r\n      \u003cReactJson\r\n        theme=\"ocean\"\r\n        src={defaultTx}\r\n        onEdit={onChange}\r\n        onAdd={onChange}\r\n        onDelete={onChange}\r\n      /\u003e\r\n      {wallet ? (\r\n        \u003cbutton\r\n          // ...（省略了具体内容）\r\n        \u003e\r\n          {loading ? \"Loading...\" : \"Send transaction\"}\r\n        \u003c/button\u003e\r\n      ) : (\r\n        \u003cbutton onClick={() =\u003e tonConnectUi.openModal()}\u003e\r\n          Connect wallet to send the transaction\r\n        \u003c/button\u003e\r\n      )}\r\n      \u003cdiv\u003eSending Tx Message Hash: {msgHash}\u003c/div\u003e\r\n      \u003cdiv\u003eSending Tx Hash: {finalizedTx?.hash().toString(\"hex\")}\u003c/div\u003e\r\n    \u003c/div\u003e\r\n  );\r\n}\r\n```\r\n\r\n# 总结\r\n\r\n通过本教程，我们学习了如何使用 React 和 `@tonconnect/ui-react` 库构建一个简单的交易表单。这个表单组件允许用户配置交易详情，连接钱包，并发送交易到 TON 区块链。\r\n以下是关键步骤的回顾：\r\n\r\n### 1. 设置默认交易信息\r\n在 `defaultTx` 对象中，我们定义了交易的默认参数，包括交易的有效期限、接收者地址、发送金额、状态初始化和有效载荷。\r\n\r\n### 2. 创建等待交易完成的函数\r\n`waitForTransaction` 函数负责轮询区块链，以确认交易是否已经完成。它接受交易哈希和 TON 客户端实例作为参数，并返回完成的交易详情。\r\n\r\n### 3. 创建 React 组件\r\n在 `TxForm` 组件中，我们使用 React 的 `useState` 和 `useCallback` 钩子来管理状态和回调函数。我们还使用了 `useTonWallet` 和 `useTonClient` 自定义钩子来获取钱包和客户端实例。\r\n\r\n### 4. 实现交易编辑功能\r\n通过 `react-json-view` 组件，用户可以编辑交易详情。`onChange` 回调函数确保了编辑后的数据能够更新到组件的状态中。\r\n\r\n### 5. 发送交易\r\n当用户点击“发送交易”按钮时，组件会通过 `tonConnectUi.sendTransaction` 方法发送交易，并使用 `waitForTransaction` 函数等待交易完成。交易的状态和结果会被更新到组件的状态中，并显示在界面上。\r\n\r\n### 6. 显示交易信息\r\n交易发送后，组件会显示交易的消息哈希和交易哈希，让用户能够追踪交易的状态。\r\n\r\n# 扩展建议\r\n\r\n- **错误处理**：在实际应用中，应该添加更完善的错误处理逻辑，以便于用户了解交易失败的原因。\r\n- **用户反馈**：提供更友好的用户反馈，例如使用模态框或通知来告知用户交易状态。\r\n- **安全性**：确保交易细节在客户端的安全处理，避免泄露敏感信息。\r\n- **功能扩展**：可以添加更多功能，如查询余额、查看交易历史等。\r\n\r\n# 结束语\r\n通过本教程，你应该已经掌握了如何使用 React 和 `@tonconnect/ui-react` 库来构建一个基本的 TON 交易发送界面。这为更深入地探索 TON 区块链和构建复杂的 dApp（去中心化应用）打下了坚实的基础。随着你的进一步学习和实践，你将能够构建出更加丰富和强大的应用。","title":"掌握TON区块链交易发送：构建交互式React应用与TonConnect集成教程"},"history":null,"timestamp":1724749908,"version":1}