HyperDapp 🛠 Getting started with HyperDapp

foreign [Applause] [Music] great to have you here so today we have Sam from hyperdap and he's gonna do an introduction into the high product um application and if you have any questions in the meantime feel free to pop them in the chat um Sam I'll let you take the stage hi uh thank you so hi everyone my name is Sun I'm the co-founder and teacher of hyperlap hybrid app is a platform for instantly creating verifiable front-ends for labs so what is our vision our vision is that we have seen explosive growth in the decentralized applications Market over the past 18 months our vision at hyperlap is to make the process of creating front ends up that's seamless fast and verifiable so first of all a little bit about our team so I'm Sam I have I am the technical guide the CTO of hyperlap so I have eight years of working experience as a full stack developer in uh in the web 2 world and prayer funding hyperlap I was working at the unicorn starhub in Israel and I jumped into web 3 two years ago when I met Karen at the changing spring hackathon and where we won uh the hackathon and we started the Arduino from there and then like after this first startup we decided to uh to launch a second uh project which is hyperlamp and Karen she has 10 years experience in product management and data science and before she pivoted to F3 she was head of the data science at the web to fintech Startup so Karen and I as I told you we are both time uh we are both like two times under three and we've been working together since the beginning of 2021. so what is the program that we discovered in uh in the current uh Webster web 3 Industry is that building front ends for dabs is challenging because developers have to integrate with three logic such as wallet connections or smart contract interactions into the front ends and usually uh most of the developers that are jumping into F3 are learning straight away like solidity and smart contract development so fountains is kind of like put it on the side and developers have to deal also with complex and fragmented Tech stack so from the from the smart contract to uh the front end and they have to overcome a steep learning curve in order to understand and use numerous sdks or libraries and also web3 interactions triggered by dapps front ends are non-verifiable meaning that no one can actually knows uh What uh function from the smartphone type will be triggered when they will interact with a button of an input so this is our unique Insight uh we are living in the in a web free uh decentralized world and uh we want that everything uh will be decentralized so right now we have etherscan to uh verify and audit smart contract that are public and completely decentralized but there is no such tool and an interface and uh and the protocol in order to uh to do that for the front ends and this is uh why we build hyperlap hyper that turns the process of building dabs front ends into a seamless workflow a key component of hyperlap is a browser based code editor with the capability of Auto generating front ends via code Snippets with live preview testing and debugging smart contract interactions and prototype prototyping uis have never been easier with a click of a button the code for generating the front end is deployed to the centralized storage such as ipfs and the web 3 interactions are then fully transparent and can be verified by anyone in the community so let me show you a quick demo on how hyperlap Works sorry so this is our dashboard and this is all the previous dabs that I've uh created with hyperlap so let's create a new one together so first of all before creating adapt what we usually want is to load a smart contract API so let's load the wrap is smart contract that is already testnet for uh for this demo so let's give it a name and then copy paste the contract address as you can see the API has been fully loaded with all the functions that are inside I can also load another smart contract if I want but let's stick to one smart contract for now so here uh I can have access to uh so there's not contractor that is the wrap gift and I can have access to all the functions that are inside so for instance if I want to first of all display the name of the smart contract here we go name wrap is automatically generated let's remove this prompt yeah great so then let's maybe display the the total Supply or maybe the set the symbol before and then the total Supply great so right now we have uh called only view functions so it's only display but what if we want to interact and uh trigger an action that is a payable one for instance deposit let's say because we are interacting with the rapist contract let's say that we want to send ether to the smart contract in order to receive rap if so with the click of a button I can choose the deposit function and then it generates automatically the input and the button I can also rename the button for instance um let's call it wrap and let's maybe hear what it is great so let's test it just to see that everything is working correctly so I hope that you're seeing my metamask that is triggering and here I can click on confirm and that's it the transaction has been sent through the blockchain and everything is working correctly so now that I'm done with my depth I can publish it to the Central Storage so here we are using ipfs so let's call it rap if my rep is first contract and let's delete the version and let's click on deploy and now okay great okay shouldn't do that but I can go straight away to the next step here we go is that working no okay let's go straight to it when there's a contract okay so once the code has been deployed to ipfs uh you have a unique you get a unique URL from where your lab is accessible and can be shared to anyone so for instance I can quickly paste this uh this address and share it with my users or I can also embed it into any website through iframe so for instance this uh this is a simple HTML page from cuts and decks sandbox so any developer should know this website and here if I copy paste sorry stake to press and let's copy paste it here and here we go sorry it's not this one it should be this one great and as you can see so from a simple HTML page I can access uh I can access my dad that I've just built with high product I can also interact with it you have to see that everything is working correctly and that metamask is triggering correctly the deposit version is triggered confirm and that's it everything is working so perfect and uh so the these um marks the end of the of the demo uh of course um so this is something that you should have noticed that we have multiple cut snippet that you can use uh the last one that uh we had is the Oracle one so it's triggering uh it's displaying uh actually it's triggering the API convex from Context API and uh and displaying directly data from from this API so if you want to Target and search data from an XML API you can do it with Oracle to know more about Oracle you can look at our dock that is on our website as well uh we have you can read all the things that are related to the code snippet if you want to add UI state for instance or different prompts everything is in there and uh and that's it for uh for our demo uh thank you for for listening and uh I would be happy to answer any question okay so the verification mechanism powered by Apple yeah exactly so there's something that I've uh I forgot to show so let's say that uh you're sharing the uh the URL or your embedding uh the URL into any website so you any any user that is visiting your website will be able to click on this uh link and then they will have access to the underlying business logic that is related to this dub so for instance during the the the slide deck pitch I was saying that um no one can actually knows uh when uh it would click when the user will click on the button what function will be triggered but with our system and with hyperdapt this is something that you can do now because here I can see that the button is actually triggering the deposit action and the deposit action is triggering the deposit function from the rep is not contract so this is this deposit function so I will know that I will trigger the deposit function from this smart contract and I can also verify that this smart contract is the correct one which is the wrap is smart contract uh are there any styling options so this is something that we are planning on doing and we also added it in our one map but right now we are really focused on on the core functionality so this is something that who are uh we are facing bugs like every day and we're improving our interpretology every day so uh we will add uh something uh for studying options very soon um okay and you try to best in place it's possible customers HTML CSS yeah so this is just amazing we'll have it in the future so uh the the card generated uh the code that we are using here is based on a long wage that is uh called prologue and it is usually used at the University but also for a Ai and machine learning so we found this language really useful in order to uh to generate uh dynamically like front-ends based on on logic that is uh defined by prologue so the front end itself that is generated by this link is actually hosted on a centralized storage but all the code that is plugged to our interpreter engine this one is uh is deployed to ipfs to the centralized storage we thought about adding the functionality as well to deploy the all front-end to ipfs with also Discord to ipfs so that way will be fully decentralized a tool for forming the ABI so right now what we are doing for the Abi by actually only filling up the contract address we are fetching the API if it's verified from uh ether stand but we have and we had in the past but we removed it but I think that we'll add it again if that's requested uh we have a tool in order to convert an API array to our product code that is generated here that's right yeah so we have a tool in order to uh to uh so you copy paste the contract API array and it will generate all of the all of that um or record integration is great it's report custom API Oracle function Nick so right now we are not supporting Channing but uh this is something that we have in mind in order to fetch data from uh from their Oracle for working repair from encoding of the hyperdapt eatest for functions parameters that would require these I don't think that I understood this question this question uh sorry Fidel [Music] is inserting an iframe in the uh the main way of integration with the rest of the front-end uh there are other ways to do that so right now this is the main way of doing that uh inserting it through an iframe or sharing directly the the URL with your users but if you want to have it embedded into your own website with your own branding this is something this is the only way to do that right now foreign from ipfs actually we can do a quick demo together uh you can use an oracle to do that uh actually I think that I have already uh I've already have something that we can use one second so this is a quick demo that I've studied to do with the third web smart contract so for instance here the image so if it's shown because ipf is sometimes a bit slow uh it's coming from ipfs so here as you can see I've declared my Oracle ipfs and this is the great the gateway to reach out to ipfs and then the call is uh done here yeah get HTTP so here I'm calling ipfs with the path ipfs I'm adding the like the CID this is the CID and then this is the output that should be the lpfs so here as you can see uh should be shown the ipfs link so you can grab data from ipfs directly within our account I will I will try to uh if that's helpful for a lot of people so I will uh I will add something into the doc as an example uh the generated code you can modify it uh as much as you want you can look at the dock for instance here for cut snippet we are generating multiple prompt prompts let's look at this one so as you can see here I'm triggering multiple prompts but if I'm taking this code and I'm copy pasting it here I can actually merge uh the prompts so for instance I get could take that copy paste it here and it's working the same way and you have uh less code to deploy you can also remove that and that's it and you can also add like whatever text you want inputs into the show array so it's just for convenience uh for adding Cuts in bed so I'm generating multiple prompts one under another because it's easier to do maybe I missed some question in the chat uh so if I haven't answered to one of them please write it again on the chat if that's okay but uh but yeah I will I will add the the example of ipfs uh into uh into our doc get HTTP function you can get info from any httw server in the world yes exactly it can get uh so once you uh so let's look at the doc together but actually in order to register an oracle you just need to register the name of the Oracle the permission so right now well only uh supporting read permission and the base URL so once you have so the name is completely uh your choice it just should be a lowercase and then this is the base URL of your API and then once you want to call the Oracle you just need to reference the name of the record so here it's Conde condesc here is the path of the Oracle and then you get the output here and so here I'm setting the output into the the UI state that is here that explains everything in order to set UI State into a into the engine and then you can work with that whatever you want display data use the data in order to send request to the to a Smart contract Etc cool uh is it possible as Jason so it should be written as Json and then you can work with the Json as you want so for instance here when I'm calling the Oracle so as you can see so the first thing that I'm displaying is the disclaimer so let's look at the the console so as you can see this is the results that I'm getting from this API and here as you can see this is all the the fields that I'm getting in the object so the disclaimer for instance in order to get to take the disclaimer so here I'm getting from my US state I'm getting the context value and then I'm targeting disclaimer so yeah it's not like JavaScript because the dot is a with a slash that is working and then I'm outputting into the disclaimer layout variable and then I'm displaying it here and as you can see this is exactly that what we are getting from from the API and I'm doing the same for the others actually if one of your Fields is in a a uppercase sorry so you have to wrap it into a quotes and everything should work correctly or how Peter answers to the question that you know great thanks for the workshop if we do have any more questions we can follow up over Discord it's a sponsor yeah sure so I'm a perpetually available on the on the the about this called the Channel you can also join join our Discord our Discord server and all the updates are posted there uh I will also make some of the updates uh as we talked uh to the documentation and also to uh adding more Snippets in the future and also customization as I know that is really this is really really important to the community so we are working really hard on it so we'll keep in touch thank you everyone for joining I hope that you you enjoyed the demo and can't wait to see what we're gonna build with the hyper app thank you