Zerion 🛠 How to make your own Zerion in 1 hour

[Music] [Applause] [Music] and it's been 1 trillion volume traded on texas in just 20 21. the 3 evolves pretty similar to how internet evolved and in the next several years we will see a whole set of new use cases and over a billion users inside the space right now there is 3.5 million wallets operating can defy and they're using apps made by 300 550 k developers but every defy user has one question so how much my assets worth and this is a question that kicked off there in uh in current form so we saw that there should be a tool where you can just paste the address and then you will be able to instantly get overview over what you have done on blockchain xerin consists of three key components it is device decay for chain data it's available on github and it's open source it's a zero api which essentially is a caching layer for all data that we track and index across multiple blockchains and it's like mobile and web applications that simplifies user interactions so it's basically our user experience layer so for today's workshop i want to [Music] show you how you can make uh two main features uh two the most favorite features of the year and first is that uh portfolio overview and the second one is history tab we have a demo application so you will be able to download it and uh check it out but basically what the map does it is uh shown all positions by any address evm compatible address and show history of transactions it also includes swapping functionality so you can get quotes from most liquidity sources and dex aggregators for the workshops we will use following tooling it will be react device decay that is available on npm device decay demo as a github wrapper prepared for by our developers and transaction builder api that allows you to construct various transactions from swap to stake staking lending withdrawing assets from various d5 protocols you can access demo application by scanning qr code or go and buy this link so you can download it and later we will discuss what's what is there documentation for our api uh available on docs dot zero dot io and for transaction builder at transactions dot zero and dot io slash docs so so what's next let's get to the terminology of this workshops here you can see two main functions is positions and history so here's like one position and transaction and it is key components of our api we try to abstract away different blockchains and try to make it in a way so users don't need to understand what blockchains are interacting with inside the user interface and on the api level it is also like just a position on some blockchain and transaction from from the blockchain so let's get to the position so position consists of asset that user owns balance value available in multiple currencies and change in price and value of the asset here you can see the data structure uh for the for the position um for the position it is it's available on multiple blockchains so you can see different implementations so it's if you if the assets available on one chain you will also see implementations on other chains as well uh you can see that is it very far verified so it is a size that in multiple token token list or not you can see protocol that this asset belonged to and you can see that like a lot of other data is there uh coming to the swapping functionality so swap swapping functionality is something unique in sirians so we try to aggregate as much liquidity sources and differ aggregators as we can and in this demo you you can see how you can fetch uh quotes from multiple providers within one query each quote consists of like the exchange where it happens network fee and receive data you can also see in guaranteed output amount distribution has user gave allowance previously for these assets too the token spender essentially the contract so you can build a nice ux around this data so and time to code and in the dem application you will see all basic components for described previously all of them you can fork get into your application so you go straight away with positions transactions you can check quotes get history so it's all done uh in react and you use this our device dkjs library so you you you can see how easy it is to get like all positions all history and build nice ux around it uh hopefully during the collection you will find good ways how you can improve user journey with such with such data and power if you have questions i'm happy to answer them if not thank you for joining this workshop and join our mission follow us on twitter visit our website download our app and we'll be happy to see you in our discord [Music] [Applause] [Music] you