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

riyad

  p' y4 o5 S2 U" L: x0 G
在前两篇教程中，我已经完成了红包智能合约的编写、编译和部署到 TON 测试网。今天，我们进入第三部分：开发一个前端界面，让用户可以直观地与红包合约交互。我使用 Vite + React + TypeScript 搭建了前端项目，并集成了 TON 钱包连接功能。以下是我的开发过程和完整代码，欢迎大家参考！
5 Q. {# u! `- A. s7 k* n& T
' x2 X3 u; l" }3 E! `# b8 Z前提条件
在开始之前，确保你已完成以下步骤：
& u/ Q7 L2 x2 y! D, E5 N. ?9 `# ^

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

3 r. b* S( {# A1 D/ @( {2 a( C, }) Y0 v项目文件夹结构
我使用 Vite 创建了一个 React + TypeScript 项目，项目名为 TON-RED-PACKET。以下是项目目录结构



目录说明：
components/：存放可复用的组件。

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

pages/：存放页面组件。

• ClaimPacketPage.tsx：领取红包页面。
• CreatePacketPage.tsx：创建红包页面。
• HomePage.tsx：首页。
• LoginPage.tsx：登录页面。
  ) X- x; ]6 B$ q8 _9 Z( @

App.tsx 和 App.css：主应用组件和样式。
8 _0 v: s7 w7 \% D1 Lindex.css 和 main.tsx：全局样式和入口文件。
" h' F7 r  g# q/ c. h! i* Q2 n: Z$ Svite-env.d.ts：Vite 环境声明文件。
其他配置文件：如 package.json、tsconfig.json 等。
步骤 1：创建前端项目
我使用 Vite 快速搭建了一个 React + TypeScript 项目。以下是创建步骤：

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

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

复制代码

选择 react-ts 模板，项目会自动生成基础结构。
; F4 V  O- \) O6 y
进入项目目录并安装依赖：
1 w2 H/ x! w* _: g

1. cd TON-RED-PACKET
   2 S4 O' r+ m4 a
2. npm install

复制代码

安装额外的依赖： 为了实现钱包连接和页面交互，我安装了以下依赖：

* O2 ^$ c1 F, g) |5 o6 D: p

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

复制代码

打开浏览器，访问 http://localhost:5173，你会看到 Vite 的默认页面。



" |, Z. p4 f9 F, g/ v7 \步骤 2：设置入口文件和全局样式
1 a4 ]2 N. m5 P( I我修改了 main.tsx 和 index.css，设置了应用的入口和全局样式。
7 o) x: Z* W0 h8 T
. P& H- \+ g7 H; J& [' G% U! H2.1 main.tsx
; w0 Z* S2 t% T  smain.tsx 是应用的入口文件，我在这里设置了 React Router 和全局上下文：

1. import { StrictMode } from 'react'
   
2. import { createRoot } from 'react-dom/client'
   
3. import { BrowserRouter } from 'react-router-dom';
   : L0 E* N8 {  u- Q$ d/ H) y
4. import { RedPacketProvider } from './context/RedPacketContext';
   
5. import './index.css'
   5 {2 C) ~/ U, p$ g4 c
6. import App from './App.tsx'
   
7. 
   5 E; d# p3 ]5 A1 h0 Q  Y
8. createRoot(document.getElementById('root')!).render(
   
9.   <StrictMode>
   , t, H7 w" l5 d  R2 S0 [
10.     <RedPacketProvider>
    $ J" r4 m. F, X! K) l8 N
11.       <BrowserRouter>
    $ p1 ?+ |. K: I$ g9 W
12.           <App />
    
13.       </BrowserRouter>
    
14.     </RedPacketProvider>
    # x7 h3 Q( c; [+ N/ x  v
15.   </StrictMode>,
    & i! N9 w' I) l0 g; E. l
16. )

复制代码

1. :root {
   
2.   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   
3.   line-height: 1.5;
   
4.   font-weight: 400;
   
5. 
   
6.   color-scheme: light dark;
   & V+ X3 u% ~2 `) J. [1 [7 |
7.   color: rgba(255, 255, 255, 0.87);
   
8.   background-color: #242424;
   
9. 
   
10.   font-synthesis: none;
    ' L! Y" F, R6 w3 X
11.   text-rendering: optimizeLegibility;
    " p+ c/ [3 c$ Z' K
12.   -webkit-font-smoothing: antialiased;
      c$ j7 f: m8 v7 y9 E5 M
13.   -moz-osx-font-smoothing: grayscale;
    
14. }
    
15. 
    # V5 Y1 K7 R3 d" T
16. a {
    
17.   font-weight: 500;
    
18.   color: #646cff;
    0 q$ g3 ^3 C4 }* M; x6 e
19.   text-decoration: inherit;
    
20. }
    % ]' r  b' {# v- I  g# D9 X
21. a:hover {
    ; Z* f+ t: |- ^) m8 X2 A1 ?5 @+ x
22.   color: #535bf2;
    ! H& ~) \. i9 E; S) p& ]& ~0 @# E
