Celo Composer Build ETHGlobal Bangkok 2024

hi everyone I'm Sophia I'm the de lead at C and today I'll be doing a tutorial on how to build on cello specifically using cell composer C composer is one of the fastest ways to Kickstart your mobile DB development so why mobile well three out of four people in the world have mobile phones but right now a lot of dap development is optimized for desktop if we're only building for users who can access the blockchain Via desktop we're really missing out on building for the global majority and building applications for users who can actually access the blockchain and interact with it using their phones cell is a blockchain that's optimized for mobile and there's a few different reasons why that is um for a little bit of context cell is an emerging ethereum layer 2 um and it will be on the op stack and part of the optimism super chain a few features about cell is that it was created to enable real world use cases on ethereum um you can read all about the different features of c and specifically why it was built for this but some of the ones that I do want to highlight is that it's optimized for mobile first because you can actually send transactions using phone numbers mapped to wallet addresses um you can pay for uh transactions with super super low fees less than a tenth of a cent um super fast block times with 1 second block finality and you can also pay with transaction fees using stable coin assets it's important that we're building deps that provide value to Everyday users where they already are and one of the exciting things about building on cello is there's an opportunity to actually build for mini pay um mini pay is a stable coin wallet that is natively integrated into the Opera Mini browser I could explain more but instead I want to show this video that kind of gives a big overview of what the stable Co stable coin wallet is and um the power that it can do so a few little notes about Opera um is that Opera is one of the most popular browsers in Africa Opera has over 80 million users which is a potential distribution Network to builders who use mini so as you can see here this is what it will look like when you actually open up the Opera Mini browser and in the top right you can see there is a button with the mini pay stable coin wallet and it's natively integrated into the browser so you can click right there um and it you'll actually be able to access the wallet so this allows Builders to create like Regional specific apps that also tap into Opera's distribution but for building those apps cell composer makes it really easy and simple to build adaps that are optimized for this wallet and I'll go into explaining why that is a little bit on how to use solo composer is it has a CLI that you can um use just right in your terminal to install the template once you install that template you'll have pre-written Smart contracts and readymade front ends that interact with those contracts and the entire container is a responsive web app that's optimized for the mini pay wallet and you can actually end up testing it within the mini pay wallet to see how your app renders I'm now going going to do a demo on how you can actually build on Mini pay using cell composer if you want to follow along um with this demo and see the exact steps that I'm doing they're all written in docs. c.org um and you can check out our developer built on Mini pay overview to get started um the first thing you you'll need is you'll need an Android to download the mini pay Standalone app and iOS development will also be coming out soon so depending on when you are seeing this video that might be available but check out the docs for the latest updates um and this will give a bit of an overview on how you can actually uh download the Standalone app and create an account once you have an account created on your Android you can go to your terminal and actually install this command copy this command and paste it in your terminal to begin development um mini pay demo it's going to ask for a project name and then it's going to ask if you want to use hard hat as your deployment framework and then if it asks if you want a template you're going to say yes and you're going to select mini pay um and from here it's going to create a custom file for you from here you can go into your folder and open up that um template and check out the read me for the exact steps on what to do next um once inside you just begin to install dependencies with yarn or npm install depending on what you prefer and yeah um as a little preview of what's happening right now we have our react folder that actually has the front end framework for how everything works and then we have our hard hat which actually has the contract and scripts so that you can deploy them um and I'll be going into both of these in a little example of what this might look like and then just so you can get an example of what it looks like um I'm going to go inside the react app and you can do yarn Dev and actually begin to get a local version um of your app so far so wait for this to load and then right now I haven't actually added any of my local environment variables so that's the first thing that you're going to do um right after but here's a small little example of um what the blank uh minay cell composer template actually looks like from here I'm going to begin actually changing this so renaming from environment template to EnV and what you're going to do here is you're going to paste in your private key and your cellos scan API key for both the hard hat folder and for your EnV variables where is that right there um there so let's start off with the hard hat just so I can show how to actually deploy a contract what you're going to want to do is you're going to open up metamask and you want to ensure that you're connected to um cell Alpha Horas if you have any questions about how to actually add cell alpah Horas check out our docs Network information and then adding cell to testet to metamask and it'll give you all the instructions step by step on how to actually um add the alpha hores Network locally um from there you you want to ensure that you're using a developer wallet so this is a fresh new wallet do not use a wallet with existing funds on it or anything that you do for personal use this is just a separate wallet that you have for developer experience so right now I have a completely new fresh wallet that is blank um and you're going to get your private key uh by going to your account details and clicking show Private key I'll be doing that offline once you have your private key you're going to paste it right within your um private key inside of the hardh hat. EnV variable folder the next thing that you're going to want to do is add your cellos scan API key this will allow you to deploy and actually verify contracts straight from the terminal by using this um obviously I'm not going to show mine but just go to cellos scan make sure you create an account and then you can hit API keys and get that key lastly within your react app you want to get your um wallet connect project ID this is what you'll need to actually run the project and you can create one with this link right here and then you can copy it within a project ID and if you don't have a project yet you'll need to make one and you just follow the steps on the site and then you'll paste it back into um your environment variable here all right now that you have all of your environment variables added the next step is actually deploying a contract um the mini pig template gives you a sample ERC 721 contract using the open Zeppelin standard and you can check that out here on how it works um but essentially within hard hat in the contracts file you'll get all of the contracts that it comes with um and then then you can click on the deployment scripts to actually deploy the contract so here is how it comes I would change the initial owner to be your contract address um so for me that will be my devoy account and paste it in there and then to deploy you can find all the instructions um exactly on how deploy within the hard hat read me file so just copy all of the deployment instructions and I'm going to be making adding this pasting this all into a new terminal you're going to want to First make sure that you're inside the right folder and then do npx hard hat compile and then to actually deploy the contract you can do this deployment script and because you'll be on alpah or's test net this is how you can do it and of course if you're on Mini on cello on mayet you can do this deployment script instead um and yep I'm just going to ask if I want to confirm my deployment I'm just going to select yes and then it actually deploys oops as you can see I have insufficient funds and this is because I did not yet get testet funds from the faucet so that is the first step that you need to do to ensure that you can deploy um and if you're curious that also says it's all written here inside of the um mini pay overview so I'm going to click on the faucet from the docs and this is an overview of it and you can paste in what address you want to get and you can collect cell only if you want to receive C and then now I should have some c as you can see but if I want to get some test net tokens I'll hit this and then I can get some set test net tokens as well and if you actually want to get all of your tokens automatically added add suggested tokens and as you can see now I have this um another thing if you want to get more say I don't have cusd because the faucet's full you can just go straight to Mento which is cellos stable coin um de Central stable coins on cellos and go to their app make sure that you are on Alpha hor testnet and you can actually swap into cusd so here's a quick example just making sure my wallet is connected and then you can confirm the Swap and this is how you can get a bit of cusd token if you need I'm going to just wait for that to process and approve and then once it's confirmed you can see now you can see you have a little bit of cusd in your wallet now that we have some solo I'm going to redeploy my contract again confirming that it's on Al laora and it should execute as you can tell I'm using my minay dots script to actually deploy the contract you can also go to the alphora solos scan and then paste in this contract address um um that you just got and actually check out what that is and then finally the last thing that you can do is actually deploy that contract so um sorry the last thing you can do is actually verify that contract and then this is just happening on place your contract address and then you'll play place also your Constructor arguments that I had for my deployment script um where do I have that and then nwork alah Horus and you should be able to verify let's see has oh I pasted the wrong address you want to get your actual contract [Music] address and then the second address is my localized address and then see if that works and says successfully submitted source code for the contract and so now it's actually verified um so we can go check that out on alpah hor solos scan and follow that link and as you can see here now we can actually see all of this stuff we can read the contract read bits of it and you can write straight from here as well but what's even cooler is if we can do it straight from our front end so as we go back here into our Local Host um we can install connect our wallet and begin to see what this actually looks likey to alha Horus and then now that I have connected my wallet I have a blank canvas for my mini pay project shows my um wallet address and then you can do a few different functions like sending money to your own address signing a message or minting an nft so I'll just Show an example of what that would look like um signed a message sending some [Music] money and then now you can get the transaction completion check that out there um and then lastly minting an nft and once it's completed we can refresh render and actually see the nft that you just minted all on there so this is like a blank little canvas to use but what's really great is you can actually take this link and start testing it within your mini site tester um so what I'm just going to do is in a new terminal I'm going to paste in rock and this will actually give you a local URL that you can use for for uh site testing so follow this link open it up visit site and as you can see it's the same site uh as well but you actually have a link that you can pass on and you can take that link and actually deploy it within your app um for now I want to show a quick example of what this looks like and then I'll pull actually pull up my Android phone and test it out yourselves so essentially when you open up the mini pay wallet inside of your Android you can check out this whole dap showcase page and then click on your profile and then actually right here click on developer settings and if you don't have a developer settings you'll probably have something that says version at the bottom and you want to click on version multiple times about sevenish times until you become a developer and then that'll put you in developer mode click on developer settings and then you can load test page and actually um yeah load the test page and then you can paste that link that you just created into the mini pay site tester and it will open up the site tester straight into your browser where you can begin uh testing that out within mini pay and a few trade-offs that you can see here is there is no uh connect wallet button in the top right so um our initial rendering has that connect wallet but here it's actually hidden within this UI so those are just some of the changes so that gives like a little overview of how to actually start using solo composer and a quick start to begin experimenting with different mini pay app ideas and use cases um and very exciting to see whatever you end up creating but what I would did want to dive into since we have a bit more time is actually some of the actual practical ideas and use cases that you can begin creating uh so one thing to note is that mini is a stable coin wallet so it may be different from how you typically think about building daps this is an entire dap ecosystem and uh you really want to focus on what are some hyper specific specific reasons why people might need to use crypto within um specific regions so this is definitely not a comprehensive list but this is just some ideas to get you started maybe that's personal finance maybe that's interacting with Merchants um or anything like B2B uh maybe this is using gift cards for like a local area or coupons maybe this is billing maybe this is microw work and earning stable coins for actually doing a task or an activity so there's a bunch of different use cases uh that would make sense on a minay app to this distribution Network um so you really want to think about who are the specific users that you're building for who's the target audience that's actually using the operam mini browser and who's going to be interacting with the stable coin wallet and what are the type of maybe onchain applications that they would be interested in using and that specifically solve a problem um that these users interact with every day a few little criteria you want to think about when you're building a mini pay app and things that we as judges um do to evaluate projects during um hackathons and different demos like that is uh one obviously a technical evaluation is your project doing what it says it does and then idea and relevance so is this idea useful for an important part of the mini pay audience um and finally uiux and design if you started testing out mini pay apps on your Android and begin testing the different depths you'll realize that the user experience is super clean and simple um a lot of the users who are interacting on the stable coin wallet are new to crypto and aren't um maybe don't know much about crypto or blockchain and so how can you design the uiux particularly for those types of users another thing to note is that if you're you are participating in the hackathon and don't have an Android phone don't worry this is a um you're just trying to build a responsive web app and if you can create a link and even if it doesn't work within the mini pay site tester that is okay really what we just want to see is people experiment with different ideas and different use cases um that may make a lot of sense for the mini pay audience and really what we're excited to see as judges is what what are the exciting ideas that you come up with why are they relevant what problems does it solve for a specific subset of users that maybe we haven't identified finally the last thing to note is if you are applying for these bounties um and you do not have an Android and are not able to test on Android that is okay that is not a strict requirement to apply for this bounty rather what we are trying to see is what are the specific problems that your app aims to solve for what specific subset of users so we're really interested in seeing the exciting use cases and ideas that you all come up with and um even if you're not able to demo it within the mini pay site tester that is okay rather we're just trying to see a responsive uh web app so something that does look good in a Mobile screen when you pull it up on a mobile phone browser since we um most of the users that will be interacting with the application will be on mobile another thing I did want to mention is we have a second Bounty and this is the best open- source tool built on Cell to um so cell is going to be uh an L2 and we will be announcing um our official launch date very soon um perhaps depending on when you're seeing this video you'll already know but we have launched alpah hor L2 and so if you want to begin interacting um with our uh new chain and if you want to test out different things such as inability tooling um wallet social connect uh fee abstraction different open-source tools that are now possible on our L2 uh this is definitely the Bounty for you so the design landscape is very big here for um for a reason and we really want to see what cool Innovative tools and infra on our test net um on our LT test net that you can build so we're really excited to have you building on C and um really excited to see the different use cases um different tools different things that can happen