React

If you are developing a web application that users can access via a desktop or mobile browser, you can import the MetaMask SDK and it will guide users to easily connect with MetaMask.

If the user is on a desktop browser and doesn't have the MetaMask extension installed, a popup will appear that will prompt users to either install MetaMask extension or to connect with MetaMask Mobile via a QR code.

If on a mobile browser, the SDK will automatically deeplink into MetaMask Mobile (or prompt users to install if they don't already have it) and once users accept the connection, they will be automatically redirected back to your web app. This will happen for all actions that need user approval.

1. Install a MetaMask Mobile version compatible with the SDK

In order to test the MetaMask SDK, developers need access to a MetaMask Mobile build that is compatible with the SDK. Please install MetaMask Mobile v5.8.1 or above.

2. Install the SDK

yarn add @metamask/sdk
or
npm i @metamask/sdk

3. Use the SDK

import MetaMaskSDK from '@metamask/sdk';
const MMSDK = new MetaMaskSDK(options);
const ethereum = MMSDK.getProvider(); // You can also access via window.ethereum
ethereum.request({ method: 'eth_requestAccounts', params: [] });

For a list of possible options check here

TIP

You should always call eth_requestAccounts first, that is what prompts the installation/connection popup to appear!

For other possible methods, check the Ethereum Provider API

That's it!

Recordings

• Destkop web browser (opens new window)
• Mobile web browser (opens new window)

Examples

• Hosted Test Dapp with SDK installed (opens new window)
• React Project (opens new window)

Install the example: yarn

Run the example: yarn start