TL;DR: The viem library enables batching of multiple calls into a single RPC request making it easy to implement ENS names into your application at scale.
The Ethereum Name Service (ENS) protocol is the leading solution for decentralized naming in the Ethereum ecosystem. With an ENS name, hard-to-remember wallet addresses become human-readable names. You can simply send funds to jeffcang.eth 😉; no need to remember the string 0x61B5d0F8984689Ba03e3720fa80fA0429daA73fd.
When implementing ENS names into your application, it can be a challenge to display many ENS names at once within a user interface like a dashboard or list. This is a challenge that we at Loop ran into when looking to implement ENS names within the transactions page of the Loop company dashboard. Resolving a single wallet address to its ENS name typically requires an RPC request, essentially a call to go look up a piece of data on-chain. This works out fine for a dApp that needs to just show one ENS name at a time like Uniswap. However, a dApp like Loop needs to show many since our value proposition is helping DAOs and companies schedule tens or even hundreds of crypto payments at once.
As seen above, the Loop company dashboard has a transactions page that needs to potentially render hundreds of wallet addresses depending on how many transactions a client has. Requesting the ENS name for each of those addresses individually when the page loads is highly cumbersome and could lead to extremely slow load times for the entire transactions page.
We needed to identify a scalable solution that would allow us to show many ENS names at once without compromising the rest of the Loop experience.
Our Engineering Team dug into potential solutions and landed on using the viem library. Viem allowed for batching multiple calls into a single RPC request. This meant we could look up hundreds of wallet/ENS pairs with just one RPC call. This batched call solved the immediate issue of trying to do hundreds of RPC calls to return ENS names, which would have taken time to load and been quite expensive; however, our transactions page presented another unique challenge.
When a company user lands on Loop’s transactions page, their browser calls to request the transaction data for the page. Once that transaction data is returned, Loop then knows which wallet addresses we need to resolve to ENS names. We didn’t want these ENS requests to hold up the loading of the entire transactions page though, even if we were able to batch the request. Therefore, we built the batch requests to be made asynchronous. In other words, the transactions page would load even if all the ENS names had not been returned yet.
We then built a mechanism to update the wallet addresses to their ENS names as the data was returned. If no ENS name is associated with the wallet, the wallet address string remains displayed. You now don’t need to wait around for that ENS lookup to complete. You can start browsing the transactions page and the ENS names will start being filled in as the data is returned.
In addition to adding the ENS name to the transactions page, we also included the functionality within our schedule payments page so that you can simply type in the ENS name of whomever you would like to pay. As shown below, the wallet address is returned almost instantaneously after entering the ENS name for the payee.
ENS has now been using Loop for almost a year with hundreds of thousands of dollars processed on-chain. With the new ENS name feature, the ENS DAO can easily check the Loop transactions page to see who they have paid and who has an upcoming payment. Hours of operational work are saved every month.
At Loop, we love to build with our clients and ship new features quickly. If you have a feature request or just want to learn more about how Loop can streamline crypto payments for your DAO or business, let’s talk.
____________________________________________________________________________________________________________________________
Loop Crypto
Loop Crypto makes it simple to collect and pay in crypto by allowing companies to turn on autopay and schedule payments. Built by web3 veterans, Loop unlocks payment automation to reduce customer churn and eliminate time-consuming payment collection and follow-up. By connecting on-chain and off-chain data, Loop streamlines invoice reconciliation, accounting, and fits seamlessly into your financial stack.
Loop crypto is programmable payments.
Are you ready to supercharge your payments? Book a call with Jeff, our Head of Business Operations, or head to our docs to learn more.
Stay in the Loop.
