So a few weeks ago, I saw that eth-online was about to start, so I hopped on, I wanted to learn more about ZKEVM and win some cool cash prizes this year I have been part of a few hackathons and I made second runner-up in both Hyperlane Hyperhack and Flow future hackathon, where I want about 400 USD and 6000 USD respectively.
So I came supercharged for Eth-online, what am I to build a rock, paper, scissors game on polygon zkevm.
Really? A rock, paper, scissors game onchain?
Well, I wanted to build a very simple decentralized game in a way no one else has ever done.
My plans were much I wanted to leverage a lot on polygon services, so why polygon zkevm? Since zkevm is way cheaper than Mainnet and transactions are faster on the ZKEVM, I saw it as an ideal place to build on-chain games, and the rock, paper, scissors game was simple enough.
Here is how the game would work, users would earn RPS point tokens for every real person they win on-chain, you get 10 RPS point Tokens, but losing to someone with lower RPS tokens will cause you to lose some RPS tokens depending on the gap you have with that person, this also gives the winner extra RPS tokens including the 10 RPS tokens, this RPS token is a simple ERC20 tokens, but it determines who seat on top of the leaderboard, this is where The Graph protocol comes in.
I wanted the game to be multichain so users could transfer polygon proofs from one chain to another for this, I intended to use the wormhole protocol to communicate between polygon zkevm and scroll zkevm.
Why wormhole?
Well they were offering some cool cash prizes, I have worked with blockchain interoperability before using Hyperlane so the concept wasn't new to me.
What other chain do I want to deploy the project on?
Scroll zkevm, I learnt about Scroll from the event and they had a lot of cool cash prizes, 20k USDC in total, just deploy on their zkevm no edit needed, definitely winning a prize on Scroll was way easier than Polygon, because they were new and they had more prize category.
What other polygon service did I plan to use?
I wanted to build with polygon ID, Remember I said users are rewarded with RPS tokens when they win a fight with a real human being? This was what polygon ID would be used for, Every user verifies themselves and their wallet, this verification would be in such a way that the user won't be able to use another address to challenge themselves.
This is so important in order to prevent users from getting unfair advantages and also protect our achievement NFTs from fake fights, polygon ID would also verify age to make sure people below 18 can't stake assets.
Talking about achievement NFTs, players earn NFTs for every milestone of unique victories they reach, from the first NFTs that require just one unique victory, to the one that requires 390625 unique victories to win, that is you have to defeat that many people. Easy right? 😄
How the Game would work
So basically the game is a two-player two-round game, like Mortal Kombat, but with rock, paper, and scissors, players battle for RPS point tokens, they can also choose to stake NFTs, ERC20 tokens, and ether, stakes don't have to be equal. With every milestone of unique persons you defeat, you get rare achievement NFTs, (You get your first NFT Battle Ready, when you defeat your first opponent and RPS King NFT when you defeat your 390625th opponent).
RPS point token reward system, winning a match gives you 10 RPS point tokens, Players with more RPST, lose RPST when they lose to people with less RPST, RPST determines who sits on top of the leaderboard.
For example
A has 1000 RPST, B has 10 RPST, and A loses the battles so B gets (1000 - 10) / 100 RPS tokens as a reward for winning someone on top and A loses (1000 - 10) / 50 RPST tokens for losing to someone below
So the easiest way to earn RPST is to fight people on top of the leaderboard, this will incentivize the underdogs to stake more valuable items in and the people on top of the leaderboards could get more value per game on the risk of losing points.
Challenges faced
My first challenge had to do with my personal life for the first week of the hackathon, I got extremely busy with work so I could only dedicate a little time to the Hackathon project, the next week I was free, only to come to the realization that Eth-online isn't really 3 weeks, it's for like 16days the whole event plus judging is for 21days? That was tough considering the fact that I intended to integrate a lot of features, Nevertheless, I pressed on.
So I checked Wormhole and they didn't support neither polygon zkevm, nor Scroll, I ain't going down without a fight so I checked Hyperlane, and they don't support zkevm either 😞 so I had to drop this feature, it seemed like the best thing to do.
So I went all in on Polygon ID, researching online and studying the documentation, I even downloaded the app from Play Store, but I couldn't really use it with my App the information around it was a bit confusing, maybe because I was under pressure, I couldn't find the right guide to simplify the whole thing for me within a short time period, let alone creating anti-spam proof, the whole information I got make it seemed that it will be difficult to create Anti-spam proof with Polygon ID, I will be glad to be wrong about this, so I dropped this feature to focus on the main game and the Graph Protocol.
About three days before the submission deadline I was finally ready to deploy my smart contract on polygon zkevm, I had tested on the Hardhat local node and everything was fine, so what could go wrong?
Everything went wrong for starters, I couldn't deploy the contract on zkevm, and I was getting some weird errors, stressed about what could be the error? debugging for almost a day, then I found the bug. I was deploying multiple contracts on the constructor, so basically my constructors were contract factories, to fix this I had to deploy the contracts separately and pass the contract address as arguments to the constructors, I don't know why it behaved like this, it worked fine on my local hardhat network and Polygon Mumbai, so I guessed the zkevm is not 100% compatible with the EVM.
After fixing this bug I faced another challenge with my nextjs app, I could write to the blockchain on polygon zkevm, but I couldn't read from it, the same thing with scroll zkvm after, spending hours on this with no results, I found the error, this was it, I was using wagmi to interact with the blockchain, but my error was that I didn't specify the chainId on my read requests hooks, so by default, I was reading the data from a different blockchain network, where the smart contract doesn't exist.
Here is a similar issue on StackOverflow, I provided my solution to this question https://stackoverflow.com/questions/76763812/wagmi-throws-error-contractfunctionexecutionerror-the-contract-function-owner/77280917#77280917
Time to deploy on a live server 😀 .
I always host my React and Nextjs projects on Netlify so this wasn't any different, deployed to Netlify, and I wanted to play the game, but 💣 I was facing some weird issues.
The app worked fine but anytime I tried to visit certain pages directly using the address bar I got the weird Nextjs, at first I thought it was caused by the Hydration error, I ignored that page but it didn't work even after fixing it so, I went online.
The error message is shown above, so I came across this forum, and it was helpful, https://answers.netlify.com/t/runtime-importmoduleerror-error-cannot-find-module-styled-jsx-nextjs-nextauth/95281
he fixed the issue by downgrading @netlify/plugin-nextjs, but this didn't solve my problem, so I had to downgrade my Nextjs version from 13.5.4 to 13.4.6, which fixed the error for me.
I fixed the Nextjs issue on the last day of the Hackathon, feeling happy and fulfilled about the many challenges I fixed in 3 days I was wondering what could stop me, my game was running smoothly on polygon zkevm, and I finally won 😁 .
Have I? Not quite everything was working fine on polygon zkevm, but not on scroll zkevm, the contract read hook wasn't polling data from the scroll blockchain, and I had to refresh the page to poll data 😠 after some back and forth I checked my network console and found out the scroll websockets public rpc URL has been moved? to where I don't know, well I solved this by creating a scroll endpoint on Quick-node and using custom providers instead of public providers from Wagmi.
Lessons learned
- Have a better understanding of the protocols you plan on using for a hackathon beforehand.
- Ethonline isn't a 3 weeks hackathon so don't plan with 3 weeks in mind.
- Get your demo video quickly and on time, when I made my demo video my app wasn't working on any of the zkevm, so I demoed the app on the hardhat local network, while I continued battling my bugs.
- Don't be quick to use the latest version of any software, unknown bugs might be waiting for you (my Netlify and Nextjs issue).
- Test the app on the intended blockchain from time to time, the local blockchain might not be enough.
- Never rely on public providers, use RPCs they are more reliable, use Quick-node they offer support for a lot of Blockchain and you can get started for free.
Conclusion
While my Ethonline Hackathon didn't go as planned, I couldn't build what I planned to build, but I did manage to build a working product, you can check it out https://ethglobal.com/showcase/rps-onchain-bp55v and as a consolation, my project won the pool prize on Scroll which was about 17.17 USDC, more importantly, I had fun and learned new things, I used the graph protocol for the first time and I enjoyed it, one product that fascinates me about this hackathon was polygon ID and I planned to use this product on my next Hackathon Chainlink Constellation. I will surely share my experience here and hopefully, I get better results, A la prochaine.
Top comments (0)