23. }
    5 L! r. f8 R3 Y
24. 
    
25. body {
    
26.   margin: 0;
    
27.   display: flex;
    " R/ d% B# d6 M% M" l- J! u; ]; T$ @
28.   place-items: center;
    
29.   min-width: 320px;
    
30.   min-height: 100vh;
    2 ^+ v7 A) y9 N; F( |5 w
31. }
    3 D5 J6 \! b% P
32. 
    
33. h1 {
    . \$ R) @, T+ B/ [
34.   font-size: 3.2em;
    
35.   line-height: 1.1;
    
36. }
    9 e5 _0 d2 n7 ]- l8 f9 u
37. 
    
38. button {
    2 Y  ~, X+ L$ l4 z% o
39.   border-radius: 8px;
    " R; P$ I( }0 s1 y& }( y6 z" b
40.   border: 1px solid transparent;
    
41.   padding: 0.6em 1.2em;
    
42.   font-size: 1em;
    
43.   font-weight: 500;
    ( B5 C# C9 Z) Q: K+ c' `% u
44.   font-family: inherit;
    % Q1 Z5 h, x; ^/ S- v0 t1 p* d
45.   background-color: #1a1a1a;
    
46.   cursor: pointer;
    * Z. g8 o% v5 {3 R5 q+ `8 {
47.   transition: border-color 0.25s;
    
48. }
    
49. button:hover {
    
50.   border-color: #646cff;
    5 j! b7 u2 z/ g  U* o! N$ k+ d; u
51. }
    
52. button:focus,
    . ^! P- s5 E! O
53. button:focus-visible {
    - b" v$ S) D$ _
54.   outline: 4px auto -webkit-focus-ring-color;
    7 u/ Q* W9 x* E6 ~6 ~
55. }
    
56. 
    . o% x: [, d+ B6 \( C/ z' L, b
57. @media (prefers-color-scheme: light) {
    
58.   :root {
    % Z' I  A+ ]' O: }# T
59.     color: #213547;
    : ]2 w0 ]* B; Y( Q
60.     background-color: #ffffff;
    
61.   }
    
62.   a:hover {
    
63.     color: #747bff;
    1 R$ M4 e/ t/ @( T
64.   }
    , o$ t. m3 d) ~0 Z7 i
65.   button {
    
66.     background-color: #f9f9f9;
    7 }9 r. H$ o' W7 B# A
67.   }
    ! ^0 [4 x. y% {8 t: D/ S; y
68. }

复制代码

1. // WalletConnect.tsx
   , g; o# L! E5 P. a' k, _
2. import React, { useEffect } from 'react';
   
3. import { Button } from 'antd-mobile';
   0 t4 e/ ~, \/ ?
4. import { useNavigate } from 'react-router-dom';
   
5. import { useTonAddress,TonConnectButton, useTonConnectUI } from '@tonconnect/ui-react';  // Import necessary hooks
   
6. 
   ! S9 X- H: }/ Y9 ~* c
7. const WalletConnect: React.FC = () => {
   
8.   const navigate = useNavigate();
   
9.   const address = useTonAddress();  // Get the connected wallet address
     `# c0 M& t1 g2 l0 Y2 {
10.   const [tonConnectUI] = useTonConnectUI();
    
11. 
    
12.   // Redirect to HomePage once connected
    % p  W+ C- d, Z% R: P6 t8 `8 H
13.   useEffect(() => {
    
14.     if (!address) {
    
15.       navigate('/login');  // Navigate to HomePage when wallet is connected
    9 \6 @4 N: c; C
16.     }
    7 j& N+ |( x) ?; t, N) Q+ t
17.   }, [address, navigate]);
    
18. 
    - g) i- Y2 z4 U' z3 r1 \
19.   // Handle Disconnect Wallet
    2 v2 {  y; e+ S6 \: Y5 i& Q. F
20.   const handleDisconnect = () => {
    
21.      tonConnectUI.disconnect();
    
22.      navigate('/login');  // Redirect to login page after disconnecting
    + A: V4 }0 b# Y5 l( I
23.   };
    
24. 
    9 b9 \+ i, I1 ]$ ^" o+ }# y6 V- z
25.   return (
    ) I% j+ x/ s: {0 `7 L
26.     <div style={{ padding: '1rem', textAlign: 'center' }}>
      ^  u  `5 U( c3 u% _8 s
27.       {address ? (
    
28.         <>
    8 N- n) \  v& @6 v
29.           <Button onClick={handleDisconnect}>Disconnect Wallet</Button>
    
30.         </>
    
31.       ) : (
    
32.         <>
    - G$ v0 n5 ?5 w3 ^( P' t
33.           <TonConnectButton style={{ marginBottom: '1rem' }} />
    % [, j: P  C8 Y; q) P) G$ X6 W9 U0 ]
34.         </>
    - G7 o6 s+ @' l% \, `
35.       )}
    ( k, q9 ^. y+ b4 E+ C
36.     </div>
    
37.   );
    
38. };
    " Y" r+ p6 V8 o; w. S
