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

riyad

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

& _) e! T+ j  m" {/ a前提条件
3 p# c' D/ f8 X! ?) J. j在开始之前，确保你已完成以下步骤：

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

项目文件夹结构
我使用 Vite 创建了一个 React + TypeScript 项目，项目名为 TON-RED-PACKET。以下是项目目录结构
5 ~4 H' a# y4 X# a# h( `5 S3 _* Y


目录说明：
# x7 @# n! l8 V" W- Z1 Jcomponents/：存放可复用的组件。

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

pages/：存放页面组件。
5 @9 m* N7 _% ~. w

• ClaimPacketPage.tsx：领取红包页面。
• CreatePacketPage.tsx：创建红包页面。
• HomePage.tsx：首页。
• LoginPage.tsx：登录页面。
  * E- k* A2 J' f3 W2 |3 h$ F

App.tsx 和 App.css：主应用组件和样式。
( L: ~% ]7 F2 Y* T' ?  iindex.css 和 main.tsx：全局样式和入口文件。
vite-env.d.ts：Vite 环境声明文件。
其他配置文件：如 package.json、tsconfig.json 等。
0 A- a- L/ g4 M; g. O# i步骤 1：创建前端项目
6 |) Y/ |6 B+ b' ]2 a8 s我使用 Vite 快速搭建了一个 React + TypeScript 项目。以下是创建步骤：
' s8 c( f+ B# s7 A
$ y  W8 Q1 M( P3 r+ j' w# m初始化项目： 在终端运行：

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

复制代码

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

进入项目目录并安装依赖：
! a5 w+ L; f9 a' a. @' t

1. cd TON-RED-PACKET
   
2. npm install

复制代码

安装额外的依赖： 为了实现钱包连接和页面交互，我安装了以下依赖：
5 L% h; u* H1 s) M  ]: v- s

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

复制代码

打开浏览器，访问 http://localhost:5173，你会看到 Vite 的默认页面。
7 q) B0 K* A0 m6 s. U% X" k2 t8 j5 y
( z, N1 Y" p# P$ u
1 E) m# N* C0 _$ W. e
步骤 2：设置入口文件和全局样式
/ @# O# W# ^: h. w! `: ~我修改了 main.tsx 和 index.css，设置了应用的入口和全局样式。

