Connect to Solana using MetaMask Connect

This quickstart gets you up and running with MetaMask Connect for Solana in a JavaScript dapp. Download the template to start quickly, or set up manually in an existing project.

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, use git clone to download the entire repository. 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 examples show how to use 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