);
}
```
## User experience flow
Your application calls `sendTransaction()` with transaction data, wallet, and optional UI options.
The customized Send Transaction screen is displayed with transaction details.
User reviews the transaction information including recipient, amount, gas fees, and any contract interactions.
User clicks the send button to proceed, or cancels (if `isCancellable: true`) to reject.
If approved, MoonKey signs the transaction and automatically broadcasts it to the blockchain network.
The success screen appears with the configured `successHeader` and `successDescription`.
The transaction hash (or signature for Solana) is returned to your application for tracking.
## Send Transaction vs. Sign Transaction
Understanding when to use each:
* **Signs and broadcasts** in one step
* Automatically submits to the blockchain
* Returns transaction hash immediately
* Simpler API for basic operations
* Best for immediate transactions
* User can't control broadcast timing
* Most common for standard transfers
* Example: Send ETH, transfer tokens, mint NFTs
* **Only signs** the transaction
* Does not broadcast automatically
* Returns signed transaction data
* Requires manual broadcasting
* More control over when to broadcast
* Can sign offline
* Good for batch operations or complex flows
* Example: Multi-step flows, conditional broadcasting
Use **Send Transaction** for most use cases. Only use Sign Transaction when you need explicit control over the broadcasting step.
## Tracking transaction status
After sending a transaction, you typically want to track its confirmation status:
```tsx theme={null}
import { createPublicClient, http } from 'viem';
import { mainnet } from 'viem/chains';
// After sending
const result = await sendTransaction({
transaction: txData,
wallet: user.wallet
});
console.log('Transaction hash:', result.transactionHash);
// Track confirmation using viem
const publicClient = createPublicClient({
chain: mainnet,
transport: http()
});
// Wait for transaction receipt
const receipt = await publicClient.waitForTransactionReceipt({
hash: result.transactionHash as `0x${string}`
});
console.log('Transaction confirmed!', receipt);
console.log('Block number:', receipt.blockNumber);
console.log('Gas used:', receipt.gasUsed);
console.log('Status:', receipt.status); // 'success' or 'reverted'
// Get transaction details
const transaction = await publicClient.getTransaction({
hash: result.transactionHash as `0x${string}`
});
console.log('Transaction details:', transaction);
```
```tsx theme={null}
import { Connection } from '@solana/web3.js';
// After sending
const result = await sendTransaction({
transaction,
wallet: user.wallet
});
console.log('Transaction signature:', result.signature);
// Track confirmation using Solana web3.js
const connection = new Connection('https://api.mainnet-beta.solana.com');
// Wait for confirmation
const confirmation = await connection.confirmTransaction(
result.signature,
'confirmed' // commitment level
);
console.log('Transaction confirmed!', confirmation);
// Get transaction details
const txDetails = await connection.getTransaction(result.signature, {
maxSupportedTransactionVersion: 0
});
console.log('Transaction details:', txDetails);
console.log('Slot:', txDetails?.slot);
console.log('Block time:', txDetails?.blockTime);
```
## Best practices
Always provide clear information about what the transaction does:
```tsx theme={null}
uiConfig: {
title: 'Send 100 USDC',
description: 'Transfer 100 USDC to alice.eth. Estimated gas: $2.50'
}
```
Check transaction validity before showing the UI:
```tsx theme={null}
// Validate recipient address
if (!isAddress(recipient)) {
alert('Invalid recipient address');
return;
}
// Check sufficient balance
const balance = await getBalance(user.wallet.address);
if (balance < amount + estimatedGas) {
alert('Insufficient funds');
return;
}
// Then send
const result = await sendTransaction({ ... });
```
Different errors require different handling:
```tsx theme={null}
try {
const result = await sendTransaction({
transaction: txData,
wallet: user.wallet
});
toast.success('Transaction sent!');
} catch (error) {
if (error.code === 4001) {
// User rejected
toast.info('Transaction cancelled');
} else if (error.message?.includes('insufficient funds')) {
toast.error('Insufficient balance for transaction');
} else if (error.message?.includes('gas')) {
toast.error('Gas estimation failed. Transaction may fail.');
} else {
toast.error('Transaction failed. Please try again.');
}
console.error('Transaction error:', error);
}
```
Help users track their transaction:
```tsx theme={null}
const result = await sendTransaction({ ... });
// Show link to block explorer
const explorerUrl = `https://etherscan.io/tx/${result.transactionHash}`;
toast.success(
);
// Store for user's transaction history
await saveTransaction({
hash: result.transactionHash,
from: user.wallet.address,
to: recipient,
amount,
timestamp: Date.now()
});
```
Always show wallet UI so users can verify they have sufficient funds:
```tsx theme={null}
uiConfig: {
showWalletUI: true // Critical for preventing failed transactions
}
```
For complex transactions, set appropriate gas limits:
```tsx theme={null}
// Estimate gas first
const estimatedGas = await publicClient.estimateGas({
to: recipient,
data,
value: amount
});
// Add 20% buffer
const gasLimit = (estimatedGas * 120n) / 100n;
const result = await sendTransaction({
transaction: {
to: recipient,
data,
value: amount,
gas: `0x${gasLimit.toString(16)}`
},
wallet: user.wallet
});
```
Keep a record of sent transactions for user reference:
```tsx theme={null}
const result = await sendTransaction({ ... });
// Store in local storage or database
const txRecord = {
hash: result.transactionHash,
from: user.wallet.address,
to: recipient,
amount,
timestamp: Date.now(),
status: 'pending'
};
await saveTxHistory(txRecord);
// Update status when confirmed
const receipt = await waitForReceipt(result.transactionHash);
await updateTxStatus(result.transactionHash, receipt.status);
```
Inform users about next steps:
```tsx theme={null}
uiConfig: {
success: {
title: 'Payment Sent!',
description: 'Your payment is being confirmed. This usually takes 15-30 seconds.'
}
}
```
## Error handling
Common errors and how to handle them:
```tsx theme={null}
try {
const result = await sendTransaction({ ... });
return result.transactionHash;
} catch (error) {
// User rejected the transaction
if (error.code === 4001) {
console.log('User cancelled transaction');
return null;
}
// Insufficient funds
if (error.message?.includes('insufficient funds')) {
alert('Not enough balance to complete transaction');
return null;
}
// Gas estimation failed
if (error.message?.includes('gas required exceeds allowance')) {
alert('Transaction would fail. Please check parameters.');
return null;
}
// Network error
if (error.message?.includes('network')) {
alert('Network error. Please check your connection.');
return null;
}
// Generic error
console.error('Transaction error:', error);
alert('Transaction failed. Please try again.');
return null;
}
```
## Security considerations
Always validate transaction parameters before sending. Malicious applications could trick users into sending funds to unintended recipients or approving dangerous contract interactions.
**For developers:**
1. **Validate all inputs** - Check addresses, amounts, and data before sending
2. **Show full details** - Display recipient, amount, gas fees, and contract interactions
3. **Estimate gas** - Provide accurate gas estimates to prevent failed transactions
4. **Check balances** - Verify sufficient funds before attempting to send
5. **Rate limit** - Prevent abuse by limiting transaction frequency
6. **Log transactions** - Keep records for debugging and support
7. **Handle errors** - Provide clear error messages for different failure scenarios
**For users:**
The Send Transaction screen helps users by:
* Displaying full transaction details before sending
* Showing wallet balance to prevent insufficient funds errors
* Providing clear context via title and description
* Allowing cancellation if `isCancellable` is true
* Showing success confirmation with transaction hash
## Next steps
Sign transactions without broadcasting
Sign messages for authentication
Explore all UI components
Global appearance settings