Transaction Preview

Learn how the add a Transaction Preview option to your dapp or wallet powered by Tenderly’s Transaction Simulations. We give you two practical examples that demonstrate how to integrate simulations into real wallets:

• MetaMask Snap with Transaction Preview
• Rabby Wallet with Transaction Preview

What is Transaction Preview?

Transaction Preview offers a secure testing solution for dapps and wallets, enabling users to preview transaction outcomes before they’re executed on the live network. This solution uses Tenderly’s Simulation API to dry-run transactions in a virtual environment that mimics the latest state of the blockchain. This is to ensure that simulation results are realistic and highly reliable.

Here’s an example project that demonstrates how the Transaction Preview option works in the Rabby Wallet.

Why wallet users need simulations

Giving users a way to preview transactions before committing real assets is beneficial for several reasons. First, it helps users, especially those new to trading, avoid mistakes by letting them practice before making real transactions. This makes it easier for them to start using your wallet and build trust. Second, it helps users understand how much they will be charged in fees, which can save them money. But most importantly, it can alert users about potential security red flags before signing transactions.

Tenderly’s Simulation API helps you to achieve these goals by allowing you to:

• Dispaly asset and balance changes, including fungible, non-fungible, and native tokens, converted into dollars based on prices coming from CoinGecko.
• Give accurate gas usage estimates to execute their transactions and help them save money.
• Tell users if their transaction will fail and help them save on gas.
• Help users understand why their transactions are failing with human-readable errors.
• Provide users with an access list of addresses and storage slots the transaction will access.
• Get emitted events, log names, and related parameters in decoded form.
• Validate transaction workflows on DeFi platforms with bundled simulations when executing and approving swaps that entail multiple intermediate steps.

Integrating simulations into a wallet

We created two open-source projects to show you the process of integrating Tenderly’s Simulation API into your dapp or wallet. These examples showcase how to add a Transaction Preview feature to a MetaMask Snap and Rabby Wallet.

You can download the source code for both projects from GitHub. Also, be sure to check out the Simulation API reference for guidance on how to make requests to the API and query the results.

MetaMask Snap with Transaction Preview

The MetaMask Snap project demonstrates how to connect to the Simulation API, send transaction data, retrieve the simulation results, and display them to the user in the MetaMask UI. This includes asset changes in dollars, native-asset balance changes, output value, storage changes, event logs, and call traces.

ERC20 transfer example

Here’s a successful ERC20 token transfer example, where 1 USDC is sent to demo.eth. The first image illustrates the asset changes that have occurred, followed by the breakdown of the transaction details.

NFT transfer example

Below is an example ERC721 (NFT) token transfer example. This example involves transferring 1 Crypto Bull to another address. The first screenshot shows the asset changes and the image on the right image shows the transaction details.

Want to try this integration yourself? Follow this detailed guide where we show you step-by-step how to integrate the Tenderly Simulation API, process transaction data, obtain simulation results via API, and display them through the MetaMask Snap UI.

Rabby Wallet with Transaction Preview

The second project shows you how to integrate our Simulation API into the Rabby Wallet and give users a way to preview transaction outcomes in the UI. When the user is confident that the transaction will behave as expected, they can sign it in the UI.

ERC20 token swap on Uniswap example

The image below shows a successful swap of ETH for 1INCH on Uniswap, displaying both the asset changes and a detailed transaction breakdown to the user in the Rabby Wallet UI.

NFT purchase on Joepegs example

Here’s an example of a successful NFT purchase with asset changes and a summary of the simulation results.

Want to try to integrate simulations into the Rabby Wallet? Follow this step-by-step guide.