; N; [7 ~; W& F& C4 W2.1 main.tsx
" V0 e4 J5 K! P/ H  d0 Wmain.tsx 是应用的入口文件，我在这里设置了 React Router 和全局上下文：

1. import { StrictMode } from 'react'
   
2. import { createRoot } from 'react-dom/client'
   
3. import { BrowserRouter } from 'react-router-dom';
   0 t3 `( i4 F8 T* K8 `
4. import { RedPacketProvider } from './context/RedPacketContext';
   
5. import './index.css'
   ; C2 R$ s' N! F( f" W: k
6. import App from './App.tsx'
   * i( k3 z7 j" C. h
7. 
   2 W* f2 ~3 e! |) V0 H$ c
8. createRoot(document.getElementById('root')!).render(
   
9.   <StrictMode>
   
10.     <RedPacketProvider>
    / @. A1 D; X& @, ~/ U/ j
11.       <BrowserRouter>
    1 P" i' l3 a1 r- C* m
12.           <App />
    % f8 b4 [5 W6 T6 D2 D' o/ d
13.       </BrowserRouter>
    3 u0 ~6 ?# _5 h. ?$ [# a' m" R
14.     </RedPacketProvider>
    
15.   </StrictMode>,
    
16. )

复制代码

1. :root {
   
2.   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   1 m8 q$ ~& U/ Y# E
3.   line-height: 1.5;
   
4.   font-weight: 400;
   
5. 
   
6.   color-scheme: light dark;
   
7.   color: rgba(255, 255, 255, 0.87);
   
8.   background-color: #242424;
   + c3 K( \( u/ v2 B- a
9. 
   
10.   font-synthesis: none;
    
11.   text-rendering: optimizeLegibility;
    
12.   -webkit-font-smoothing: antialiased;
    
13.   -moz-osx-font-smoothing: grayscale;
    2 R* F7 {0 v4 A% N/ Y
14. }
    
15. 
    , z. P( e1 `0 P. V6 K5 s
16. a {
    $ j9 m4 P) b7 Y2 a: U
17.   font-weight: 500;
    ; p) L2 u' n4 E) J. f+ l' ]( o
18.   color: #646cff;
      p- d) E$ y! K5 L/ _" U+ _
19.   text-decoration: inherit;
    
20. }
    
21. a:hover {
    0 S' D! ~. S& w8 A$ c+ C( B" X
22.   color: #535bf2;
    & L4 |4 i6 |0 L, {
23. }
    
24. 
    
25. body {
    ( u3 H* L9 u( Y
26.   margin: 0;
    
27.   display: flex;
    
28.   place-items: center;
    
29.   min-width: 320px;
    ! s4 f  O" u/ E% }9 @5 u8 E, f( O
30.   min-height: 100vh;
    
31. }
    9 J' G+ b2 L6 v( U
32. 
    
33. h1 {
    
34.   font-size: 3.2em;
    
35.   line-height: 1.1;
    ! m* G% P4 B. A& U% w
36. }
    # [1 R' o: G7 {  L% {7 F
37. 
    7 Y( {  e' n) s* {, ], Y3 z
38. button {
    
39.   border-radius: 8px;
    
40.   border: 1px solid transparent;
    
41.   padding: 0.6em 1.2em;
    & `  b! P" ~6 D+ [/ W4 [/ g7 u- g
42.   font-size: 1em;
    
43.   font-weight: 500;
    
44.   font-family: inherit;
    
45.   background-color: #1a1a1a;
    & U) F$ o2 ]* M7 G0 n) T
46.   cursor: pointer;
    % l: O! `9 p5 s0 \" p
47.   transition: border-color 0.25s;
    / e' j' [$ Y/ w
48. }
    
49. button:hover {
    
50.   border-color: #646cff;
    / ^* ~: O8 v8 V% }% U
51. }
    3 g: _/ h" _" w7 K, ?/ L; x2 @
52. button:focus,
    . O1 T0 \' i4 [6 S% g& h
53. button:focus-visible {
      r/ X2 ?) L0 y, s* h- `/ U! x7 I1 ?. p
54.   outline: 4px auto -webkit-focus-ring-color;
    
55. }
    , k5 y3 ~% Q% O2 I
56. 
    : \7 c' l2 `* E0 K9 P$ P" ^
57. @media (prefers-color-scheme: light) {
    2 S, D! _7 \& x7 v# m; f3 K2 B# x7 g% w
58.   :root {
    
59.     color: #213547;
    
60.     background-color: #ffffff;
    - g6 g7 d& \& ?
61.   }
    
62.   a:hover {
    
63.     color: #747bff;
    7 I5 d1 {: o1 F; e: Y) K) D' B
64.   }
    7 @) U1 D1 K* @0 T! i7 Y8 F9 E
65.   button {
    
66.     background-color: #f9f9f9;
    ) u2 D& Z- j: L8 }
67.   }
    
68. }

复制代码

1. // WalletConnect.tsx
   + e2 D8 y$ Q& t
2. import React, { useEffect } from 'react';
   . G/ o, `* u0 \# e) k7 B
3. import { Button } from 'antd-mobile';
   # V7 q+ E* X  A4 V9 |3 j  G
4. import { useNavigate } from 'react-router-dom';
   2 a- B; w7 G3 Y  o, B
5. import { useTonAddress,TonConnectButton, useTonConnectUI } from '@tonconnect/ui-react';  // Import necessary hooks
   4 Q! o0 Q3 n5 l8 O( C. V: }( v
6. 
   % I. ~+ ^; _& ~) s( {( k7 m
7. const WalletConnect: React.FC = () => {
   
8.   const navigate = useNavigate();
   
9.   const address = useTonAddress();  // Get the connected wallet address
   . Z& a! }* {- U' G! T% V
10.   const [tonConnectUI] = useTonConnectUI();
    / S7 B$ j, ^3 \' e
11. 
    
12.   // Redirect to HomePage once connected
    6 o9 Y& M# p/ f- n: @
13.   useEffect(() => {
    
14.     if (!address) {
    9 i( x$ A( r, K- P. ^0 G
15.       navigate('/login');  // Navigate to HomePage when wallet is connected
    4 Q. B% E& b0 k' T7 k6 J% i
16.     }
    6 A% V7 |: b+ ?
17.   }, [address, navigate]);
    ; P1 B2 K; D! O4 P  O" g0 E
18. 
    
19.   // Handle Disconnect Wallet
    
20.   const handleDisconnect = () => {
    
21.      tonConnectUI.disconnect();
    
22.      navigate('/login');  // Redirect to login page after disconnecting
    : V& u( c. n: V0 \
23.   };
    
24. 
    
25.   return (
    + k" C  y9 k8 r: _9 D
26.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    
27.       {address ? (
    8 \. F$ |/ {0 p3 Q* @8 |2 x; x
28.         <>
    
29.           <Button onClick={handleDisconnect}>Disconnect Wallet</Button>
    
30.         </>
    / S, ?9 }, S5 O' R3 B* `5 S( r$ G
31.       ) : (
    - V3 ?" R" o1 F6 N8 y; O  z
32.         <>
    
33.           <TonConnectButton style={{ marginBottom: '1rem' }} />
    
34.         </>
    ! b  f$ {/ p" P1 j5 G( y% s3 N
35.       )}
    ( J: o; \$ @1 _% v. L! f2 A
36.     </div>
    
37.   );
    % n3 _" }( P( m' x" U
