Note 📣 All API requests require a 0x API key. Legacy code examples may contain requests without API keys. Follow this guide for how to get a live API key and use it for any 0x products.

How to Build a Simple Token Swap DApp using the 0x Swap API

Learn how to build a token swapping dapp, similar to a simple Matcha.xyz, using the 0x /swap API endpoint.

This app aggregates liquidity across the greater DEX ecosystem using 0x to surfaces the best price to the user and allow them to easily settle their trades!

Follow Along to Learn

• 💦 What is liquidity aggregation?
• 🪟 Query + Display an ERC20 token list
• ♻️ Use @0xProject API's /swap endpoint
• 🧱 Build a Swap Dapp with Metamask and Web3.js

Video and Written Tutorial

• 🎥 Watch Video Walk-Through: https://www.youtube.com/watch?v=tVvZ1ivp4X0
• 📖 Full Written Tutorial: https://0x.org/docs/0x-swap-api/guides/how-to-build-a-token-swap-dapp-with-0x-api
• The repo is broken up by parts which correspond to parts in the written tutorial above ☝️ Each part builds upon the previous one.
• Part 1. Walk-through Starter Code
• Part 2. Connect to MetaMask
• Part 3. Create a Modal for the Token List
• Part 4. Fetch and Display Token List from CoinGecko API
• Part 5. Display Selected Token Image and Symbol in Swap Box
• Part 6. Get Price
• Part 7. Get Quote
• Part 8. Set a Token Allowance
• Part 9. Perform the Swap

Further Examples

To find more demo apps, check out the official 0x examples repo.

Try out -

• Swap API Demo App (Next.js)
• Tx Relay API Demo App (Next.js App Router)