Solana Adapter

The WalletConnect Solana Adapter allows you to integrate the WalletConnect protocol into the Wallet Adapter library.

This adapter is compatible with Solana and SVM-based chains, including Solayer Chain. Applications built on SVM-compatible networks can use the same Solana adapter for wallet authentication and transaction signing.

If you are not familiar with the Wallet Adapter library it is recommended to use AppKit instead. AppKit now supports multichain, which means you can choose and configure multiple blockchain networks within your instance of AppKit, extending beyond just Ethereum-based (EVM) networks.

Installation

bash npm npm install @walletconnect/solana-adapter bash Yarn yarn add @walletconnect/solana-adapter bash Bun bun add @walletconnect/solana-adapter bash pnpm pnpm add @walletconnect/solana-adapter

Cloud Configuration

Create a new project on Reown Dashboard and obtain a new project ID.

Don't have a project ID?

Head over to Reown Dashboard and create a new project.

Implementation

Add the WalletConnectAdapter to your wallets list.

import { ReactNode, useMemo, useState } from 'react'
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import { clusterApiUrl } from '@solana/web3.js'

import '@solana/wallet-adapter-react-ui/styles.css'

import { WalletConnectWalletAdapter } from '@walletconnect/solana-adapter'

export const SolanaContext = ({ children }: { children: ReactNode }) => {
  const endpoint = useMemo(() => clusterApiUrl(WalletAdapterNetwork.Mainnet), [])

  const wallets = useMemo(
    () => [
      new WalletConnectWalletAdapter({
        network: WalletAdapterNetwork.Mainnet,
        options: {
          projectId: 'YOUR_PROJECT_ID'
        }
      })
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  )

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}