Closed joaniefromtheblock closed 2 months ago
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
@vandan PTAL
Preview published: 1202-tutorial
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
Scaffolding project in /Users/eric/src/github/metamask/test/simple-dapp...
Done. Now run:
cd simple-dapp npm install npm run dev
3. Add a `detect.js` file that replaces the `index.js` file in this tutorial (favoring better naming)
4. Update HTML to:
```html
<!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.
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Preview published: 1202-tutorial
Made some edits, including updating the full example JS code to match the code provided in the tutorial steps. LGTM.
Thank you @alexandratran
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: