139 |
Sign Data Test & Verification
140 |
141 |
142 | Test different types of data signing: text, binary, and cell formats with signature verification
143 |
144 |
145 | {wallet ? (
146 |
147 |
150 |
153 |
156 |
157 | ) : (
158 |
159 | Connect wallet to test signing
160 |
161 | )}
162 |
163 | {signDataRequest && (
164 |
165 |
📤 Sign Data Request
166 |
167 |
168 | )}
169 |
170 | {signDataResponse && (
171 |
172 |
📥 Sign Data Response
173 |
174 |
175 | )}
176 |
177 | {verificationResult && (
178 |
179 |
✅ Verification Result
180 |
181 |
182 | )}
183 |
75 |
Demo backend API with ton_proof verification
76 | {authorized ? (
77 |
80 | ) : (
81 |
Connect wallet to call API
82 | )}
83 |
84 |
51 |
Configure and send transaction
52 |
53 |
54 |
55 | {wallet ? (
56 |
59 | ) : (
60 |
63 | )}
64 |
65 | );
66 | }
67 |
68 |
--------------------------------------------------------------------------------
/src/components/TxForm/style.scss:
--------------------------------------------------------------------------------
1 | .send-tx-form {
2 | flex: 1;
3 | display: flex;
4 | width: 100%;
5 | flex-direction: column;
6 | gap: 20px;
7 | padding: 20px;
8 | align-items: center;
9 |
10 | h3 {
11 | color: white;
12 | opacity: 0.8;
13 | font-size: 28px;
14 | }
15 |
16 | > div:nth-child(2) {
17 | width: 100%;
18 |
19 | span {
20 | word-break: break-word;
21 | }
22 | }
23 |
24 | > button {
25 | border: none;
26 | padding: 7px 15px;
27 | border-radius: 15px;
28 | cursor: pointer;
29 |
30 | background-color: rgba(102,170,238,0.91);
31 | color: white;
32 | font-size: 16px;
33 | line-height: 20px;
34 |
35 | transition: transform 0.1s ease-in-out;
36 |
37 | &:hover {
38 | transform: scale(1.03);
39 | }
40 |
41 | &:active {
42 | transform: scale(0.97);
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/WalletBatchLimitsTester/WalletBatchLimitsTester.tsx:
--------------------------------------------------------------------------------
1 | import './style.scss';
2 | import { SendTransactionRequest, useTonConnectUI, useTonWallet } from "@tonconnect/ui-react";
3 | import { Address } from '@ton/ton';
4 |
5 | // Component to test wallet batch message limits
6 | export function WalletBatchLimitsTester() {
7 | const wallet = useTonWallet();
8 | const [tonConnectUi] = useTonConnectUI();
9 |
10 | // Generate transaction with specified number of messages
11 | const generateMultipleMessages = (count: number): SendTransactionRequest => {
12 | // The transaction is valid for 10 minutes
13 | const validUntil = Math.floor(Date.now() / 1000) + 600;
14 |
15 | // Get user's wallet address and convert to non-bounceable format
16 | let userAddress = '';
17 | if (wallet && wallet.account) {
18 | try {
19 | // Convert to Address object then to non-bounceable format
20 | const address = Address.parse(wallet.account.address);
21 | userAddress = address.toString({
22 | urlSafe: true,
23 | bounceable: false
24 | });
25 | } catch (e) {
26 | console.error('Error converting address:', e);
27 | userAddress = wallet.account.address;
28 | }
29 | }
30 |
31 | // Create array with 'count' messages
32 | const messages = Array(count).fill(null).map(() => ({
33 | // Send to user's own wallet address in non-bounceable format
34 | address: userAddress,
35 | // Small amount to send in nanoTON (0.00001 TON = 10000 nanoTON)
36 | amount: '10000',
37 | }));
38 |
39 | return {
40 | validUntil,
41 | messages,
42 | };
43 | };
44 |
45 | // Send transaction with specified number of messages
46 | const handleSendTransaction = (count: number) => {
47 | const tx = generateMultipleMessages(count);
48 | tonConnectUi.sendTransaction(tx);
49 | };
50 |
51 | return (
52 |
53 |
Batch Message Limits Test
54 |
55 |
56 | Send multiple messages to the wallet to test message batching capabilities
57 |
58 |
59 | {wallet ? (
60 |
61 |
66 |
71 |
72 | ) : (
73 |
74 | Connect wallet to test batch limits
75 |
76 | )}
77 |