HyperDapp

GM, GA, GE, everybody. Welcome to what's going to be another great DevNTell. So if you didn't know, DevNTell is a 30-minute window for members of the DAO to showcase something they are passionate about or have been working on. This can be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community. And today I am happy to introduce to you Samuel and Karen, who will be demonstrating to us their project HyperDapp. Take it away, gang.

Thank you Narb. Hi everyone. GM, GN. It's a great pleasure to be here. Happy to have you.

So hi everyone. Thank you for having us today. Thank you for joining. I'm sharing my screen, just tell me if everyone can see my screen right now.

Yeah, so I think our presentation is going to be very focused on the actual demo of the actual product, but just before that, I'll share a little bit background of myself and Sam and also a little bit overview of our project. So Sam and I, we are both two-time founders in Web3. He is based in Europe right now and I'm splitting my time between Asia and the US. Even though we literally live thousands of miles apart, we have been working together since the beginning of 2021. We met at the Chainlink Spring Hackathon in March last year and together with two other co-founders, we built an NFT platform and launched it together. It's a platform called Nifty Royale. It's a platform that combines art-focused NFT drops with a fully on-chain game. We built arguably one of the first products that use Chainlink VRF and Keeper Oracles. We started building HyperDapp at the end of October last year. We started brainstorming ideas and developing POC. We did go through a pivot in our product design at the end of January this year, and that's when we started building out what's the current protocol, HyperDapp. We came out of stealth at the end of March when we took part in the virtual hackathon of ETHDenver. We were pretty proud that we won several prizes at the hackathon, including a top prize in the Infrastructure and Scalability track and a top prize for IPFS bounty. I think those awards are to us personally a validation that our mission and what we're building resonates with the Web3 developer community. Yeah, I will give the floor back to Sam.

Thank you for this intro, Karen. So everyone can see my screen? Yes. Great. So thank you for having us today and thank you for joining. I will present to you what is HyperDapp. HyperDapp is the easiest and fastest way to build and deploy decentralized applications, decentralized frontends for your dApps. My name is Sam, co-founder and CTO at HyperDapp, and I will show you directly how it works.

Basically, this is our landing page, our dashboard from where you can see all the previous dApps that you've deployed. Let's create a new one. Here I'm landing on a new code editor. There is the code editor on the left side and the preview on the right side. First of all, let's load an ABI in order to interact with it. The one that I'm usually taking for demoing is the simplest one, which is on Rinkeby testnet, the Wrapped ETH smart contract. Let's click and add 'Contract ABI'. Here I'm just filling this info: the contract address, let's call this contract 'weth', and let's take the ABI below. Boom, that's it. So now I can have access to this ABI. Okay, one sec. So the ABI is loaded.

Right now, what we want to do basically in any dApp is interacting with this smart contract. How can I do it? It's pretty simple. Let's first create and prompt. Here, as you can see, I can prompt a text. Let's prompt something else, which is 'this is weth'. Refresh. Great, it's working. Now I would like to display two different inputs: one for wrapping ETH and one for unwrapping ETH. For that, I can create a new row, and inside this row, I can create a new column. Then I will have my input that I will call 'eth'. For sure, all this syntax is well explained in our documentation, but I think that you can follow with me once I'm writing. For the input, the first parameter is the type of the input, and the second one is the unique ID. The first one I will call it 'eth'. And a button in order to interact, in order to trigger the action once the user clicks on the wrap button. Here will be the trigger of the function. Let's leave it like this for now and let's create another column for the unwrapping ETH. It's also 'eth' type. I will give it the unique ID 'weth', and here it's going to be 'unwrap'. Okay. So now I want to create those two custom functions that the user will trigger once clicking on this button. Let's create those below.

I will call it 'wrap_eth'. For wrapping ETH, I want to first get the data that there is inside my input and I will catch the value into this variable. Then I will call a function. For calling a function, basically I need to reference the smart contract by taking the name of the smart contract, then I want to reference the name of the function. The name of the function for wrapping ETH is 'deposit', which is a payable function. Because it's a payable function, I need to add the value, which is in ether, and I'm taking this value from the input. And that's it. I think that I'm good for the wrap ETH. For the unwrapping ETH, it's going to be the 'weth' input. We'll put that into this variable, then I need to call the 'withdraw' function. From the 'withdraw' function, I will add the 'weth'. Here there is no value because it's not payable. Here I just need to reference those two functions. For the wrap ETH, wrap_eth, and unwrap_eth. Okay, I think we are good. Let's refresh. I have an error. I think it's because of... one second, sorry.

As Sam debugs, Karen, if you could confirm my understanding. So HyperDapp is all about basically having an easier means of creating frontends and being able to easily import contract ABIs without having to do so with the common JavaScript or whatnot. Is that correct?

Yeah.

Yeah. So I think first of all, it's a browser... this code editor is the first key component of our entire protocol. What we have envisioned for the HyperDapp protocol covers long more components. But for this one, Narb, I think you were pretty spot on that right first of all, this is a browser-based editor. So it's really lightweight and there's no need for using a command-line interface. And more importantly, we eliminate the need to import or download any SDKs or libraries that are typically required for building Web3 connections for the frontends of dApps.

Gotcha, gotcha. Awesome.

Yeah. And along with the demo, I think that you will better understand what is our vision and what is our long-term vision. Yeah, actually there was only like a comma that was missing. But here, so I have my two inputs, my two buttons, and if I want to wrap ETH, so it's triggering the wrap function, the deposit function. I can confirm. And yeah, so it's going to through the blockchain, we'll get the success message in a pretty soon.

Oh, that's successful anyway.

The next step of it is we want to have like this logic because what we thought at the beginning before building HyperDapp was, okay, so we're all building in Web3. Why? Because it's decentralized, it's permissionless. So we have smart contracts for the backend, we have Etherscan for verifying smart contracts, but there is nothing existing right now to decentralize the logic for interacting with those smart contracts in the frontend. And we also have nothing in order to verify this logic, okay? So this is why we build this tool. So first of all, it's a low-code solution for sure. It helps builders to prototype, test, or even build a small interface for interacting with their smart contract. But the main selling point here is that you can publish this smart contract to a decentralized storage. So right now we are supporting IPFS, but for instance here, I can deploy and also put a version of it and that's it. It's deployed on decentralized storage. Only the code for sure, it's not the whole dApp, but the code is completely decentralized. And if I click on this, so any of my user that is visiting this URL will have access to this dApp that has just been built. And if anyone wants to see or to verify the underlying business logic of this dApp, can also click on the source code and see all the code that has been responsible for generating this dApp. Our long-term vision here, okay, I had to write a little bit of code. Anyone will have to look at the doc, but right now we are adding some features in order to make it easier. So let's refresh this page and again, let's import this ABI and I can also add a function call from the weth smart contract. Here I have a dropdown because as you can guess, you can load multiple smart contracts in the same code editor. So here you can interact with any smart contract and any function of it. Let's take this one and for instance let's take the balance-off function and let's refresh. Connect MetaMask and boom. So I have the input that I need to refer in order to get the value. Let's take one of the holders of the wrap ETH just to make sure that it's working. Let's take this address and boom, so I have this result. It's in ETH, so it's not right readable, but if you look at the doc, you can also here put 'eth' output, refresh, and that's it. 180 ETH and it's exactly the same quantity. So it's working. And the same, like I can publish it. weth, wrap ETH, 1.2, boom. So I have my dApp that is deployed. Here we are still working with the code editor. This is our MVP. We are planning on polishing it and having it as usable as possible, but our main goal is to have a no-code solution with a drag-and-drop flow editor from where you can define any user workflow and have your dApp ready to go and deploy to IPFS as well. Thank you for listening, and if you have any questions, happy to hear.

Yeah, this is awesome gang. I guess one question for me is, is it theoretically possible to create components let's say, little modular components through this and then import them in a non-decentralized frontend? So say I made like a button to do the withdraw or the deposit with the weth contract and then I want to import that into another app that I've created. Is that possible?

So what we have thought about is having it more customizable, meaning that we will have an interface in order to give some like context variable in order to define your background, like your color buttons, etc.

Yeah, but I will interrupt for a second, Sam. I think the embeddability actually solves that. Like when we publish the dApp and have that unique URL, that URL could be embedded on any platform through iframe.

Yeah. You can show this. Ah, okay, yes, exactly.

This is exactly what I was thinking.

