TON：设置TON Connect

TON Connect React库为我们提供一些toolkit，例如：

显示支持TON Connect 2的钱包列表给终端用户

查询用户钱包的公开地址

通过钱包发起交易请求

在终端运行以下命令安装该库：


yarn add @tonconnect/ui-react

当应用连接到用户的钱包时，我们需要提供一些身份信息。我们将使用一个manifest文件来标识自己,以便用户知道是谁在请求。钱包将请求用户的许可连接到应用，并显示manifest中的信息。

manifest文件的结构如下：


{
  "url": "",
  "name": "Example",
  "iconUrl": ""
}

使用以下内容作为manifest.json文件：


json复制代码
{
  "url": "https://join.toncompany.org",
  "name": "TON&Co. Tutorial",
  "iconUrl": "https://raw.githubusercontent.com/markokhman/func-course-chapter-5-code/master/public/tonco.png"
}

一旦创建了public/manifest.json文件，并将内容放置其中并推送到远程仓库后，我的manifest将在此处可用：

manifest.json

manifest需要在互联网上公开可用，因此按照我的示例部署你自定义的manifest，要么暂时使用我在开发期间提前部署的示例manifest。之后当部署网站时，应该用真实的manifest替换示例manifest。

修改src/main.tsx文件以使用TON Connect提供程序：


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { TonConnectUIProvider } from '@tonconnect/ui-react';

// 这个manifest暂时用于开发
const manifestUrl = 'https://raw.githubusercontent.com/ton-community/tutorials/main/03-client/test/public/tonconnect-manifest.json';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <TonConnectUIProvider manifestUrl={manifestUrl}>
    <App />
  </TonConnectUIProvider>,
)

在应用中添加连接按钮

第一个操作是让用户连接他们的钱包。通过连接，用户同意向应用程序共享其公共钱包地址。因为钱包的整个交易历史和余额在链上本来就都是公开的，所以这个操作没有安全问题。

编辑src/App.tsx文件并用以下内容替换：


import './App.css';
import { TonConnectButton } from '@tonconnect/ui-react';

function App() {
  return (
    <div>
      <TonConnectButton />
    </div>
  );
}

export default App;

新应用UI将只有一个连接按钮。要运行该应用，请在命令行中运行：


npm run dev

然后刷新浏览器，查看屏幕上显示的URL。假设你在桌面上（开发的地方）使用网络浏览器，并且你的Tonkeeper钱包安装在移动设备上。点击桌面上的“Connect Wallet”，选择“Tonkeeper”（或你正在使用的任何支持的钱包）。

打开Tonkeeper应用，点击右上角的QR按钮并扫描桌面屏幕上的代码。

如果一切正常，你应该会在钱包移动应用中看到一个确认对话框。如果你批准连接，你将在Web应用UI中看到你的地址。