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.

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!

• 💦 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

• 🎥 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

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)