Yeah, so this is exactly like this is CodeSandbox, so any dev, any Web2 dev knows this website. This is a simple HTML page, so I can embed this small and lightweight application into any website and have like all my Web3 logic abstracted. And also like all of my users can see like what is the source code of this dApp by clicking on the source code button. And also like if I want to interact with the blockchain, it's still triggering MetaMask even if I don't have MetaMask loaded on this web page. Regarding your question, if I understood correctly, it was more about customization. So right now we are not supporting really deep customization, but we're planning on doing that. We have some ideas for doing that for sure.

Sweet. Yeah, this is awesome. Does anybody in the crowd have any questions for Sam or Karen? I want to add a little bit. So when we say that we want to make the business logic underneath frontends verifiable, I think let's just give example to further break it down to make it more relatable.

Guilty. I'm sure there's quite a few in the crowd.

Yeah, also guilty.

Same. We're learning.

Actually we had a very interesting conversation with Solidity devs.

For instance, when an end user lands on and interacts with a website to claim an airdrop token, for instance, when we click like the claim button on the website, we really don't know as end users what functions are being called from that prompt.

I think this is where the verification of the frontend is really valuable. Because with our tool, you could click on that 'view source code' button and land on the read-only viewer to see really what valid function in the smart contract is being called for certain prompts. Oh, I see, and steer clear of that exactly. Interesting. Yeah, the HyperDapp team may have special prizes for bounty and whatnot.

So the goal is I think to have always it visible, but you know like we're still at the very beginning of this venture and we're planning on building also along with the community. So I think that we'll listen to feedback. But yeah, in our vision I think that having this source code button is really valuable but you know if the community thinks something else about that, so yeah for sure we'll build features and this product along with the community if the community receives it as valuable as we see it in the future.

100%. So I have a question for the audience. So who in the audience actually builds frontends for dApps or who are full-stack developers that build both backend and frontend for dApps? Actually we had a very interesting conversation with Solidity devs and they think that this kind of tool can be really useful for them in order to quickly prototype a frontend for interacting with their smart contract.

So that can be definitely a use case, but how we see it is more like having some you know Web2 application that wants to integrate Web3 logic and like they can build it with HyperDapp directly without having to hire like a dev and having to learn like all this Web3 logic. So I think that it can help onboard like the next generation of users and Web3 builders. Yeah certainly I suppose there could be like different use cases maybe like an experienced Web3 developer might use it for prototyping but the Web2 crowd who doesn't have that much experience in that area could utilize this no-code solution. More use cases the better, right? So yeah, so actually we are starting our alpha release tomorrow. So if you want to join, just be in contact with Karen, she is organizing everything for sending out all the links and the link to the doc as well. We have a doc that is still in progress, so yeah like we are starting the alpha release and hopefully you will build some stuff with that. Can't wait to see what you're gonna build with it.

For sure, for sure. There's only four minutes left here, gang. Are there any questions for Sam and Karen? If not, is there any way folks in the Developer DAO can help you to continue building this out or are there any open roles that you're looking to fill?

This may sound a little bit ridiculous because one use case I really want to see is from our alpha users is that someone actually build a dApp that calls a function that has some malicious intent. Oh I see, because that will show if end users or other developers will be able to detect that in the code viewer.

Excellent.

Yeah, we may have a special prize for that. Bounties and whatnot, excellent. So I suppose to close out, if nobody else has any questions, we would love to have users who can try out our product and build amazing dApps with our protocol so that can give us feedback and iterate on our product. Then secondly, we are definitely on the lookout for contributors to our team, both in as someone if someone is either interested in being a dApp advocate or someone who's interested in contributing to further developing our product. We're totally open to hear from you. Love to hear from you. They can just add me, send me a friend request and DM me. Maybe you want to write that down in the developer-voice-text if people want to do that as a follow-up. Yeah and our website is hyperdapp.dev. You should probably drop that in the voice text as well for people's reference.

Alright gang, with that we are at time. So thank you again Sam and Karen for coming on and presenting at DevNTell. It was a pleasure to have both of you on and like I said we're all looking forward to seeing HyperDapp grow. So with that I want to wish everybody a very happy Friday, weekend, wherever you may be and I will be dropping a link for the DevNTell POAPs in the developer-voice-text. Sam and Karen I will send you your speaker POAPs through DM.