5.2 设置 TON Connect

riyad

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

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

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

1. yarn add @tonconnect/ui-react
   1 n) u! A0 a' }0 e4 i9 o

复制代码

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

Manifest 文件结构如下：

1. {
   
2.   "url": "",
   
3.   "name": "Example",
   
4.   "iconUrl": ""
   $ }( d2 }4 k, p
5. }

复制代码

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

1. {
   3 R8 f8 W* h8 W: P. l
2.   "url": "https://join.toncompany.org",
   
3.   "name": "TON&Co. Tutorial",
   
4.   "iconUrl": "xxxxxxxxxxxxxxxxxxxxx/tonco.png"
   # g6 B* p$ n, B/ a! l
5. }

复制代码

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

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

1. import React from 'react';
   
2. import ReactDOM from 'react-dom/client';
   5 H8 Z* i& c$ S" b4 u( z
3. import App from './App';
   & C0 ?# v) j8 f* j
4. import './index.css';
   
5. import { TonConnectUIProvider } from '@tonconnect/ui-react';
   
6. 
   ) |' b& h  F; o
7. // this manifest is used temporarily for development purposes
   
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(
    & f$ w; m/ W* M/ d
11.   <TonConnectUIProvider manifestUrl={manifestUrl}>
    9 H' j: K! ]4 T; u/ b+ P" V- ^. I
12.     <App />
    
13.   </TonConnectUIProvider>,
    
14. )

复制代码

7 k0 l: O1 n9 m& d7 ]/ r
# p3 J' I5 r6 o7 P- f1 m" A3 Q( G; ~3 p在应用程序中添加连接按钮

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

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

1. import './App.css';
   
2. import { TonConnectButton } from '@tonconnect/ui-react';
   & V: P" w$ u5 e5 Q- T+ F2 D. E' F
3. 
   0 _3 ~+ Y) b0 ?5 F  j6 e* d
4. function App() {
     O% W' u8 e/ P1 V
5.   return (
   
6.     <div>
   
7.       <TonConnectButton />
   : ?$ F" n- t8 i7 l* w
8.     </div>
     k) x6 M) Y( z9 n
9.   );
   # }+ }* e  a& C9 q" h4 w1 S
10. }
      r2 _- Z  D8 v& n0 i
11. export default App

复制代码

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

1. npm run dev
   

复制代码

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

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

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

/ N8 Z8 S1 G/ M! T0 Q5 t. _) x: x* _) E

0 Y5 \& T9 e* ^+ N6 m/ |2 L