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 = await 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 the wallet

Get the Wallet Standard wallet instance and connect:

const wallet = solanaClient.getWallet()

const { accounts } = await wallet.features['standard:connect'].connect()
console.log('Connected account:', accounts[0].address)

The client handles cross-platform connection (desktop and mobile), including deeplinking.

SolanaClient methods at a glance

Method	Description
getWallet()	Returns a Wallet Standard compatible wallet instance
registerWallet()	Registers MetaMask with the Wallet Standard registry (no-op if auto-registered)
disconnect()	Disconnects from the wallet and revokes the session

Usage example

// 1. Connect and get accounts
const wallet = solanaClient.getWallet()
const { accounts } = await wallet.features['standard:connect'].connect()

// 2. Sign a message
const message = new TextEncoder().encode('Hello from my dapp')
const [{ signature }] = await wallet.features['solana:signMessage'].signMessage({
  account: accounts[0],
  message,
})

// 3. Disconnect
await solanaClient.disconnect()

Live example