metamask/metamask-docs

Developer documentation for MetaMask

MetaMask developer documentation

This is the MetaMask developer documentation repository. The documentation site is hosted at docs.metamask.io, and it's built using Docusaurus, a static site generator purpose-built for technical documentation.

Build locally

Build the documentation site locally using the following steps.

Prerequisites

• Node.js version 16
• Yarn version 3
• Git

Steps

1. Clone the repository.

   git clone https://github.com/MetaMask/metamask-docs.git
   cd metamask-docs

   Note: If you don't have write access to this repository, you must fork the repository to your personal account and clone your forked repository instead. Add an upstream remote to be able to pull from and push to the original repository.

   git clone https://github.com/<YOUR-USERNAME>/metamask-docs.git
   cd metamask-docs
   git remote add upstream https://github.com/MetaMask/metamask-docs.git

2. Install dependencies.

   yarn install

3. Start the development server.

   yarn start

   Once the server starts, you can view the documentation at http://localhost:3000.

For more information on contributing to the documentation, see the full contribution guidelines.

metamask-docs's Issues

Add a "Contributors" section to the docs for the MetaMask Extension and docs

Thought it'd be a great idea to add a "Contributor" tab at the bottom of the "Resource" section.

To Do:

• Create a list that renders the images of contributors to the MetaMask Extension and Docs.
• Mimic the styling/design of the MetaMask.io website specifically towards images.
• Link each image to the individuals' github profile.
• Create two "Submit an Issue" buttons on the page linking to https://github.com/MetaMask/metamask-docs/issues/new and https://github.com/MetaMask/metamask-extension/issues/new/choose

convert existing examples to ethers.js

in examples we should migrate away from the web3 library and use ethers.js, given that it's our library of choice internally

Create a getting started tutorial app

Create a getting started tutorial app that will help guide developers on where to start with the different methods when communicating with the network. Reference here as a starting point for the getting started application.

API Reference link leads to 404

"See API Reference" link under, https://metamask.github.io/metamask-docs/Main_Concepts/Getting_Started#user-state leads to a broken link 404

Add deeplinks docs

https://metamask.github.io/metamask-deeplinks/#

Link to "File an issue" in documentation obfuscates last items.

The container that displays "Found a documentation bug? File an issue" obfuscates the last items. In general i've noticed that scrolling the left sidebar feels a bit wonky.

metamask.github.io/metamask-docs doesn't get the automatic vuepress updates, probably due to the dns redirect

404

Clean up excess files and code

Some folders/files in the repo are excessive and unnecessary. Need to clean out and eliminate psudo code

Possible typo: reason instead of error

The code in this page:

https://metamask.github.io/metamask-docs/API_Reference/Ethereum_Provider#ethereum.enable()

Example usage (ES6), assuming async function:

try {
  const accounts = await ethereum.enable()
  // You now have an array of accounts!
  // Currently only ever one:
  // ['0xFDEa65C8e26263F6d9A1B5de9555D2931A33b825']

} catch (error) {
  // Handle error. Likely the user rejected the login:
  console.log(reason === "User rejected provider access")
}

logs an error: reason is not defined

reason might have been mistaken which should've been error

Investigate vue components for live coding examples(REPL)

Look into creating live coding examples for Ethereum methods. Interactive docs with more code examples. Make the docs more interactive by creating reactivity and real-time feedback when typing

Replace codepen examples with components

making the docs more interactive by replacing the codepen examples with actual vue components. Will keep a link to the codepen examples for people to play with

Bug in documentation code?

I believe the code contained at this link: https://metamask.github.io/metamask-docs/Examples/Low_Level_Ether_Transfer

    const rejected = 'User denied transaction signature.'
    if (response.error && response.error.message.includes(rejected)) {
      return alert(`We can't take your money without your permission.`)
    }

Should be:

        const rejected = 'User denied transaction signature.'
        if (response.error && response.error.stack.includes(rejected)) {
          return alert(`We can't take your money without your permission.`)
        }

Add rimble button to onboarding docs

This should include examples of use with the Rimble MetaMask button.

Create a Section for MetaMask Onboarding Library

Port over Readme.md to go under 'Getting Started'
https://github.com/MetaMask/metamask-onboarding

Document the extension-provider and its correct usage

Allows other WebExtensions to connect to MetaMask:
https://github.com/MetaMask/extension-provider

Accessing Accounts page grammar

It says "but no use as as important as calling" on the Accessing Accounts page in the docs, and that doesn't make sense. Please consider rewording this with the intended meaning. Thanks!

Hello World

Readme

Guide - Getting Started Redesign

• Create a visual step by step walkthrough on how to detect Web3 for Web3 Browser Detection
• Create walkthrough visuals for Running a Test Network

Sign Typed Data v3 page out of date

On this page it says v3 is the latest version, but now v4 is the latest version.

http://docs.metamask.io/ is having issues

Only the home page is accessible, and that without css. All internal links return a 404.

api reference link is broken in getting started page

Both of these are available synchronously as ethereum.networkVersion and ethereum.selectedAddress. You can listen for changes using events too, see (the API reference).

