Vibe Coding a Batch Swap App using 0x, Dune, and EIP5792/7702

Learn how to vibe code a swap app on top of a Herd trail that makes integrating 0x and Dune balances a breeze! We'll batch all swaps in one go using the new EIP5792/7702 standards.

Swapping tokens is one of the most fundamental parts of crypto, yet learning to integrate all the required pieces and data to build a swap app is no simple feat.

That is, until today. I created a trail on Herd that combines a Dune balances API with the 0x swap contracts, to make building this app trivial for anyone.

ICYMI: We built a next generation block explorer called Herd (herd.eco), available to everyone! We built it to make exploring onchain and building apps 100x easier. You can go to our docs for a quick overview.

Our main feature is called a “trail”, which is a series of onchain functions optimized for human readability and LLM tools (like v0 and cursor).

We have a Discord you can join to meet other trailblazers and ask questions.

I’ll walk through how I built this trail and then vibe coded the app, breaking down key concepts and components along the way. There is a full video guide covering everything in this article in much more depth too:

👉 You don’t need to be technical, we’ll be using a simple no-code interface and code agents for this whole guide.

Key reference links:

• The swap trail

• The app

• The github repo

• The v0 chat

Building the Trail

First, we start by adding a “primary step” to the trail, which means a function that will be executed to create a transaction onchain. We click “add step”, and then toggle to the “swap” tab to add the swap component to our trail. This uses the 0x dex aggregator to route swaps between one token to another, with a specified “sell” amount.

Try it yourself, you can “fork” this trail then add a step

So in the “edit” panel, we can see there is a buy_token_address, sell_token_address, and sell_token_amount. We’ll creator_hardcode the buy token to USDC, and let the user choose which sell token they want to use and how much of it to sell.

click the node, then go to “edit inputs”

You’ll notice it says “user_input” before the form field, this is a derive method. We support many derive methods for inputs, such as using read functions and events, typescript code, and more - read about them here.

You could publish the trail now to test it out in the overlook (a simple sandbox that comes with each trail), where inputting 0.1 ETH (0x000…) gives us this swap:

Note that this is exactly what the trail API returns to the app later too

Next, we need to know the balances of the user’s wallet to be able to know what tokens and amounts can be swapped. Dune’s SIM balances API is a perfect tool for this, giving us the tokens with their balances, USD values, and metadata in a single call. We add this to a code node like so, and enable the read API:

We can easily test the code node, which give us this response:

And that’s all we need in the trail! Now it’s time to build the app.

Building the App

To start, we create an app in Herd and copy the guidebook prompt from the trail. All you need to do is click the “guidebook” button and then copy the prompt link

The prompt is just a long llms text file that covers how to integrate the trails API and each of the steps. You can read the one for this trail here, and our docs cover the guidebook in more detail.

We start by prompting v0 to create a simple mobile app that loads the tokens and lets users select any number of tokens as well as some percentage to sell (10%, 50%, 100%). One v0 starts to struggle on some harder requests, I moved to Cursor by creating a GitHub repo, so that they can share the same code and I can use the more powerful agent that Cursor provides. This part is easier to follow in the youtube video, so I won’t do screenshots here. With some UI tweaking, we end up with this:

For batching all swaps in one transaction, I just fed it the sendCalls and waitForCallsStatus from the viem docs to basically call the trail once for each selected token to get the swap calldata, and then batch all of them at once. This uses EIP7702 by default with a fallback to EIP5792 if wallet doesn’t support it. EIP7702 is a standard where you can treat your wallet as a proxy and set an “implementation” contract, meaning that you can now call your wallet from your wallet to call a function on the contract (i.e. your address is both the “from” and “to” on the transaction). This requires setting up this delegation, which some wallets might not have done yet. So, EIP5792 is just a wallet standard that allows you to just sign many transactions in one signature but each one is still sent onchain separately (effectively still providing you the same UX improvements).

And that’s it! In less than half an hour, you have a fully functional and sleek swap app. Please try it out yourself and share your app with me when you’re done! We have a community Discord where you can reach out if you have any questions or problems.