39. 
    9 X, z9 r0 J2 h8 q- |* ~- n' l
40. export default WalletConnect;

复制代码

1. import React, { createContext, useContext, useState } from 'react';
   1 k! @. X+ s; A* Q
2. 
   4 T5 x: h7 o6 N& X7 R6 S' t
3. export type RedPacket = {
   2 R3 x) T( Q! Y
4.   id: string;
   ' U6 x! E/ G0 j4 y7 J
5.   amount: number;
   ; @5 {4 A" d9 S. \) L7 {  s" G
6.   quantity: number;
   : _9 T: ]8 R9 j9 F8 u. j: A  N
7.   message?: string;
   0 ^% [4 }% @/ v
8. };
   
9. 
   
10. type RedPacketContextType = {
    " L3 a& D% h/ ]
11.   redPackets: RedPacket[];
    0 Z5 B2 ], z: r+ ?, r% n2 z
12.   addRedPacket: (packet: RedPacket) => void;
    
13. };
    9 p. {: `+ h' g$ [4 t+ X& T# u& K
14. 
    
15. const RedPacketContext = createContext<RedPacketContextType | undefined>(undefined);
    0 M+ A, ~; ^9 U0 m. p! E9 Y$ P+ k
16. 
    
17. export const useRedPacket = () => {
    
18.   const context = useContext(RedPacketContext);
    
19.   if (!context) {
    
20.     throw new Error('useRedPacket must be used within a RedPacketProvider');
    2 j7 w, F) H8 h) e$ Q4 x( o; d
21.   }
    ! H6 Y2 ~9 Z- k
22.   return context;
    & @. Z( E/ A* j- D5 V
23. };
    ) I7 F0 U4 \& L7 E. _4 I
24. 
    
25. export const RedPacketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    ( T: h. z; E1 P- q1 d% F4 F: T2 E
26.   const [redPackets, setRedPackets] = useState<RedPacket[]>([
    3 L) P2 ^, K9 ~5 ?" I6 N
27.     // Initial dummy data
    
28.     // { id: '1', amount: 100, quantity: 10, message: 'Happy New Year!' },
    + Z' ?. l" z7 R3 P* h4 h
29.     // { id: '2', amount: 50, quantity: 5, message: 'Best Wishes!' },
    
30.   ]);
    6 u" A2 O- G) v1 p" S) z  F. |
31. 
    
32.   const addRedPacket = (packet: RedPacket) => {
    
33.     setRedPackets(prev => [...prev, packet]);
    
34.   };
    % |/ j- k, L. m2 y
35. 
    # X, f8 W5 o0 B- W0 ^% u
36.   return (
    4 z4 ]. C9 s6 D( S  T0 Q
37.     <RedPacketContext.Provider value={{ redPackets, addRedPacket }}>
    1 `6 |, i' w/ B6 z
38.       {children}
    % x0 k$ P% H+ i. H0 i; o
39.     </RedPacketContext.Provider>
    
40.   );
    4 [2 c) Y5 W/ d# d5 c
41. };

复制代码

1. import React from 'react';
   
2. import { Button, List } from 'antd-mobile';
   
3. import { useNavigate } from 'react-router-dom';
   7 v# P) ]- m" k5 O) k
4. import { useRedPacket } from '../context/RedPacketContext';
   
5. 
   
6. const HomePage: React.FC = () => {
     d* H5 J5 R" Q: n' t6 s9 h, B
7.   const navigate = useNavigate();
   7 V- Z- V) b2 z6 m. A
8.   const { redPackets } = useRedPacket();
   
9. 
   