38. };
    5 p" K7 E1 [7 l! _
39. 
    4 |. O  Y; ?4 R" [! T
40. export default WalletConnect;

复制代码

1. import React, { createContext, useContext, useState } from 'react';
   
2. 
   
3. export type RedPacket = {
   " O% K6 s) D( L/ l* {# C
4.   id: string;
   
5.   amount: number;
   
6.   quantity: number;
   
7.   message?: string;
   4 F* t, \: `/ @2 u
8. };
   " l9 t1 H) F* `+ h/ ~
9. 
   , y# u& l7 M4 P+ ^. S; q
10. type RedPacketContextType = {
    2 Q6 q) a# B9 P1 p* c- m
11.   redPackets: RedPacket[];
      W9 `- A8 R6 _; \/ @* G" C
12.   addRedPacket: (packet: RedPacket) => void;
    
13. };
    
14. 
    ! X; h# o" E: E. }
15. const RedPacketContext = createContext<RedPacketContextType | undefined>(undefined);
    
16. 
    ! N+ Y- a: Z+ D% ~
17. export const useRedPacket = () => {
    
18.   const context = useContext(RedPacketContext);
    8 U9 d: k( W" m: W$ z  {) g( X$ I
19.   if (!context) {
    
20.     throw new Error('useRedPacket must be used within a RedPacketProvider');
    ' x6 t: B/ d# C  n8 m- d
21.   }
    ' p+ M8 Y7 @4 i: F
22.   return context;
    
23. };
    
24. 
    
25. export const RedPacketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    7 u8 U+ X+ `* n& N
26.   const [redPackets, setRedPackets] = useState<RedPacket[]>([
    
27.     // Initial dummy data
    
28.     // { id: '1', amount: 100, quantity: 10, message: 'Happy New Year!' },
    ; y# V* X. W+ p! [1 H- k
29.     // { id: '2', amount: 50, quantity: 5, message: 'Best Wishes!' },
    * i/ {4 K! Q. y4 |2 Q
30.   ]);
      u  a9 o% T4 V/ X1 r
31. 
    
32.   const addRedPacket = (packet: RedPacket) => {
    4 W( z6 @7 V2 @6 B
33.     setRedPackets(prev => [...prev, packet]);
    
34.   };
    
35. 
    
36.   return (
    2 G) W/ f. o! c. P
37.     <RedPacketContext.Provider value={{ redPackets, addRedPacket }}>
    
38.       {children}
    
39.     </RedPacketContext.Provider>
    0 C, \& }/ [# f' J
40.   );
    
41. };

复制代码

1. import React from 'react';
   
2. import { Button, List } from 'antd-mobile';
   0 p- G& a5 k! v4 T6 u
3. import { useNavigate } from 'react-router-dom';
   
4. import { useRedPacket } from '../context/RedPacketContext';
   ' h, p9 `- ?2 }, T( S
5. 
   9 `. x* S5 n2 [; g% m5 k+ U% e
6. const HomePage: React.FC = () => {
   " i/ |. t& K  P
7.   const navigate = useNavigate();
   
8.   const { redPackets } = useRedPacket();
   
9. 
   7 G$ w1 I# g1 ^$ _* Y( n
10.   return (
    4 W5 M" t& D7 j2 \9 F4 I) n- M6 K' P
11.     <div style={{ padding: '1rem' }}>
    
12.       <h2>Home</h2>
    ) t- b' D# ?7 C
13.       <Button color="primary" onClick={() => navigate('/create')} block>
    # e- l* {+ f" X1 J" a1 y7 {- ~2 h
14.         Create Red Packet
    
15.       </Button>
    # d6 ^0 T/ k- v( `
16. 
    
17.       <h3 style={{ marginTop: '1.5rem' }}>Available Red Packets</h3>
    7 W; e6 w1 J5 d+ @
18.       {redPackets.length === 0 ? (
    
19.         <div>No Red Packets Available</div>
    
20.       ) : (
    % r5 ?; ?$ t$ g
21.         <List>
    0 Y& B8 K. U9 J- B
22.           {redPackets.map((packet) => (
    
23.             <div key={packet.id} className="packet-card">
    
24.               <div>
    ; R$ k; g; g( ?* S/ g4 }$ `
25.                 <strong>Amount:</strong> {packet.amount}
    
26.               </div>
    
27.               <div>
    
28.                 <strong>Quantity:</strong> {packet.quantity}
    + I7 f; w% a1 |# @3 {" S6 H
29.               </div>
    
30.               <div>
    3 K2 J3 Z; }& T- N+ D% X, h8 k
31.                 <strong>Message:</strong> {packet.message}
    
32.               </div>
    7 K7 ?4 M  T7 q1 \6 B2 m3 K
33.               <Button
    
34.                 size="small"
    + U3 v( I6 ?) c( O* _, a
35.                 color="primary"
    
36.                 onClick={() => navigate(`/claim/${packet.id}`)}
    1 y- E9 v5 r7 N1 f+ M
37.               >
    " N/ K* h4 ^' k# t4 h! ~* `
38.                 Claim
    
39.               </Button>
    
40.             </div>
    7 q) e, r( s2 r. }' g* ~
41.           ))}
    
42.         </List>
    
43.       )}
    - ?' K. I; J: R! n* J3 B$ o
