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

riyad

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

7 T& x! ^+ t' e& X" H. `前提条件
" v3 x: s1 q( `: }3 K在开始之前，确保你已完成以下步骤：
) m9 e: y3 F, E' o3 o( z
' ]9 j8 X+ f9 n7 ]

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

项目文件夹结构
3 y' I& n( J8 K- @9 j+ m$ c我使用 Vite 创建了一个 React + TypeScript 项目，项目名为 TON-RED-PACKET。以下是项目目录结构
* x) N: O* B9 l& n6 R4 R

, _3 z; w2 X, F6 L/ i
目录说明：
- T' G9 s& o: V+ }3 a% ecomponents/：存放可复用的组件。

• WalletConnect.tsx：钱包连接组件。
• RedPacketContext.tsx：红包上下文，用于管理全局状态。
  % W) j+ z$ F* s% T' G. `+ }* M2 u; m

pages/：存放页面组件。

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

App.tsx 和 App.css：主应用组件和样式。
+ G3 b& ~/ }  l+ Jindex.css 和 main.tsx：全局样式和入口文件。
7 x9 m: b* c; `# kvite-env.d.ts：Vite 环境声明文件。
其他配置文件：如 package.json、tsconfig.json 等。
步骤 1：创建前端项目
. X" Y8 R, s9 H: _我使用 Vite 快速搭建了一个 React + TypeScript 项目。以下是创建步骤：

初始化项目： 在终端运行：

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

复制代码

选择 react-ts 模板，项目会自动生成基础结构。
4 \, g5 U9 Y- j3 Y1 j
0 C0 M4 @: O/ c' D' F7 N8 o进入项目目录并安装依赖：
2 y& [. d! A6 y5 Z, E+ a, W

1. cd TON-RED-PACKET
   7 |6 g8 n4 W$ n: f
2. npm install

复制代码

安装额外的依赖： 为了实现钱包连接和页面交互，我安装了以下依赖：
9 W1 l8 q: W1 J: _/ B1 B/ P
" N* [' @1 K% h' Z6 G5 M+ W

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

复制代码

打开浏览器，访问 http://localhost:5173，你会看到 Vite 的默认页面。
( z! X! w2 s- C8 g7 G) Z
  t+ o( z0 @; D
3 z5 u$ Q4 S2 d2 V% ^
步骤 2：设置入口文件和全局样式
0 s! Z, E: _9 d4 p8 O2 Z我修改了 main.tsx 和 index.css，设置了应用的入口和全局样式。
% n& C/ j' ^/ a
2.1 main.tsx
* p! V6 {) W* D/ W2 X1 ^5 Lmain.tsx 是应用的入口文件，我在这里设置了 React Router 和全局上下文：

1. import { StrictMode } from 'react'
   / y; X0 `  m$ ]9 ^" L, `: v4 [
2. import { createRoot } from 'react-dom/client'
   ' _0 S0 r) H$ B1 J( \1 @, Z0 C+ _* [) T
3. import { BrowserRouter } from 'react-router-dom';
   - p" r, a" x8 W7 x! X
4. import { RedPacketProvider } from './context/RedPacketContext';
   5 H* F" d% U% U3 |2 R) u
5. import './index.css'
   
6. import App from './App.tsx'
   
7. 
   , j2 W# H3 ]! ~0 C
8. createRoot(document.getElementById('root')!).render(
   
9.   <StrictMode>
   % g/ a% T3 r; Y  F: \
10.     <RedPacketProvider>
    + T: P7 m4 G) Y+ X7 P4 [5 A& p1 g# Q
11.       <BrowserRouter>
    
12.           <App />
    ! a( O0 L5 q1 N* c' O! S- ^
13.       </BrowserRouter>
    
14.     </RedPacketProvider>
    - |- k; F3 E$ p' Y
15.   </StrictMode>,
    , k' }/ _) a: d- J1 N/ S
16. )

复制代码

1. :root {
   . l& v: t) b0 A) ]) }
2.   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   + t: \  L3 X0 o! b
3.   line-height: 1.5;
   ' n( f* t1 A3 I# }
4.   font-weight: 400;
   , b9 K( G: h; u) i( A+ U( }" g2 J
5. 
   9 {% J- b3 g) U2 v
6.   color-scheme: light dark;
   
7.   color: rgba(255, 255, 255, 0.87);
   
8.   background-color: #242424;
   
9. 
   
10.   font-synthesis: none;
    
11.   text-rendering: optimizeLegibility;
    
12.   -webkit-font-smoothing: antialiased;
    & }7 J" |+ v1 j3 p" M5 J
13.   -moz-osx-font-smoothing: grayscale;
    % U" q4 b5 V& r  g0 R
14. }
    + r% X4 x& n$ i* Y
15. 
    
16. a {
    
17.   font-weight: 500;
    ) N. B/ T) |% w$ N
18.   color: #646cff;
    
19.   text-decoration: inherit;
    
20. }
    1 _4 \4 y9 P6 g& I
21. a:hover {
    
22.   color: #535bf2;
    2 p" z8 c0 W3 j" J8 L& Q3 a
23. }
    . E) ?* l8 L! C& Q2 X& l. i" c$ d
24. 
    8 A8 f" U# l( b$ h& i
25. body {
    ; ~& M# M9 Q: S/ C- v  I
26.   margin: 0;
    
27.   display: flex;
      @( S( \$ d: q5 \; u6 m% E. }
28.   place-items: center;
    
29.   min-width: 320px;
    
30.   min-height: 100vh;
    
31. }
    - X% {3 s1 C, P8 @
32. 
    . V$ Z4 j0 n, ?$ M
33. h1 {
    
34.   font-size: 3.2em;
    . J) P! {8 Y7 g8 X" L4 @
35.   line-height: 1.1;
    
36. }
    
37. 
    ) h+ K$ f& t. Z
38. button {
    2 |; A+ }; r* D1 _$ ~3 ^- D# u
39.   border-radius: 8px;
    
40.   border: 1px solid transparent;
    
41.   padding: 0.6em 1.2em;
    ) |/ z9 j5 x( e, ^/ y6 s. q
42.   font-size: 1em;
    ! X, p, c1 o8 u3 A4 j0 \
43.   font-weight: 500;
    
44.   font-family: inherit;
    
45.   background-color: #1a1a1a;
    
46.   cursor: pointer;
    1 }7 q8 t. E$ @% i/ F9 v7 p
47.   transition: border-color 0.25s;
    
48. }
    
49. button:hover {
    
50.   border-color: #646cff;
    
51. }
    
52. button:focus,
    5 b" n0 @& Q0 g! a7 `5 b2 V1 H+ \
53. button:focus-visible {
    
54.   outline: 4px auto -webkit-focus-ring-color;
    & W: G* h4 u1 i
55. }
    
56. 
    
57. @media (prefers-color-scheme: light) {
    , s3 K" D0 i6 d9 z4 }
58.   :root {
    
59.     color: #213547;
    
60.     background-color: #ffffff;
    
61.   }
    
62.   a:hover {
    
63.     color: #747bff;
    
64.   }
    - x3 h2 u/ \4 N5 z3 `4 E: W
65.   button {
    
66.     background-color: #f9f9f9;
    
67.   }
    - ]0 @! K6 ?- |) L4 k
68. }

复制代码

1. // WalletConnect.tsx
   
2. import React, { useEffect } from 'react';
   
3. import { Button } from 'antd-mobile';
   
4. import { useNavigate } from 'react-router-dom';
   5 a9 v" c6 Y% {7 ?  ^. J  K
5. import { useTonAddress,TonConnectButton, useTonConnectUI } from '@tonconnect/ui-react';  // Import necessary hooks
   8 Y# |4 H5 o+ q4 ], m5 S; o
6. 
   
7. const WalletConnect: React.FC = () => {
   
8.   const navigate = useNavigate();
   * w+ O" t# m1 \% o+ \
9.   const address = useTonAddress();  // Get the connected wallet address
   1 B* I" v1 y5 F0 j; o. K' \
10.   const [tonConnectUI] = useTonConnectUI();
    7 i+ n4 b: c3 G; G% d2 R. u5 e
11. 
    - v: e! l2 N; ~+ ~! Y
12.   // Redirect to HomePage once connected
    
13.   useEffect(() => {
    
14.     if (!address) {
    , a/ J6 m4 [. R! G" \1 N9 D
15.       navigate('/login');  // Navigate to HomePage when wallet is connected
    . M' [  J0 q2 D- r% k
16.     }
    0 l+ M/ ^2 A" b! x  J% Q
17.   }, [address, navigate]);
    
18. 
    
19.   // Handle Disconnect Wallet
    
20.   const handleDisconnect = () => {
    5 e# m& h$ \6 o$ @9 K8 D9 Q2 {
21.      tonConnectUI.disconnect();
    
22.      navigate('/login');  // Redirect to login page after disconnecting
    ! N# ?' A* p& T" H
23.   };
    / t- e1 |2 u6 x& @; h0 a6 B$ R; j: P
24. 
    ; A$ s% y& c8 R  n# \( \  o
25.   return (
    
26.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    ( n2 I; O" ~/ f/ y5 K' z" w- Y
27.       {address ? (
    2 W" ]# c- v( l: e/ o
28.         <>
    
29.           <Button onClick={handleDisconnect}>Disconnect Wallet</Button>
    1 ^3 y; X1 z* [' o  e
30.         </>
    
31.       ) : (
    
32.         <>
    
33.           <TonConnectButton style={{ marginBottom: '1rem' }} />
    / O! @: y3 E: {  j
34.         </>
    
35.       )}
    " P" a- S6 i# O
36.     </div>
    ! ?1 q- ]" o- a6 W1 M
37.   );
    0 K6 Z- h6 R0 O5 v- r6 h2 m
38. };
    
39. 
    $ q9 O3 f3 `, J" S9 u% l' V9 H
40. export default WalletConnect;

复制代码

1. import React, { createContext, useContext, useState } from 'react';
   1 _7 q. ?) P2 G4 m2 d3 K) h- F# X
