Skip to main content

Use MetaMask SDK with other web frameworks

Import MetaMask SDK into your web dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile. The SDK for other web frameworks has the same prerequisites as for standard JavaScript.

Steps​

1. Install the SDK​

In your project directory, install the SDK using Yarn or npm:

yarn add @metamask/sdk

or

npm i @metamask/sdk

2. Import the SDK​

In your project script, add the following to import the SDK:

index.js
import { MetaMaskSDK } from "@metamask/sdk"

3. Instantiate the SDK​

Instantiate the SDK using any options:

index.js
const MMSDK = new MetaMaskSDK({
  dappMetadata: {
    name: "Example JavaScript Dapp",
    url: window.location.href,
  },
  infuraAPIKey: process.env.INFURA_API_KEY,
  // Other options
});

// You can also access via window.ethereum
const ethereum = MMSDK.getProvider();

4. Use the SDK​

Use the SDK by calling any provider API methods. Always call eth_requestAccounts using request() first, since it prompts the installation or connection popup to appear.

ethereum.request({ method: "eth_requestAccounts", params: [] })

You can also call the SDK's connectAndSign method, and batch multiple JSON-RPC requests using the metamask_batch method.

Example​

You can copy the full JavaScript example to get started:

index.js
import { MetaMaskSDK } from "@metamask/sdk";

const MMSDK = new MetaMaskSDK({
  dappMetadata: {
    name: "Example JavaScript Dapp",
    url: window.location.href,
  },
  infuraAPIKey: process.env.INFURA_API_KEY,
  // Other options
});

// You can also access via window.ethereum
const ethereum = MMSDK.getProvider();

ethereum.request({ method: "eth_requestAccounts", params: [] });

See the example JavaScript dapps in the JavaScript SDK GitHub repository for more information.