5.2 设置 TON Connect

riyad

TON Connect React 库将为我们提供一些有用的服务，例如:

在终端运行，安装程序库：

复制代码

当我们的应用程序连接到用户的钱包时，我们需要向用户提供一些身份信息。“谁要求确认？”我们需要使用清单（Mainfest）文件来确认自己的身份。钱包会请求用户允许连接应用程序并显示清单中的信息。

Manifest 文件结构如下：

复制代码

我将在 manifest.json 文件中使用以下内容：

复制代码

清单需要在互联网上公开发布，所以你必须按照我的示例部署你的自定义清单，或者暂时使用我在开发过程中提前部署的示例清单。之后，当我们部署网站时，你应该用真实的清单替换示例清单。

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

import React from 'react';
h7 Y7 x+ |9 m+ A1 }
import ReactDOM from 'react-dom/client';& k6 Q* q, D5 e/ F( Q; t% ~: H: u
import App from './App';( W9 o9 V% A- {) N
import './index.css';
6 @1 L L5 W9 L; s" V0 C( i
import { TonConnectUIProvider } from '@tonconnect/ui-react';5 G' s) p" `3 G/ q
- {7 [" m" y8 P4 t7 c# Y
// this manifest is used temporarily for development purposes
9 B2 G. | B$ ~* ]: ^- {
const manifestUrl = 'https://raw.githubusercontent.com/ton-community/tutorials/main/03-client/test/public/tonconnect-manifest.json';
! x5 w0 A3 }* d/ F- Q ` F
6 X, o+ p; a3 V ~- Z/ p
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(* g+ b7 m& H& j1 P4 G7 \( M
<TonConnectUIProvider manifestUrl={manifestUrl}>8 G, ]- Y* C# A; p+ x, N3 ]
<App />3 T8 U; e' R, z+ d
</TonConnectUIProvider>,- m2 X2 t; p! L
)

复制代码

& [) u+ z) S/ U( n5 y% j) l! \$ _6 }. @6 ]$ R
在应用程序中添加连接按钮

我们要为用户提供的第一个操作是将他们的钱包连接到应用程序。通过连接，用户同意与应用程序共享其公共钱包地址。危险性并不高，因为钱包的整个交易历史及其余额都会在链上公开。

编辑文件 src/App.tsx，并将其内容替换为以下内容：

复制代码

我们的新应用程序用户界面将只有连接按钮。要运行应用程序，请在命令行中运行：

复制代码

然后刷新网页浏览器，查看屏幕上显示的 URL。我假设您使用的是台式机（您正在开发的地方）上的网络浏览器，而您的移动设备上安装了 Tonkeeper 钱包。点击桌面上的 "连接钱包"，然后选择 "Tonkeeper"（或您正在使用的其他支持钱包）。

TON Connect 支持“手机-手机用户流程”和“桌面-手机用户流程”。由于开发的是桌面-移动流程，TON Connect 将依靠扫描二维码与移动设备上运行的钱包进行通信。打开 Tonkeeper 移动应用程序，点击右上角的 QR 按钮，扫描桌面屏幕上的二维码。

如果一切连接正常，您应该会在钱包手机应用中看到一个确认对话框。如果您同意连接，您将在网络应用程序用户界面中看到您的地址！