DEV Community: rhiza

Zero Knowledge to Solana Mainnet in 13 days

rhiza — Wed, 21 Feb 2024 17:54:06 +0000

When I say "Zero Knowledge," I'm not talking about ZK Proofs or anything like that, I'm talking about my experience level with ANY of the tech used at the start of this project. 😂

This is the second post in a series on how I implemented Super Bowl Squares on Solana.

In this post, I give a bit of context on the project and discuss the technology decisions I made.

Context

Every year, when the Super Bowl rolls around, my friends and I play a game called Super Bowl Squares, which I described in the previous post in this series.

Super Bowl Squares on Solana

rhiza ・ Feb 10

#solana #rust #react #nextjs

This year, right after the AFC and NFC championship games ended, exactly two weeks before the Super Bowl, I had an idea. I wanted to put the Super Bowl wager game called Squares on a blockchain. I floated the idea in the Discord. When I woke up to some encouragement that Monday morning, I made my mind up to actually do it.

discord chatter from the morning after the conference championship games

Setting aside the insane 13 day deadline I just signed myself up for, there were a few obstacles I faced -- like, for one, I had absolutely zero experience with any of the tech necessary to pull this off.

While I am tutorial-familiar with Solidity and web3 in general, I had never written and deployed a smart contract or dApp from start to finish.

I knew this wouldn't work on Ethereum due to high gas fees. I am also not a huge fan of the L2/L3 approach to scalability (which I'll not get into) so even my very small amount of Solidity familiarity isn't going to help us here.

I'd need to pick another blockchain to deploy on.

I narrowed my choices to Solana and Sui, two of the fastest, cheapest, and most popular L1s. But they both have their pros and cons. For example:

Solana is immensely popular right now; Sui not as much.
Yet Solana's smart contracts are written in daunting Rust, which looks like z̶̪͉̅͗a̷͚͛l̸͙̝̀g̷͈͆̉o̶̤͉͊ ̶͉̾̔t̵͉͛ḛ̶̢̓͝x̶͚͚́͠ť̷̑͜ to me; Sui uses the beautiful Move language.

Luckily, while I was doing research, I found this article by @kklas_.

Smart Contract Development — Move vs. Rust | by Krešimir Klas | Medium

Krešimir Klas ・ Sep 12, 2022 ・
Medium

It was a godsend for me in the moment.

While the article clearly puts Move on a pedestal over Rust/Anchor, it did an amazing job of explaining the programming model and limitations of Rust/Anchor-based smart contract development. I was thinking, "damn, if only Solana supported Move!" ¹

With my new-found baseline understanding of Solana's account-based programming model, I bit the bullet. Everyone I know has Phantom installed. No one I know has a Sui wallet installed.

Initial approaches

After making my mind up to go with Solana, I figured I'd get the contract deployed and tested first, then try to figure out the front-end situation.

While looking around at resources on the net, I noticed a project called Seahorse. Seahorse is a compiler that lets you write Solana programs in Python.

I was really trying to avoid writing any Rust.

Look, I'm a Ruby fan boy. I've been in love with Ruby's expressiveness and readability for almost two decades now. It's the most beautiful language ever created and second place is not even close.

So my first thought was to use Seahorse.

Python in general is very, very similar to Ruby, it's just not quite as good as Ruby.

haha, I'm trolling. I do prefer the syntax of Ruby but Python's community and libraries (especially in the field of ML) are unmatched.

I thought that since I'm familiar with Python, writing the contract in Python would be way easier than trying to learn both Rust and Solana.

However, I quickly ran into roadblocks and lots of questions. The docs aren't as fleshed out, there are not many code examples, and my inexperienced eyes couldn't distinguish whether I had Seahorse or Anchor/Solana problems.

I also poked around with Solang and experienced similar issues.

I decided to go with Rust and started the Hello, Anchor tutorial on Solana Playground.

Solana Playground

Solana Playground is really neat. I didn't have to worry about setting up my local environment until I was more comfortable with what I was doing.

Every time you build - deploy - update IDL, your Typescript types are updated and automatically imported in your client and test files.

There's even a graphical method invocation tab for testing your program's instructions without writing any code.

I highly recommend using the Playground to familiarize yourself with the development process if you're just getting started with Solana development.

The Playground also has built in tutorials. The code is loaded directly in the IDE and you can build and deploy as you would your own project.

I did some tutorials on Solana Playground and learned about program-derived addresses (PDAs). Once I started to grasp the concept of PDAs, I was able to start mentally building a data model and visualize the state transitions.

Rust, Anchor, and what front-end?

After I had written a rough draft of a contract with a workable data model, I decided to start researching how I was going to build the front-end.

I went to GitHub and tried to find some example Solana projects with a frontend. Pretty much every single app that I could find was built with React.

Guess what? I also had zero React experience, but without any other option², I didn't have much of a choice here.

I found this scaffold project called create-solana-dapp and generated a Next.js project styled with Tailwind and DaisyUI components.

I have some strong opinions about Next.js and React. I really, really wanted to abandon the front-end and but I decided to stick with it.

Experience with chosen stack

If you're keeping track at home, I had 13 days to build an app with:

Zero smart contracts ever deployed
Zero understanding of Solana's programming model
Zero experience with Rust
Zero experience with Anchor
Minimal experience with Typescript
Zero experience with React
Zero experience with Next.js
Zero experience with DaisyUI
Minimal Tailwind experience

