Web3 Onboard Now Supports Transaction Preview for Dapps

Blocknative Ethereum Web3

Enable your users to easily preview expected net-balance changes for their connected wallet before authorizing transactions.

Dapps can now integrate Transaction Preview into Web3 Onboard to allow users to simulate their transactions and preview the expected net-balance changes before authorizing them.

From friction in connecting your wallet of choice to unexpected slippage, dapps can be notoriously complicated for both new and experienced crypto users alike. Most web3 users perform transactions blindly. When a transaction doesn't settle as expected users lose confidence in the platform they are using. 

Blocknative’s Transaction Preview simulates unsigned transactions to increase clarity by setting accurate expectations before users submit their transactions. Preview alerts are configurable to best fit your dapp’s user flow.

As the industry focuses on onboarding the next billion users, web3 usability is central. Transaction Preview improves transaction UX and decreases transaction anxiety by setting correct expectations for the result of a transaction before asking the user for a signature. This leads to confident users — and confident users are more likely to be returning users, bringing more transactions and reducing churn on your dapp. 

 

How to Simulate Unsigned Transactions Directly on Your Dapp

Blocknative Transaction Preview computes and displays the results of unsigned transaction based on the current state of the chain – in real-time, at scale, and with low latency – before committing anything to the blockchain. 

When a user submits an unsigned transaction through your dapp, Transaction Preview will simulate it against the current block height to detail the expected results of the transaction - blazingly fast. Blocknative's API will return detailed payloads showing decoded contract calls, and net balance changes to accurately identify expected slippage or expected transaction results for the current block height. 

transaction-preview-4063f7ee

Dapps using Web3 Onboard have the option to configure the Transaction Preview module to require a confirmation after displaying the preview (default) or you can display the preview as the transaction is being sent to the user’s wallet for signature without needing a confirmation on your dapp.

Transaction Preview on Web3 Onboard works on all the following transaction types:

  • ETH and ERC-20 Token swaps
  • NFT mints and purchases
  • NFT swaps

Transaction Preview will display the following payloads to users:

  • Assets involved in transaction
  • Net balance changes for the connected wallet address

Seamless Internationalization

Web3 Onboard leverages i18n for complete internationalization so developers can enable locale-based language updates with ease. To see a complete list of the text values that can be internationalized or replaced, check out Web3 Onboard’s default en file.

 

Integrate Transaction Preview in Your Dapp

Transaction Preview is easy to set up. Dapps already using Web3 Onboard can add transaction preview by initializing web3-onboard with their Blocknative API key and adding the transactionPreview module. If your team doesn’t have an API key or Web3 Onboard setup, talk to our team to get started for free.

If you are not yet using Web3 Onboard it is quick and easy to integrate - setup generally takes 20 - 30 minutes. With built-in modules for more than 35 unique hardware and software wallets it's the most effective way for developers to add support for top web3 wallets like MetaMask, Ledger, Coinbase Wallet or GameStop.

If you are a wallet developer that wants to add Transaction Preview functionality into your UI, you can also integrate the Transaction Preview API. Talk to our team to get started for free.

We encourage all web3 developers to join our Discord community and let us know what new features or libraries you would like to see next to make developing with Web3 Onboard easier!

Read the Docs

Master the Mempool today.

Blocknative's proven & powerful enterprise-grade infrastructure makes it easy for builders and traders to work with mempool data.

Start for free

Want to keep reading?

Good choice! We have more articles.

mev-bundle-failure:-troubleshooting-why-your-bundle-didn’t-end-up-on-chain
MEV

MEV Bundle Failure: Troubleshooting Why Your Bundle Didn’t End Up On-Chain

Opportunities for extracting MEV have exploded as DeFi has transformed into a multi-billion dollar..

the-importance-of-client-diversity-on-ethereum
Ethereum

The Importance of Client Diversity on Ethereum

TL;DR: Decentralized networks rely on nodes running a diversity of open standards and applications..

can-you-withdraw-staked-eth?
Ethereum

Can You Withdraw Staked ETH?

Now that The Merge is complete, the Ethereum community is turning its attention to the next big..

Connect with us. Build with us.

We love to connect with teams who are building with Blocknative. Tell us about your team and what you would like to learn.

"After first building our own infrastructure, we appreciate that mempool management is a difficult, expensive problem to solve at scale. That's why we partner with Blocknative to power the transaction notifications in our next-generation wallet."

Schedule a demo