setup-solana-browser-app

Setup Solana Browser App with MetaMask

When to use

Use this skill when:

• Integrating MetaMask with Solana in a vanilla JavaScript or non-React browser app
• Using wallet-standard features directly without @solana/wallet-adapter-react
• Building connect, sign, and send flows with the SolanaClient API
• Accessing wallet-standard features like solana:signTransaction or solana:signMessage directly

Workflow

Step 1: Install dependencies

npm install @metamask/connect-solana @metamask/connect-multichain @solana/web3.js

@metamask/connect-multichain is a regular dependency of @metamask/connect-solana and is installed transitively. (Only the 2.0.0 release briefly made it a peer dependency; 2.1.0 reverted that.) Installing it explicitly is harmless but not required. The SDK warns at runtime if duplicate or mismatched copies are resolved.

Step 2: Create the Solana client

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

const solanaClient = await createSolanaClient({
  dapp: {
    name: 'My Solana DApp',
    url: window.location.href,
  },
  api: {
    supportedNetworks: {
      mainnet: 'https://api.mainnet-beta.solana.com',
    },
  },
});

createSolanaClient returns Promise<SolanaClient>:

Property	Type	Description
core	MultichainCore	The underlying multichain client instance
getWallet()	() => Wallet	Returns the wallet-standard Wallet (from @wallet-standard/base)
registerWallet()	() => Promise<void>	Manually register the wallet (auto-called unless skipAutoRegister: true)
disconnect()	() => Promise<void>	Disconnect and revoke Solana scopes

Step 3: Get the wallet and connect

const wallet = solanaClient.getWallet();

// The wallet exposes wallet-standard features
console.log('Wallet name:', wallet.name); // "MetaMask"
console.log('Available features:', Object.keys(wallet.features));