feat: find transaction demo

package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@ton-community/assets-sdk": "0.0.5",
-    "@ton/core": "^0.56.3",
-    "@ton/crypto": "^3.2.0",
-    "@ton/ton": "^14.0.0",
+    "@ton/core": "0.61.0",
+    "@ton/crypto": "3.3.0",
+    "@ton/ton": "15.3.1",
     "@tonconnect/ui-react": "^2.2.0",
     "buffer": "^6.0.3",
     "crc-32": "^1.2.2",

src/App.scss

@@ -7,3 +7,17 @@
     margin-bottom: 10px;
   }
 }
+
+.react-json-view {
+  background: rgba(24, 32, 48, 0.98) !important;
+  border-radius: 14px;
+  box-shadow: 0 2px 12px 0 rgba(16, 22, 31, 0.13);
+  padding: 18px 18px 14px 18px;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: 100%;
+  overflow-x: auto;
+  font-size: 15px;
+  word-break: break-all;
+  white-space: pre-wrap;
+}

src/App.tsx

@@ -8,6 +8,7 @@ import {CreateJettonDemo} from "./components/CreateJettonDemo/CreateJettonDemo";
 import {WalletBatchLimitsTester} from "./components/WalletBatchLimitsTester/WalletBatchLimitsTester";
 import {SignDataTester} from "./components/SignDataTester/SignDataTester";
 import { MerkleExample } from "./components/MerkleExample/MerkleExample";
+import { FindTransactionDemo } from './components/FindTransactionDemo/FindTransactionDemo';
 
 function App() {
   return (
@@ -373,6 +374,7 @@ function App() {
             <SignDataTester />
             <CreateJettonDemo />
             <TonProofDemo />
+            <FindTransactionDemo />
             <MerkleExample />
             <Footer />
         </div>

src/TonProofDemoApi.ts

@@ -222,10 +222,33 @@ class TonProofDemoApiService {
     }
   }
 
+  async findTransactionByExternalMessage(boc: string, network: 'mainnet' | 'testnet') {
+    const response = await (
+      await fetch(`${this.host}/api/find_transaction_by_external_message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ boc, network }),
+      })
+    ).json();
+    return response.transaction;
+  }
+
   reset() {
     this.accessToken = null;
     localStorage.removeItem(this.accessTokenKey);
   }
+
+  async waitForTransaction(inMessageBoc: string, network: 'mainnet' | 'testnet') {
+    const response = await (
+      await fetch(`${this.host}/api/wait_for_transaction`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ inMessageBoc, network }),
+      })
+    ).json();
+
+    return response.transaction;
+  }
 }
 
 export const TonProofDemoApi = new TonProofDemoApiService();

src/components/CreateJettonDemo/CreateJettonDemo.tsx

@@ -1,9 +1,9 @@
-import {useTonConnectUI, useTonWallet} from "@tonconnect/ui-react";
-import React, {useState} from 'react';
+import { useTonConnectUI, useTonWallet } from "@tonconnect/ui-react";
+import React, { useState } from 'react';
 import ReactJson from 'react-json-view';
 import './style.scss';
-import {CreateJettonRequestDto} from "../../server/dto/create-jetton-request-dto";
-import {TonProofDemoApi} from "../../TonProofDemoApi";
+import { CreateJettonRequestDto } from "../../server/dto/create-jetton-request-dto";
+import { TonProofDemoApi } from "../../TonProofDemoApi";
 
 const jetton: CreateJettonRequestDto = {
 	name: 'Joint Photographic Experts Group',
@@ -39,7 +39,14 @@ export const CreateJettonDemo = () => {
 			) : (
 				<div className="ton-proof-demo__error">Connect wallet to send transaction</div>
 			)}
-			<ReactJson src={data} name="response" theme="ocean" />
+			{data && Object.keys(data).length > 0 && (
+				<>
+					<div className="find-transaction-demo__json-label">Response</div>
+					<div className="find-transaction-demo__json-view">
+						<ReactJson src={data} name={false} theme="ocean" collapsed={false} />
+					</div>
+				</>
+			)}
 		</div>
 	);
 }

src/components/FindTransactionDemo/FindTransactionDemo.tsx

@@ -0,0 +1,65 @@
+
+
+import React, { useState } from 'react';
+import ReactJson from 'react-json-view';
+
+import './style.scss';
+import { TonProofDemoApi } from '../../TonProofDemoApi';
+
+export const FindTransactionDemo = () => {
+    const [boc, setBoc] = useState('te6cckEBBQEA6wAB4YgB76ksIXpmobiUHDUtWosNdLgI+loKYwC+3DgXeRr2DJ4F4G+ja0rbyhi5yzD+xbfXI1owr5X3/uucREXZXZP4dqxPXukwqPGVrKzUL0g80tYaTgh95b0myTcmVFMS8cTIOU1NGLtDx7h4AAAQ8AAcAQJ7YgBFLU49uGmU3zOG8nNmcylqMjsoilVMAcYzYexnV5aM2BpiWgAAAAAAAAAAAAAAAAACMAAAAAEhlbGxvIYCBAEU/wD0pBP0vPLICwMASNMB0NMDAXGwkVvg+kAwcIAQyMsFWM8WIfoCy2oBzxbJgED7AAAAGE8sBQ==');
+    const [network, setNetwork] = useState<'mainnet' | 'testnet'>('mainnet');
+    const [txLoading, setTxLoading] = useState(false);
+    const [txError, setTxError] = useState<string | null>(null);
+    const [txResult, setTxResult] = useState<any>(null);
+
+    const handleFindTx = async () => {
+        setTxLoading(true);
+        setTxError(null);
+        setTxResult(null);
+        try {
+            const transaction = await TonProofDemoApi.findTransactionByExternalMessage(boc, network);
+            if (!transaction) {
+                setTxError('Transaction not found');
+            } else {
+                setTxResult(transaction);
+            }
+        } catch (err: any) {
+            setTxError(err?.message || 'Unknown error');
+        } finally {
+            setTxLoading(false);
+        }
+    };
+
+    return (
+        <div className="find-transaction-demo">
+            <h3>Find Transaction by External-in Message BOC</h3>
+            <div className="find-transaction-demo__form">
+                <textarea
+                    placeholder="Paste external-in message BOC (base64)"
+                    value={boc}
+                    onChange={e => setBoc(e.target.value)}
+                    rows={3}
+                    style={{ fontFamily: 'monospace', fontSize: 14 }}
+                />
+                <div className="find-transaction-demo__select-row">
+                    <label htmlFor="network-select">Network:</label>
+                    <select id="network-select" value={network} onChange={e => setNetwork(e.target.value as 'mainnet' | 'testnet')}>
+                        <option value="mainnet">mainnet</option>
+                        <option value="testnet">testnet</option>
+                    </select>
+                </div>
+                <button onClick={handleFindTx} disabled={txLoading || !boc}>
+                    {txLoading ? 'Searching...' : 'Find Transaction'}
+                </button>
+                {txError && <div style={{ color: 'red' }}>{txError}</div>}
+            </div>
+            {txResult !== null && (
+                <>
+                    <div className="find-transaction-demo__json-label">Transaction</div>
+                    <ReactJson src={txResult} name={false} theme="ocean" collapsed={false} />
+                </>
+            )}
+        </div>
+    );
+};