setup-solana-react-app

Setup Solana React App with MetaMask

When to use

Use this skill when:

• Integrating MetaMask with Solana in a React web application
• Configuring @solana/wallet-adapter-react with MetaMask Connect's wallet-standard discovery
• Building connect, sign message, or send transaction flows using useWallet
• The MetaMask wallet is not appearing in the Solana wallet adapter

Workflow

Step 1: Install dependencies

npm install @metamask/connect-solana @metamask/connect-multichain @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-base @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 early in app startup

Initialize createSolanaClient early (e.g. in your bootstrap before rendering). It does not need to resolve before the first WalletProvider render — wallet-standard supports late registration, and the SDK registers the wallet about 1 second after the factory resolves. The adapter picks it up via the wallet-standard register event whenever it lands. If your UI asserts "MetaMask is available" synchronously, gate that specific UI on the client being ready.

// src/main.tsx (or index.tsx)
import { createSolanaClient } from '@metamask/connect-solana';
import { createRoot } from 'react-dom/client';
import App from './App';

async function bootstrap() {
  await createSolanaClient({
    dapp: {
      name: 'My Solana DApp',
      url: window.location.href,
    },
  });

  const root = createRoot(document.getElementById('root')!);
  root.render(<App />);
}

bootstrap();

createSolanaClient options:

Parameter	Type	Description
dapp.name	string	Required. Display name of your dApp
dapp.url	string	Optional. dApp URL
dapp.iconUrl	string	Optional. dApp icon
api.supportedNetworks	Partial<Record<'mainnet' | 'devnet' | 'testnet', string>>	Map network names to RPC URLs
debug	boolean	Reserved — accepted in the options type but not currently forwarded by createSolanaClient (no effect yet)
skipAutoRegister	boolean	Skip automatic wallet-standard registration
analytics.integrationType	string	Optional. Tag analytics events with an integration identifier (added in @metamask/connect-solana 0.8.0)