2. 
   
3. export type RedPacket = {
   " @. r; h4 n9 r5 j6 H
4.   id: string;
   
5.   amount: number;
   
6.   quantity: number;
   
7.   message?: string;
   % ]0 Q4 x/ k/ G0 T
8. };
   , A3 B7 \% D. U) J- {9 E- E
9. 
   
10. type RedPacketContextType = {
    / M6 u' y1 b) p( W
11.   redPackets: RedPacket[];
    " F# }" e) o- U; Q
12.   addRedPacket: (packet: RedPacket) => void;
    3 i! ~' M8 R* X& r$ j2 ?
13. };
    ) M' M' R* f( p9 N3 k9 s
14. 
    , x4 E& k1 Z* h, \2 e) V9 _
15. const RedPacketContext = createContext<RedPacketContextType | undefined>(undefined);
    ; C+ G4 m7 w4 K! Y
16. 
    2 I# O, D8 P. s# k# T* [# U8 b
17. export const useRedPacket = () => {
    
18.   const context = useContext(RedPacketContext);
    
19.   if (!context) {
    2 w' W! H0 C3 t" k; e) z6 O
20.     throw new Error('useRedPacket must be used within a RedPacketProvider');
    
21.   }
    0 u, r& L0 h1 K+ b0 l8 |2 v. t+ k
22.   return context;
    5 O+ Z$ d+ Y- m5 ?) c8 {
23. };
    
24. 
    5 a; R* R6 w6 i# E: m0 L: I& h% ]
