Connect to Solana using MetaMask Connect

Get started with MetaMask Connect in your JavaScript dapp. You can download the quickstart template or manually set up MetaMask Connect in an existing dapp.

Prerequisites

• Node.js version 19 or later installed.
• A package manager installed, such as npm, Yarn, pnpm, or bun.
• MetaMask installed in your browser or on mobile.
• An Infura API key from the MetaMask Developer dashboard.

Set up using a template

1. Download the MetaMask Connect JavaScript template:

   npx degit MetaMask/metamask-sdk-examples/quickstarts/javascript metamask-javascript

2. Navigate into the repository:

   cd metamask-javascript

   Degit vs. Git clone

   degit is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.

   Alternatively, you can use git clone, which will download the entire repository. To do so, clone the MetaMask Connect examples repository and navigate into the quickstarts/javascript directory:

   git clone https://github.com/MetaMask/metamask-sdk-examples
   cd metamask-sdk-examples/quickstarts/javascript

3. Install dependencies:

   pnpm install

4. Create a .env.local file:

   touch .env.local

5. In .env.local, add a VITE_INFURA_API_KEY environment variable, replacing <YOUR-API-KEY> with your Infura API key:

   .env.local

   VITE_INFURA_API_KEY=<YOUR-API-KEY>

6. Run the project:

   pnpm dev

You've successfully set up MetaMask Connect.

Set up manually

1. Install MetaMask Connect

Install MetaMask Connect in an existing JavaScript project:

• npm
• Yarn
• pnpm
• Bun

npm install @metamask/connect-solana

yarn add @metamask/connect-solana

pnpm add @metamask/connect-solana

bun add @metamask/connect-solana

2. Initialize MetaMask Connect

The following are examples of using MetaMask Connect in various JavaScript environments:

import { createSolanaClient } from '@metamask/connect-solana'

const solanaClient = createSolanaClient({
  dapp: {
    name: 'Example JavaScript Solana dapp',
    url: window.location.href,
    iconUrl: 'https://mydapp.com/icon.png', // Optional
  },
  api: {
    supportedNetworks: {
      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:': 'https://api.devnet.solana.com',
    },
  },
})

These examples configure MetaMask Connect with the following options:

• dapp - Ensures trust by showing your dapp's name, url, and iconUrl during connection.
• api.supportedNetworks - A map of caipChainIds -> RPC URLs for all networks supported by the app.

3. Connect and use provider

Connect to MetaMask and get the provider for RPC requests:

const provider = solanaClient.getProvider()

const accounts = await solanaClient.connect()
console.log('Connected account:', accounts[0])

const result = await provider.request({
  method: 'solana_accounts',
  params: [],
})
console.log('solana_accounts result:', result)

solanaClient.connect() handles cross-platform connection (desktop and mobile), including deeplinking.

Use provider.request() for arbitrary JSON-RPC requests like solana_chainId or solana_getBalance, or for batching requests via metamask_batch.

Common MetaMask Connect methods at a glance

Method	Description
connect()	Triggers wallet connection flow
connectAndSign({ msg: "..." })	Connects and prompts user to sign a message
getProvider()	Returns the provider object for RPC requests
provider.request({ method, params })	Calls any Solana JSON‑RPC method
Batched RPC	Use metamask_batch to group multiple JSON-RPC requests

Usage example

// 1. Connect and get accounts
const accounts = await solanaClient.connect()

// 2. Connect and sign in one step
const signResult = await solanaClient.connectAndSign({
  msg: 'Sign in to the dapp',
})

// 3. Get provider for RPC requests
const provider = solanaClient.getProvider()

// 4. Make an RPC request
const result = await provider.request({
  method: 'solana_accounts',
  params: [],
})

Live example