44.     </div>
    9 [- L2 n. [2 J3 N
45.   );
    
46. };
    $ ?# W+ V4 f/ g1 m. z" F+ b/ i, E
47. 
    
48. export default HomePage;

复制代码

1. import React, { useEffect } from 'react';
   
2. import { TonConnectButton } from '@tonconnect/ui-react';
     Z3 y3 z9 S8 e( \1 A
3. import { Button } from 'antd-mobile';
   
4. import { useNavigate } from 'react-router-dom';
   
5. import { useTonConnectModal, useTonAddress } from '@tonconnect/ui-react';
   
6. 
   
7. const LoginPage: React.FC = () => {
   
8.   const navigate = useNavigate();
   
9.   const { close } = useTonConnectModal();  
   3 F: }, y1 _/ X; w$ x6 {
10.   const address = useTonAddress();  
    
11. 
    * M$ l. I. {* f, Q8 v- Z& {
12.   // Redirect to HomePage once connected
    3 X2 l; T( \8 y8 z- w
13.   useEffect(() => {
    
14.     if (address) {
    7 |+ E) e4 W6 a2 T& |+ B
15.       navigate('/');  // Navigate to HomePage when wallet is connected
    
16.     }
    2 I# Q5 u7 }, N8 F
17.   }, [address, navigate]);
    
18. 
    2 @, _; j0 U5 y% R: e+ e% [
19.   return (
    & w! y# w3 R2 G  X2 u( a
20.     <div style={{ padding: '1rem', textAlign: 'center' }}>
    
21.       <h2>Login to TON Wallet</h2>
    
22. 
    8 [9 s, _& J0 c5 e* l& c) W4 W
23.       {/* Show only TonConnectButton for connecting */}
    ) `9 G8 h1 d) k" N+ s
24.       <TonConnectButton style={{ marginBottom: '1rem' }} />
    : \4 ?* Q0 g$ v
25. 
    
26.       {/* Only show disconnect wallet button once connected */}
    5 |3 m$ v/ Y4 N7 F/ H* u, M
27.       {address && (
    
28.         <>
    
29.           <p>Connected Wallet: {address}</p>
    
30.           <Button onClick={() => close()}>Disconnect Wallet</Button>
    7 F( P; O6 i; q2 ^1 {' m  T9 [" b
31.         </>
    
32.       )}
    0 C& a5 M* T. r2 x
33. 
    
34.     </div>
    5 {. Q* l  I( B1 K, G
35.   );
    , V7 A8 t8 q! b0 C# r' |3 Y# u4 `, c
36. };
    
37. 
    
38. export default LoginPage;

复制代码