One helluva React hook

It packs a punch: but who actually cares?

You don’t seriously think all of those muscles are real? | World Series of Boxing

Nowadays it’s considered improper to enjoy using React. Sources tell me that it’s an aging framework with some rough edges and therefore it is BAD. I don’t mean to enjoy using it sometimes, I swear!

The thing about React is that if you don’t fight it, you can develop with it quite quickly. We use React here at Spyre, and we’re also big fans of react-query. If you haven’t used it, react-query allows you to write some pretty slick-looking React for asynchronous operations:

const { isPending, data: account } = useAccountFetch();

For our awesome head-to-head, competitive, skill based, take-all-your-friends-money game, Hangman Clash, we have developed a few key pieces of tech that make developing skill-based games much easier. One of them is a React hook with the power of a thousand suns.

Even the stare-down looks painful. | Kate Gardiner

The TLDR; of Our Stack

We’ve described our stack from a high level in a previous post but I can summarize it real quick.

The Spyre Platform ties together a React front-end (in Hangman Clash we use Pixi.js for gameplay), the multiplayer game server Nakama (which we are contributors to), our own Nakama plugin (almost open-sourced), “blockchain stuff” via Thirdweb’s opensource SDK, and another server called Chain-Chomp that we wrote to expose an HTTP API for gas-less interaction with the Spyre protocol.

Not only is that likely a run-on sentence, it is an almost-entirely opensource stack that we, proudly, mostly didn’t write. We’re big fans of Gabriel’s “Innovation Happens Elsewhere.”

Our goal here at Spyre is to make skill-based games successful, not to build some “cool stack” (though we’ve accidentally built something pretty cool). We want to make it easy to bring together players, pit them against each other in skill based matches, and make an honest revenue for player and platform alike.

So honestly, why should anyone care about the tech stack?

I’ll tell you why, but first let me get back to this React hook I’ve been going on about. It looks like this:

const {
    mutate: accept,
    isPending,
    isSuccess,
    isError,
    error,
  } = useMpMatchmakingAcceptAndJoin();

Like the title suggests, this hook — well it packs quite a punch. Let me unpack it.

Like what you’re reading? Consider some claps or a highlight.

Play our first game, Hangman Clash, or follow our adventures on X!

“Wait we’re actually doing this?” — guy on the right | donsathletics

What is happening here?

Like the Millennium Fahhlcon, she may not look like much, but she’s got it where it counts. This hook is doing many things.

First, to enter a paid match, users need to put aside the money to enter the match. We call this a “stake”. They are not paying for the match yet as the match may not happen or it may result in a tie, but they essentially need to put money in escrow. Blockchain tech gives us the ability to do just that: put a player’s money somewhere safe, but without requiring a trusted third-party, like a bank. Banks are great but sometimes they make bad choices and they take a hefty cut of your money, which is bad for platforms and players.

For non-custodial wallets like Metamask, our hook opens up a dialog for signature. Web3 users are familiar with this flow. For “in-app” wallets, which are wallets created behind social login, phone number, email/pass, etc; Thirdweb does this behind the scenes for the user. These wallets are also technically non-custodial, but we can make the UX very smooth for these users.

Next, we need to send that signed stake (the proof of escrow) to our multiplayer server to do actual matchmaking, i.e. to pair players up in matches. The multiplayer server can verify that funds are set aside using the stake, then find optimal matches, save off appropriate data, and create a server simulation for the match.

Finally, we need to actually join a match simulation. This means we need to open a socket, tell the server we’re ready, and begin a match. All of our matches run an authoritative server simulation to keep matches fair.

After all of that, the little isSuccess flag on our React hook flips to true.

Friendship is more my speed. | Kate Gardiner

Who cares?

The Web3-iverse is chock-full of technology that no one uses. In fact, builders probably make up most of the users for other builders: a cryptouroboros if you will.

Is this React hook more of the same? We certainly hope not.

In our case, since all of these difficult pieces are taken care of behind an easy entrypoint, it means that we can create games on our platform very quickly. We can focus on great gameplay instead of fiddly Web2/Web3 integration. We can spend more time on tuning game balance, adding Easter eggs, or experimenting with crazy features.

This React hook isn’t just a REALLY cool tech gadget: it gives us the ability to iterate with 10x the velocity and, ultimately, to try out 10x the number of things we could try out otherwise.

In the end, like everything we build at Spyre, like we’ve written about time and time again: we focus on what is best for the end user. This React hook is very cool technically, but it exists as a means to an end: and the end is a great user experience.

So let’s answer the question succinctly. Who cares about this React hook?

Our players.

Like what you’re reading? Consider some claps or a highlight.

Play our first game, Hangman Clash, or follow our adventures on X!