Typo on Signing Data with MetaMask page

On this page it says "MetMask" rather than "MetaMask".

Cannot tap scroll through the side menu on mobile

Detect if the metamask is installed fail

Hi,
I use the Metamask "Quick Started" sample code to detect that,
But I always got the alert 'Looks like you need a Dapp browser to get started.' even the metamask is installed.

The Metamask info is V7.4.0 in Chrome.
Someone help me to fix that?
thank you :)

if (typeof window.ethereum === 'undefined') {
alert('Looks like you need a Dapp browser to get started.')
alert('Consider installing MetaMask!')

} else {

    // In the case the user has MetaMask installed, you can easily
    // ask them to sign in and reveal their accounts:
    ethereum.enable()

        // Remember to handle the case they reject the request:
        .catch(function (reason) {
            if (reason === 'User rejected provider access') {
                // The user didn't want to sign in!
            } else {
                // This shouldn't happen, so you might want to log this...
                alert('There was an issue signing you in.')
            }
        })
        // In the case they approve the log-in request, you'll receive their accounts:
        .then(function (accounts) {
            // You also should verify the user is on the correct network:
            if (ethereum.networkVersion !== desiredNetwork) {
                alert('This application requires the main network, please switch it in your MetaMask UI.')

                // We plan to provide an API to make this request in the near future.
                // https://github.com/MetaMask/metamask-extension/issues/3663
            }

            // Once you have a reference to user accounts,
            // you can suggest transactions and signatures:
            const account = accounts[0]
            sendEtherFrom(account, function (err, transaction) {
                if (err) {
                    return alert(`Sorry you weren't able to contribute!`)
                }

                alert('Thanks for your successful contribution!')
            })

        })
}

Add "Contributing to MetaMask" section

MetaMask/metamask-extension#8000

Typo and wrong version on Sign Typed Data v4 page

On this page it says "comaptible" rather than "compatible".

Also, it says "does not mean we will not eventually have a v4". It should say v5, since this page is already for v4.

Migrate docs site to BboyAkers version

This branch: https://github.com/MetaMask/metamask-docs/tree/BboyAkersVersion

Typo on Sending Transactions page

It says "MyCryto" rather than "MyCrypto" in this section.

Links on API Reference are broken

Look into SEO Optimizations to Improve Search Rankings

use:
https://ahrefs.com/backlink-checker

paste link below in search box:
https://docs.metamask.io/

This will show the domain back linking results. It's currently at 80. Due to it being a subdomain of MetaMask.io.
To better improve results and search optimization we need to:
-Perform keyword research
-Improve Metadata Content
-Create FAQ's on each page

Clicking on the `ethereum API` link leads to a 404 page

This issue refers to the link at the bottom of this page highlighted as ethereum API.

Screenshot of the link

Which leads to https://metamask.github.io/metamask-docs/Examples/API_Reference

404 Page

May be what @marcuswin was referring to in his issue here #4

Create signTypedData_v4 example

Create an example for signing data types.

Update structure of mobile docs

Current structure of mobile docs is:

New structure (to update to):

Mobile

1. Introduction (has content updates)

2. Checklist to make site compatible

• Ethereum provider (same cpntent)
• Dapp compatibility (same content)
• Connect with MetaMask button (content updates in #136) removing per comment
• Transaction calls (content updates in #136)

3. Best practices

• Dapp interactions with MetaMask browser & Wallet Connect
  a) MetaMask users can access your site/DApp directly via MetaMask’s Web3 browser (apply to be listed here). Or they can simply search it in the browser
  b) Use the link generator to open your site with MetaMask app (https://metamask.github.io/metamask-deeplinks/#)
  c) WalletConnect (same content): Use mobile deeplinking to sign using MetaMask while your users use the web3 site on the browser of their choice (GIF of walletconnect working on MetaMask mobile)
• Deeplinks (same content) - enable payment requests with MetaMask
• Make your web3 site mobile friendly

Redesign Documentation

Theme/Content Redesign (Will link several different pull requests)

Base 2.0 PR #189

