0x Labs 🛠 Building Token Swaps with 0x API - Jessica Lin

[Applause] [Music] yeah thank you all again for for taking the time to stop by this Workshop so I'll be covering so I'm Jessica I'm the developer Advocate at xerx Labs um so today um we'll be talking about building token swaps with the XX API so to start off you know what is token swapping in this world um if you've ever been to a DEX aggregator for example Macha here if you're making a trade from we to die um you might be wondering you know how is it finding me the best price in the back um some other use cases for this could be perhaps you have an index fund um so for example future is one of our projects that integrate with us um every month they rebalance and so in order to find the best price they use um they use our API to uh do the rebalancing and finding the best trade in trade outs um other applications include wallets and portfolios so this idea of swapping you know it's a kind of a little building block that can be plugged into a number of different applications so at xerx Labs we cover uh several layers of the stack so starting at the very top matcha is our front-end user application um behind that is the API and this is what powers a lot of the other projects that I was mentioning and then below that is the protocol so this is a set of smart contracts open source smart contracts that handle the trade settlement and I'll dive a little bit into to uh each of these layers um so for the remain of the talk just kind of overviewing we looked at what ZX um dive into how it works and then I'll specifically talk about using the swap endpoint which will be the U what we're we're sponsoring um prizes for at the hackathon um and then sharing some resources that will be useful for the hackathon um so overview of ZX um so for those who are not familiar with our project um essentially the the thesis is that all forms of value We Believe will be tokenized um and we've seen this um expanding more and more from um derivatives to to um physical items as in nfts um you know expanding into many other forms of tokenized assets and as this Market continues to grow there's a lot of fragmentation not only across um different chains but I know across just different use um sorry across different chains um and also you know we're looking to bridging and different layers and so this just means more and more fragmented liquidity um across this whole ecosystem and we all know that markets hate fragmentation so how do we make this simpler for applications that are trying to build the best applications for their users um so we think of this in the way that um in web 2 there was a standardized protocol so HTTP that standardized the the transmission of data um and in this way we think about web 3 so we're standardizing the way that um assets are transacted in this world um and so kind of the high level mission is to create a tokenized world where all assets can flow freely and so here's a bird eye view of the xerx ecosystem um so for those who come from a more financial space you might have heard of the terms makers so market makers and takers um so we look at it in two like two different parties that interface with our API so on I think you're right are the makers so these are parties that are providing liquidity um to liquidity into this ecosystem so this can include automatic market makers such as Unis swap um Sushi swap as well as private market makers um and then on the other side are those takers so they're searching they ping the API and they find uh orders that match what they need so this can be wallets coinbase wallet uses us madk wallet rain rainbow wallet um exchanges uh we also have uh capabilities for nft swapping capabilities um but I'll F primarily focus on erc20 swapping capability for this uh talk and we do this across right now I think eight uh different evm compatible chains and so we make it super easy you know if you're looking to build on polygon um we have that support um so like let's dive more into then how does ZX work so we saw at those different layers right um the protocol which is the Smart contracts the API for those who want to build nft swapping capabilities we do offer an nft swap SDK um but the focus of this hackathon is on the API um and those applications above um so the API specifically again how it works is we're aggregating across these market makers um so whether that's professional market makers who provide RFQ so request for quote liquidity um as well as a number of other um other sources of liquidity um the API does various routing so it might Source maybe like the best trade is actually through a number of different hops or maybe through number of different sources at the same time we also factor in um gas costs and this is all done behind the scenes and then these applications you know can easily leverage that without having to do that work um on their own so specifically when I'm talking about these orders like what does an order look like so here's a super simplified um transaction um happening so we'll see the market maker so I'm going to let the gift restart so the market maker here creates an order so here they're saying you know I have this intent of either selling or buying this asset um they create it they sign it and then they push it offchain and then once it's offchain um our API can aggregate the liquidity uh from all these different market makers and then when the taker finds one that they like they pick it up and then they sign it and then once they sign it they uh submit it on chain and then once it's on chain we our smart contract um automically swaps the assets between the two M uh the two parties wallets okay so let's dive into the API swap endpoint specifically um so you know we've kind of seen this Paradigm like repeated throughout the presentation so the API is aggregating aggregating liquidity sources um and our API just the taker only needs to make a really simple HTTP request um and then from there the H the API returns this breakdown of the sources so for example the tra the say the trader wants to trade, 1500 die for E perhaps the best price is 15% 50% from balancer 25% from zerox liquidity and 25% from Sushi slot so this is all just bundled together and you know from from the taker side they don't need to think about uh what's happening and then the response that the taker receives um if you're using any web 3 Library you can easily submit that directly because it's just a a bunch it's just a Json object that has all the prams that are needed say for a web 3 send transaction um so I kind of mentioned the API like very high level um but we have three three end points that of that are of interest um I will talk specifically about uh the quote one here so quote um for who I guess I should have started off in the audience like who has done web development before okay okay nice so good um portion of folks in the audience so this um this request probably looks very familiar to you um so what it is is we're simply breaking down so simply submitting a quote to BU die for we so if we break it down um It's relatively straightforward so the first portion is saying like which uh Network we want so we'll have different networks and you can see a list of on this one specifically for eth main net the next section is for the quote requests so as you'll see swap quote so we're asking for a quote um the next one is uh which token that we want to receive in this trade um so here we said we want die and then we're asking say we want to sell we in this trade and then in this in this uh situation we're selling um I think it's 100 oh sorry one we and so this is in the base unit of the cell token and so if you make that query say you know from your browser from just like a c Coral request here I'm putting it in a postman um you'll see you get this Json Json object back and you'll see here what's uh what's in that object you'll saw the chain ID up above here it's looking at the different sources um you'll see at Sushi swap proportion is one so this trade was better 100% through Sushi Swap and then as we continue down uh we'll see some other parameters that are are of Interest so you know maker token taker token um some other um some other data that's that's uh necessary for making a transaction and so it's yeah it's super straightforward just making this HTTP request and then you get um the you get the you get the values that you need to submit that as a valid transaction um so three simple steps to to use the API in point uh one for those who have not used this uh sorry sent a transaction before um you'll need to set a token allowance and this is meaning we are allowing our contracts to make that transaction for you because as we saw in that gif earlier you know we're going through the protocol um and it's it's making that Atomic trade so it's a pretty standard practice um and we have some code Snippets to help with that if you have any questions um you fetch the swap quote which was the quote that we saw earlier and then you're just going to sign that transaction with your favorite web three Library um so in code what it looks like is the first couple of constants up above um you might be getting that from the UI um so up above where you have the die um the eth you probably get that from the UI um the next section here is the setting of token allowance um and then here is the fetch um fetch swap quote and so that's what it looks like um in Json if we're using certain um certain libraries to make our lives easier and then lastly we're just using web 3 to send transaction so we're taking that response and then passing it in and then from there it's it's uh it's a submited transaction um onto the blockchain okay so I just talked about quote um but there are two other um two other points that I want to call out so price I would recommend using price if you just want to query for uh query for query for a quote so think of it as like the read only version and I say that because when you use quote uh we're pinging these market makers so you know they have an intent and if they're if we say hey uh there's a taker on the other side that's interested then they've already um set aside this order for for the taker so we don't want to keep pinging market makers um with quotes and then they keep setting aside orders um they're going to get frustrated there gonna you know it's G to block off liquidity for people so if you if you just want to show like a a uh show a price to your user um use price first and then once it's committed then use quote and the the prams for that are almost identical you just take a look in our documentation and then Source uh you can see all the sources for our particular Network so yeah it makes it easy to see like where um where we're s sourcing from and we're Contin to continuing to add um liquidity sources uh for for all networks as well um so for those who are building um there's this tutorial in our documentation um it goes through step bystep exactly how you could build a token swap appap so very similar to our Macha appap um it covers you know how to query a token list so for example if you go to any um any swap interaction you know you your user can pull up a list so using coin GetGo for that um and then walking through how to use the endpoint token allowance um and then connecting that user to metamask so their trade can be submitted um so highly recommend taking a look there if you're building um yeah lastly then is just kind of like why use zorx uh so it's I think a lot of our teams that integrate with us they think it's well a lot of what they've said is you know they like that we specialize in this in this field and so it takes the burden off of them um so we have some stats here um you know 99% uptime uh 2% revert rate which is 10 times lower than our competitors and then 1.5 second response time so just making it really quick for U our integrators and like less on the I guess stats side is some like interesting features that we offer so um for example if there's uh if there's positive slippage meaning when there's a trade being made if at any point um the user could get a better deal um well we don't collect any of that we actually give that back to the user um and so this is kind of a unique thing um across Dex aggregators um so we we we definitely have our users first so that's a big point of ours and then similarly um slippage protection so baked into our API we have um huris stics that look at How likely it is that a certain trade will be attacked by me and if it is then we route it away so you don't even need to think about that so it's yeah it's baked into the API and if you want to learn more about how we do that um then yeah happy to talk with you about the data that our team has done to uh bake this in um lastly so we have continuing to build out more and more tooling for teams that are using our API one including the xerx Explorer so this is like a proprietary dashboard for teams that use our endpoint um you can see all the trades that are going through your uh going through your your project um you can like dig into the sort of Trades that are happening um and yeah it's really I it's powerful for for projects and their data teams to have this information um and yeah we're continuing to uh build this out even more um so specifically for the hackathon let's talk about some resources so at this hackathon we'll be offering three prizes uh so rather open-ended we just want to see how teams are using the swap end point um and specifically this is for erc20 trades um and so we're offering 5,000 3,000 and 2,000 um so here are just some project ideas but you know happy to brainstorm some ideas with you you know we've seen a continuing growing number of uh defi applications um and there's a lot of different novel use cases Beyond again just the basic portfolio and wallet um as we're expanding more into um like retail user use cases like how how can we um like integrate this more say into index funds um even like um like what's it called uh what other things called like gift cards perhaps transactions um and then again marketplaces wallets um tooling in-game currency um I think is interesting so say you have an experience you don't want to push your users off of your platform you want to you then have the capability to keep it all inh house right so say they're playing a game and you they need to make some sort of trade in uh Within app then you you can customize that your app can actually um earn revenues from that directly as opposed to like pushing them off to a third party exchange and then yeah just whatever you can imagine um here are the judging criterias I'm sure you've seen this um you can also just find this on the website uh so some things I want to call out are um if you could use yeah sorry making sure that you use the affiliate address parameter um so that's just a parameter that links to um the a wallet address that's related to your project and this helps us um be able to help generate that that dashboard for you um I got other things looking at you know technical information implementation um how creative and adoptable is this project um see so on the dragon criteria side um you've oh sorry these are some of the requirements and again you'll see these on the website um so just making sure you have the description um a public repo and then if you have if you could put together a short video to just explain your project um I'm sure you're doing this for other projects as well um so not not much new stuff um and then lastly I will uh share a QR code later to links with these resources so get docs and GitHub repos if you're interested okay um so this is the last slide this is just a slide for this deck if you need any resources um but yeah happy to stay here to answer questions and thanks again for taking the time to stop at this Workshop