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: {
      devnet: '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 network names (mainnet, devnet, testnet) to 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 Solana scopes without terminating the broader multichain 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