Design System

Transaction Simulation

Preview exactly what a transaction will do before signing.

Why Simulate?

  • See balance changes before they happen
  • Catch failures before wasting fees
  • Detect suspicious patterns with warnings
  • Understand instructions in human-readable form

Simulation is FREE and doesn't execute the transaction. It just shows what WOULD happen.

Connect your wallet to try the simulation demo.

Implementation

1. Build Transaction (existing code)

const transaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: wallet.publicKey,
    toPubkey: recipientPubkey,
    lamports: amount * LAMPORTS_PER_SOL,
  })
);

2. Simulate Before Signing (NEW)

import { TransactionSimulator } from './components/TransactionSimulator';

// Show the simulator component
<TransactionSimulator
  transaction={transaction}
  onApprove={() => {
    // User confirmed - now actually sign and send
    wallet.signAndSendTransaction(transaction);
  }}
  onReject={() => {
    // User cancelled - clear transaction
    setTransaction(null);
  }}
/>

3. Or Use the Simulation Utility Directly

import { simulateTransaction } from './lib/simulate-transaction';

const result = await simulateTransaction(
  connection,
  transaction,
  feePayer,
  { userPubkey: wallet.publicKey }
);

if (!result.success) {
  console.error('Transaction would fail:', result.error);
  return;
}

// Check for warnings
if (result.warnings.some(w => w.severity === 'critical')) {
  // Show extra confirmation
}

// Show balance changes
result.balanceChanges.forEach(change => {
  console.log(`${change.label}: ${change.change} ${change.type}`);
});

Simulation Safety Checklist

  • Simulate EVERY transaction before signing
  • Show balance changes clearly (gains in green, losses in red)
  • Warn about large transfers (> 1 SOL)
  • Warn about account draining (balance → 0)
  • Warn about unknown programs
  • Show compute units and estimated fee
  • Display human-readable instruction descriptions