For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.
In this example, we are going to send a raw transaction using the TON Connect SendTransactionRequest format.
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';import { isTonWallet, SendTransactionRequest, CHAIN } from '@dynamic-labs/ton';const SendRawTransactionButton = () => { const { primaryWallet } = useDynamicContext(); const onSendRawTransaction = async () => { if (!primaryWallet || !isTonWallet(primaryWallet)) { throw new Error('TON wallet not found'); } // Build a raw transaction request (TON Connect format) const request: SendTransactionRequest = { validUntil: Math.floor(Date.now() / 1000) + 60, // 60 seconds from now network: CHAIN.MAINNET, // or CHAIN.TESTNET messages: [ { address: 'UQDrjaLahLkMB-hMCmkzOyBuHJ186Qg_CZQhrOhIPBr0oDkB', amount: '100000000', // Amount in nanotons (0.1 TON) // Optional: payload for smart contract calls (base64 encoded BOC) // payload: 'te6cckEBAQEADgAAGEhlbGxvLCBXT1JMRCFdy+Mw', // Optional: state init for contract deployment (base64 encoded BOC) // stateInit: '...', }, ], }; // Send the transaction const transactionHash = await primaryWallet.sendTransaction(request); console.log('Transaction hash:', transactionHash); }; return <button onClick={onSendRawTransaction}>Send Raw Transaction</button>;};