Skip to content

Let the game render before a user being available#25

Open
norswap wants to merge 1 commit intolatticexyz:mainfrom
norswap:connect-button
Open

Let the game render before a user being available#25
norswap wants to merge 1 commit intolatticexyz:mainfrom
norswap:connect-button

Conversation

@norswap
Copy link

@norswap norswap commented Sep 1, 2024

This makes it possible for the game board to render before a user/wallet being available. In this demo (and in the react MUD template in general), it is assumed a burner wallet will be used. In practice games often want both (a) users to login in some way (connect their wallet, use a social login system) AND (b) render something from the game before that happens. A good example is Words3 which does this (you can see the Scrabble grip before logging in with your wallet).

We did this work on Emojimon in order to integrate our login system, I'd figure I'd upstream it to see if there's any interest.
I realize this doesn't 100% fit the format of this repo (it's basically a refactor that would be better introduced progressively over the previous 4 steps). If there's interest, I can retool this to fit this format, and/or modify the MUD react template, since the logic being changed is mostly inherited from the template.

Overview of what was done here:

  • refactors the setup logic to have two steps: initial setup, which provides the initial MUD value, and wallet configuration, which injects the fields that are dependent on a user being connect (wallet being present)
    • this is the bulk of the work
    • I made it pretty, using a few custom hooks: useSetup, useDevtools and useFaucet
  • the useMUD() return type is exposed as MUDInterface, in which the properties dependent on a wallet are marked optional — users must check whether a wallet is present to use them.
    • this surprisingly ends up needing very minimal changes in Emojimon
    • in one case, we supply a type definition that can be used for casting (WorldContractWrite)
  • we prevent transactions from being sent when a wallet is not available
    • again, very minimal changes there

@vercel
Copy link

vercel bot commented Sep 1, 2024

@norswap is attempting to deploy a commit to the Lattice Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LIttle nicety since this expects an older Node version than the curren stable. It unfortunately doesn't work with the newer node (I checked), something about asserts. Most likely this go away if the packages are updated, which I have not done here (but can do).

},
"engines": {
"node": "18.x",
"pnpm": "8.x"
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works perfectly fine with the latest pnpm version, so removed this to avoid further usage headaches.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emojimon</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤠</text></svg>" />
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoids console error when doing favicon.ico lookup. Simply uses 🤠 as favicon.

lastBlockNumberProcessed: 0n,
});
const connect = () => setWallet(walletClient);
const disconnect = () => setWallet(undefined);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obviously silly here since we have the burner from the get-go, but any login/wallet system can inject its own wallet client.

@frolic
Copy link
Member

frolic commented Sep 2, 2024

thank you so much! I've been deferring this work until we have our MUD wallet solution ready (soon!)

unfortunately upgrading emojimon is quite toilsome because we have to do it for each commit with corresponding docs updates (with line highlighting etc.) so I may leave this in a branch/PR for now as an example for folks until we can get to upgrading everything

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants