Update React Tutorial (remove detect-metamask) #1299
Conversation
|
Preview published: update-react-tutorials-86-mm-detect |
There was a problem hiding this comment.
Thanks for this update! A few initial comments:
- I think we can get rid of step 2. Discover Wallet Providers (Browser Extensions). The beginner tutorial (Update beginner's tutorial #1276) should cover this.
- Can we split the current step 3. Detect Multiple Wallet Providers into multiple steps or multiple sub-steps so it's not so long? Maybe setting up the environment variables, creating the hooks, and adding the buttons and CSS. If this makes sense to you I can go ahead and add those edits.
- Can you add screenshots to this page demonstrating what the user might see? We need to update the screenshot at the end of step 1, and add another at the end of the tutorial.
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
|
This "React with local state" above is the final draft from @httpJunkie (Eric Bishard). But we can still get this review approved and out of the way. |
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
There was a problem hiding this comment.
The two images provided are the same. Should this instead be a screenshot of the final dapp which displays an address for the connected wallet?
There was a problem hiding this comment.
I may have used the same image twice, was not the intention, let me look at it.
There was a problem hiding this comment.
Thats fixed, also I see how you did the CSS and it's funny. That's how I had originally had the article formatted and then I changed something and got lazy. lol It's perfect now. Thank you @alexandratran
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
…page but not build in navigation.
|
Preview published: update-react-tutorials-86-mm-detect |
|
Preview published: update-react-tutorials-86-mm-detect |
Description
We want to revamp the Tutorials #1 and #2, this PR is for the update of the first of those two tutorials Create a React dapp with local state. And the intention is to keep the same idea for bnoth tutorials with updates to the code and explanation using EIP-6963 instead of
window.ethereumand@metamask/detect-provider.I may add some links out to existing pages that speak on EIP-6963 from the tutorial rather than covering the topic as we already have docs "Wallet Interoperability" and "Detecting MetaMask" that we could create cross links to.
Issue(s) fixed
Tutorial instruction and code have been update, I still need to link to an updated GitHub Repo so that when this goes live the prior repo is not affected until then.
Fixes #
Preview
Screen.Recording.2024-05-17.at.5.47.05.PM.mov
Checklist
Complete this checklist before merging your PR: