Fuel 🛠 Building a Dapp on Fuel - Sarah Schwartz

foreign [Applause] [Music] to the fuel Workshop building adapt on fuel joining us today is Sarah Schwartz who will be taking us uh talking us through this session and with that I'll pass it over to Sarah to introduce herself and get the session started bye thanks uh yeah so my name is Sarah Schwartz I'm a developer relations engineer at fuel labs and I'm going to be walking you guys through the basics for how to build a full stack dab on fuel or fuel stacked up so first of all really quickly what is field fuel is a modular execution layer so that means you can execute on fuel and settle another L1 like ethereum and what makes it really different from other Roll-Ups you might have heard of is that it uses the feel VM instead of the evm which uses a utxo model that allows for parallel transaction execution so it's much faster medium so the basic field terminology you're going to want to know as they're going through this is when I say fuel I'm referring to the field of blockchain sway is our domain specific language it's a rest based language so we don't use solidity ill Fork is sort of for fuel orchestrator and it's the equivalent of our code for rest or npm for node and we're going to be using that to create a new project and build it and fuel up is our triple chain manager so you can use this to install and manage versions of fork and fuel core and then feels is our sdks so we have rest in typescript sdks and the name comes from like eager's Js so this is sort of what I talked about earlier but it's just for comparing what you might be familiar with in terms of that architecture with the evm versus on fuel so instead of solidity you sway when you're developing and deploying contracts and for the evm you might use hard hat or Foundry but for field VM use fork and feel it our sdks are called fuels and again it's for rest and type script and we have our own indexer Service as well so in general when you're developing with fuel you're using tools that are all developed by the fuel Labs team instead of a bunch of independent tools so solidity as you probably knows that OG language for the evm and it's been there for us for a lot there's a lot of cool projects that have come out of that but it can sometimes feel like a Minefield for vulnerabilities and really hard to get up to that level of like Pro solidity developer will sway it's based on rest it's for the field VM and it's really built with lessons from learned from solidity in mind and designed for a really good developer experience in general solidity you can really only write contracts with sway there for different program types you can write contracts libraries scripts and predicates and I believe there's yeah the Bounty out that is just for predicates for the checkup on so here's your typical hello world contracted solidity right it just has this public greeting there's a string called hello world and if you're familiar with solidity you'll know that there's a getter function that's automatically generated and here's what that contract looks like in sway so there are no uh hidden functions in slave sort of like what you see is exactly what's in the contraction what's available so we have to write our own getter function here called get greeting and instead of just declaring this persistent storage variable anywhere in the contract that's outside a function you have to declare all persistently stored variables and say in the storage right here so we're saying we have a variable called greeting that's going to be persistently stored a string with 12 characters and it's hello world and when we access this reading variable we do it through the storage object um and so this is really handy for preventing namespace collisions so you don't have to worry about like if you wanted to name a variable inside this function greeting because this persistent reading storage variable is stored under storage dog reading so a little recap of what we just saw of solidity is you know based on C plus plus python JavaScript sway is based on res syntactically um and solidity functions are not pure by default you add the tier a keyword if it's pure in view if it's view only in sway they're appear by default and you have to use this like storage read or storage right annotations if you want to uh access persistent storage and like I said earlier literally they're hidden functions generated sway the contract tell a simple story you can put in state variables and solidity sort of anywhere in a contract except for inside a function and and sway they are all neatly organized in the storage block and again they are namespace so you have to access them through the storage keyword another huge difference of solidian sway is that sway tries to reduce the number of global variables there are like so keywords that you can't touch and we provide a lot of stuff through our standard Library and I'll show you an example of what that looks like so when you're creating fungible tokens in slay if so this would be something like the equivalent of erc20 you could actually use a function from the standard library that mints native tokens which means that you can send them in a call just like you would send eth in a call for ethereum or Matic in a call for polygon so here's what that erc20 contract might look like in solidity and in sway we had this standard library that is um it just comes out of the box so if you're familiar with react it's like how you can pull in use state or use effect from react you can pull in any function from the standard library or any concept from a stand Library out of the box so we're pulling in this mint 2 address function and we can mint native tokens out of the box to an address and for receiving tokens in solidity you'd probably check this message dot value um variable and again you know it's if you're if this is more ethereum you know that this would be or the C only asset you can send this way you can send any asset so um we actually have these two standard Library functions uh message asset ID and message amount and you can check for the amount sent in a function call and what kind of asset all right so now you have just like sort of the general background of things you can do Slade and developing on fuel we're going to start uh writing a really short contract and really brief front end um it's gonna be a really simple game so to get started you're going to have to install fuel up which is our tool team manager so if you go to github.com fuel lab slash EULA and scroll down and find the installation command this is one really simple command to get steel Open start installed and started this developing so again here's this command and then I'm going to open a terminal and I'll show you what that looks like once that's installed okay so once feel up is installed you can use this command Eula show to show the install tool chains and the latest tooltains and so right now I'm working on beta3 and if you want to install it you can use command fee left install tool chain beta3 and this is one of our test Nets it's our third test set and the test stat is not actually like completely live yet so you can't quite deploy this contract but we're going to develop one anyways and deploy it locally so it's actually the lab tool chain install beta 3. and I already have it installed and we're going to set it as our default with Philip default beta 3 beta so now that we have that installed we have access to fork and fuel core so I'm going to create a new project let's see let's make a new folder called game go into game and we're going to use Fork new and then we'll call our contract sway game and this will create a new Ford project for us so I'm going to open this folder up in vs code here and here is our template game um or contract and so we just have this test function right now but we're going to update this so the first thing we're going to do is we're going to make a player struct this can be really simple we're just going to have a player that has a level and the level is going to be a number which is going to be a u64 which is the default number type in sway and we also want to be able to update the level for this player so we can add a method to this struct with the impl or Implement keyword and we can implement the player struct and add a function called level up and we can pass in the struct itself here to update itself so you can use this keyword ref mute self which means it's a reference that's mutable to this player so it allows us to update it and then we can say self.level equals self dot level plus one and now we have this layer struct and a way to automatically update it so let's add it into our contract so we have these this ADI right here that ABI essentially just an outline of all the functions in your contract types that are used for the inputs and the type c's for the outputs and so we're going to get rid of this test function here and add a new function and the function is going to be called new player cell function new player and it's going to return a player starts use this skinny Arrow right here return a player and we're going to want to copy that into our contract here so it looks identical except for we're actually at the methodologic here and so we're going to make a new player but we're going to want to store it somewhere right so we're going to add that storage block I mentioned earlier and we can store this in a mapping so we can call this variable players and it's going to be a storage map which is a special type used to store mappings so this map to Define the types in this map key and values this sort of like generic um syntax right here so we're going to save an address to a player and initialize it as an empty storage not like this Okay cool so we have our storage set up and now in our function we're going to want to add a player to storage so we're going to need to add this uh storage annotation here and we're going to read and write and whatever is in the API also has to match in here so for the sake of time I'm going to paste logic and discussion here um and we're actually going to be using the standard Library something from the standard Library so we want to get the message sender and like I was saying it earlier in solidity you'd probably use this like Global variable to get the message sender but in sway we can pull in a function from the standard library to get this and The Message Center in sway is a an enum type of an identity and identities can be either an address or a contract ID so you can actually tell if a contract is calling your contract or someone's wallet so in our case we want it to make sure that only wallets can call our contract and play the game and a contract can't so we can check here if the sender is an address and if so then we'll set the address to this variable and if not then we can revert and we can use a require statement to read from our storage and we use this get method to read it and when you use the get method in storage at least the beta3 tool chain it returns an option that could be either some value or none so to check so essentially it's initialized as everything is none and then once you set it and it's the value is so there is some value there so we can check if there is none with this built-in method here so we're making sure that there is no player that already exists and if there is one we have this error message and then finally we can create a new player with this struct and we'll the first level is one and then we can add that player into our storage mapping here with this insert method so we're inserting the address and the player okay and let's add one more function to level up the player so this function will also have the read and write annotation and you can just paste that same thing into the contract implementation place the semicolon with curly brackets and then to hit the player we're going to use the same code right here of getting the sender or sorry getting to level up um and then we can get the player level it up and then reinsert the nuclear into storage and so we can do that like this so let this mutable current player variable equals storage that players dot get the address from the message sender so we're getting the existing player from whoever all this contract we're calling it kneadable because we're going to level up all our level up function that just takes the level and adds one and then reinsert it into our storage mapping and we can return the final level here like this current player dot level so um you can actually optionally reuse the return keyword here and use a semicolon but as a shortcut in Sway and rest you can admit this and it will return this value okay so let's add one more function here to read the as like a read I mean a read-only function to get the player so here's our get player function it takes an address and Returns the player and then to implement that function down here we can use just this one line storage.players.

