如何为 TON 测试网红包智能合约开发前端（第三部分）

riyad

# {- `, {* I$ E' w2 W  t在前两篇教程中，我已经完成了红包智能合约的编写、编译和部署到 TON 测试网。今天，我们进入第三部分：开发一个前端界面，让用户可以直观地与红包合约交互。我使用 Vite + React + TypeScript 搭建了前端项目，并集成了 TON 钱包连接功能。以下是我的开发过程和完整代码，欢迎大家参考！

* n5 F1 T1 K3 |* k# h前提条件
* T; B7 z4 G/ ^2 E) y在开始之前，确保你已完成以下步骤：

• 完成前两部分：你已经编写、编译并部署了红包智能合约到 TON 测试网。
• 测试网钱包：用户需要一个支持测试网的 TON 钱包（如 TON Wallet），并通过 @testgiver_ton_bot 获取测试币。
• Node.js 环境：确保已安装 Node.js（建议使用最新 LTS 版本）。
  1 G# d& S/ e4 F) D0 S

项目文件夹结构
我使用 Vite 创建了一个 React + TypeScript 项目，项目名为 TON-RED-PACKET。以下是项目目录结构



目录说明：
1 K0 w; N- v  J4 m4 [$ ?components/：存放可复用的组件。
# ~$ Y. P9 K2 G7 x; j# n/ d6 [

• WalletConnect.tsx：钱包连接组件。
• RedPacketContext.tsx：红包上下文，用于管理全局状态。
  

pages/：存放页面组件。
) X* k' V0 J7 O5 {

• ClaimPacketPage.tsx：领取红包页面。
• CreatePacketPage.tsx：创建红包页面。
• HomePage.tsx：首页。
• LoginPage.tsx：登录页面。
  

App.tsx 和 App.css：主应用组件和样式。
4 C: ]9 O1 t( h  [6 I6 oindex.css 和 main.tsx：全局样式和入口文件。
% K3 d1 e# r( I# q4 evite-env.d.ts：Vite 环境声明文件。
5 a- i+ `1 |9 x% u+ U其他配置文件：如 package.json、tsconfig.json 等。
8 p* Q5 o3 [; ?) ~& v* C5 e3 S步骤 1：创建前端项目
我使用 Vite 快速搭建了一个 React + TypeScript 项目。以下是创建步骤：
: s, a2 N0 h/ o. K0 u( E$ {
  y* t9 {( n/ M& U初始化项目： 在终端运行：
5 Y$ P, B. ^# A. J

1. npm create vite@latest TON-RED-PACKET -- --template react-ts

复制代码

选择 react-ts 模板，项目会自动生成基础结构。

进入项目目录并安装依赖：

1. cd TON-RED-PACKET
   $ e. C( c, z" J2 X3 L
2. npm install

复制代码

安装额外的依赖： 为了实现钱包连接和页面交互，我安装了以下依赖：
+ E5 _4 b" q6 F( L& c$ p1 J

1. npm install @ton/ton @tonconnect/ui-react antd-mobile react-router-dom

复制代码

打开浏览器，访问 http://localhost:5173，你会看到 Vite 的默认页面。
, S# d2 Y8 |$ X  m6 q

  {3 I* v9 L, J/ y8 X/ H
步骤 2：设置入口文件和全局样式
5 `, B. Z6 D8 o- x7 K! p% h/ c. ^我修改了 main.tsx 和 index.css，设置了应用的入口和全局样式。

- G* \* j6 G* M2 Z2.1 main.tsx
" I) `& Y$ g( n+ a( t: [main.tsx 是应用的入口文件，我在这里设置了 React Router 和全局上下文：
* C$ j$ j/ }- F5 @! I# x  k7 e+ N* J

1. import { StrictMode } from 'react'
   
2. import { createRoot } from 'react-dom/client'
   . E0 ^+ D$ r6 y1 U( f" i
3. import { BrowserRouter } from 'react-router-dom';
   
4. import { RedPacketProvider } from './context/RedPacketContext';
   # b6 B& l# {. B8 w# _- U
5. import './index.css'
   0 T2 _8 w6 ~3 \+ T- o5 f" z" z
6. import App from './App.tsx'
   ) E6 D" H5 q3 C+ A" ?% }
7. 
   - w8 c& t0 Z2 Q: n# V
8. createRoot(document.getElementById('root')!).render(
   
9.   <StrictMode>
   * U. }6 O/ j; ?# f; K) d
10.     <RedPacketProvider>
    
11.       <BrowserRouter>
    8 x. l4 V. B+ L7 W7 G, v
12.           <App />
    
13.       </BrowserRouter>
    
14.     </RedPacketProvider>
    
15.   </StrictMode>,
    
16. )

复制代码

1. :root {
   
2.   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   - X) Q: [' {3 N
3.   line-height: 1.5;
   
4.   font-weight: 400;
   % G' t$ ~: d  e8 l2 a9 L
5. 
   
6.   color-scheme: light dark;
   $ v7 j3 j" D4 R
7.   color: rgba(255, 255, 255, 0.87);
   ( ~3 u  R: o2 u/ ?7 A' p
8.   background-color: #242424;
   
9. 
   
10.   font-synthesis: none;
    8 p$ N2 k' W& B3 z% y4 b
11.   text-rendering: optimizeLegibility;
    
12.   -webkit-font-smoothing: antialiased;
    $ ^3 d* i6 z: A5 x
13.   -moz-osx-font-smoothing: grayscale;
    
14. }
    
15. 
    
16. a {
    
17.   font-weight: 500;
    % n4 ~. R+ v8 p; a
18.   color: #646cff;
    2 X* N, S, T( f5 D1 M8 y
19.   text-decoration: inherit;
    , b+ g) r0 c( k7 T7 Z, m1 @
20. }
    ' J6 L! W# k  }2 G4 A! h
21. a:hover {
    
22.   color: #535bf2;
    
23. }
    * k  u5 |4 r+ t% Q, _
24. 
    / f; Y4 M) Q  k$ p8 B* L
25. body {
    
26.   margin: 0;
    
27.   display: flex;
    
28.   place-items: center;
    
29.   min-width: 320px;
    7 n: Z) U' ?# i- ?3 W! |
30.   min-height: 100vh;
    
31. }
    
32. 
    4 Q+ P- k  ^5 O; j
33. h1 {
    
34.   font-size: 3.2em;
    
35.   line-height: 1.1;
    
36. }
    
37. 
    
