An example ERC-20 swap application built on Next.js App Router with 0x Swap API and RainbowKit.
Swap API enables your users to easily and conveniently trade tokens at the best prices directly in your app. With one simple integration, 0x unlocks thousands of tokens on the most popular blockchains and aggregated liquidity from 100+ AMMs and professional market makers.
This demo app covers best practices for how to use the 0x Swap API's /price endpoint for indicative pricing and the /quote endpoint for firm quotes.
Warning
This is a demo, and is not ready for production use. The code has not been audited and does not account for all error handling. Use at your own risk.
- Setup the required API keys
| API Keys | Description | Code |
|---|---|---|
| walletConnectProjectId | WalletConnect's SDK to help with connecting wallets (create one here) | Add here |
| 0x | 0x API key (create one here) | Add for /price here and for /quote here |
- Install project dependencies
npm install
- Start the Next.js development server
npm run dev
- Navigate to http://localhost:3000
open http://localhost:3000
Swap API is supported on the following chains. Access liquidity from the chain you want by using the corresponding chain URI when making a request:
- Ethereum (Mainnet): https://api.0x.org/
- Ethereum (Sepolia): https://sepolia.api.0x.org/
- Arbitrum: https://arbitrum.api.0x.org/
- Avalanche: https://avalanche.api.0x.org/
- Base https://base.api.0x.org/
- Binance Smart Chain: https://bsc.api.0x.org/
- Celo: https://celo.api.0x.org/
- Fantom: https://fantom.api.0x.org/
- Optimism: https://optimism.api.0x.org/
- Polygon: https://polygon.api.0x.org/
Read more accessing the API endpoints.