25. export const RedPacketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    
26.   const [redPackets, setRedPackets] = useState<RedPacket[]>([
    & q8 p$ `; A# l2 F& l5 Z) {& W) ~
27.     // Initial dummy data
    ' s. a) i! R( e7 @- f0 w* ]# H0 B
28.     // { id: '1', amount: 100, quantity: 10, message: 'Happy New Year!' },
    
29.     // { id: '2', amount: 50, quantity: 5, message: 'Best Wishes!' },
    3 f% b5 r* t5 B% U/ u/ ~% X
30.   ]);
    
31. 
    % i) S/ [6 r! z% t$ W8 ~
32.   const addRedPacket = (packet: RedPacket) => {
    
33.     setRedPackets(prev => [...prev, packet]);
    
34.   };
    
35. 
    4 [3 d. Y4 o" A0 {
36.   return (
    3 N% M7 f9 e) h1 F# G2 {# U/ e
37.     <RedPacketContext.Provider value={{ redPackets, addRedPacket }}>
    1 v9 K8 L1 b3 p
38.       {children}
    ( @6 ?1 O9 F6 V
39.     </RedPacketContext.Provider>
    4 z; n  z+ r/ X" K8 S3 y
40.   );
    1 x' A, d7 @! E# e8 M9 |& ~( a9 G
41. };

复制代码

1. import React from 'react';
   
2. import { Button, List } from 'antd-mobile';
   
3. import { useNavigate } from 'react-router-dom';
   
4. import { useRedPacket } from '../context/RedPacketContext';
   
5. 
   4 Y  Z. ?, O2 P( j9 z* d2 i8 w
6. const HomePage: React.FC = () => {
   ; f$ S! f1 @0 _, {2 i. p( S
7.   const navigate = useNavigate();
   
8.   const { redPackets } = useRedPacket();
   . z: Y! d' ?) B5 P! E, c; m
9. 
   7 ~7 l$ W; \+ _0 }+ c9 g# l( J. R, z
10.   return (
    # E" y- a' C. i$ B
11.     <div style={{ padding: '1rem' }}>
    
12.       <h2>Home</h2>
    7 \( h% E8 T  A# X2 h
13.       <Button color="primary" onClick={() => navigate('/create')} block>
    
14.         Create Red Packet
    0 G  z) D1 a. \+ R+ l; U, a- g& S
15.       </Button>
    & @) l% o" v7 G- p# R! Y7 I  q' {/ _( x
16. 
    
17.       <h3 style={{ marginTop: '1.5rem' }}>Available Red Packets</h3>
    
18.       {redPackets.length === 0 ? (
    
19.         <div>No Red Packets Available</div>
    
20.       ) : (
    3 B0 M! i. v% b" X& @
21.         <List>
    
22.           {redPackets.map((packet) => (
    , M+ D% z2 g6 G" p  T
23.             <div key={packet.id} className="packet-card">
    
24.               <div>
    % s. E! X0 ?% n% O4 M4 A% {* E
25.                 <strong>Amount:</strong> {packet.amount}
    
26.               </div>
    
27.               <div>
    ; N3 _4 Q: [! o. k' }+ W
28.                 <strong>Quantity:</strong> {packet.quantity}
    ) V% i. }. v+ |
29.               </div>
    
30.               <div>
    
31.                 <strong>Message:</strong> {packet.message}
    
32.               </div>
    & L5 \$ M% g4 H8 E
33.               <Button
    7 E& a9 ?. @; F/ Z5 [7 V
34.                 size="small"
    # }! ~1 O6 m/ n' H" f( H
35.                 color="primary"
    
36.                 onClick={() => navigate(`/claim/${packet.id}`)}
    " e" g8 R$ ~4 Z8 D
37.               >
    
38.                 Claim
    ( R, v- u' V% C3 u0 H
39.               </Button>
    1 m: w9 b( ?8 g
40.             </div>
    * D" H8 h- N# D
41.           ))}
    4 t3 x4 B/ `' c" f
42.         </List>
    , J2 t( `. I( |6 P( j4 G( d1 R
43.       )}
      w" l2 q! f' n9 x5 I
44.     </div>
    
45.   );
    ' G" E. [+ Z9 ~3 x
46. };
    - G8 L8 {0 b+ w  L" E
47. 
    - r# M" B* q; z/ \
48. export default HomePage;

复制代码

1. import React, { useEffect } from 'react';
   3 _* ?- [' o6 R; @
2. import { TonConnectButton } from '@tonconnect/ui-react';
   
3. import { Button } from 'antd-mobile';
   
4. import { useNavigate } from 'react-router-dom';
   : p' Q3 H- B) T& Q# m. N
5. import { useTonConnectModal, useTonAddress } from '@tonconnect/ui-react';
   
6. 
   
7. const LoginPage: React.FC = () => {
   
8.   const navigate = useNavigate();
   + j2 X* q1 m8 [
9.   const { close } = useTonConnectModal();  
   
10.   const address = useTonAddress();  
    , D. ~6 `6 V: R2 S6 A* K  J
11. 
    
12.   // Redirect to HomePage once connected
    3 I* [, x6 R8 d3 Y
13.   useEffect(() => {
    $ y0 P2 |; N" g5 J5 I
14.     if (address) {
    
15.       navigate('/');  // Navigate to HomePage when wallet is connected
    * x! u5 ]/ U9 l0 e0 d
16.     }
    % V7 f3 A5 N9 ]. {
17.   }, [address, navigate]);
    . ~- D# q2 A$ S
18. 
    9 i) _( ~/ E1 r+ S+ Y
19.   return (
    . D' O, \7 e5 W4 j: U$ w# `' L
20.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    4 e$ Q6 ]. [/ C' }& v4 c5 K4 O
21.       <h2>Login to TON Wallet</h2>
    1 C/ R/ n6 m! g8 U# Y
22. 
    
23.       {/* Show only TonConnectButton for connecting */}
    # n" i# v1 S' Q8 B
24.       <TonConnectButton style={{ marginBottom: '1rem' }} />
    
25. 
    ' u( ]# _( T7 S5 [2 [( ~
26.       {/* Only show disconnect wallet button once connected */}
    1 V8 T$ y7 k: p0 b$ h. j
27.       {address && (
    8 W5 E$ f. `  v1 ^
28.         <>
    + b. H* o) N6 P
29.           <p>Connected Wallet: {address}</p>
      y8 Y$ `& u8 o( g9 ^
30.           <Button onClick={() => close()}>Disconnect Wallet</Button>
    : L. ^. |7 t! U' C# g1 C
31.         </>
    1 ^9 H3 U* T+ @2 v5 S8 G
32.       )}
    . ~9 |, E9 @& t" b; K
33. 
    5 p0 c: k1 b- w
34.     </div>
    5 P0 U, w: O$ I; L+ L$ I
35.   );
    ! z9 b. B/ }9 p- n; k+ ]% E5 B1 b
36. };
    0 k* _* {9 g! x  j% W4 B2 l
37. 
    
38. export default LoginPage;

复制代码