MetaMask
Update beginner's tutorial
Description
Deprioritizes the current detect provider and added basic tutorial in vanilla JS without EIP-6963
Issue(s) fixed
Fixes #1202
Preview
https://docs.metamask.io/1202-tutorial/wallet/tutorials/javascript-dapp-simple/
Checklist
Complete this checklist before merging your PR:
- [x] If this PR contains a major change to the documentation content, I have added an entry to the top of the "What's new?" page.
- [ ] The proposed changes have been reviewed and approved by a member of the documentation team.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I think that this works and illustrates detecting and connecting to metamask in a bare bones simple dapp.
My only suggestion is to maybe ... start with Vite Vanilla JS app using:
npm create vite@latest simple-dapp -- --template vanilla
This would create the structure of the dapp for them.
Next step could be to rename the counter.js or add a detect.js file to the project and then follow the rest of the steps.
This keeps the tutorial user form having to configure webpack and utilizes ViteJS which we have been trying to leverage in our other tutorials.
This is something that if we want, I could make a change to the branch to implement. If we think it is not needed, I'm ok with the current PR.
Steps in a ViteJS would be:
npm create vite@latest simple-dapp -- --template vanilla
- OUTPUT:
Scaffolding project in /Users/eric/src/github/metamask/test/simple-dapp...
Done. Now run:
cd simple-dapp
npm install
npm run dev
- Add a
detect.jsfile that replaces theindex.jsfile in this tutorial (favoring better naming) - Update HTML to:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
<!-- Display a connect button and the current account -->
<button class="enableEthereumButton">Enable Ethereum</button>
<h2>Account: <span class="showAccount"></span></h2>
</div>
<script type="module" src="/detect.js"></script>
</body>
</html>
Javascript steps remain the same.
Made some edits, including updating the full example JS code to match the code provided in the tutorial steps. LGTM.
Thank you @alexandratran