ChatGPT as a learning tool

Before I dive into implementation details in the next post, I just wanted to say this absolutely would not have been possible without ChatGPT. I'd still be on page 52 of The Book. ChatGPT as a learning tool is still severely underrated and undervalued and I will think that until every single person on Earth agrees with me.

Does it make mistakes? Yes. Does it provide less-than-optimal solutions sometimes? Yes. Does it sometimes lead you down a trail of inexplicable red herrings? Again, yes.

BUT SO DO HUMANS.

Think about it, when you are pairing with a coworker, that person does not know every single thing there is to know without ever making a mistake. They could possibly lead you astray and you know it. So, what do you do? You stay vigilant and keep an open mind for mistakes.

It's a learning journey together.

Treat ChatGPT as you would your co-worker and good things will happen, I promise.

Conclusion

The next post in this series will be a technical post about the implementation that I came up with.

I honestly have no idea if it was a good approach or bad approach. I'm looking forward to more folks getting some eyes on the code and hopefully hearing some feedback!

I'm not really sure what happened with the project, but there [exists an announcement] from like 4 years ago (https://medium.com/solana-labs/solana-now-supports-libras-move-vm-f5fabaf3033c) from Toly that says Solana now supports Move. However, the GitHub project has since been archived and I couldn't find any code examples. ↩
I later found the Anchor/Solana/Svelte (ASS) stack. Also had no experience with Svelte, but Lord, it looks so much better. I will probably try Svelte next time. ↩

Super Bowl Squares on Solana

rhiza — Sat, 10 Feb 2024 22:15:16 +0000

Super Bowl Squares on Solana

For as long as I can remember, every time the Super Bowl came around, me and the boys would play this game called Super Bowl Squares.

It's a wager game. You buy real estate on a 10x10 grid that represents every possible score. If you own the square that represents the score when each quarter ends, you get a payout.

Hell, ChatGPT can explain it better than me:

There's a 10x10 grid, 100 squares up for grabs. Each square is gonna end up with a pair of digits – one for each team playing. These numbers reflect the last digit of each team's score at the end of a quarter. Nail the matching score at quarter's end, and boom – you score some cash.

Example: If the score's 21-17 when the quarter ends, and you've got the square with 1 for Team A and 7 for Team B, you're the winner for that quarter.

So even if your team isn't playing in the Super Bowl, you're super invested in the score of each quarter of the game.

I promise, if you play this game, you won't just be watching for the commercials.

Why put this on the blockchain?

Over time, we built the below Google sheet.

If you notice on the right, we've got a centralized treasurer (read: escrow) who we cash app our $5 per square to.

Since Google sheets has the ability for collaboration, we can go in and add our names to the squares we want to purchase.

Sure, this works fine. This is a big improvement on our system from a few years prior, where the spreadsheet was entirely controlled by the treasurer. But it's still a very manual process.

This is a fairly popular game, and I imagine a lot of people do not have a cracked-out Google sheet like we do. A very popular sports site published a printable sheet where you and your crew would have to write everything down on paper!

By putting this on-chain, we remove the treasurer, all actions are automated, and there's near zero overhead of creating new games.

Imagine if our treasurer had a few different groups of friends that they wanted to play with. Even with our Google sheet, that is a lot of overhead.

By bringing this on-chain, you create a game at a click of a button, and share the link with your friends. That's it.

How it works

Board setup

You start with an empty 10x10 grid with unlabeled x and y-axis headers.

Each square has a set cost. IRL, we usually do $5 a square, which amounts to a $500 pot with 5 $100 payouts.

Each player selects the squares they want to purchase, which are denoted by a sticky note colored background and the total cost is shown on the purchase button.

After the squares are purchased, they'll turn a new color and contain the first two letters of the buyer's wallet address. The players legend to the left of the board is also updated.

Once all 100 squares are purchased, the Purchase Squares button turns into a Finalize Board button.

This tells the contract to generate the x and y-axis headers.

Once the actual Super Bowl has started, let's say the first quarter has ended, and the score is 49ers 21 - 10 Chiefs. The square that aligns with the headers 1 on the y-axis and 0 on the x-axis will be the winner.

8Df1..vd6y is the winner, and will have a Claim button in the Payouts section. The amount is for 1/5th of the total pot minus a 6.9% fee.

This repeats for each quarter of the game.

If the game doesn't go into overtime, the player who won the fourth quarter gets a doubled up payout.

Conclusion

That's pretty much it! It's a super fun game to play with friends and a great way to financially incentivize yourself to be invested in the big game (lol).

Always more fun watching sports when something is on the line, right?

P.S. I'll be back with a technical post about how I implemented this in a future post.

I also plan on keeping this alive for March Madness, NBA Playoffs, and more. Stay tuned!

DEV Community: rhiza

Zero Knowledge to Solana Mainnet in 13 days

Context

Super Bowl Squares on Solana

rhiza ・ Feb 10

Smart Contract Development — Move vs. Rust | by Krešimir Klas | Medium

Krešimir Klas ・ Sep 12, 2022 ・ Medium

Initial approaches

Solana Playground

Rust, Anchor, and what front-end?

Experience with chosen stack

ChatGPT as a learning tool

Conclusion

Super Bowl Squares on Solana

Why put this on the blockchain?

How it works

Board setup

Conclusion

Krešimir Klas ・ Sep 12, 2022 ・
Medium