Polygon 🛠 Add Play to Earn Mechanics to a Browser Game

[Music] [Applause] so do that's this this this this get started awesome everyone how you doing my name is rahat i'm a developer advocate over at polygon um so i decided to do this workshop a little bit differently this is the only slide you will see that's it everything else is code is that cool i said screw it we don't need slides we just need code you guys are hackers guys our developers is what we're going to do so thank you for coming to my talk this is all about uh taking a web 2 browser game and turning it into a player in game when do something real simple how many people have played rock paper scissors ever in your entire life alright so so you're aware of the mechanics of rock paper scissors cool awesome so let me just make sure my code is what i wanted to be okay so we got this rock paper scissors game here just a simple react application nothing big nothing's going on all right if you want me to hit rock please put up a rock scissors put up a peace sign uh paper put up a uh hand all right see two papers paper scissor rock it looks like all right looks like rock wins all right hit rock nobody wins come on guys all right one more time rock paper scissors paper paper paper scissors okay all right paper again or paper ah we lost okay whatever so nothing huge going on there right it's just it's a simple uh rock paper scissors game this is what the code looks like real quick i'll show you right now components i call this component web 2 game so it's just this gigantic switch case with a bunch of if statements you know if paper rock whatever somebody wins and i'm just like putting a bunch of things in state this is probably not an optimized version of this code very you know crappy version of it but it gets the point across right um we have a rock paper scissors game that exists in the browser now what if we wanted to add some elements of you know web web 3 into this so i'm opening this up i call this the web 2.5 game called web 2.5 because all we're doing here we're slapping the web connect uh wallet connect function onto this nothing huge going on i have this uh handle wallet connect function you know pulling the ethereum object out of the window what does that mean as long as i've got a browser injected uh you know chrome extension like metamask or something like that i'll have the ethereum object and i can pull that out the window as long as that all is good i am just doing a couple you know boilerplate stuff of taking the web3 provider from ethers requesting access to the user's account and getting their address so let's update that let's remove the web 2 game from in here and set the web 2.5 game wrong thing okay come on doing this with one hand is like the wrong thing to do okay cool so now we got this wallet connect right hit connect wallet great metamask pops up next connect wonderful all it took was two lines of code right now we slapped a uh wallet uh sign in with wallet anyone can anyone tell me what's wrong with this just shout it out exactly it's not inclusive because not everyone uses metamask people have mobile wallets people have hardware wallets if i wanted to go beyond this and make sure that i'm actually being inclusive and you know bringing people in i think there was a workshop earlier on wallet connect definitely recommend using that instead but for the purposes of this i'm just kind of you know looking at one use case particularly for uh you know an injected wallet but we always want to make sure we're being as exclusive inclusive as possible to many different types of people so for now all i'm doing is just i'm saving this address into state nothing big again just works the same still a web 2 game right how would i turn this into a web 3 game let's take a look at some smart contract code so this is a very very very simple smart contract there's not a lot going on here um but just to kind of visualize what's going on um what i'm what i want to accomplish here is that i want to take this rock paper scissors game i want people to wager some amount of medic on the polygon network and um you know if they lose if they draw they lose that matic and uh if they win they take the entire amount of magic that's in the pot for themselves right so a little bit of a gambling rock paper scissors implementation of a game right um so how does how does this work so i've got the contract the game i've got a you know a private string that is going to take care of who's the one who the winner is actually i don't think i'm using this but whatever um this u unsigned integer which is the balance which is going to keep track of how much money is actually in here i've got a few functions first is this receive money function is just to send some money over to the contract now i made this public for one reason i just want to make sure that you know if at any point in time i decided to like put this smart contract onto the blockchain or whatever um i can load it up with money you know in case if i need somebody to load it up with money so like people can actually earn some stuff instead of like winning nothing you know um so just making it making that a little bit easier using this payable function uh solidity has uh payments baked in natively you don't need to import any other smart contracts anything everything is like accessible with this payable modifier so all i'm doing is taking uh this balance up here this public balance and updating it with this message.value where do i get message value from whenever somebody uses their wallet their um you know metamask or anything like that i can extract the value of whatever amount of money they've wagered or put in there and keep track of that value with this this measures that value super useful to know in solidity now i'm doing this get balance function this might be redundant but just to like kind of give you an uh an idea of how something like this would work it's just a very um plain kind of function tells you the current balance of you know the amount of money that's on this contract right nothing useful now now we get to the fun part this play function so literally all i'm doing i'm still allowing my front end to decide who the winner is you know and you know if they won if that's true then i'm going to take the address of the person who is you know interacting with the contract so that is available through me again through this message object but now instead of message.

