Every Web3 developer building user-facing dApps faces a common challenge: how to display transactions in a clear and understandable way. While blockchain data is freely available, it is often not easily readable or digestible for end-users. Developers typically have two options to address this problem:
Implement an In-House Transaction Decoder: This requires significant expertise and time to develop and often leads to issues with data enrichment and ongoing support for new types of transactions.
Use a Third-Party API: While this provides indexed and readable data, it can quickly become costly, especially for projects in the early stages.
To illustrate the challenges of the first approach, here is a screenshot from the open-source portfolio tracker tool Rotki, which has implemented decoding functions for popular EVM contracts.
Loop Decoder is a TypeScript library that transforms any EVM transaction into a human-readable format. This library offers several key features:
Loop Decoder can be used on both the client-side and server-side, without introducing any external infrastructure dependencies.
The library has minimal external dependencies, allowing developers to integrate it into their stack without enforcing any data sources. Developers can use their own storage or specify optional API providers to fetch contract metadata.
Loop Decoder provides flexible interpreter utilities that enable developers to define custom interpretations of EVM transactions.
We’ve recently released a few major updates.
JavaScript Template Functions for Data Transformation
The library now supports JavaScript functions to transform decoded transactions into human-readable structures. We are going to create a library of reusable data transformations for popular contracts.
Improved Decoding Performance and New Transaction Types
The decoding performance has been significantly improved, and we now support more types of transactions, including NFT transfers and Account Abstraction transactions. We are also now better at resolving proxy contracts.
Integrations with Various API Providers
Loop Decoder now integrates with a range of API providers, such as Etherscan, 4bytes, Sourcify, and Blockscout, to fetch contract metadata. Developers can also specify their own database and do not depend on the external APIs.
Documentation Website
We’ve created a new documentation website, with more guides and resources coming soon.
If you are building a dApp with TypeScript, and looking to simplify the process of displaying transactions in your dApp, be sure to check out the Loop Decoder project on GitHub. Give it a star, follow for updates, and explore the new documentation website to get started.
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.