get address dot on Route and this unwrap just unwraps the option type value to return the actual player so without this unwrap this would return an option wrapped or a player wrapped in an option essentially okay so um I was hoping to write a test for this it doesn't seem like we have times let's see if we can create a front end for this really quickly so to make sure it fills we can use this Fork build command Okay so first go into the sewing folder Fork build and okay actually actually have a semicolon here should be comma and that's the nice thing about this compiler is it will tell you straight up like all all the errors that are happening in your contract and wall that you deploy unless they're all fixed so okay we have our contract built and let's create a front end someone go back into the game folder here and use the npx create react app to create a template front end with typescript and while that takes a second we're also going to add this a file called chain config.json and that's going to allow us to run a local node with a pre funded wallet and if you go to our seed our doc site here fieldbook dot deal.network slash master um and then scroll down to running the local nodes you can find a copy of uh the chain with the chain config looks like so I'm just going to copy this into here and essentially the only thing you need to change is this wallet address right here so this chain config when we launch our local node it will fund this wallet and um one more thing we have to do or actually a couple more things you have to do is in our Frontage we have to install fuels which is our field typescript SDK and that will allow us to interact with our contract and one more thing we have to do is use this type gen command and you can find this in our typescript SDK docs or in our Pixar um so it's npx fuels type gen and essentially just generates all the types from the contract folder into our fraction and sway game I see okay updates a folder here okay awesome so we don't have each other time left but I can go into our app.tsx file and I'm going to replace everything here so now that we have our chain config up we can start a local field node and everything should be installed already Sheila you can do this fuel core run and it will use this chain config.json oh little dodged oops I've generated names right here we go chain config all right I mean so we have that running in our contract we can't folder so it's on sway game we can deploy to the local node we've deploy dash dash unsigned oh sorry Fork deploy and here's our contract ID back in app TSX have the contract ID here we have a wallet Secret and we're connecting to our local node through the wallet and pulling in these um our the ABI from this generated contracts uh folder slay game API all right matches and here's how we can call each of these functions so to create a new player essentially we just can say awaitcontract.

functions.newplayer.call and let's see if we can get this to work all right so we have let's see uh this is for console logging I'll open up our console so you can see create a new player here's a new player level up level two we're gonna level it up again all right it's level three all right so there we go so there's our super simple contract um I know I went through it pretty fast um but that's how you do it so yeah um are there any questions online or on the in the chat there's no questions in the chat but yeah if anybody wants to ask a question feel free to take yourself off mute or type in the chat yeah okay well um I'll just say really quickly if you go to a quick start right now uh we're using the beta 2 tool tank or b2c network and this contract I developed for the data 3 Network and it's not quite live yet but it should be live very soon so hopefully if you're in the hackathon you'll be able to deploy to the data through the test net for your final project submission and in the meantime you can develop locally cheers thank you and yeah I just uh placed a link to the philosa Discord um Channel as well so if you have any questions after this and please feel free to to Ping them in there um but yeah thanks again for everybody for joining and a great presentation Sarah and uh yeah we'll see everybody on the other side so thanks bye thank you