value message.sender which is going to give me the address of whoever is um you know interacting with this contract right now i'm going to take that and i'm just going to transfer some money to them whatever the current balance is and give them that money if they won they didn't win i'm going to call the receive money function up here and they lose the matic that they wagered right so nothing nothing too over detailed a couple things wrong with this um so this is one thing i learned from a talk uh i once listened to is when you're building um anything you're building a sas product you're building a smart contract whatever your first version of it is probably not going to be the best version of it you just want to get something working right this works it it does in theory what you need it to do you can extract money from someone if they win you can give give them some money um originally i was thinking about like doing the whole game engine on chain um which would have taken me more than 20 minutes so i didn't do it but so what what what i would do if i wanted to make this completely unchained now in javascript i'm able to like go into an array and just like you know sort of randomly pick out some value like rock paper scissors for the opponent value in solidity you cannot uh do anything randomly you can do pseudo random um you know numbers there's a different methods but there's no actual way to do truly random randomization or random number generation inside of solidity if you wanted to do that there are some um tools out there like chain link will give you a verifiably random kind of like generated number things like that but you know that has to happen off-chain somewhere you know so just to kind of emulate that as i just like you know what let's let javascript kind of handle that part but if you were to actually go into production with something like this and you want like real random number generation definitely recommend looking at chain link i do not work for chain link they did not endorse this at all i just like their product um just want to make that clear so so so we've got this let let's deploy this you know um i've got this here if i'm deploying from remix i go here compile looks like there's no problems i'm going to copy this api code real quick and just drop that in here it's abi.json why that's important i will talk about in just a second but that's that's there and let's go ahead and deploy this injected web 3 cool this is my test matic i don't have this much manic i wish i did but uh let's deploy this hit deploy my metamask pops up and we'll confirm this and uh this is being deployed onto the polygon mumbai network it's one of our test networks for anytime you want to you know test out your smart contracts putting things out there how many people have just worked with solidity in general worked on the ethereum blockchain cool a bunch of you okay um doing things on the ethereum blockchain and on the polybond blockchain exactly the same every tool that you learn every um you know if you use hard hat foundry if you use uh truffle if you use a remix um all of that maps one to one it just takes one line of usually one line of like configuration if you're using hard hat or truffle or something like that all you do is just like change the rpc endpoint from like you know the ethereum endpoint over to a polygon mumbai uh network or polygon main net if that's what you want but you know at the end of the day everything is evm compatible everything you learned stays the same um and again just maps one to one um that's why it's like we've been really focusing on a good developer experience we don't want you to learn anything new just to use another blog chain everything maps one to one you'll also so this this is specifically um using our proof of stake blockchain which many people know as a side chain uh that is not the only product that we have out uh today in a few a few other days we actually launched a few other things like polygon edge there's a lot of work that the hermes team is doing as well and there's there's a whole suite of products that you can use to like build on top of ethereum uh but yeah today we're just focusing on our proof of stake blockchain so that is out let me see where that is okay is that in here contract deployment let's view on block explorer so this is a test net transaction great it was a success you know every everything's everything looks good um let's let's actually look at take a look at this deployed contract so these are some of the functionalities that i could just like test you know before i actually put it into my front end but um hit balance right now says zero right so let's so i made that remember i made that receive money um you know public just so i can put some money in here um let's go ahead and put three matic in here so um if you've if you've done any sort of deployment or work on solidity before you'll know that like the smallest um unit inside of solidity as we're in reference to ether is whey works the same way on polygon blockchain smallest unit of matic is also whey which is like 1 to the 0 power or something like that so 3-matic that converts over to this much way let's copy that value and drop it in here okay so let me just do three one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen seventeen eighteen okay that's good enough okay so let's hit receive money awesome i'm putting three three matic onto this contract confirm and you'll see like gas fees are like very negligible that's pending it's actually go ahead and look at this contract itself how do i get to the contract there it is contract so this is the deployed contract on polygon scan right now deployed about three minutes ago let's just make sure this went through looks like it was successful i'm gonna hit balance yep three um to the 18th power way a little bit small hard to see but hopefully it gets the point across right there there's three matic inside of this contract yeah there it is three matic cool so now we've confirmed that on this contract there's three matic that somebody could potentially win if they win this rock-paper-scissors game let's see how we put that into our front end so this is going to be a full stack application built with the polygon black chain in like five minutes guys so we go over to this web3 game.js that i have here uh that uses this other component called soliditygameengine.js i'm very bad at naming things which i'm sure the rest of you are too we're all developers right um so have this how do i actually go and interact with this contract right so i have this old contract here let me just delete that delete that and copy this contract address just so making sure you know we're going to that same contract remember um i saved some api code from before i'm importing that from api what is the api what does this do traditionally in web 2 development i guess for lack of better terms the way you would interact with an api be through like an http request fetch axios something like that right when you're interacting with the blockchain from a front end like react rather than doing something like you know using a fetch request this api code this gigantic json file essentially acts like a map for javascript to like parse through and understand how to interact with the blockchain so this api code corresponds to the compiled byte code from solidity so in order for the ethereum virtual machine to actually read your smart smart contract data that is all compiled to bytecode which is like machine code and that is the actual code that is deployed onto the blockchain not your solidity code your solution code is at a very high level it needs to be compiled down so this json file is just a map it just it just tells javascript okay this is a function i can use this is some sort of state this is some sort of input that a function needs etc right and you'll notice in here there's like inputs to find balance to get the balance etc you know all the stuff that we wrote in this like nice mapped out format so that's that's cool that's great so now we come back to our solidity game engine again i'm bringing in the ethers library once i have the ethers library in here again just some boilerplate code of just like making sure i'm connected to the contract uh the contract um connection requires the contract address which is what i had before it requires the abi and it requires the signer the signer is simply just again that address that we had before um now now i need to make an actual transaction right the transaction with the blockchain to either you know check if this person is the winner or not so i've hardcoded this to just always be one matic um we're just always gonna be one matic just keep it simple for the purposes of this you know demonstration and i have this piece of state up here player is winner my default is set to false and um down here again with my very very poorly written rock paper scissors game uh what what i'm doing here is you know i'm setting if i set the winner to be the opponent i'm setting player to false transacting the game etc and if you win if winning is true then transacting game will you know update to be true so you either win somatic or you lose some medic so now let's go ahead and update the game we're moving on from web 2.