38. button {
    
39.   border-radius: 8px;
    
40.   border: 1px solid transparent;
    0 v4 E3 Z1 M5 |8 G. d. J* {3 l
41.   padding: 0.6em 1.2em;
    
42.   font-size: 1em;
    
43.   font-weight: 500;
    
44.   font-family: inherit;
      c9 w, \" Z; ~7 O
45.   background-color: #1a1a1a;
    
46.   cursor: pointer;
    ! W) k+ _0 k7 f0 b: _; V5 ~% [. V
47.   transition: border-color 0.25s;
    
48. }
    
49. button:hover {
    : T- u2 A) M7 T( x: `
50.   border-color: #646cff;
    ) C. s2 b# n$ }* Y. P
51. }
    8 n8 N7 C9 R& G$ t8 ~
52. button:focus,
    
53. button:focus-visible {
    0 w+ l$ h& r! Q7 ]
54.   outline: 4px auto -webkit-focus-ring-color;
    
55. }
    
56. 
    # D* G- \& q4 g3 y( v6 G) r
57. @media (prefers-color-scheme: light) {
    
58.   :root {
    2 J* e" P2 C  C7 X3 X3 ~3 f
59.     color: #213547;
    : O: q" B4 s! D" {( k5 z
60.     background-color: #ffffff;
    
61.   }
    % C% Q& {. B- Z8 a
62.   a:hover {
    ; Z6 `+ Y7 b, {* j: \5 q9 t& P# `
63.     color: #747bff;
    0 _" Z+ M/ a& E6 _" o4 `! G, t
64.   }
    ! q% q# r* \" I% l8 y7 _
65.   button {
    * N+ v# w5 G5 x. [6 {
66.     background-color: #f9f9f9;
    
67.   }
    8 o  O, v+ H( f
68. }

复制代码

1. // WalletConnect.tsx
   
2. import React, { useEffect } from 'react';
   
3. import { Button } from 'antd-mobile';
   
4. import { useNavigate } from 'react-router-dom';
   
5. import { useTonAddress,TonConnectButton, useTonConnectUI } from '@tonconnect/ui-react';  // Import necessary hooks
   1 `- E4 B( Z: O5 r9 g+ s
6. 
   0 W: J& _- t1 t7 x; `, M9 ?8 I
7. const WalletConnect: React.FC = () => {
   
8.   const navigate = useNavigate();
   % l/ ?9 R& k  u# H
9.   const address = useTonAddress();  // Get the connected wallet address
   
10.   const [tonConnectUI] = useTonConnectUI();
    
11. 
    
12.   // Redirect to HomePage once connected
    
13.   useEffect(() => {
    - C# L3 @! Y; H# l6 B
14.     if (!address) {
    5 P( z) w' b# v3 z
15.       navigate('/login');  // Navigate to HomePage when wallet is connected
    
16.     }
    , p; A! B# T+ d- w9 o1 {
17.   }, [address, navigate]);
    
18. 
    ; O- \  {  Q8 }) e' O0 Y
19.   // Handle Disconnect Wallet
    
20.   const handleDisconnect = () => {
    # O) n# A1 J- s
21.      tonConnectUI.disconnect();
    . P- Y) K, X* |- M% O7 n, v! K3 _# e
22.      navigate('/login');  // Redirect to login page after disconnecting
    
23.   };
    ( d7 s0 m8 X; `! C% c" e& e
24. 
    ) B% ]& U$ ~+ L( s. F  [( W
25.   return (
    
26.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    ( V+ ]8 w! J" Q
27.       {address ? (
    ; o5 T2 @" k: T0 E  n; B+ m" [
28.         <>
    
29.           <Button onClick={handleDisconnect}>Disconnect Wallet</Button>
    3 e) R7 x5 h4 d& e+ S
30.         </>
    7 T) l7 P7 w3 H: X; u& Y( D; i
31.       ) : (
    & r; e" C+ ~6 l& E% n' s
32.         <>
    
33.           <TonConnectButton style={{ marginBottom: '1rem' }} />
    
34.         </>
    
35.       )}
    % a8 |; C0 ]/ o/ H, B2 {. o5 v) w5 u
36.     </div>
      M) P" l& g+ Z5 y1 z& ?
37.   );
    ' G# a' f2 U( @( ~5 x
38. };
    9 G$ \) w* t' r. D
39. 
    9 Y6 A5 Z# K/ D5 ]& ?9 ]  o- k6 j' C
40. export default WalletConnect;

复制代码

1. import React, { createContext, useContext, useState } from 'react';
   
2. 
   ! q( T' d6 ^; L
3. export type RedPacket = {
   : L5 B3 s2 a; L1 k% I; g( e
4.   id: string;
   ' Y9 [7 t4 w, b  s9 B& L
5.   amount: number;
   2 M4 U: L6 ]4 g5 C( T( p$ _
6.   quantity: number;
   . J" }# B& _8 n& y7 b, E. n
7.   message?: string;
   & b- i6 a5 w' u4 z0 Q
8. };
   ; E1 B7 `1 d6 p; v% @- W% S3 i
9. 
   ) X* i9 R9 b$ Q, W
10. type RedPacketContextType = {
    * y% n9 K6 {  ~' Q
11.   redPackets: RedPacket[];
    9 X0 I% b. f1 Z7 w2 h' ^" n3 {
12.   addRedPacket: (packet: RedPacket) => void;
    , I  B0 l& X- Q5 W) k- z) e, A
13. };
    
14. 
    0 ?8 K& _# e+ n$ U! E7 |; ]1 x5 @
15. const RedPacketContext = createContext<RedPacketContextType | undefined>(undefined);
    6 I3 D6 y, A$ X+ D: g$ U
16. 
    
17. export const useRedPacket = () => {
    
18.   const context = useContext(RedPacketContext);
    
19.   if (!context) {
    ( Z  g7 ]/ v- S) p
20.     throw new Error('useRedPacket must be used within a RedPacketProvider');
    9 [7 e  E( t1 m! }: z" G2 e
21.   }
    & v7 Q3 ?8 S8 O1 v4 a
22.   return context;
    
23. };
    
24. 
    
25. export const RedPacketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    " ?$ X) u: X( M
26.   const [redPackets, setRedPackets] = useState<RedPacket[]>([
    - j  _0 Z3 w% o0 A- y; F/ d
27.     // Initial dummy data
    & L% q6 V$ ~9 R( G/ v  h5 _
28.     // { id: '1', amount: 100, quantity: 10, message: 'Happy New Year!' },
    + q, l# P0 V, A
29.     // { id: '2', amount: 50, quantity: 5, message: 'Best Wishes!' },
    
30.   ]);
    $ D# q9 V5 V6 n. {0 Q' m
31. 
    
32.   const addRedPacket = (packet: RedPacket) => {
    
33.     setRedPackets(prev => [...prev, packet]);
    8 K) e6 N0 ~: J2 F
34.   };
    
35. 
    
36.   return (
    6 F3 m' {6 e, K0 S  ]& y  c  F
37.     <RedPacketContext.Provider value={{ redPackets, addRedPacket }}>
    
38.       {children}
    
39.     </RedPacketContext.Provider>
      y1 s0 S9 N& v7 V6 k5 k
40.   );
    
41. };

复制代码

1. import React from 'react';
   ( A4 K: ^0 m5 B" q0 R, L
2. import { Button, List } from 'antd-mobile';
   
3. import { useNavigate } from 'react-router-dom';
   
4. import { useRedPacket } from '../context/RedPacketContext';
   , ^+ n% L% e  n7 B( ?
5. 
   
6. const HomePage: React.FC = () => {
   - W0 \& F. m9 d/ ^9 {) C
7.   const navigate = useNavigate();
   
8.   const { redPackets } = useRedPacket();
   
9. 
   3 D3 W* q2 V. V* d8 Q* n4 t
10.   return (
      Q% j0 o3 \6 H& F% i/ e
11.     <div style={{ padding: '1rem' }}>
    9 q7 B: d0 f/ ~$ L) Q
12.       <h2>Home</h2>
    
13.       <Button color="primary" onClick={() => navigate('/create')} block>
    - x/ s0 ~7 x: a* Z
14.         Create Red Packet
    
15.       </Button>
    
16. 
    
17.       <h3 style={{ marginTop: '1.5rem' }}>Available Red Packets</h3>
    + i1 {7 k8 [" }7 r
18.       {redPackets.length === 0 ? (
    + N. K+ r  L; \& [! L, @) K/ c
19.         <div>No Red Packets Available</div>
    
20.       ) : (
    
21.         <List>
    ( l/ e; ~  T. S% O4 k" O
22.           {redPackets.map((packet) => (
    
23.             <div key={packet.id} className="packet-card">
    
24.               <div>
    & f* F2 p& |1 P
25.                 <strong>Amount:</strong> {packet.amount}
    0 U' C2 [: r  x+ B$ ^; d
26.               </div>
    8 E' t* W9 @% U, Q8 J
27.               <div>
    5 @% ~; @8 y  H
28.                 <strong>Quantity:</strong> {packet.quantity}
    ; t5 }2 B  q" J( h' f
29.               </div>
    7 Y  ]! i5 G9 D/ n+ Z
30.               <div>
    
31.                 <strong>Message:</strong> {packet.message}
    
32.               </div>
    
33.               <Button
    - i: i9 ]* q5 U: k
34.                 size="small"
    & ~  e& A) A, w
35.                 color="primary"
    $ N0 t+ _3 X% L4 ~
36.                 onClick={() => navigate(`/claim/${packet.id}`)}
    4 `, F# m8 L8 e. A5 s
37.               >
    
38.                 Claim
    
39.               </Button>
    
40.             </div>
    8 B, ?5 J6 T/ o
41.           ))}
    , _: U2 c3 c8 U( i8 P1 R8 s+ W
42.         </List>
    1 L! D; E4 n1 E5 l( m$ J4 K: {, ^
43.       )}
    
44.     </div>
    . b- [; ~4 w1 d8 v1 s
45.   );
    1 k1 o; W- {0 w' [1 ]. Y& K
46. };
    
47. 
    
48. export default HomePage;

复制代码

1. import React, { useEffect } from 'react';
   8 n" y+ a' J/ A! b) Y
2. import { TonConnectButton } from '@tonconnect/ui-react';
   ' N: ?% \% I: b2 `0 L5 K6 Q/ @! \4 ~
3. import { Button } from 'antd-mobile';
   : E5 t" D$ Z7 k( }: \
4. import { useNavigate } from 'react-router-dom';
   . n# v1 G& ?3 n# c# i$ ~
5. import { useTonConnectModal, useTonAddress } from '@tonconnect/ui-react';
   
6. 
   
7. const LoginPage: React.FC = () => {
   / @+ J$ u; T' K0 s& B
8.   const navigate = useNavigate();
   * ?; [! ?$ I1 Z- P3 N" r
9.   const { close } = useTonConnectModal();  
   
10.   const address = useTonAddress();  
    ( L: _$ U5 O0 N5 O$ U* ?
11. 
    # p  O, z. a+ X  t7 Y
12.   // Redirect to HomePage once connected
    4 N" v6 v6 M# i2 S
13.   useEffect(() => {
    
14.     if (address) {
    
15.       navigate('/');  // Navigate to HomePage when wallet is connected
    
16.     }
    
17.   }, [address, navigate]);
    
18. 
    . f4 ]3 T( l8 B# M, y- \
19.   return (
    * U7 R: A! b& T
20.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    
21.       <h2>Login to TON Wallet</h2>
    ! [; h( `7 t3 d( ?
22. 
    
23.       {/* Show only TonConnectButton for connecting */}
    5 @1 B& i' r, \3 R4 y9 g
24.       <TonConnectButton style={{ marginBottom: '1rem' }} />
    
25. 
    
26.       {/* Only show disconnect wallet button once connected */}
    * q1 y" K; @8 B# A
27.       {address && (
    
28.         <>
    
29.           <p>Connected Wallet: {address}</p>
    0 g7 b. i9 J2 u  k! j# [/ G+ w4 k% R
30.           <Button onClick={() => close()}>Disconnect Wallet</Button>
    
31.         </>
    
32.       )}
    
33. 
      {0 @9 E$ o1 y; z
34.     </div>
    8 v! P% g3 V3 O8 ?
35.   );
    
36. };
    
37. 
    + e/ P4 i. N7 V9 T6 E3 |* R
38. export default LoginPage;

复制代码