Airstack 🛠️ Web3 data APIs for builders, with AI and GraphQL

foreign [Music] hope everyone's doing well uh I'm Jason founder of airstack and I'm here with my colleague Rishi who's one of our senior developers um hope everyone's enjoying the hackathon thus far uh so I'm gonna do a very short introduction to air stack and then Rishi is actually going to show you a demo app that we've built using our sdks and then talk through the apis um really quick for those who are unfamiliar at all with airstack web3 developer API platform that enables you to very easily integrate both on-chain and related off-chain data into your applications with air stacked you can run a single query across chains so across both ethereum and polygon and also across dapps as well so we have an identity API that cuts across farcaster lens ens and then also we have uh on the nft marketplace side Open Sea blur and wearable and you can query all of that in a single query and response using our apis um you should if you have any questions we have a telegram chat that is very active with developers and we encourage everyone to ask questions in the telegram chat you can come up to us afterwards if you don't have access to the chat we have a team of 16 people working on airstack there's two of us here today the other 14 are all standing by answering questions uh as you have them um if you go to airstack.xyz where I am now you can see you can access by launching the app you can go to the app homepage here and from here you can sign in and when you sign in you will get your API key it is entirely free we don't plan to charge for air stack for several several months now our focus is just on working with developers helping you build good use cases so it's entirely free just one thing I'll point out you'll get an API key provisioned when you sign in if you want to get a higher rate limit so all you need to do is go to manage your plan and request a rate limit increase and our team will receive it and it just asks you to explain why they need the rate limit increase and we'll give it to you don't worry we want you to build great applications so we have other plans that we can upgrade you to no problem and there will be no charge at all I promise you um last thing I just want to point out is if you go to the airstack app you've probably seen that we have the AI assistant um it's kind of like cheat codes in the end if you're a developer you're gonna need to you know use the sdks or use the graphql your need or you know write access the apis directly the AI assistant is just you know like cheat codes a great way to help we get started and to learn the product so you can you know write a query using the the AI and it'll create the graphql query and then it's a great way for you to learn the syntax so I'll just show you a quick example I can say you know show all nfts owned by betashop.e and the NF the images along with is web3 social profiles and the AI assistant will create this query where am I missing then where's the actual do you know what we're the actual explorers yeah sorry no buttons it's there though yeah just did he just lost somebody can we do it and then you have tab yeah there we go okay sorry so I can say you know show all nfts owned by Beta shop dot e and the nft images and his uh web3 socials just an example and the AI will generate the query so it's essentially the apis that we have are nft collection stats so stats about entity questions uh domains which is ens Marketplace stats um nft sale transactions so all transactions happening on openc and blur uh and wearable socials is forecaster and lens token token balances or balances of a wallet uh nfts is you can look up a collection and see all the holders all the the metadata about the collection token transfers so the whole transfer history of an address as well as wallet which is everything related to that wallet so you see for the query that is did here uh it just created basically it opened up the graphql and it created the query one thing you note is the queries can be cross chain um and so this is all nfts owned by betashop which is which is on ethereum and then if the images and here I'll just run this and I can get the Json file here and you can then work with that and you can see we also have images as well that are resized you can ask for different sizes as well I'm going through this really fast because I want to get reached up here the last thing to show you is the docs are very comprehensive if you go in the docs you'll see the SDK that information about the API and then the reference has every detail about each of the apis that we have so you can see exactly what's in the apis on how to call them that was me in four minutes to give me a very high level air stack he's going to show you the real meat go ahead reaching yeah thank you Jason so hi everyone I'm really excited to demo what we've done and get the CEO of so um the query with Jason ran we're kind of building a demo similar to that which uses like the underlying the same query on underneath and let me just open up how we're planning to make it look so it's going to be a single react page and how it's going to be is we're just going to enter a wallet address or any other identity it can be any NS name it can be a forecaster handle it can be an address as well and accordingly we'll get a prompt of all the images which are there as well as other data associated with it and alongside that you see that we have these buttons below uh next and previous so we support page nation in our apis and uh we'll be demoing how to integrate all of that so anyone can just plug and play so uh for the purposes of the hackathon and in general making developers life easier we thought that let's build an SDK and it's a react based SDK that would allow users to just take these components take our react Hooks and just plug it into that application and get started right away focus more on the actual app and not how to plug airstack into your service so I'll just quickly walk through how uh it looks and what are the different uh support available so you just need to run npm installer yarn whatever works for you and we have react hooks so we have uh query Hooks and pagination query hooks on a high level and uh query just involves running a single query and patronation is the example which we showed where you may need to iterate over multiple pages of data because we have a limit you can just use these particular Hooks and get started and alongside that we have a lazy version of each query so you don't need to actively handle it like you can just uh use you can get the particular function and the from the hook and then you can just use that function in any of your handlers and alongside that we also have uh an asset component so just referencing back to our figma you can see that the nft images that we get they may be of different sizes and it's often difficult to resize and uh keep everything standard and you'd have it's a lot of effort to do it by yourself so we decided that you can just use our asset uh component and get started and everything will be resized the way you'd like it to be we have different sizes and I'll explain further as we get there oh yeah uh let's get started I'll we have a demo app uh here it's on our GitHub and it's public I've already cloned it here so uh we can get started first thing I'd suggest is uh just npm install make sure that you have everything and uh now you can just import this uh from our SDK this init function we just need to pass the API key which Json mentioned and uh this key would basically uh append itself throughout any API request as a header so you're good to go you don't need to manually add it anywhere and I'll just show how we can get the key so just go back to here you can just click view API keys and copy and you're good to go right so this is the first part done now uh let's look more into how the actual structure is coming for the reactor right so we have as I mentioned like we had these uh Hooks and this is one of the hooks we're using uh lazy query with pagination so this will ensure that you can just have a next and previous button and whenever you click it accordingly the page Nation will take place we have the hook here and these are how the variables look so just quickly explaining that get data is the actual underlying function which makes the API call and it updates these following four variables so data would be the actual API data and loading an error are just used for error handling and State Management and Page nation is uh what we use actually underneath to implement the next in previous buttons and you can see like just using this single page nation is just reduced your code lines really fast like you don't really need to know underneath how we're using page generation how the API uses cursors you just straight away do this and you're good to go and the argument we pass here is the query so this query here uh we can get it from the Explorer as well and you just need to use that query and you can build this straight up from the Explorer and you just need to paste it and we're good to go right so uh here we are basically destructing that pagination variable and we have uh two Boolean variables and two functions and the Boolean variable is just used to denote whether we can Traverse in that direction or not and for the next and previous page does the actual API call implementation here we have a submit Handler that takes the input from the text box here and we alongside that pass the limit and this limit uh is 50 for us right now so that's why we need to use pagination because you may have thousands of nfts and if you only return 50 at a time we needed a strategy to show everything so we went that way and now uh this is where the main header and the structure lies and basically from the data response where uh kind of showing like how the state would look like this is the actual list which comes and here is how we've uh implemented the next and previous button so you can see it's just have an on click pass the variable that we got from pagenation and you can even disable or enable it using the states which were provided and uh we'll dive in now to How uh this token list looks like yeah so here we're using the asset which I uh mentioned before and this asset uh basically we have uh air stack has all the assets on it so we're not querying externally for any for the data everything's with us so we made this asset uh component that you can directly plug in with our API and it's it's going to be very seamless we have uh the chain uh which is needed like if you want polygon data by default we assume ethereum but if you'd like polygon data you just need to add that as a field the address and token ID of the nft you would require and um yeah we also have preset uh this is what I meant by the size so we've resized uh all these nft images based on uh some Dimensions which is there in our docs and you can just pass it here and everything would be uniform everything would be scaled and yeah I think we're good so let me run this right so we can start with italic.eats so now I just click submit so one second forward sorry oh this always happens let's put internet with King go ahead okay yes sorry I entered the wrong API key so yeah here we can see um how the images are turning up they're all of the same size even though the original images might be of different sizes uh we can page in a go to the next page and you can see how it works and you can enter any thing here so we can enter Stanley node lens you can get lens related data as well you have a forecast ID you can pass that as well so yeah and all this data is available on airstack yeah I think with this uh we're good with the demo so open to any questions anyone has