[Music] Good afternoon everybody. Uh thanks for coming to our workshop today. I'm William. I'm uh one of the co-founders of uh Curve Grid and we have a developer platform called uh Multibbass uh that lets you build your app faster. Uh so I'm going to take you uh through today uh installing and setting up our sample application uh which is a good basis for doing a hackathon project.
So can I ask first of all has anybody used multibass before? Okay, everybody in the front uh anybody who has not used multibass before? Okay. So our uh team is mostly based in Tokyo which is close to Taipei here. So we have a lot of uh developers from the community in uh Japan here uh today which is uh awesome to see.
So I'm going to leave this uh link up uh the QR code for this link up here. This is the application that uh uh is good for getting started with uh Multibbass. And uh I hear the Wi-Fi is not spectacular right now. So if you can't connect to it uh then come find us and we can uh walk you through this anytime or just make a memo and then you can grab it later. So, Multibbass for those of you who haven't used it before uh sits between your application and uh blockchain node provider uh and gives you a number of tools that make it uh easier to build your app uh and get things done faster and more efficiently.
This is kind of what the UI looks like. And the idea is that it's easy enough if you're a beginner, you can just uh paste your smart contract directly into our UI and upload it and be ready to go. Uh or if you're an advanced user, you can uh take advantage of uh some of the uh other features uh to iterate on your application and and skip other steps that you might uh need to otherwise build. So some of the key features include cloud wallets uh which allow you to sign and automate transactions using a secure uh API uh secure uh wallet in the cloud. Uh transaction management so you can find out when things have happened.
You can get a web hook call back to your application. So uh say you've minted an NFT and uh you want to send a user to your email that it's done. Uh you can do that using the web hook. Uh we do event indexing. So as you know you may need to query event history uh and we give you an easy way to access that.
Uh we have some plugins such as uh hard hat which uh I'll show you today um that'll help you deploy and iterate on that smart contract. And then we have SDKs in Go and Typescript. And if you want something besides that, we might not have it ready for the hackathon, but come talk to us and uh you know, we we might be able to add it if you have another language you prefer to use. So the sample application has two parts. Uh it's got a front-end folder which is a Nex.
js uh application. uh and it uses the reown wallet kit uh to provide the connection for your user uh to connect the wallet and connect to your application. And then we have a folder uh called blockchain uh which is where we have a hard hat uh installed and configured to work with multibbass. So you can use your normal hard hat deploy and then the smart contract will be configured and set up to work within the multibbass UI and uh API suite. So for the to get this running uh you're going to need a multibass deployment.
Uh you're going to need to create a reown uh project. Uh and then you'll want a notepad to uh write down the information that you get from those to put into the configuration uh for the sample application. And feel free to follow along if you've got network access. So uh console.curvegrid.
com uh is where you go to sign up for the Multibbass account uh if you don't have one already. Uh, and I do. So, I'm just going to go straight over uh to that. Uh, then from here you can create a deployment on any of the networks that we support. Uh, and there are a handful uh that we're using um during this hackathon who are also sponsoring the hackathon.
Uh, so let's call this uh Global Taipei. One second. Uh and for network uh one of the convenient networks to use is curve grid uh test net. So we have a built-in faucet for this account uh and managed ourselves and so you can get um yeah uh free free tokens to uh use it. And if you use it with the sample app, uh you can even skip some of the steps because we'll automatically uh deposit uh tokens to your deployer account.
Uh but today since uh we're working on the hackathon, let's do Cello's Alphah Horus uh test net. And then uh ignore my secret uh custom plan here. Um but you'll go to the free plan. Uh select that and then click uh create. Invalid request.
Is that a network issue? Uh, let's try this again. Okay, good. So uh right now it's uh provisioning our deployment on the Cello Alphahores test net and then we'll click into it uh over here and you get our dashboard. So now we're going to head over to the admin section and do admin API keys.
We're going to create a new API key and it'll be an administrator one. Uh you can call it uh whatever you want. We'll call it sample app and create. Uh and so we're going to copy these things down. So here's our API key.
Can everybody see this? By the way, is the is the monitor do I need to zoom in a bit? Go. Oops. Okay.
So, oops. So, here's our uh API key. And then we also need the deployment URL. Okay, great. So, now that we've got those two things, we're going to come over to Rion.
Uh, and you'll sign up here. Again, I've got an account here, so I'll just log in. And then from here we will create a new project. Uh we call this type A as well. We're going to select wallet kit and JavaScript.
And from here we get a project ID. So I'm going to copy the project ID here. Put it down in our notepad. Okay, so now we have the three pieces of data we need to get the sample app running. So we're going to hop over to our other terminal uh and we're going to clone the sample app.
So let's just make sure we have the URL here. So this is the sample app. And if you miss anything here, you can always come back and read the read me for the instructions to do this. So, I'm going to clone this here. My secret power is uh wired network drop.
So, we're going to go into multibath sample app. Uh, and then we'll run uh let's just make sure we got a good uh npm version and then we'll do npm install. Uh, so this will download the dependencies of course for both the front-end part uh and the blockchain part. Uh, kindly ignore the warrant deprecated warnings. Uh and then once it's done installing uh it will prompt you to provide that information you got to do the configuration.
So we'll hop back over here. Uh first we've got the deployment uh URL. Okay. So first we'll say continue. Uh that's going to copy over the configuration templates.
Uh so we take the deployment URL then the API key and then our reown project ID. So it's going to go and it'll create the other API keys uh that you need. Uh it's also going to set up your course configuration. So you can use Multibbass directly to power your front end. Uh and you're going to need that for the course to allow it to make the requests.
Uh and then uh we're also going to go ahead here and generate a deployer wallet for you to use. You can replace this with your own one. uh don't commit your private key obviously into any repos or uh share it on stage like this if you're going to use it for anything important. Uh but now that we have this uh address here, we'll copy that and come over to the Alphahorus faucet. I'm just going to give it a quick reload in case anything's missing.
I'll paste that in here. So that's uh that zero xf and claim some cello. So we should have some uh cello in our account now. And then we're going to and it'll it explains what you need to do. Oops.
What you need to do next. So we'll go into the blockchain folder and do uh npm run uh deploy voting dev. Uh and what this is going to do, let's take a step back for a second. So uh in this folder you have a uh contracts folder and then this uh smart contract which is done for uh voting uh on chain and so we have a couple functions vote uh clear vote etc. So, we're going to run the uh npm run deploy voting dev and it's going to use that uh private key we just funded.
It's going to compile it uh send it to the blockchain and then also use our multibbass API to configure it in the multibbass system. So, fantastic, we should have the contract there. Let's just take a look over uh at our deployment. We're done with API key. So, we can close that.
And then in contracts uh you have two sections here. One is onchain uh and that's the ones that we've deployed. The other is library. So that's ones that you've saved in the system. And then you can deploy it just by referencing uh the label.
So we're going to go to onchain and see that we now have here uh the voting contract that we just deployed. Uh the functions are here. you can call them from within the UI uh or the API and we can see if there's any uh events that have occurred. So now that we have that, we'll pop back over here, go to the front end, and do an NP in uh npm rundev, uh which is also explained to you in the installation. And so it's running here on 3000.
uh if you run front-end apps, you may find it uh incrementing to a different port like 3001 or 30002 if you have other things running. Uh just make a note that if that happens, you'll have to set up your course configuration to point to the right port. Uh but now that we have that running on its normal uh default port, we're going to hop over to localhost and give it a second to launch and just give it a quick little refresh here. Uh so I have a you know a wallet here that has some uh Cello on it and so I'm going to click here and make a vote in our sample app and it's going to pop up. I will confirm that and uh it's going to tabulate that and now I have one vote on the app.
Uh and then so let me go over to the uh let's vote uh change our vote to a different vote. vote number two and confirm that. Uh so now we've got uh a vote here and uh it's showing you the events here. Um and then we'll also see if we refresh here in in multibbass you have the um the events here. So what can you do with this?
Well uh this is a this is meant to be a good getting started and scaffold for your project. Uh you could even just use the blockchain part and uh remove the uh front-end part and build something else from scratch. Uh you could rename uh the contract and use it for something else. Uh let's just do a quick uh iteration here. So uh if we go back to blockchain, we're going to edit contracts simple voting.
And let's say we want to allow you to do uh multiple votes. So would decide not to erase your old vote. Uh and then we do another uh npm uh uh what was it? Deploy. Sorry, give me a second here.
Deploy voting dev. Uh this is going to recompile uh update the new contract. It's going to uh link it in multibbass. And so if we refresh our app, we have a a new contract here. So it's reflecting the state of that.
Uh and if I vote vote, I can make a vote here and then I can vote again and it's going to keep hopefully my last vote. So that's how you will iterate on your smart contract development using Multibbass in the sample app. Uh so that's uh that's the uh yeah basis of uh of multibass and and what we have here as I mentioned uh we're work uh we support uh a number of different chains uh four of the chains that are uh participating and have prizes uh in uh this hackathon are Cello, Polygon, Arbitum and Zirket. And so if you use one of those chains with Multibbass, you have a chance to win uh a prize with us. And that's uh that's it.
So wish you good luck with your project. Uh any any questions? Okay, great. So uh you can get in touch with us uh here. Uh besides the sample app, if you don't want to use those or if you're looking for other code, uh check our getting started documentation uh in uh on our website.
Uh and come by our booth. Uh we have uh fuzzy ears to give away. Uh we're sending postcards, physical postcards anywhere in the world if you like. Uh and we're here to support you with your project. So, good luck everybody.
[Music]
Automatic transcript — names and jargon may be misspelled.