Working with AirSwap Developer APIs

so hello thank you for coming I'm gonna talk a little bit today about the air swap libraries that we just opened sourced this week as well as about building on the swap protocol and some ideas to get you started this weekend real quickly so what I'm going to walk through is an example application that's built only using these open source libraries the initial things that we'll touch on are mostly things that are just gonna help you build your decentralized applications more quickly and these libraries are the same ones that we've used to build all of the products at air swap and so that includes things like getting token metadata really quickly approving balances and tokens for trade as well as all kinds of other little helpful things that we'll touch on here and then after that we'll go through the swap protocol and how you can interact with it programmatically to make trades and perform atomic swaps and then we'll also do just a really bare-bones how can I make an order sign it send it to someone else and have them fill it so whether you want to use the full protocol where you're actually going to reach out to these automated liquidity providers and get orders from them or whether you're making an app where you just want to be able to sign an order and send it to someone to perform a simple swap will cover both of those use cases okay so what we have at the top here is all of our imports from air swap j/s which you can install from NPM and you'll see these token metadata Delta balances dex index swap these are the ones that I have selected because they're probably going to be the most useful but there's a lot more in there if you just want to take a look through the code and I really encourage you as you build things this week to check to see if we've already built it because it's likely that we have and if has anything to do with like tokens or common utilities like wrapping with unwrapping with that's actually available in the ERC 20 library here then yeah take a look so I'm going to refresh the app and I'm just going to walk through like what each of these sections is and does so here we have the metadata oops I'm going to start the server here all right so this is token metadata coming from our token metadata class which is logged out here so you can get all of the most popular ERC 20 tokens you're gonna get this whole JSON object that has a bunch of information like the amount of decimals the token address and then also most of them come with a image URL that's crawled from coin market cap so if you need any of that data in your applications you can just pull that in we also have balanced lookups so what you'll see here is I'm connected through meta mask and it's actually looking at my die and wet balance so if we pop over to the code that's gonna happen in our first then block so let's just start at the top first actually first thing we're gonna do is wait for our metadata to be ready it's asynchronous and then once we get it we're gonna render it this is all I won't you know step through every line here because it is commented if you want to come back for it a little better maybe like this yeah so here I've decided just arbitrarily to render die and wet but again you could look through all the token metadata here and iterate over it and find what you need it's most likely if it's an ER C 20 that it's gonna be in here the next utility is the Dex index library and this is a open source tool that we built earlier this year and it allows you to programmatically search all of the popular Dex's for any arbitrary queries so that could be like I want n amount of X token and it's going to reach out to DX e to the air swap some 0 x real layers bank or you know swap you name it and it's going to send all that back to you so that you can find like for whatever type of liquidity your application needs what at that moment is actually the optimal Dex to perform that trade okay so you're gonna see that I just signed something there and you're gonna actually see that every time i refresh the page so what it's doing there is it's programmatically connecting to the swap protocol and in order to do that to prove your identity on the system you have to sign a piece of arbitrary data each time and so that's what that signature is for and then once that happens I'll show you in the code in a minute but we're reaching out to all of these automated liquidity providers who are connected to the network right now and asking them hey I want an order for this amount of this token and what they're actually sending back here you'll see some of these they're not online so the request timed out but a lot of them they're actually sending back in actionable order that was transmitted peer-to-peer specifically for your address so no one else can fill this order that's kind of one of the fundamental principles of the protocol is at this point in time this maker has signed this order specifically for you and you can execute it at the bottom of the app so let's look through the code here real quickly so the first thing that we're gonna do is we're connecting to the router and again this is coming from one of our classes in our library here once we're connected we're going to get efj orders this is a helper function that I just wrote specifically for this example but basically what it does is it looks at the token address that you want to buy or sell the amount and then whether you're on the buy of the sell side from there it reaches out to the router and gets back a bunch of orders in this promise here and so we're gonna set those on to our state and then that's how they're being rendered on the dom so let's actually fill one of these orders let's say I believe this is for 50 die yeah so right here in our original routine we're going to look up an amount of 50 dye from each of these makers so I'm going to ask them all four new orders we're going to wait for them to come back all right so I got an order back from this automated maker I'm gonna take it down here to this little fill order box I'm gonna hit fill I'm gonna say yes I actually want to make this trade and we're gonna see here in the console we have a fill order of success and we should see the meta mask notification come up in just a minute that our transaction was mined so what we're doing here is what I was talking a little bit about originally which is the full swap protocol so we're connecting to the router which is a messaging system that passes passes messages back and forth between peers and we're contacting everyone and saying hey I want 50 died what kind of order can you give me we're getting back a bunch of signed orders we're choosing the one that we want to execute and then we're submitting it to the etherium blockchain so that's sort of like the full loop but what I'm going to show you next is you know perhaps you just want to build like an NF T trading application like you want to trade crypto kiddies or make like a GoDaddy clone but for ENS names which are now your c7 21 NF tees you could do that as well but you it might not fit specifically into the scope of the protocol that we just went through right where you're reaching out to these automated makers and everything so for these use cases and to kind of just fit into the theme of your application you can totally just at the most basic level put in the parameters of the order that you want sign it transmit it to the person who it's intended for and then they can fill it and all of the helper methods and everything that you need to facilitate this are of course here and so that's what we're going to do next so I'm switching to a different account and to the original account we're gonna paste in that address here is the taker and the terminology here maker taker it's kind of common in trading if you've worked in Texas you might have heard it before but it's also very literal right like for air swap the person who is literally making the order and signing it originally is the maker so in my case in this little order builder here we're going to be the maker and so we're gonna say hey we want to trade with and we want to trade like just a little bit of wet taker is gonna give us dye and there's going to give us one dye so let's go ahead and generate that order we're gonna sign off on it and we just generated a signed order so you can see in your application how you can just put in some arbitrary parameters sign it and then pass it off to some other user so now we're gonna switch back to the account of the order was created for and I've been pasted in I'm gonna hit fill and confirm that we want to make this trade and submit it to the blockchain so you might notice a couple other things too like for example I'm putting in a token symbol here right like I put in with and I put in dye and for the amounts I put in like human readable amounts I said like 0.001 and one but as you know the on the etherium level at the EVM level we always need to work with like atomic amounts and we always need to work with token addresses not like these human friendly symbols and whatnot and so sometimes like if you've worked with web 3 you know that like those are the painful like annoying parts and we have helpers and libraries that will do all that for you so let's take a look at the code that was facilitating that so this one can help you a lot when you're working with token amounts this is on the token metadata class it's gonna form at the atomic value which is like that really long decimal value that you're concerned with when you're submitting to the contract and so you put in a human readable value and it'll always give you back the correct value for that token specifically as well as the conversions from it's really useful to like work with the symbols a lot of the time instead of addresses when you're in your code so here we get this tokens by symbol from our metadata class and then we literally just say dot width and then here it has all the tokens properties right so we want the address when we're working with the protocol but down here in the Dom right like we might want the image air swap image URL or maybe the symbol or some other thing for our UI so that is what I had prepared at this point I'll open up the floor for any questions and yeah thank you all right happy hacking guys oh we've got the gosta so one thing that I think would be a really good use case would be something that I kind of referenced in the talk which is like an NF t trading marketplace so with the new version of the swap contract that was deployed you can trade er c720 ones as well as a RC 20s through air swap so specifically ENS just did the big upgrade to the new ENS system and what that means is that as part of that all of the names are now ER c7 21s natively so you could create like a really cool marketplace for people to swap around their GRC 720 ones trade them for die sell subdomains things like that so that would be one cool use case of course - anything that involves trading is gonna fit really well with air swap like more traditional like arbitrage BOTS that's one thing that air swaps really good for because you can request very very large amounts specifically of like stable coins and things on air swap makers keep really large reserves of them because they don't have to lock them all up on chain or in an order book and so at any given time you can get really really large lots of die which could facilitate some cool arbitrage bots and things like that alright so before I finish I'll just leave you with some resources for the weekend this is the NPM package just published today this is our developers repo developer's website rather and this is a blog post that we just published today that has a bunch of helpful ideas a couple that I just touched on art getter channel if you need help during the week and a few other code snippets to get you started here any other questions okay I will do that yeah this medium post or if you just go to developers are swapped IO that's probably gonna be the best place for you it has a little joining us for East New York learn more so yeah through here and clicking this which takes you to the blog will give you everything that you need got it thanks guys