5 and let's do web3 okay so i've got my react app let's hit connect wallet all right all right now i want to win some matic so y'all gonna need to help me rock paper scissors let's go always rock all right he said it first though so i'm gonna go with rock all right so this is on you if i lose money though all right so let's hit rock no you lost me some money all right so hit confirm you know we just lost one matic this is fine exactly yes you could do that you know [Laughter] you know if we were um you know doing making sure that this like actually worked properly we do that on chain you know um which in this case you would reach for a tool like chain link or something like that to do like the random number generation here we're just you know trusting our players to do the right thing all right let's play again uh let's try to try to win this time oh crap okay rock paper scissors anyone okay he did say it first all right we're doing a rock again yes all right so i'm going to hit confirm um i had 494 matter alright it's pending see if this works do i speed it up no yeah that's test nightmarik yeah okay cool it updated i won some money so cool that's a very very basic implementation of you know play to earn mechanics uh set to a browser game right we started off with a simple rock paper scissors game we connected everything to a smart contract um you know it's not them the most you know complex application but um it's really just to give you an idea of like how you can start incorporating these platon mechanics this is just like a simple kind of like gambling rock paper scissors game but you know this is kind of the basis of like what games like axing infinity you know d5 kingdoms are kind of like built on you take the little fundamentals and building blocks put these together make it a little bit more complex you know test your code unlike me and always test your code and you know put that onto the blockchain and you've got to play to earn game um you know play to earn is something that is getting pretty big you know right now um it's all the rage all you know all the vc funding is trying to find its way into later and all that so you know if that's something i'm pretty sure it's one of the tracks as well for polygon so if you want to you know win some money from us something you could build um cool i'd like to you know open this up to questions any questions about the code any questions about any implementation polygon in general i'd love to open it up to you guys you have a question uh can we get mike yeah i think he's gonna give the mic okay thank you uh question was is this code open source anywhere can i look at this uh maybe i want to build something similar yep so this will be open source uh by later tonight um so i will just post this up again uh you can follow me on twitter hot codes i will tweet this out um but i will also put this in the discord uh for um in like the polygon sponsor channel as well so both places uh by later tonight we'll have that up there so uh i'm somewhat new to polygon um i think basically how it works for us like layer two and then uh all the like the transactions get get put into ethereum blockchain like in a bunch that's why they have that's how they can have like fast transactions and stuff right yes so we're um so this specific implementation is using our polygon uh proof of stake slide chain um so rather than doing like proof of work computations um which is going to take more computing power i'm gonna take a little bit more time to do proof of stake um algorithms allow for much quicker uh transactions um so a lot of that is built on you know that side of things to get you that you know like better ux so um i mean polygon offers uh pretty cheap cheap fees and uh fast transactions yep so does uh solana what's like the trade-offs um i couldn't intelligently speak about solana so i i will say you know if you know if you're already used to building on top of ethereum building on top of like anything evm the advantage here might be like you don't have to learn anything new like with solana you have to pick up rust to you know build smart contracts so if you already know solidity if you've already been you know developing on an evm blockchain um you know just for for developer experience you know i'd go with polygon yeah um how like do you know if uh if polygon are gonna be affected by the merge like any anything like yeah i think we're actually very happy about the merge um while we're you know this the proof of stake blockchain will still be a thing uh will still be available um there's a whole suite of like kind of products that we're building and putting out um you know a combination of like zk roll ups optimistic roll-ups um as well as just like different tools for just like building on top of ethereum um our whole thing is just like making ethereum scalable um so you know whatever ethereum does to make that easier for us is just even better you know this this implementation of like putting this on the polygon proof of stake blockchain is just like one way you can interact with the polygon ecosystem at large this is only one of our products so you know maybe there's a future where you know our other tools would be more popular because post merge is probably you know stuff that you'd want to use cool anyone else do you have a question no um just trying to think of something yes sir but but solar never is a tool favorite is a game that exists that's called the gen coin flip and what it is it's like you bet an amount but what you want and if you lose you lose this amount and if you win you double your amount you uh you're winning with a small fee that this uh country's contract is keeping for themselves right yeah yeah so it exists for solano something like this yeah i mean i've already implemented it i don't know if this contract is open on it yeah i mean this is um sort of like a very similar implementation you know it's your you know you're wagering some money um i could add some more to like add some fees if i wanted you know on top of that as well i can code that into like the balance and things like that um but you know this is going to be more like a basic sort of like you know implementation but um i i don't think you need much to add very much more code on top of this to actually get you know to the end to you know what you were describing there um the basic functionality is there you know wagering sending money things like that um probably just be like doing a few things like you know keeping track of fees and things like that but what they have on top is like a an ft collection that's the revenue from the from the from the percentage where they are keeping it goes to the nfts at the wallets of the nfts nice yes yeah i mean those those are definitely different functionalities you can add on top of stuff like that that's awesome i mean um you know for this that's really for the proof of state blockchain cheap and fast um but our other you know solutions will would all show like you know leverage the ethereum security level of security that we have there um so yeah um i think we're are we out of time yeah so yeah i mean the the selling points for the proof of stake blockchain is there but you know if you want to leverage the full security of ethereum and everything like that you would reach for something like rzk roll ups optimistic roll-ups um some of those other products so it depends on your use case for what you need cool thank you for you know coming by to this workshop really appreciate y'all thank you for the questions and uh yeah i will post the code later on tonight thank you [Applause] [Music] [Applause] [Music] you