在本教程中，我们将通过一个 React 组件 TxForm 学习如何使用 @tonconnect/ui-react 库来发送 TON 交易。我们将使用一个简单的“回声合约”（EchoContract），该合约会将发送的金额返回给发送者，用于测试目的。

准备工作

在开始之前，请确保你已安装了以下依赖项：

• React
• @tonconnect/ui-react：用于连接和管理 TON 钱包
• @ton/ton：用于与 TON 区块链交互的库
• react-json-view：用于编辑 JSON 数据

代码解析

首先，让我们解析 TxForm 组件的代码。

导入依赖项

import { useCallback, useState } from "react";
import ReactJson, { InteractionProps } from "react-json-view";
import "./style.scss";
import {
  SendTransactionRequest,
  useTonConnectUI,
  useTonWallet,
} from "@tonconnect/ui-react";
import {
  Address,
  beginCell,
  Cell,
  loadMessage,
  storeMessage,
  Transaction,
} from "@ton/core";
import { useTonClient } from "../../hooks/useTonClient";
import { TonClient } from "@ton/ton";

这里，我们导入了 React 的 useState 和 useCallback 钩子，react-json-view 组件用于编辑 JSON，以及 @tonconnect/ui-react 和 @ton/ton 库中的相关功能。

默认交易对象

const defaultTx: SendTransactionRequest = {
  // ...（省略了具体内容）
};

defaultTx 是一个包含默认交易信息的对象，包括有效时间、消息列表（接收地址、金额、状态初始化和有效载荷）。

等待交易完成的函数

const waitForTransaction = async (
  options: WaitForTransactionOptions,
  client: TonClient
): Promise<Transaction | null> => {
  // ...（省略了具体内容）
};

waitForTransaction 函数用于等待交易完成，并返回完成的交易信息。

TxForm 组件

export function TxForm() {
  // ...（省略了具体内容）
}

TxForm 是一个 React 组件，用于配置并发送交易。

状态定义

const [tx, setTx] = useState(defaultTx);
const [finalizedTx, setFinalizedTx] = useState<Transaction | null>(null);
const [msgHash, setMsgHash] = useState<string>("");
const [loading, setLoading] = useState<boolean>(false);
const { client } = useTonClient();
const wallet = useTonWallet();
const [tonConnectUi] = useTonConnectUI();

这里定义了组件的状态，包括交易信息、最终交易结果、消息哈希、加载状态、TON 客户端实例、钱包实例和 TonConnect UI 实例。

处理 JSON 编辑

const onChange = useCallback((value: InteractionProps) => {
  setTx(value.updated_src as SendTransactionRequest);
}, []);

onChange 回调函数用于处理 react-json-view 组件中的编辑操作。

发送交易按钮

<button
  // ...（省略了具体内容）
>
  {loading ? "Loading..." : "Send transaction"}
</button>

这是一个按钮，用于发送交易。当点击按钮时，会调用 tonConnectUi.sendTransaction 方法发送交易，并使用 waitForTransaction 函数等待交易完成。

完整代码

完整的 TxForm 组件代码如下：

export function TxForm() {
  // ...（省略了具体内容）
  return (
    <div className="send-tx-form">
      <h3>Configure and send transaction</h3>
      <ReactJson
        theme="ocean"
        src={defaultTx}
        onEdit={onChange}
        onAdd={onChange}
        onDelete={onChange}
      />
      {wallet ? (
        <button
          // ...（省略了具体内容）
        >
          {loading ? "Loading..." : "Send transaction"}
        </button>
      ) : (
        <button onClick={() => tonConnectUi.openModal()}>
          Connect wallet to send the transaction
        </button>
      )}
      <div>Sending Tx Message Hash: {msgHash}</div>
      <div>Sending Tx Hash: {finalizedTx?.hash().toString("hex")}</div>
    </div>
  );
}

总结

通过本教程，我们学习了如何使用 React 和 @tonconnect/ui-react 库构建一个简单的交易表单。这个表单组件允许用户配置交易详情，连接钱包，并发送交易到 TON 区块链。 以下是关键步骤的回顾：

1. 设置默认交易信息

在 defaultTx 对象中，我们定义了交易的默认参数，包括交易的有效期限、接收者地址、发送金额、状态初始化和有效载荷。

2. 创建等待交易完成的函数

waitForTransaction 函数负责轮询区块链，以确认交易是否已经完成。它接受交易哈希和 TON 客户端实例作为参数，并返回完成的交易详情。

3. 创建 React 组件

在 TxForm 组件中，我们使用 React 的 useState 和 useCallback 钩子来管理状态和回调函数。我们还使用了 useTonWallet 和 useTonClient 自定义钩子来获取钱包和客户端实例。

4. 实现交易编辑功能

通过 react-json-view 组件，用户可以编辑交易详情。onChange 回调函数确保了编辑后的数据能够更新到组件的状态中。

5. 发送交易

当用户点击“发送交易”按钮时，组件会通过 tonConnectUi.sendTransaction 方法发送交易，并使用 waitForTransaction 函数等待交易完成。交易的状态和结果会被更新到组件的状态中，并显示在界面上。

6. 显示交易信息

交易发送后，组件会显示交易的消息哈希和交易哈希，让用户能够追踪交易的状态。

扩展建议

• 错误处理：在实际应用中，应该添加更完善的错误处理逻辑，以便于用户了解交易失败的原因。
• 用户反馈：提供更友好的用户反馈，例如使用模态框或通知来告知用户交易状态。
• 安全性：确保交易细节在客户端的安全处理，避免泄露敏感信息。
• 功能扩展：可以添加更多功能，如查询余额、查看交易历史等。

结束语

通过本教程，你应该已经掌握了如何使用 React 和 @tonconnect/ui-react 库来构建一个基本的 TON 交易发送界面。这为更深入地探索 TON 区块链和构建复杂的 dApp（去中心化应用）打下了坚实的基础。随着你的进一步学习和实践，你将能够构建出更加丰富和强大的应用。