Note
📣 After May 8, 2023, all API requests without an API key will return an error. 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://docs.alchemy.com/alchemy/road-to-web3/weekly-learning-challenges/9.-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