Curvegrid 🛠 A 30 Minute DApp - Jeff Wentworth

foreign [Music] audience today it's really great really appreciate it uh hello everybody on the live stream and uh that's tuning in later on my name is Jeff Wentworth I'm co-founder of a company called Curve grid and this is a 30 minute dap so what we're going to do for the next 30 minutes is basically walk through building a sample dap and we're going to show you how it's possible to do that um faster and easier than it might be if you build everything from scratch um so basically what we're going to do today is is not only talk about building adapt but also some of the challenges that that you encounter building adap and then talk about some let's say bonuses that that you know might might help you uh um uh more broadly in your dap building experience so first of all as I mentioned my name is Jeff co-founder of curve grid um we're actually based here in Tokyo Japan um we have been uh in business since 2017 for six years and mostly we we tend to be in the background a little bit so our our customers tend to be uh blockchain companies or developers that are building um different kind of dapps on evm blockchains and really for the first time at this youth Global hackathon uh we're looking to connect with more individual developers in a much broader audience so you can see us here in the red coveralls uh we're here to help we have 10 people at the at youth Global Tokyo and um uh you know if you have any questions about building adapt in general not just our product but anything technical related design related or just about Tokyo in Japan we're here to help um so creating a Dap uh and and in fact whether this is a some sort of production dap or a hackathon like uh like this weekend there's a whole series of steps that you have to go through including um planning the back end the front end the smart contract uh we're going to talk about all of that and then we're going to talk about uh some of the other ways that um we're here to help you so first I want to talk a little bit about Multiverse multibass is multi blockchain as a service so um our whole theory is that this will this is and will be a multi-chain World um but blockchain is difficult to build on and so what we're really all about is helping you get to Market faster um more easily and ultimately doing it with with fewer developer resources um I talked a little bit about curve grid the fact that we're based here in Tokyo Japan we have a number of different solutions as well that that can help you so in addition to multi-core multibass we also have a multibass proof bridge and spreadsheet uh the latter two are actually former uh each Global hackathon projects that we turned into into products and we also have nft bot which is Shopify minting app for minting nfts on uh on Shopify so what is adapt we're going to go back to First principles or Basics and again whether you're building uh the next uh um uh you know decks or or nft Marketplace uh or or you're just hacking on something for the weekend this is what a typical dap looks like right front and back end connecting to a node provider smart contract um on the blockchain in the mix there as well you have a wallet whether that's uh non-custodial or custodial wallet you've got a database where multibask sits in this stack and makes things easier is typically between your dap front end and back end and your smart contracts and the idea is that you're actually having to build Less on the front end or back end and uh less of kind of the the core infrastructure we take care of a lot of that for you and so that's that's what multivass provides so we put together a sampled app that you can use as a as a base for your work this weekend or you know even even going forward and our dap is a nft Sprite maker you're going to see it in a moment um you know again if if you're thinking about uh putting together an application uh the first thing you want to do of course is ideate get your team together and then plan build and submit so throughout the next several Pages we have a QR code at the top and you can you can find this sampled app repo there we also on our uh on our website curvegrid.com have a uh blog post that we've put up with a complete walkthrough of this tutorial as well as other resources to help you help you get started uh in in building adapt so the planning phase is typically user stories design user flow you decide on your stack front-end and back end and smart contract [Music] um uh uh you know and then uh for the nft Sprite maker um this is all about one of the key things that we want to do here was allow people to free mint and you'll see what I mean with that in a moment um on on the front end this could either be used by end users or admins we can talk about that a little bit more and for the smart contract we started with the open Zeppelin wizard nft smart contract uh and and built out from there so here's our sample dap I'm actually going to go switch to it here you can see it's just running on localhost so it's called Sprite right and basically what it allows you to do is draw some sort of you know fun picture here and then connect your wallet we're going to do connect wallets come on internet there we go enter my password there we go connect my wallets okay I pulled up the wallet address and what we've done here is we're actually allowing uh we're we're actually with a custodial wallet paying the gas fees for the user to Mint so when I click mint here it's going to send the transaction to the blockchain and it'll show up a minute later once it's mined and there we can go we can see the Sprites and the token ID and the owner and and the time that it was last transferred at we could see some of our past Sprites if you want to try this out you can click on any of this past Sprites to load it back into the canvas and then you know continue drawing so this is Sprite right our sample and if our sample dap for for basically writing Sprites that we're going to be uh you know demonstrating a few different things here so what are some of the challenges you have when when um building adapt well the first is interacting with a smart contract right how do you how do you interact with the smart contract the second uh is around it in this in this example uh uh is minting the nfts and again the whole point of the sample dap is we want to Mint the nfts um uh for free for the user right so that they don't have to to spend gas to do it um and then the third challenge is listing them into nfts and the fourth one is managing the smart contract so here's the structure of our sample dap and I want to um you know want to point out that on the left you can see we have our uh you know a screenshot of the DAP uh as as I had shown in the the kind of typical dap structure before we have a front end and a back end the front end is written in HTML CSS and typescript the back ends written in go the front end is actually using uh two different techniques to get data from the blockchain so first of all the color palette is actually being pulled from the smart contract itself the second is that we're using something called an event query to actually pull the the table here the list of uh of uh of uh Sprites of past Sprites and those are all going through multibass to the blockchain and then on the back end the front end is also of course talking to the back end we have our multibass go SDK that's talking to our HSM transaction manager txm to actually mint for free the um the Sprites so you know what does like what does multibass do for you basically how would you set it up in a typical environment well you would typically have both a development and a production environment and the key differentiators here the key differences here are in your development environment you would have developers with administrative rights maybe your whole team of say 50 or 60 people that might be making frequent updates the environment and then in your production environment you're going to have your operations team with very limited access and updates for example controlled via CI CD so keep this in mind as we continue to go to go through so how do you get set up on this on the sampled app um first again you you clone the repo you sign up for multibass you set up your project and then you understand Multiverse middleware so signing up for multibass is super easy what you do is you go to our website and you click on get started and that will take you through a sign up process there's no credit card or anything needed just your email address and and name and and you're away um and as I mentioned we have a whole blog post an eth Global Tokyo developer package if you go to resources and blog that basically walks you through all the steps that you need to get to get started in addition for that we have extensive documentation including articles and interactive uh rest API reference as well so you'll be well well supported Okay so I've got my smart contract written I've got this cool like Sprite smart contract written and uh and now I want to interact with it uh how do I do that well um you know there's different tools that one can one can use but in multibass we've basically built that all into one all into one package so what I'm going to do here is I'm going to show you the multibass web UI and this would typically be used by developers during the development stage and then the operations team during the ongoing production stage to essentially um uh manage and interact with multibass itself so when you when you log in you're going to come to the core contracts page what you can see here is an interactive uh web UI that allows you to um uh to do a few different things first of all you get all of the static State variables at the top you can see the output here here's the color codes that I mentioned before that are coming from the smart contract we have the total Supply we have the symbol the name then we have all of our events from the smart contract and then we have all of our methods or smart contract functions basically what we can do here is is use this in a way to interact with the interact with the smart contract so for example in this function here get Sprite image URI if I come in here and I type in zero get method I'm actually going to get the data back from the smart contract and one of the Nifty Things we've done here is we've embedded all of the image data directly into the smart contract itself so the smart contract is actually rendering the SVG file directly so if I paste this data URI in here I get my beautiful Green Field with with the sun shining um but you could see I think how how sort of easy it is to really interact with your smart smart contract this way uh using the multi-mass UI the second way is via the rest API and again in addition to our documentation we also have integrated rest API uh functionality built right into the multibass UI here so you can see how how easy it is to really interact with um uh with the smart contract this way in addition we've got multiple sdks right now for in in beta for go and for typescript and again those are are linked from the tutorial page so you you don't need to build you know you don't need to build everything uh from Custom with the uh with the rest API the other thing that the final uh feature that I want to point out is that when you are interacting via the rest API we have full role-based access control with both users permissions course domains and a full audit log and that allows you to build either a front end or a back end directly on top of multibass so okay great um I'm interacting with the smart contract via the the web UI or via um the SDK of the rest API now I actually want to uh to build a little bit more Automation in there and what I actually want to do what we've what you saw earlier was we're actually paying the gas fees on behalf of the users that are are minting the nft and we do this using something called HSM which uh is basically a custodial wallet or you know quasi Hardware security module that allows you to programmatically sign transactions and sign messages on the blockchain and submit them to the blockchain at the moment we primarily support Azure key Vault it's a cheap and cheerful um uh basically a third-party custodial service provided by Microsoft Azure wallet service and in that tutorial we have very easy steps to basically sign up for an Azure account and then we have a Powershell script that in one shot allows you to to set up a key vault you then load it into multibass fund the HSM and you can interact with it via the um uh the rest API or or even the web UI very easily so I come back into multibus here I go to HSM and configuration what I can see here is my HSM configuration right this would have been um uh this is coming from again uh I would have been loaded in from Azure key Vault when I set that up and then I also have my transaction manager so I come into my HSM txm I can see all of my past transactions this was the one that I most recently minted and if I click into here I can see all of the transaction details including all the decoded function parameters and event parameters that were emitted from here so this is a very easy way that you know either if you're working on something that is not publicly released yet any and and so you know you don't want to confirm all of the data on etherscan or if you're iterating rapidly um you know you can very very easily use the um the web UI again to manage manage this so that's the HSM next how do I list the the uh the minted nfts so there's a few different strategies for this in general the first is you can iterate uh using smart contract functions through all of the um uh you know all the nfts one of the challenges there especially if I'm using something like the ERC 721 enumerable smart contract is it's very gas heavy the second way is uh events right and really this is the correct way you know in general to be um uh interacting with um smart contracts uh uh from a Dap off blockchain uh off of the blockchain the idea here is that essentially um the smart contract is going to be emitting event logs and you're reading those and then um uh using that that data to essentially drive your front end or your back end the challenge with that of course is that the smart the blockchain is eventually consistent and it's very very complicated to typically deal with this from scratch so you know often what you'd be using is a piece of technology called a chain indexer we actually have a chain indexer built into multibass um so if I come back to the the multibass UI here I can go back to my contracts I can take a look at Sprite right here and I can see all of my events and in fact if I just copy and paste this Sprite right there we go I can see come on there we go I can basically get a a really uh a decoded Json view of all of my event details including again the transaction that initiated it the parameters that were were in the transaction the decoded um uh uh event parameters time that it was triggered at and this isn't coming from uh it is coming from the blockchain but it's via our intelligent cache which handles things like chain reorgs nodes restarting um uh you know everything everything like that we have one additional feature built on top of that which is called event queries and essentially this is a way to aggregate this time series data and um uh uh report on it very very easily so again even though the DAP itself Sprite right is being driven programmatically this whole table uh is is being driven by an event query we can also go and take a look at that in the multibass UI if you come in here you can see very very uh it's very very easy to basically Define your event queries um you know either through this interactive Builder or just via Json that is events um next we have managing the smart contract I'm not going to demonstrate this in real time but essentially we also have a built-in gnosis multi-sig functionality uh that's that's built into multibass so what that allows you to do is essentially you can set up a multi-sig wallet either linked to an existing one deploy it to the blockchain and then if you set for example that multi-sig wallet to be the owner of your dap when you come into multibass either again programmatically or through our web UI and you say do safe mint if you select as your signer here that multi-sig wallet multibass will automatically wrap your transaction in a multi-sig transaction and either allow you to sign it via metamask or via your HSM and submit it to the blockchain so we've basically taken all of the complexity out of uh um you know away from dealing with uh with multi-sig wallets and multi-sig transactions bonus time this is the first bonus so our spreadsheet plugin as I mentioned this was a hack money 2020 finalist project that we then over the subsequent ones turned into a full full-fledged solution so what's the lowest common denominator for enter for for building any kind of application I would argue that it's a spreadsheet like there's something like 9 000 smart contract developers in the world something like a 9 million uh um developers in general 25 million actually sorry nine nine thousand smart contract developers 25 million developers but there's a billion spreadsheet users so what we actually have is we have a publicly available it's available on the um uh on the uh Google Docs or Google workspace store we have the multibass for Google Sheets uh plug-in and this allows you to essentially when you set your multibass and when you install it and set your multibass deployment ID and API key you can come in here and in real time uh you can actually query uh multibass and essentially the blockchain in turn so if I do Sprites query Sprites uh basically this is going to go out and call my event query and pull all of my blockchain data in real time into here and you can say token ID 0 through 7 if I come back to Sprite right and let's say I load in my my smiley face here and uh put a little uh pink hat on top and then go mint again it's driving my HSM to Mint that to the blockchain I come back to uh here and it's a spreadsheet so I actually have to to do something a little funky and delete this there we go put it back in because it's Google Sheets but what you should see in a second is I've got my token id8 that was just minted so this is another option and it's it's great for both debugging as well as let's say um you know your if you're a company your Finance team or you want to do any kind of reporting very quick reporting on your smart contracts we can do things like we can call any arbitrary uh on-chain function and of course you can use your uh uh you can use aliases as well which is another you know I think key uh key thing that helps you go a lot faster with multibass so we're going to do let's say uh balance of this address here and it's a spreadsheet so I can just use all of my standard spreadsheet semantics and you can see that this owner this this address here has not a balance of nine on my ERC 721 smart contract that's bonus number one bonus number two is nft pot so um multibass is our main product but also uh last year we released a Shopify nft minting app that allows you to easily create mint and sell nfts on Shopify either through lazy minting uh or also through importing existing nfts and it's super easy to integrate into your Shopify store shopify's logged me out but uh so I'm not going to show that to you right now but basically just add this into your store and um yeah you can you can immediately be building a building store that that allows you to sell uh sell nft so that's another option for this weekend actually if you if you are less into code and more into e-commerce we're happy to have you uh happy to have you build on uh nft pod as well super bonuses we've actually prepared a smart uh a public GitHub repository it's going to go live a little bit later tonight but if you're interested in it come come talk to uh come talk to our team with all of the uh or not I shouldn't say oh many of the other sponsor smart contracts pre-loaded with an easy script to essentially uh get you up and running in multibass um regardless we what you'll see in this in the sample tutorial repo is we've got a um uh we have a hard hat and truffle a hard Hut and truffle plugins for very easily loading your smart contracts into uh into basically multibass at the same time that you deploy them on the blockchain so I'm actually going to show you that now in real time so I have all of my minted Sprites here and I can see on multibass I also have for example a total supply of nine and here's all the Sprites that I minted I'm going to flip over to my terminal and I'm going to go yarn um whoops yarn deploy Sprite right testing so standard uh you know yarner npm script with hard hat and with the multibass plug-in it's basically going to go and redeploy the smart contract and relink it to multibass and when I come back in here you see that all of my old Sprites are gone because it's a new contract version and I'm just left with uh um uh you know my um uh what I had pre-set up okay great so in closing um we would love for you to use multibass we'd love for you to try it out this weekend uh we've been working with different companies for many years helping them get their daps to Market much much faster um but even if you don't use multibask we're based here in Tokyo we've got a big team we're a little bit visible with our red coveralls on so it should be pretty easy to find us we're happy to chat about multibass we're happy to chat about dap development in general we've got Engineers designers marketing and business folks as well so we're happy to help with any technical questions or any questions about Japan and and Tokyo and um I should mention our prizes so uh we're our total prizes are two thousand dollars we have a thousand dollars for first place second uh place is 700 and third place is 300 and for anyone that that just uh um that incorporates multibass in some way into your um uh into your project this weekend uh we're going to issue an nft that may be redeemed for physical uh merch later on again through Shopify so uh we'd love love for you to participate and join us so again QR code for the repos there our blog post has uh more details on on the tutorial and um thank you yeah so as we're using the API do we actually have to like necessarily plug the wallet to some Azure key Vault and then like I have that specific Plugin or can we just like filmed any normal Walnut and then hey at our riskal pair and perils though you can fund any normal wallet you absolutely don't have to use uh um you actually don't have to use Azure key Vault that's only if you want to use the HSM functionality so it works really well with uh uh metamask or any other web3 wallet as well so for example if I come over here and I go to the multi-token smart contract and I click deploy and um I let's say I you know just plug some values in here and I hit deploy I'll get a metamask pop-up asking me to deploy the smart contract and I'll confirm that and there we go smart contracts deployed and I can see the deployment transaction here and I can start interacting with it right away so yeah absolutely not a requirement to use that thank you so much all right any other questions I think we do have a couple minutes left actually so yes please do you have uh event or a book web books are coming web books are actually absolutely coming um something that might help you out there in the SDK is allows you to um uh to basically do polling uh for now um and again with our event queries where you know you're not waiting on the uh uh the blockchain node you're not you're not spending any uh let's say credits with node blockchain node providers yeah it's it's it's super easy often requested features coming soon any other questions okay well thank you very much Happy hacking