This is a workshop that I initially gave U.C. Berkeley (30/3/20), which was the re-purposed for Defi Discussions.
You are an app developer excited about ERC20 markets, and you found out that 0x API offers the best prices for trading DAI <> USDC. You want to build your own branded exchange UI that uses the 0x API to easily swap between DAI and USDC.
During this workshop, we will:
- Quickly speak about important practical considerations of swapping ERC20 tokens:
- Converting big integers to base unit numbers using
Web3Wrapper.toBaseUnitAmount(), and vice-versa. - Allowing the ERC20 Exchange proxy to trade using your wallet funds
- Converting big integers to base unit numbers using
- Perform a Swap using the 0x API
- Learn how to inspect a 0x API swap quote response
- Learn how to perform with swap in 1 extra line of code!
This demo will only work on the Kovan testnet.
This tutorial will be using 2 dummy ERC20 token contracts that I deployed on the Kovan testnet. These are not the real DAI and USDC, but they are drop-in replacements. Each contract also exposes a mint(uint256) function that can be used to create tokens for the user.
- DAI (18 decimals) is hosted at:
0x48178164eB4769BB919414Adc980b659a634703E - USDC (6 decimals) is hosted at:
0x5a719Cf3E02c17c876F6d294aDb5CB7C6eB47e2F
This webapp has been tested with Node v10.15.3. Use npm install to install all the various dependencies and, after installation finishes successfully, run npm run serve to run a live webserver on http://localhost:9000. Any chance to the TypeScript code will trigger the webpage to refresh with newly compiled code.
- A huge thank you to Steve Klebanoff and Fabio Berger for providing materials from their prior slides
- A huge thank you to Alex Towle for pushing me if making a better workshop
- A huge thank you to Danni Hu for making a nice design
- A huge thank you to the entire 0x team, it's been a really fun year 🥂