10.   return (
    0 u5 r% a  J0 l3 l) o( m
11.     <div style={{ padding: '1rem' }}>
    
12.       <h2>Home</h2>
    
13.       <Button color="primary" onClick={() => navigate('/create')} block>
    
14.         Create Red Packet
    
15.       </Button>
    8 j7 A6 h3 @0 J& U3 q
16. 
    
17.       <h3 style={{ marginTop: '1.5rem' }}>Available Red Packets</h3>
    % w# k, N3 h0 i0 A
18.       {redPackets.length === 0 ? (
    
19.         <div>No Red Packets Available</div>
    - G- e- s/ z4 i
20.       ) : (
    5 ?" {* b; }; {" I
21.         <List>
    ! C# |- g; v; \; P% \7 e8 ^
22.           {redPackets.map((packet) => (
    2 B  b" _4 J$ K1 @. z
23.             <div key={packet.id} className="packet-card">
    
24.               <div>
    
25.                 <strong>Amount:</strong> {packet.amount}
    
26.               </div>
    
27.               <div>
    $ r% Z' O& b' K6 S
28.                 <strong>Quantity:</strong> {packet.quantity}
    4 e: _  W5 {" P8 n1 \+ k0 `
29.               </div>
    
30.               <div>
    
31.                 <strong>Message:</strong> {packet.message}
    % V# }  X8 ]2 l6 _2 b, {* v+ o; h
32.               </div>
    2 }. f1 K+ w  [3 A
33.               <Button
    
34.                 size="small"
    - Y& M: c" e) m8 G
35.                 color="primary"
    ( u9 v! H% b# k" C
36.                 onClick={() => navigate(`/claim/${packet.id}`)}
    3 }, n6 o4 R1 s& C% a$ e8 w
37.               >
    6 q1 w/ C; A6 B
38.                 Claim
    ( k! K9 d, ^# P+ U5 [& d
39.               </Button>
    7 Y3 M5 u2 \6 {6 S9 R8 P# F& a; [8 X6 \
40.             </div>
    . z8 ^- Y" c" N1 @$ J+ ?- g3 u; z
41.           ))}
    
42.         </List>
    
43.       )}
    
44.     </div>
    
45.   );
    
46. };
    . H7 P+ h7 b. I3 |' k5 i3 s* P9 J
47. 
    ( e$ f" x9 B7 a! Q6 F2 m; R
48. export default HomePage;

复制代码

1. import React, { useEffect } from 'react';
   8 d0 B) Q0 J2 n4 V
2. import { TonConnectButton } from '@tonconnect/ui-react';
   ) S! Y4 O5 I0 m% l; H# R
3. import { Button } from 'antd-mobile';
   
4. import { useNavigate } from 'react-router-dom';
   * p2 p  I% T' t; W
5. import { useTonConnectModal, useTonAddress } from '@tonconnect/ui-react';
   9 x6 a; H8 r4 i  V1 u+ N. H
6. 
   
7. const LoginPage: React.FC = () => {
   
8.   const navigate = useNavigate();
   
9.   const { close } = useTonConnectModal();  
   % f; g5 f. r* w  G2 {' f8 X
10.   const address = useTonAddress();  
    / s" e, C" R5 [" k
11. 
    
12.   // Redirect to HomePage once connected
      p; d: p' K& i9 t: K' z
13.   useEffect(() => {
    . R. L& y8 \8 \3 j
14.     if (address) {
    
15.       navigate('/');  // Navigate to HomePage when wallet is connected
    ' Q3 C- v$ H+ K
16.     }
    
17.   }, [address, navigate]);
    
18. 
    
19.   return (
    1 R8 e% K: b8 t& C  c6 g
20.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    
21.       <h2>Login to TON Wallet</h2>
    
22. 
    
23.       {/* Show only TonConnectButton for connecting */}
    % @1 ?/ v! r/ `$ S. q- v4 }
24.       <TonConnectButton style={{ marginBottom: '1rem' }} />
    
25. 
    3 ?, `% B; b" N$ t0 `6 a% t$ x) k6 t( Y
26.       {/* Only show disconnect wallet button once connected */}
    
27.       {address && (
    4 E: i' ?! y9 L* P3 E
28.         <>
    6 t+ G( b3 n' z- G* x2 X
29.           <p>Connected Wallet: {address}</p>
    
30.           <Button onClick={() => close()}>Disconnect Wallet</Button>
    & l6 {5 q) z, d+ F4 t4 h* Y" W
31.         </>
    
32.       )}
    
33. 
    - b# M7 |' s4 i' f
34.     </div>
    
35.   );
    : l$ q0 s, ?( s
36. };
    2 i9 s# D& A  ]4 t' A$ G
37. 
    $ E8 ~. ]  x- f( X" h1 E( E) V
38. export default LoginPage;

复制代码