• Add MetaMask color pallet for the base theme #189
• Guide Section: (In Progress)
  • Introduction (In Progress: #191)
  • Getting Started
  • Common Terms
  • Initializing Dapps
  • Accessing Accounts
  • Sending Transactions
• Change all the live example's CSS to follow the MetaMask branding guidelines
• Add dark theme toggling capabilities
• API Reference changes
  • Ethereum Provider API:
    • Push code snippets into JavaScript files (discuss with MetaMask team on maintainability)
  • Signing Data:
  • Create a video on Sign Typed Data V4
  • Clean up Sign Typed Data V4 parameter definitions
• Mobile Section:
  • Redesign Introduction Page
  • Create Interactive Site Compatibility Checklist

Create a Tutorial App for Developers (Typescript Rewrite) (Will link several different pull requests)

• Refactor testing dapp and create modules to prep for the "Getting Started" tutorial
• Create Step by step guide to building a basic Dapp (4 Parts)
• Create Video on building out of the "Getting Started" tutorial web app

Brand Resources:
https://github.com/MetaMask/brand-resources

Hello-world

Readme

function signature docs are outdated for new remix.etherum.org site

need to be updated to be compatible with the new remix version

Create Simple Dapp Part 1 Improvements

1. Number/Letter the subheaders to correspond with the TOC
a. The five steps under Basic Action (Part 1) are not numbered , so it's harder for the reader to follow along in the steps. I think the bullets in the first section of Basic Action (Part 1) should be numbered, and the headers that correspond to those bullets be numbered as well.
b. Only the first bullet point in Basic Action (Part 1) is a link to its respective section. All of the bullets should have corresponding links

2. Avoid adding code to the middle of blocks
As much as possible, the tutorial should try to build the code linearly. On two occasions in this tutorial, the reader is asked to add code in the middle of a block, which increases the likelihood of errors and adds confusion.

3. Increased feedback loops so the user can verify exactly what happened
As a user who is fairly new to any programming language or platform, having tight feedback loops ensures that they are on the right track and boosts confidence. I would personally prefer to have less steps with more feedback, even at the expense of longer code blocks.

4. A final code block that shows the entire page/tutorial in a single block
At the end of the tutorial, having the entire code block on the page provides a checkpoint for the reader. They are then able to compare their work to the completed code block and make any chances to their work if they are seeing any errors. Having this larger code block also allows for the users to paste the entire code snippet and work through the tutorial with complete code .

Create a Hardware Wallets Info & List Section

Add info about:

• current & planned support
• compatible signing methods

add link to inpage provider in mobile dapp compatibility

Use try/catch instead of .then/.catch everywhere

We should use async/await and try/catch everywhere in the repo instead of .then/.catch.

ethereum.request is not a function

The documentation states to get accounts from this method but the method does not exist on MM injected ethereum object.

remix link broken on function registry page

"Paste the contract code from bokky's blog post into remix" -> remix link is incorrect

Docs we want to add

Here are some docs we agreed we'd like to add. Please check off an item as you begin it, so nobody else does! (Also maybe reload first to make sure someone else didn't just check it).

• Inter-linking between docs sites
  • Refine verbiage of three docs site types (extension, Ðapp, user)
  • Link each to each other
• Quick Start Guide (build on our hackathon guide but with EIP 1102 support)
• Getting started
  • 1102 Sign-in
  • running ganache
  • reset ganache
  • Common terms
• Interacting with user accounts
  • Sending Transactions
    • Gas price (user editable)
    • Gas limit (Ðapp default editable)
    • Nonce (Not Ðapp editable)
    • Transaction retries (tx hash not currently an absolute source of truth!)
  • Signing Data
    • History
    • eth_sign
    • personal_sign
    • eth_signTypedData
• Best practices
  • Detect network changes
  • Add your method names to the registry
  • Add your tokens to the user’s list.
• Full supported JSON-RPC subset
• Our experimental APIs?
  • watchAsset
• how gas is calculated
• #92
  • current & planned support
  • compatible signing methods
• (soon) contract account setup / how-to
• #416

add chrome error

error:
Name of a key "directdepositqitmm'erexplainer" is invalid. Only ASCII [a-z], [A-Z], [0-9] and "_" are allowed.

chrome 78.0.3904.108 （64）

Docs Scroll

issue to scroll menu left in : https://metamask.github.io/metamask-docs/
Browser : Opera Versión:62.0.3331.99

Documentation Bug Submitter Obscures Best Practices

Google Chrome
Version 74.0.3729.169 (Official Build) (64-bit)

Can't access 'Best Practices' in the docs because the link is obscured by the Bug submitter panel and there is no option (or way) to scroll further down ...

Add search indexing with Algolia

From @rekmarks:

Our documentation’s search functionality sucks, because we’re using a limited, local, markdown header-based JS search library. As it turns out, lots of big projects use VuePress for their docs like we do, and you can do a free integration with a search engine called Algolia to provide full-text site search.
The gist is that Algolia indexes your docs site, and then you incorporate their widget into your docs (very straightforward with VuePress). It does not appear to inject any trackers into the website, at least none that Brave can detect.
Users include Babel, React, Yarn, TypeScript, Webpack, and ESLint.
VuePress docs for integration: https://vuepress.vuejs.org/theme/default-theme-config.html#algolia-search
Algolia’s docsearch product home page: https://docsearch.algolia.com/

window.ethereum link 404

https://metamask.github.io/metamask-docs/API_Reference/JSON_RPC_API

You can look up how to pass these methods to the window.ethereum object here.

Wrong return value for eth_requestAccounts

The documentation says the method eth_requestAccounts returns an array of accounts, however it returns a JSON-RPC response as of MetaMask 7.4.0. Probably a bug of MetaMask.

To reproduce

In any page containing an EthereumProvider for a browser installed MetaMask 7.4.0, evaluate the following statement:

ethereum.send('eth_requestAccounts').then(console.log)
// {id: 1, jsonrpc: "2.0", result: ['0x1234...']}