Build on Celo - ETHGlobal Brussels 2024

[Music] hey there this Workshop is about building on cello in this Workshop I will talk about the different technologies that are available on cello that you can use to build your projects I will also share some resources that might help you and also talk about the bounties of for the hackathon at cell we are building with purpose and we are building for bons we want to unlock the digital e economy for billions of people worldwide with cell cell is a AVM compatible L1 and we are soon going to be an L2 based on op stack we built for ease of use we have mobile Focus gas is payable by tokens meaning that you can use esc20 tokens to pay for gas even if you don't have the native currency cell and this is possible with EOS as well which means no pay mus are required cell is carbon negative recently there was a hard folk which uh due to which all the transaction fees uh that are paid for the transactions are uh redirected to an address which is acts as a carbon negative fund which funds projects in the carbon negative space this is an overview of the cell ecosystem you can find a lot of similar uh familiar names here uh some of them might also be sponsoring the hackathon so feel free to use them in your projects as I mentioned cell is going to Wi in L2 and this this is the overview of the road map uh cell rollup uh we are planning to roll out the cell rollup uh the data availability layer the decentralized sequencer uh the test net and then the M net you can uh follow up on this uh by having a look at the Forum which is at forum. c.org We also do Twitter spaces on uh the cell handle we bring in folks uh from the industry and talk about l2s with them um minay is a wallet which is integrated inside the offer mini browser um it's focused on stable coins um and it's very affordable and it's built on cello so all the transactions are affordable very fast and it's designed for web3 access the wallet is designed in such a way that people who don't have much information or knowledge about web3 can also use the wallet because uh it acts like a venmo venmo wallet why you should be building on mini mini has a massive user base it boasts over 80 million plus active users and provides a vast potential audience for your T imagine your da is live in an app which is already installed by 80 million users seamless user access mini pay integration with Opera Mini browser is streamlines on boarding right anybody who has the mini uh mini Opera Mini browser has a mini wallet with them and along with that that comes your apps as well reduce customer acquisition cost because you don't have to make your customers install any new apps because they already have it in the phone which means they can get started using your tabs inside minay right when you go live inside mini and over 10K new users are added to minip every day which could potentially be your users as well which is why you should be building on Mini has already uh crossed 2 million users uh and uh on its way to like 3 million now so let's now talk about how to build on MIP to quickly start building on cello and on minay you can use COC composer C composer is a CLI tool which lets you initialize your project and it also includes a template for minay so we're going to use C composer in this video to initialize a minay project to start working with cell composer we need to install C composer as a global app global package so we're going to use this command to install set composer once you're done installing Sil composer we can use the npx command to use the minay template create and the template we want to create is min now all we have to do is give it a name so I'm going to give it a name called Global demo and that's it now we can go into the folder and install package using yarn this will install all the dependencies of the project once the packages are installed uh we can run the project so we can use the command run react app before I run the command I would want to show you so if you open up uh the project you will see that it's a monor repo if you open up the package folder you will see that there are two folders react app and hard hat hard is for all your contracts that you would use in your app um you can go that inside that later react app is an xjs app uh with the pages router um and some code related to uh some initial functions that we have created for you here so now let's run the project uh so if you go to packet Json you will see that from the top level of the project we can use these commands to run the react app now this should start the app at look close you can see now um there is first thing that you would notice is that there is no connect button it connects to the wallet directly there is no connect wallet button that is the experience that has been unlocked by minay and even as a web tab it just connects to the uh injected wallet now since we have the front end ready a sample front end Let's uh install the mini app and see how it looks inside mini mini app is Android only and if you're developing on your laptop you would want to use an emulator so for that you would have to use Android Studio you can go to Android Studio website and in install Android Studio which will also bring in the Android uh emulator with it and then you would want to install uh the emulator with Google Play Store available so I've already done this so I'm going to use the command to open it up this command basically starts the Android emulator uh the one which I have is pixel 4 Once the Android emulator is up now we need to install the uh minay app but minay app is actually not a standalone app so we open you need to download the Opera Mini betab browser and then we can get access to minay so for the instructions for that you can go to do.org you can click on developers build on minay and overview so the first thing that we have to do is uh install Opera Mini beta so we can go to Play Store and we can download Opera Mini beta once the Opera Mini beta browser is downloaded you can open it up once the app is up we can copy the link to access minay so we copy the link and then we can visit that link here in Opera Mini beta once you visit the link you will be given the welcome screen of uh minay and click on next and see all the features of minay and now you can sign in with Google once you do sign with Google it will try to find an account if there's already one if not then it will prompt you to enter your phone number and then it will give you an onetime password which you can use to complete your on boarding I'm going to restore my account here uh one thing that many will also ask during onboarding is for your pattern or your fingerprint just to sec cely lock your wallet you can now also select your display currency you can either have the cusd as your display currency or you can just go with dollars and this is how the interface of minay looks like now uh before going to start the tab we can go to settings and we can go to about and tap the version 10 times after tapping the version for 10 times we now have the developer settings enabled and if we go to developer settings we can enable test net the reason we do this is because we are usually building projects in deset in hackathons so this is how you enable the developer settings now what we can do is now we can go to the explore button here we can go to the last app in the export section called site tester now the site tester can open any URL uh belonging to a web3 app inside the minay wallet and it will inject the wallet uh into that tab so right now we have our project running on Local Host how do we get the project on a link which can be accessed by the site tester for this we will need an inro enrock will basically allow us to um share our Local Host via a link so uh you can follow the instructions uh to install enro and once you're done with enro installation um you can run the following command to share your Local Host with uh with minay app once you tap enter the command you will get a link which you can use to visit by minay once you hit go it will visit the app you might get this warning but you can click on visit site because you know that this is basically your Local Host so now we can see that we can see our app here in um the minip wallet itself and this address is the address of the wallet um that is the mini wallet address now you can click on this button uh to send 0.1 cusd to yourself and the uh currency of this wet is cusd and also the gas fee currency is also C USD so you can click you can create such uh withdraw request but buttons or transfer uh buttons uh using uh very quickly uh in the front end and this is all already shipped with along with the template um the minip template the DAP can also request to sign messages uh to the m wallet which then have to be uh signed VI the pattern or fingerprint lock and you can also mint nfts this is also something that is shipped with uh the template itself so now let's dive a bit into the code um this is the sense USD function uh which is being used to send CD to other P wallets basically using VM here and we are creating the world client and we are using the custom transport with window.

ethereum so the the site that is open my site tester uh window. ethereum uh is injected the wallet is injected by window. ethereum to the site so pretty pretty much the same as uh injected uh browser wallets we then get the address of the wallet connected and then we can uh send transactions using the world client so we are using we are since CD is a token we are using the transfer function on the token the two address which is the wallet itself uh from here but that can be changed by you and the amount in we which is the amount to transfer once the trans this will give us a transaction hash then we can wait for the receipt the waiting for the receipt will basically mean that the transaction is confirmed and you can now check the status of the transaction so let's try to do that um if you click here you get a request to transfer this request right now is in the sample app is uh to transferring to the wallet that is connected so this the wallet is sending this is a request to send 0.1 USD to yourselves um every every time there is a use of a private key you will have to use the pattern or the the passcode of your lock screen once the transaction is completed you can see the transaction hash here so this is how you can uh work with uh you can build app quickly using setup composer you can quickly initialize a minay app and use it inside minay um we also have a lot of code Snippets uh that you can use to quickly uh iterate over your D if you go to B minay and code Library depending on the library that you're using uh for set composer we are using YN and VM so we can keep the tabs as this and then uh you know let's say if you want to check C USD balance of an address then the code is already here all you have to do is just copy paste it and you'll be able to uh quickly and easily uh check USD balance of an account if you want to quickly check if a transaction succeeded or not then you can use this uh we are already using this in the current example where we get the receipt the only extra step is checking the status of the reer if it's success then the transaction was successful um maybe in some case you want to estimate gas for a transaction and you want to estimate that in the cell uh token and not C USD then this is how you would do it however this is is something that you might not come across because the main currency of any pay is C USD so in case you want to do gas estimation in cusd this would mean um this would be used in a case where um let's say you have a field where the user can enter an amount of CD that they want to transfer or swap or something like that when they click the max button you can calculate the gas that would be required for the transaction and subtract that from the value that the user already has in order to give them the real max value that they can use uh in their wallet because when they perform the transaction a a small part of that CD is going to be used to pay for the gas of the transaction and this is where you would use this SC to estimate the gas to find out how much value needs to be deducted from the total value the user holds this is the gas price uh in CSD um again this is related to the Gas part uh to figure out how much fees will the transaction cost and we have all the entire two Cod Snippets combined here and this is how you'll be able to basically estimate uh the proper amount of tokens the user has access to um after they can do the transaction with USD um your dap can also use mini pay for numbers to resolve to addresses so uh this is the code to resolve basically take a phone number and get the mini pay wallet address um so for example the wallet the minay wallet is um built with ux in mind so people are you people in Mini would expect to just use phone numbers and not actually evm addresses and this is why if uh the DAP inside site uh inside mini also leverages this technology then the experience is pretty seamless because the person who is using the app probably does not have any clue of EPM addresses so better to avoid it uh and this is where this code can be used in order to take in the phone number from a user which could be their own number or someone else's number and then resol to address and this can be uh powerful because the experience would be very seamless so that is pretty much it about the building on minay um so to conclude um minay uh DBS are pretty much web DBS but uh they have some special features like um the the wallet gets connected there is no connect wallet button um the process of signing the transaction is very simple um and the wallet itself f buil for user experience which means there are there is no involvement of evm addresses or at least in the front end there is none which is why we would expect that you can build a app which also leverages the same technology and keeps the user experience simple for them next up we will look at some ideas that you can build use on minay some ideas and use cases you can build apps in uh personal finance space you can build stable coin yield apps you can build apps for merchants B2 right now there are not many apps inside minay which can enable accepting payments from others you can build gift card coupon apps you can build building apps inside minip and you can also build a microor Marketplace none of these apps um actually exist right now inside minay which is why there's an opp opportunity to build one the second technology that I might want to introduce is the sc20 Fe currencies which I briefly mentioned before uh this is a screenshot from the cellos scan Explorer and as you can see that the gas fees can be paid in as20 which means tokens like usdc and usdt can also be used to pay for gas currently you can use see cell dollar celluro cell real usdc and usdt as tokens to be used as gas in your TS imagine you have a user who is on boarded using usgc and they don't have any cello in their account they can start using their usdc without acquiring any cello from any exchange uh and just start using cell right the cello blockchain because they can pay for gas in usdc same goes for USD as well how to use it so this is uh the basic transaction object where we have the basic Fields uh which is the from uh the transaction sender the two which is the uh contract or the address that might be receiving some tokens the data which is the information about which function to call and the arguments but here we have an extra field called fee currency this is the field that enables paying for gas in erc20 tokens in the Fe currency field you mention the token address that you want to use to pay for gas right so if you specify the usdc address then you will be able to pay for gas using usdc and if you specify the token address which are white listed uh then you will be able to pay for gas using those tokens as well we have a guide IND dox and I also have a small uh course uh demo to show you uh so let's switch to that here I have a sample nextjs app uh ready to show you how Fe currencies work and um if you are familiar with using the VM Library which I highly recommend for using um because VM is the only library that supports Fe currencies right now on Cell um you'll see that there is this function called send transaction when you specify the uh two address you have the data field where you encode the function call you specify the chain which can be sell alha Hors for test net and cell for main net and then you specify fee currency here I have inputed the address for stable token if I go there uh what we do here in in this project is that if the environment is test net then the address for the stable token is different and if the environment is main net then the address is different so based on whether your uh next year's project environment is test net or main net uh the respective addresses will be used that's the only thing that you need to add you will be using the rest of the code anyways to uh transact on Cell you only need to add one field which is called fee currency and input the token address here and then uh I have this uh sample demo app here open mini pay which can be used uh so for example if I click on send one usdc here it will trigger this function where I'll be sending one usdc uh and if I hit send the transaction will be sent um let's wait for it and check on the Explorer or to see which uh fee currency was actually used so here I have the address here open you can see 9 seconds ago I click here you can see that CD was actually used for paying cash all the hacker hackathon resources are available here at the single link um if you scan this QR code you'll be able to access the slides and also resources and uh links to the different parts of the documentation that might help you doing the hackathon we know you will need faets as well which is why you can access for. c.

org for testet tokens like cell cusd curo Etc and if you want usdc you can go to for. circle.com and select cello alphus there we can also fulfill large test net token requests uh feel free to come to our booth and uh request it talking about the bounties uh best mobile app first place gets 3,500 usdc second place gets 2,500 usdc third place get 1500 usdc uh by best mobile app we mean that you have to build a app it could be a web app or it could be a mobile app which has to be uh responsive and it should be accessible VIA minay best use of stable gas currency uh wherein your app is able to uh leverage the technology of paying GH with erc20 tokens if uh first place gets, 1500 usdc and second place gets 1,000 usdc uh here are some other uh sponsors of the hackathon which are also available on Cell we have block Scout layer zero Unis swap safe Dynamic hyperlane cph chain link XMP Circle and metamask feel free to use these Technologies and incorporate them into your projects as well in order to be eligible for their boundaries as well all of these Technologies are available on Cell lastly if you need any help during the hackathon uh feel free to remember the faces reach out to us we will be around the venue available uh for you to provide help and if you're not then you can access or try asking questions in the partner cell channel on E Global Discord thank you [Music]