ZeroToDapp at ETHCC Cannes: A Launchpad for Builders
EthCC[8] · 2 Jul 2025 · 57:31
Rob Stupay, Abena Asante, Kevin Jones, Solange Gueiros, Simon Emanuel Schmid and Sophia Dew introduce Web3 development tools. The workshop covers Remix, The Graph, Chainlink, Celo and ENS in a rapid practical format.
Speakers
Topics
From EthCC[8], hosted by Ethereum France.
Transcript
dep and showcasing different parts. That's basically what this initiative was. It started uh in 2022 before e San Francisco and the name is not for me but it started there where the name zero to was brought into life and it was a protocol-driven learning experience. Each partner session builds up on the on the last one. with a modular experience and it's like a school version for 30 minutes theory versus 30 minutes followed by 30 minutes execution and this evolved in the collaborate impactful um education format where you can basically apply it to anywhere in the world.
It found its way in 2023 to Etherra because I picked up um I think I heard of this initiative and I was like hey when I founded Etherra in 2023 I was thinking of something how to onboard especially novice hackers hackers were not very experienced and um basically all the protocols who are there just built real function app within 24 hours. I mean we extend it to 24 hours but it 48 hours but it could also be within one day or 3 day or even a week. I think it learns like it forces hands-on learning a collaboration and I think it's more impactful than siloed um workshop by each protocol.
Now we talk about etherra I mean if you know me it's like most of the time I love hacking. So that's a picture I had love when I was at the Defcon in Bogotaa. I founded Ether Cra two years ago when I realized that most of the time there were not many African hackers around the world and also not many women and I was like if people cannot come uh to places like here in um Khan or Berlin or anywhere else why not bring Ethereum there that's where um initiative started and it has become a hub of basically the premier Ethereum focused hackathon in West Africa and the third Ethereum focused hackathon in Africa in general.
I mean what ether cries we don't only do like a hackon itself but we have like area around build ecosystem where we have like our solidity Mondays we also launch like have our zero to workshops we have a regular meetups etc and the goal is to combine international people also with local people and then creating a hub for um a hub for um bring up new ideas and it's also pan African innovation hub it based in Ara but we have participant from around the regions. The same way Lisbon is a hub for crypto in West Europe, Acry is a hub for crypto in um West Africa.
Many people ask me why Ghana. Let me I think this map summarized very well. Ghana is lesser known but Ghana is close proximity. Well, both countries Ghana and Nigeria are in West Africa. Everybody many of us many of you heard of Nigeria. Nigeria is the most developed, most um advanced deaf ecosystem in the whole um continent. Just put in numbers. Nigeria has like 20 226 million population and the median age is 18 years and Ghana has 35 million and the median age is also 21 years. I mean if you put these numbers into place then you see it's it's a powerhouse. I mean just put into context, USA has a
population of 300 million. So you just put this into perspective the amount of people who are there the young people tax save etc. But most of Nigerians they struggle to get visas whether it's in Europe in US or even within Africa but Ghana Nigeria because of the close proximity they live have both economic area like the Shenhen area. So Nigerians can access Ghana visa free and we also have people like they take the bus from Legos they come to Ara it's like eight hours ride it's very like it's it's doable close proximity also in cultural alignment both countries are English- speakaking countries which is rare in West Africa most of the countries in West Africa are French
speakaking but Ghana and Nigeria English speaking we have similarity music etc Ghana is very like stable welcome environment and And I think it serves as a great hub for any organizations to target the West African market which makes Ghana like Etherra very a good example for hosting hackathons there and also targeting not only the Ghanaian market but also the Nigerian market which I think we all agree is the most uh important deaf market um in Africa. I mean yeah why West Africa um I think yeah access is a frontier market with a booming deaf ecosystem um spot unt untapped talent early we have students
who are coming to our hackathons meet up etc um co-creating lasting impact it's more than just a hackathon but it's also hiring people um for yes also hiring people from this region some impressions from previous hackathon I think this image which really sums up how hacked was in um in last year um people with a graph bandana speed on Ethereum back behind. I think that really sums up how it was. It was buzzing young people full energized and I think um yeah speaks volume. Some impressions how it went. He had like handsome workshops um all building
together. Um yes it was like roughly we had like last year roughly 300 participant I think we have been able to scale this sorry how are we doing this um we host three a three-day inerson hackathon we also collaborate with universities where we host um workshops we have like a onchain student hub at each university um that helps us to pro like do workshops um also activate new devs etc um We partner with leading projects in ecosystem optimism sale near Ethereum foundation bill k etc. Graphos also supported us
and these are the some facts and figures from when we started two years ago. So it's like we had a buzzing turn around uh turn out. We didn't expect it to be honest but it looks like people people like the idea. It's um successful and that's why we are scaling it. Last we were able to onboard more people and this year we're hosting a third edition. So I think it looks like it's becoming a thing and it's attracting people from all the region to attend. Next edition it's as I said 3rd till 6th September again at the University of Ghana. You can go and sign up on the like cup on the homepage. If anyone wants to come be as a hacker sponsor or
mentor or just participate you're more than highly welcome. I think this format zero to dab we will host it again. It will help us to um to onboard more devs in a more inclusive educational protocol-based environment and let's stay connected. It's um can scan my QR code and I'm would be really excited to see some of you attending Ether. Now I give it on to Rob.
Hello. Let's see. Is it this way? Oh, this is to join the zero toap um telegram channel. Is it there? What about that? Do you see anything? Something's fishy happening here. What about this? Oh, here. That's to join the zero topp telegram channel so we can organize more where you live. So I'm gonna talk about uh remix. Has anyone here uh not used remix?
Good. Because in a certain way this talk is mostly for you with the rest. You can get a little bored for 10 minutes and 10 minutes is probably a good amount of time too. But well actually we're gonna you probably learn some things. uh we'll find out. Anyway, Remix is the premier onboarding platform for DAP development. And so it's in a browser, so there's no setup. It's very easy to run. It's very easy to deploy contracts. There's some AI integrations to check your contracts. Uh and it's a project that's been funded by the EF uh for 10 years now. uh except uh remix URL is changing to remix live in about six months because we're we've
spun out of the EF about 36 hours ago. [Applause] And with those 36 hours comes responsibility. So now we are officially we were in a public good inside the EF. outside the EF, we're going to be continuing to be a public good. And as a public good, we also have to raise some public goods money. So, uh, we're in Octant 8. And if any of you are GLM holders, uh, please vote for Remix. Of course, you know, in the web 3 space, there's a lot of catchphrases and stuff. And if you don't know what GLM holders, Octton is, don't
worry because this talk is not about that. It's uh just introducing you to some basic workflow uh and then the rest of everyone else will come on after me and talk about additional workflows on top of this workflow. Um so like when you develop a smart contract you have to get a contract or write your own. Uh you have to compile and then fix all the errors. You have to deploy understand where you're deploying to and where you want to deploy to. Uh, and you have to debug your transactions and verify contracts and play with your contracts.
So, um, here's a little like walk through the interface. This part, if you've used Remix, maybe you'll be a little bored, but maybe you'll learn something here. Um, so, uh, can I Oh, look at that. Uh, this is the icon panel. So, it's sort of like VS Code if you've know VS Code. Um, you know, the icon panel, side panel, main panel. Uh, here's, uh, the solidity compiler where it's chosen here on the side panel. If you click this button over here, it'll pop over to the right side.
So, there's a right side panel. Um, there's an AI chat. If you click the the uh, ask Remix AI because of the compiler error, it'll tell you the answer in the AI chat. bot. Uh there's some tutorials in Remix. Uh so you can learn Solidity inside of Remix and um there's also well I'll get into some other tutorial parts of Remix later. Uh so let's get some files in to Remix. You go to the hamburger menu in the file explorer and then you go create using templates and then you select your template and then it appears and then you get this template in and you may not understand
what it's doing. So either you can click the robot button or you right click on the code in the editor and you can get the explain this code or explain this contract or explain this function. Also in the editor, you'll see like gas usage in the edit in the editor after you compile the contract. You can clone repos easily. Just put the URL in and you can start with an empty file by clicking the empty, you know, the new file icon in the file explorer. And then you have to know that there no uh accounts in Remix, at least they're not yet. That may be coming, but uh there's no storage. So you should push to a remote repo or local repo and uh you can connect remix
to your hard drive with a damon called remixd or you can use remix desktop which is just about to be released. And uh the cool thing about that is you have access to your native terminal. So you can run git just off your uh inside a remix natively. Uh you can download compilers and work offline. Uh you can use a browser wallet which is kind of unique in desktop apps and uh you can like use hard hat foundry remix cursor you can code in whatever IDE inever environment uh editor you want and then do the web3 operations in remix and then you should check out all the plugins because there are lots of them.
Uh, this one is for the Remix guide that the arrow is pointing to. And, um, there's like a whole mess of videos. So, if you don't know how to use Remix, just check those videos out. And like the intro of the Remix interface or basic workflows will get you up to speed really quick. Uh, and, uh, Learnith is that tutorial plugin that I told you about. You can compile. Uh, I have no idea how long I'm taking either. Uh, the Solidity compiler. You just click the button to compile and then beneath it beware that your compiler errors are. But I'm not going to show you errors. I'm going to show you shortcuts.
So there's the, you know, control S or click the play button. Uh, and then you can get the AI out of your contract. But probably a lot of beginners don't know what an ABI is or what a provider is or what a smart account is or what a EIP721 signing is. But in zero to DAP in a fulllon session, we'd be going through all these and there'd be a lot of time to be asking questions and uh getting you up to speed on all the um what blather uh catchphrases. Uh anyway, and deploying and remix is pretty easy.
you just um if you want to first uh you have to choose the environment which is sort of another catchphrase but you have to choose where you're going to deploy it to and you have to choose which contract you're going to deploy uh and you'd have to choose the value that you're going to send with the transaction. So Remix comes with a a simulated chain and uh you can fork this ch any chain into here. So you can fork mainet or any L2 into the simulated chain and then you can share the state when you push your repo to GitHub and you can pin contracts here and here's the environment choices. So you can collect with wallet connect uh injected like any wallet uh browser
wallet any local chain any node provider and you just select the contract and deploy. So then you can see um the debugger after every uh successful or unsuccessful transaction and you can debug it there. Uh and there's the debugger. So if you're just playing for the first time and you want to see what like op codes are and how to just very quickly someone a beginner can get in understand like the elements of what's going on in the contract at a deep level and then you can interact with the contracts functions and you can also load in a deployed contracts into remix
as long as you have the AI and when you open up a deployed contract you can you might see a a blue button which is for uh just a lookup so it doesn't cost any gas. Orange ones will are saving something through the chain and red ones uh are you're sending value uh with the transaction and then you can open up that further and put the inputs in individually. So it makes it a little bit easier. And then you can just grab the address and then you can verify your contract and then you can go on to the next speaker.
[Applause] Yes. And wow, I use remix since I started in 2017. I do workshops and boot camps so long of them. And I prefer to use remix all the time because you don't need to install nothing else in your computer. You have it's only the wallet and then you start. And uh when I do this on this way uh I'm focusing only in what I must teach and not create problems with environments and computer that sometimes is not working installing this or that. So I love remix this is my favorite tool and this is I think is not yeah the three I know is I go to the
four then we go to the three is probably yes. Okay, so let's talk about chain link and how I use chain uh remix and what's chain link. By the way, this is me. I am Sleus and uh I'm telling you how to connect the blockchains without the information that we have outside especially because uh think that the blockchain is like an Iceland. It's a isolated network and uh how can I get everything that's outside of that? that uh means make the blockchain really meaningful and this is my goal of you.
So when you talk about oracles think about all the data sources and external resources that you do like to use inside your smart content inside the blockchain like the temperature some satellite information or from my watch on from uh sports or weather. I'm doing a live demo with you now using the weather and any kind of financial information. I can use all of this with oracles. So Oracle will be the middle to bring this information to use inside your smart content. But if you have this like being only one node bring this information. This can be a huge problem for you because this can be compromised. So when you think about
oracle always you should use a decentralized oracle network. So must be more than one node that's getting your information to bring for you with consensus to bring this to your smart contract to use this inside your smart content. And this is what is chain link. Uh chain link is not a blockchain is a decentralized network um of oracles different kind of oracles for you. And what kind of oracles do you have? When you talk about especially codes, you can get prices using data feeds or data streams or getting reserves from other chains of for of from banks. For
example, BitGo use proof of reserve to prove their reserves in Bitcoin when they are minting issuing the WBC. It's one example of this. Or you can have communication between blockchains using CCIP. Uh or automate the execution of some uh function in your smart contract uh because like the smart contract cannot call itself. You must if you'd like to do something in a timely basis or with some trigger you must have automation that okay you could go simply do you clicking or have a bot or have a decentralized system that do that uh in a way that we are still being
decentralized or even maybe you need random numbers to your smart contract and you can use VRF to do that one that I I put in the last one Here is functions because for me I love functions because imagine how many APIs that existing in web2 do you know a lot how all the world of systems that are not in web in blockchain yet and they have APIs I'd like to use this information inside my smart content imagine that you can execute a JavaScript code calling these APIs and bringing the information to your smart
content is this this is training function and I'm using this now with you this is my goal to do this live and this is the live demo I'd like to get the weather I'm using a weather API inside my smart contract this was from some days ago in can was 25° and if you'd like to do this later we can share uh this with you but this is uh like a simulation that I have over there and let's go let's go to the simulation first and then do this live. So this is the simulation with my code, a JavaScript code. And let's see. I don't know what I have here. I have some
Paulo. Let's go to UBS. And then I must verify that I am a real person. Maybe not. Let's see. Yes, I can. So running this and probably in a few minutes. Here we are. 31 degrees now. who is this? But how I'm using this? I'm using this inside my smart content with Remix. So here I am on Remix and I'm connecting with the functions network to do that like to call the the JavaScript code that is exactly here. Okay. And when I get this result, I'm using this
result in some NFTs. So I create this collection and I can decide after I get the information of the weather if I'm minting a new NFT or if I updating some of these NFTs. For example, I have one of Kes that can that I made it I think midnight and the forecast was that should rain but seems not. So let's update this. We can do this live now. I already deployed everything. I don't have so much time now. So if I go here in deploy transactions where I can interact with smart contexts I have this that I got in S. Paul a few minutes ago.
Let's go to Ken again. So I'm getting the temperature. It means that this JavaScript code will be executed. And you saw that this is the API. You can see here the API that I made a few minutes ago as well. And okay, I made the request to the network. This is the chaining functions. No, this is the chaining functions that you can see my smart contest that are consuming that or even the requests and it seems that it was fulfilled so fast now. Let's see. I must update this probably. But let's come back here and see. Let's let's see the cons last temperature 31°.
It's here the same information that you saw over there. So now I'd like to update my NFT. I don't know which of them. This is the index one. The token ID number one. I can see the URL down. So now I'd like to update the NFT one. I could create a new one but let's update exactly to you see the concept of a dynamic NFT as well that I'm updating live and let's see if it's updated. Yes. So if I come back here probably didn't change I must uh refresh all the data that I have here.
Let's refresh. And by the way, I know that because of some cache problems, sometimes I update you'll be refreshed and come back the wrong image. Okay, I know that. But the information will be right. If you see this now, you can see that uh like midnight it was 26° and this let's see if it changed. Oh, sun and come back. But this is a I don't know how to fix this cache. Not yet. But here 31° now. And if I go to the list of all my NFTs here, you'll be right. So K is now sunny day with us.
So is this my goal with you uh was to show this is in our presentation the source code as well. I made this uh in the morning 10:00 a.m. the first workshop with more details and create everything. This is how we made the simulation. the smart content itself open directly on Remix. And if you'd like to know more, go to the developer hub. This is me. And let's go to uh Simon. It's here after after. Okay. Thank you.
Yes. Hello. Oh, nice. So uh yeah now we uh saw um how to get smart how to write smart contracts but I think the most important part now is how to make it accessible for users and that's where I jump in. So um hi my name is Simone I just joined ENS um as a developer relations uh in June. So it is my first presentation. I hope uh I do everything right. Um but uh Greg uh who does these presentations also at the hackathon on the weekend h was so kind and give me the slides. So like uh the the credits go to Greg. Um but yeah, I'll run you through ENS. So
who knows what ENS is in the room? So and uh do you know on the background how it works? Like you know um prime like Oh yeah. And um for example like um primary name resolutions. Do you know how that work? Okay. See I think the interesting thing about ENS is like most people kind of know it like there's easy stuff about it but there's also like some very complicated parts. I don't dive deep into the complicated parts here because it's like a speedrun here but again there will be a longer workshop on the hackathon and when we do this full day zero to dep um workshops then we go deep. So Ethereum is the Ethereum name service, a decentralized permissionless naming protocol that lives in Ethereum but also on other L2s
and scales to the entire internet and in a nutshell uh yeah it translates these hex addresses in into human readable names. Um and I think that's important because on the internet like we never go to uh an IP address in in the browser, right? We always go to google.com or whatever and not to the IP. So I think that is basic um basic user experience layer on top of how the internet works and that's also how I think should or we think should should uh web 3 work that we interact with names and not with numbers. Uh and that's where ENS actually jumps in. So this is explained.
So we say like everywhere where you can put an IP address browsers use DNS. So everywhere where you interact with an address on onchain, you should be able to use an ENS name. Okay. And so actually that already works pretty pretty well. So like EOScan supports it, most wallet supports it. Um basically it it became a basic infrastructure for web 3. Um and it's very easy to use. Um quickly there are two processes to think about like the one is the forward resolution. That's a standard. It's name to address. usually use that uh in a wallet when you want to send um money to someone then you ask them for hey can you give me your ENS name then uh you they give you the ENS
name they get a name in the background it resolves to the address you have an address and can send money to or interact with that address so for example um also I learned that on the POP app you can now send the p-ups directly to to the person so for me that's actually pretty convenient I can just send the p-ups to the people that I meet and that that I don't meet um without actually needing them to do something. Um then the other thing I think uh equally important but a little bit more complex on the tech side is the reverse resolution. Here we we look at addresses and want to find out the name. Um mostly the primary name because like uh multiple one address can have multiple names pointing to it but only one primary name. So that's like here it already gets a little bit complicated.
Um but that but that's cool that that's basically what you see on block explorer. You see the reverse resolution. And you see you don't see addresses, you see names. And that that's what I think um it's also very important. But we think also um ENS is more just a name. It's not just a username. It's not just a domain name. It's actually a full profile. And as you can see here, so Gregill. Uh lives on all these different platforms OpenC Rainbow Sora Etherscan, and whatnot. And it's always the same. It's always the same handle. And um so so we have this interoperable do uh profile profiles that work between different systems and different apps.
And if you if you build an app, you can use those two. Um so we see that on matcha here for example. But as I said, it's more than just names. It's not just like name to address. It's full profiles. So when you look at uh Greg's profile um that's on on the ENS app actually um we see he has a profile picture. He has like a bio. He has a location, New York, where he's lived. Uh a website, social media accounts linked, addresses linked, other records linked. Even you can uh upload um you can link a IPFS hash and have a start static website delivered through an ENS name.
Um so, so that's super powerful also for all the developers. These other records like it's free. These are text records that you can use in your application and store whatever you want in in there. So basically you don't need like uh to to uh create new user systems and profiles in your application. You can just say like okay login with your ENS name and then start to store your application specific data directly on ENS on on that user. Um it's very powerful. Um but even more and also a lot of people don't know that is you can store addresses for different chains behind that. So with with Greg's one, we saw it's always the same address on on all these different
chains stored. Um, and that's kind of like sometimes a little bit the mindset of the users. They think like, yeah, it's always the same name. But it's not true, right? Like as soon as you have smart smart accounts, they might or might not have the same address on different chains. And that actually led to very um weird stuff that people send money on optimism and assumed that the same address on Ethereum also controls that on optimism. and then it was um gone. Um so but ENS also has a option to solve that in order you see on my name there is a different address recorded for Ethereum mainet then on arbitrum. Um so like even if you have uh if you are multi-chain in the EVM world you can link different addresses I think it's
very important but also on top of that it also supports other chains like Solana. So there is so we can use ENS to store Solana addresses and most wallets also support that to send Solana through ENS names and then people also say like oh Ethereum name service so that's only Ethereum but we are multi-chain um and always talks about Ethereum I already said like it's it's multi-chain we can have Solana but also it doesn't necessarily need to be it can be also box or actually also com like every domain that is uh enabled with DNS SEC can be linked into ENS and then used there as as your profile or whatever and
then even you can create subdomains for your users. Um there's a it's a tool set that's super flexible for uh different use cases um that I would recommend you checking it out. Yes. So why um again like users of crypto power experience should never interact with hex addresses that that can lead to problems. And then I want to kind of showcase one of the um ecosystem builders which is Nscribe who focuses on solving that problem that that we say or also they say very loudly every smart contract that we interact with should have a primary name set on ENS because that makes it um secure right and they create a system that makes that. So I
walk you through. So what I do and probably all of you that interact onchain I have that pop up and it sees you interact with this address 0x253 like just looking at that address don't tells me nothing about if this secure or not. Then uh I think even in some wallets that get harder to then actually go to a block explorer to find out um what is that address and usually I go to a block explorer look at that start to go in there okay is that is that good? Is the contract verified? maybe I have time to quickly glance over the contract and then I do my interaction especially when it's a lot of money involved. Um but I think it shouldn't be like that and also with hex addresses like spoofing and poisoning attacks we saw
that a lot because if you don't if you don't do these double checks it could be that the front end is compromised sends you and sends you a wrong address and then uh yeah money is gone. So we should I don't think we should do that. We need to have a better solution and that's where ENS comes in and and Nscribe helps is that we can have now primary names four addresses that resolve into the wallets and we directly see a okay that name is is resolved and we know that because of the um ownership that ENS provides is because this is a ENS. Whoever owns ENS.
Is in control of that address. So like no hacker can spoof that. um they would need to be able to I don't know attack that register or something like that which I think is super hard um so that's actually pretty cool. So, so ncrap helps um and makes it safer and so you can check it out. I think yeah here um so there's like it's a nice interface you can go it helps with also verifying contracts with sourcify block scout we can link audits we can link APIs and so on so forth it's actually evolving actually Connor is here in the room so you can talk with him he also have a talk at ENS happy hour tonight um to dive a little bit deeper this was just like a quick rundown and um yeah so
check out nscribe xyz appscribe and if ens is also sponsoring the hackathon on the weekend. So for all the hackers uh come by hack with VNS. We have a booth. Uh Greg has a longer talk. And yeah, that was it from my side. Um thank you. And now to Kevin. I'm the guy who didn't put his slides in the thing the time. So I'm gonna use my own laptop. Yeah, they are.
Cool. Hey everyone. Uh my name is Kevin Jones. I'm a developer relations engineer working for Edge and Node. Uh working on the graph protocol. I'm also a core member of the build guild. I work on Scaffold ETH supporting the developer community there. Uh today I'm going to talk about the graph uh a little bit like why the graph exists and why you might use it in your DAP. Um it's kind of a crucial part of like building a DAP I think in like modern terms. Like the original idea of ADAP is you just have like this very basic user interface that you might deploy on you know a versell cloud. You could deploy it on IPFS if you're being you know uh really really web3 friendly and then you have your smart contract that you deploy to the blockchain. Uh the problem with that is
as your smart contract is emitting transactions, if you're a good smart contract developer, you have an event, right, for everything that happens in your contract to make sure that your front end is kind of aware of what's going on, right? But the problem is is that the actual JSON RPC for uh most blockchains is really not um optimized for reading data, especially like if you want to get lots of data or if you want to be able to like customize the data um in a way that's like easy to query. Uh and so you end up with this problem where uh you start running into performance issues and you you run into issues where uh you might want to get more advanced data, right? That maybe is just not coming off an event. We also have this kind of like sea of a mess of
like transactions in any block, right? Uh and so it can be very difficult to identify other applications and other smart contracts that you might want to listen to, right? Like if you want to know what's going on uh with swaps on unis swap, right? and like understand uh what liquidity pools are available and like what the average is and stuff like that. Um you end up having to do like off-chain computation like with some kind of like other traditional database, right? You also have this history with provenence like time um of like what happens over duration of time on the blockchain. And what we really want to do is like have some way to go back in time and see the history of like what kind of state changes have happened right on a smart contract. Um, as an example would be like you wouldn't
really know, you only know someone's current balance of their tokens because you can query their current balance. But if you wanted to know historically over a period of time what their balance was, you would have to again do that offchain right? And so what we end up is people doing weird stuff like this where this was actually a real hackathon uh participant which was like just trying to get all of the tokens inside of a wallet. Um, and they were doing this by doing this kind of like nasty for loop uh that is very very very heavy when it comes to RPC calls because you're having to constantly loop. Um, and if you had just a few NFTs in your wallet, it would not be a problem. But if you're you have someone like a really active web 3 user, you probably have hundreds if not
thousands of of NFTs. This could take seconds or even minutes to load. And so this is where the graph comes in, right? The graph is a decentralized protocol for blockchain data. Uh there's over 200 indexers that serve data from uh the network. Uh there's a 100,000 delegators who provide stake to the network uh to incentivize the network's um usage. We have over 10,000 subgraphs on the network. I think this is actually probably more. It's probably closer to like 13,000 now. Uh and we also have over probably 13,000 curators who are providing stake to the network. Um, I'm not going to go too much into the tokconomics of how the graph works, but it is um, incentivized using the GRT token. And so that's how the network
runs. And so the idea is to take this kind of like sea of a mess of blockchain data that's going on and to put these into pools, right, into like organized what we call subgraphs. So you can think like every single smart contract might have its own unique subgraph configuration that stores the data and then exposes that data over uh GraphQL. And so what you're able to do is that same like kind of uh snippet that we showed earlier. You're able to consolidate that into a very simple GraphQL query which is very very easy uh for front-end developers to incorporate. And there's a lot of flexibility to do like filtering. As you can see here, we're doing like a little
bit of a filter uh to identify um the particular owner of that wallet, right? What NFTs they own. And then we're also able to see all the previous um owners of a particular NFT as well. So this is what the architecture looks like. uh you can imagine you have your traditional DAP like you normally would deploy it um on like a front end like Versell or IPFS and you're you're you still have a smart contract and users are still interacting with your DAP and proposing transactions to the smart contract but as your smart contract emits events this is the magic of the graph is it has a uh basically a life cycle of indexing the data through what's called graph node
which is a binary that runs it's written in Rust and The developer creates these mappings, these WASOM mappings. So it's they're they're modules. They're written in assembly script. And what they do is they listen for the events as they come off and they store them in GraphQL. And then the graph node then ex exposes all of the data that's stored in GraphQL via GraphQL. So you're completely bypassing the reads from the blockchain and you're able to just query the GraphQL API directly.
So looks something like this event. you have you might have events on your smart contract. You also might want to get like IPFS or Arweave data. Um so let's say you have like an NFT and that NFT emits a hash for IPFS hash and you wanted to also fetch all that data and store that in the graph. We support that and these WAM modules are like constantly kind of listening for these events and processing that data and storing it in Postgress. And then here data consumers can come in using um GraphQL query that data and what graph node does is it has optimized ways where it can actually go back and get the data exactly that it needs and serve it to the user via GraphQL.
And so this old style of like you know just having a standard user interface and like having issues with read is basically replaced with a middleware layer where the graph sits right. So the graph was commonly I commonly term it as middleware um and it's this kind of little middle indexing uh protocol layer and on top of ENS. So like one of the most popular subg graphs on the network is actually ENS. Um, and so here's a great example. Like if you wanted to find out like for for this query, we're saying well what is uh vitalic.eth resolve to and we're able to get all the information uh from the actual ENS smart contract that uh shows the current state of his actual ENS, right? Um and so if you're using anything in your app and
you want to query ENS, this is a great subgraph to query. We also have a really cool integration with chain link functions. Uh I think it's uh makes sense to talk about this. I did a talk yesterday where I I talked about a cool tool I built called the graph builder base camp. Um one of the use cases is where you might want to grab data from a subgraph and then bring it back on chain or you might just want to like check some data inside of a subgraph and then bring it back on chain similar to how um Solange did the demo with the weather. Well, you can imagine it might be something more important like the price of ETH, right? you might want to like drop that into the into another smart contract and then uh maybe create your own like oracle system or
something like that. Um chain link functions give you that power because you can essentially integrate. This is a really good example. If you uh scan that, it will show you the example of how you could do that with unis swap and you can bring that data back on chain. We also have other ways that you can get data on the graph. Um, we have the token API and this is if you want to get like historical data about token prices, if you want to get like uh metadata about tokens, like if you're building a wallet, we only support seven chains right now, but we're adding a lot constantly. So, this is a good way if you like can't find something in a subgraph. Uh, check the token API. This is just an example of what the data looks like. It's it's a REST API and
it's got, you know, really easy JSON object that lets you query that data. Um, we do balances, transfers, holders, metadata. We also have open, high, low, close for unis swap. And we're constantly adding this. This is a new product. It's only been out for about two months. Uh, and it's highly evolving. So, keep an eye on that. And then the last thing is we just are announcing Hyperraph this week, which is a new framework for building web 3 applications in a knowledge graph format. And there's going to be a special uh series of prizes for $5,000 at the hackathon. So, if you're hacking, check that out. There's also another $5,000 in prizes just for building on the graph. So, $10,000 from the graph.
Thank you so much. Awesome. Right there. Higher.
Yep. We can start with this one. Test. Oh, totally works. Yay. Hello everyone. I think I'm the last presentation, right? So excited to be here and thanks all for coming. Um, so today I am going to be leading a little bit of a workshop slash more of an intro since it's only 10 minutes uh high level of how to vibe code onchain and specifically I'll be talking about how you can build a DAP in minutes using Cello's MCP. Um, for a little bit of context I am Sophia I lead developer relations at Cello. Um, and if I also do
a lot of tutorials about building onchain and talk about different onchain product ideas, so feel free to follow along. All right. Um, is anyone familiar with the Cello or the Cello ecosystem? Can I just get a quick show of hands? Oh, cool. We got a few. Oh, wow. That's awesome. That's really cool. Typically, I do a little bit of like an intro to what is Cello in case you're completely new. Um, but Cello is an Ethereum L2. We actually used to be an L1 and we recently transitioned to an Ethereum L2 a few months ago in case you haven't heard. Um, but really what we are trying to do is we're scaling real world solutions and leading a thriving new digital economy for all. So what exactly do we mean by real world solutions and why are builders coming to Cello to
build? Well, one of the biggest apps on in the Cello ecosystem is Mini Pay. Um, just another quick show of hands in case has anyone heard of Minipay or is familiar with Minipay? Cool. Slightly less, but still quite a few of you all. Um, so Minipay is one of the fastest growing stable coin wallets in the global south with over 7 million activations and counting. And it's a stable coin wallet, meaning you can save, spend um, easily with USDT, USDC, CUSD. It's designed for realworld use. And it's built into Opera Mini. So, Opera Mini is one of the most popular browsers in um Africa and it's also a standalone app on Android and iPhone, but it's really designed for
real world use because it's a stable coin wallet. A lot of the users on this wallet are um yeah, don't even know they're using blockchain. It's very consumer friendly, very uh new to crypto friendly. Um and on this wallet, we have dozens of mini apps driving real world adoption. So we have donation apps, learn to earn, fun games, anything you can think of. And a lot of our builders in our builder ecosystem actually build mini apps and they get to use leverage mini for distribution to the real world.
So as you can see uh it's really grown in terms of adoption over this past year which is super exciting to see and of course I'm biased but I think this is one of the best opportunities to gain real world users on your apps. Um, so as an ecosystem, we have definitely been growing a ton and representing a ton of different countries. And one of the really big reasons too is that we have specific tooling designed for building many apps in minutes. And that's specifically what I will be talking about today. I know this audience has a lot of technical background and developer background. That's probably why you're here. Um, but there are a lot of builders uh that exist outside of just the blockchain ecosystem. There are a lot of web two builders and even more than that there's a lot of people that
are interested in creating software, creating applications that maybe don't have as technical of a background but still have amazing ideas, applications, distribution channels and can really identify unique and good use cases that would also drive real world adoption. So one of our goals as the Cello ecosystem and one of my goals personally leading Devril for the Cello ecosystem is how can we make it as easy as possible so people with very interesting and unique and great use cases can actually develop applications get them live on mini um and leverage this distribution channel to create real world solutions um for all. So
I will be chatting a little bit of specifically how we do that. We recently launched the Cello MCP. Um this is a model context protocol and this MCP is specifically designed for any AI LLM like uh curs with if you're using cursor you can connect it to claude and different models. Um so it knows exactly how to connect with the cello blockchain how to build up apps and how to spin up apps in minutes. Um, before I jump in, has anyone ever vibecoded before or is familiar with vibe coding? Awesome. To give a quick background in case you're completely new to vibe coding or haven't heard of this term, uh, because of AI, it's getting a lot easier to spin up apps, um, or vibe
code, uh, or code in general. Um, so I think a lot of it started off with cursor where it's like you have your regular IDE, your regular terminal and instead of having to code and then copy that code and then go back and then ask some questions and debug, you have it all within um your IDE and you can ask it questions. It has context of your whole codebase. The next step is there's actual tooling like lovable, wind surf, replet, vzero that make it really easy where you can just straight with a prompt be like I want to build x y and z and it spins up um the app for you. If you've ever tried using some of those apps, you'll see that it's it can be really pretty. Uh it can make an idea turn into something that looks really nice, but they're not always functional.
And there's a few reasons um why they're not always functional. One, the current way that Vibe coding works makes it really great to build frontends, but if you've ever tried to make an actual functional backend, especially if you are not familiar with web development and maybe um aren't as familiar around state management and different trade-offs and how to actually optimize uh information about your users or data on your platform, it can be really hard to correctly prompt uh one of these vibe coding tools to know how to do that well. And so backend uh a lot of just regular web 2 developers have had a really tough time um creating backend using vibe coding tools to create
optimized backends and it's creating this unnecessary um complexity for new developers. What's really cool I know a lot of people here are onchain developers as you know a lot of the logic especially if you're using existing protocols already exist and you're using data that already exists on chain. So oftent times when you're creating mini apps or you're creating these types of apps, they're typically frontends, type scripts that just connect onchain via some API and that really unlocks possibilities for vibe coding. This actually makes it easier to code to vibe code onchain than it would be to vibe code a regular web 2 app or a regular um yeah just a regular app using like a superbase or some some other
backend. Uh so this is a super exciting opportunity for all of us who care about onchain developers. This is this is how we can pull in all those new people who are excited about vibe coding and maybe don't even know what a blockchain is, but we can tell them hey with this you can actually build with open data and hide the whole thing that is connected to a blockchain you know who knows. Um but with Cello MCP specifically what we have built is we have custom templates because a lot of our builders are creating like very specific type of things. They're creating mini apps for mini. They're creating identity apps that connect to self protocol. They're cing creating mini apps that are able and far caster. They have UI components.
We have existing UI components that connect to the Cello blockchain. And we have pre-built smart contracts that you can connect and which works for the majority of like 90% of our applications kind of can just use these pre-built smart contracts and don't fully have to code their own smart contr. And this is all fully functional with just a single prompt or a few prompts. Depends how well you prompt. Um I'll do a quick demo. I'm not going to walk through but I have a little bit of a video in case you want to follow along this. You can find this at docs.s.s.s.s.s.s.s.s.s.sella.org or you can follow our YouTube. There's a full 20-minute video where I show you how to install the MCP, the exact prompts I'm using, and how I spin up an app. So, essentially what I'm doing is I'm installing the Cello MCP locally in my
terminal. I'm opening up a cursor and I click add MCP. And now what happens is my cursor has all of this rich context about Cello, about interacting with Cello, about using those components. And if you've ever tried coding on chain without using an MCP, it doesn't really know how to code on chain. A lot of the LLMs don't have this background. Um, and it will be really buggy and it's a very painful experience. Um, in this tutorial, I prompted it to use Cello Composer to spin up a template as you can see here. And then I'm prompting it to use the composer kit UI to use different components that we've pre-built. Um, and then I'm prompting it to deploy a pre-built contract that we have already with third web. Um and then this is the what was ended up being
built. This is a 20 minute live uh thing. So this entire thing from setup to deployment to even publishing on Versal and spinning up myself only took 20 minutes. And what I created was a simple token claimer app. So you can go on here if you've never it checks your wallet. If you don't have uh any claim in your wallet and you're the first time user, you can press claim and you get you 10 claim tokens. So, it creates a token and a and a token claiming contract. Um, and you can follow the full step by step on our YouTube channel. Um, so that's all. If you're interested on in building on Cello or you're currently building on Cello, we absolutely love our builder community and we want to reward you and we want to
continue to see you build every month and continuing to improve. Um, we do have a flagship program called Proof of Ship. We run this program every single month and a lot of AI agents go through review your code as well as we have the community who vote on their favorite projects and you get a piece of the monthly prize pool that we have. Um so here's a little QR code if you want to sign up or register your interest and you can also follow Cello devs on Twitter to get all the latest updates um and all of that. So yeah, that's all for MCP.
[Applause] Yeah, I think we're done. Um, thanks for coming. I think you had a great overview of how zero to depth would look in practical and we have planned alpha longer format in Buenesirus at defcon where we actually have more hands-on practical session. So if you have any questions we're around. Thanks for coming.