5.2 设置 TON Connect

riyad

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

• 向终端用户显示 TON Connect 2 支持的钱包列表
• 查询用户钱包的公共地址
• 向钱包发出交易请求
  
  

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

1. yarn add @tonconnect/ui-react
   $ S- m0 R7 F4 M* f/ E

复制代码

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

Manifest 文件结构如下：

1. {
   
2.   "url": "",
   ) K3 G7 q: @" W% a
3.   "name": "Example",
   0 l* T0 C, H3 k: J
4.   "iconUrl": ""
   $ c, M% `# u. C" c8 n
5. }

复制代码

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

1. {
   
2.   "url": "https://join.toncompany.org",
   / [4 M8 e6 t6 r" z
3.   "name": "TON&Co. Tutorial",
   
4.   "iconUrl": "xxxxxxxxxxxxxxxxxxxxx/tonco.png"
   
5. }

复制代码

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

4 W/ a5 I8 i& t8 g# W3 V

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

1. import React from 'react';
   
2. import ReactDOM from 'react-dom/client';
   
3. import App from './App';
   
4. import './index.css';
   , P% `2 Q. W) u* o$ y
5. import { TonConnectUIProvider } from '@tonconnect/ui-react';
   # D+ @7 u8 F2 S$ S6 W$ q0 H
6. 
   
7. // this manifest is used temporarily for development purposes
   & _4 n+ l6 a  c# U  w- }0 }
8. const manifestUrl = 'https://raw.githubusercontent.com/ton-community/tutorials/main/03-client/test/public/tonconnect-manifest.json';
   
9. 
   
10. ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    ! J& Z6 P4 j( ]: \* w' f4 U
11.   <TonConnectUIProvider manifestUrl={manifestUrl}>
    
12.     <App />
    $ K2 @+ Z$ h1 e$ c
13.   </TonConnectUIProvider>,
    
14. )

复制代码

+ f8 d9 t3 z0 J' P5 s' @在应用程序中添加连接按钮
; ?$ _' ^& P& a* m' ]: G0 D: v! N

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

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

1. import './App.css';
   $ K3 x0 Y2 w+ G6 P: f) K: B9 A
2. import { TonConnectButton } from '@tonconnect/ui-react';
   8 M  h  O# N, b% E# F
3. 
   
4. function App() {
   ! Y5 |2 r! p9 e$ c, f7 ]2 C4 [
5.   return (
   7 ^6 y0 R4 p; k" j
6.     <div>
   
7.       <TonConnectButton />
     K% p8 `& z* f2 V
8.     </div>
   $ \4 z' L8 k/ Y2 b1 ]4 F
9.   );
   0 A$ M" o( d) `, r  k
10. }
    
11. export default App

复制代码

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

1. npm run dev
   

复制代码

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

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

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

7 O& n* y4 S, j4 u! `