0x-parser: Parsing DEX Transactions
The 0x engineering team recently met on-site for a three day long hackathon and we had a blast! As part of this exciting event, I had the opportunity to publish an open-source project — an npm package named 0x-parser. This small library is designed to parse transactions from the 0x Protocol. This post is primarily about 0x-parser, but before diving into that, allow me to introduce you to the 0x Protocol.
What is 0x Protocol
The 0x Protocol is a decentralized system comprised of composable smart contracts that enables the exchange of Ethereum-based assets. The entry point into this system is the 0x Exchange Proxy smart contract. One of its core features is to enable the aggregation of liquidity across DEXes (decentralized exchanges) to bring better pricing to end users. The largest API built on top of this protocol is the 0x API, a one-stop shop API for accessing tokenized liquidity.
Consider 🍵 Matcha, a DEX aggregator, renowned for its user-friendly and intuitive interface. It uses the 0x Protocol, accessed via the 0x API, to allow users to find the best prices across various DEXes. When an application like Matcha interacts with the 0x Protocol (typically through the 0x API), a transaction receipt is produced on the blockchain, accompanied by transaction logs. The task of the 0x-parser is to interpret the receipt and logs, translating them into a format that is both user-friendly and easy to understand.
Now that we have some context, let’s explore the functionality and uses of the 0x-parser.
Why 0x-parser is Useful
Volatility and real-time price fluctuations in Automated Market Makers (AMMs) can lead to slippage. This can result in final trade amounts that may differ from initial expectations. This unpredictability can pose a challenge for application developers seeking to accurately reflect the exact quantities swapped in such transactions to their users. The 0x-parser is designed to tackle this very issue. It empowers applications to parse transactions and present the final details, including the exact amounts that were settled on the blockchain, thus offering users clear visibility into their trades. Currently, Matcha is leveraging the 0x-parser in a live production setting.
How 0x-parser Works
The entry point into the 0x-parser is a function called parseSwap. This function first requests a transaction receipt from Ethereum. It then identifies transfer event logs and parses the respective amounts and symbols of the assets involved. Following this, it determines which smart contract function was invoked on the 0x Exchange Proxy contract, and performs a dictionary lookup to locate the corresponding parser function necessary for parsing the transaction. These parser functions are straightforward, typically not exceeding 30 lines of code, and they leverage the parsed event logs and input arguments from the function call to derive the final swap details. Each parser function varies slightly, so I recommend exploring them individually here. Ultimately, 0x-parser transforms the transaction receipt into a user-friendly, human-readable format.
Try 0x-parser
To see the 0x-parser live in action, check out the live demo web application. The demo includes a simple form where users can input a transaction hash from the 0x Exchange Proxy and submit it. The 0x-parser will then decode the swap details into a human-readable format. Although a transaction hash is pre-loaded for demonstration purposes, feel free to use any transaction hash from the 0x Exchange Proxy to explore its functionality. To delve deeper, you can explore the example code on GitHub.
If you’re considering adding the 0x-parser to your own project, know that this library works well with frontend frameworks like Next.js and Remix. It’s also fully compatible with backend server scripts such as Node.js. The 0x-parser library has 100% test coverage and has been tested across all major EVM blockchains. To get started, simply install the npm package into your project using the following command:
npm install @0x/0x-parserNext, import the parseSwap function into your script. To use this function, call it with a transaction hash obtained from the 0x Exchange Proxy, provide the Exchange Proxy ABI, and pass a JSON-RPC URL.
import { parseSwap } from '@0x/0x-parser';
const EXCHANGE_PROXY_ABI_URL = "https://raw.githubusercontent.com/0xProject/protocol/development/packages/contract-artifacts/artifacts/IZeroEx.json";
async function main() {
const response = await fetch(EXCHANGE_PROXY_ABI_URL);
const IZeroEx = await response.json();
const data = await parseSwap({
rpcUrl: "https://eth.llamarpc.com",
exchangeProxyAbi: IZeroEx.compilerOutput.abi,
transactionHash: "0xd8637124d650268ae7680781809800e103a3a2bee9fec56083028fea6d98140b",
});
console.log(data); // user-friendly, human-readable swap details
}
main();Conclusion
In summary, the development of the 0x-parser took place during a hackathon with the primary goal of simplifying the complex task of parsing DEX transactions into user-friendly formats. If you’re looking to display 0x transaction details in a user-friendly, human-readable format within your application, the 0x-parser could be a valuable tool for you. Learn more by checking out the source code and npm package.
Don’t forget, you can see the 0x-parser in action by conducting a swap on Matcha 🍵. Watch as your final swapped amounts, settled on the blockchain, appear right before your eyes!
