Skip to main content

Solana Adapter

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

note

If you are not familiar with the Wallet Adapter library it is recommended to use AppKit instead.

Installation​

npm install @walletconnect/solana-adapter

Cloud Configuration​

Create a new project on WalletConnect Cloud at https://cloud.walletconnect.com and obtain a new project ID.

Don't have a project ID?

Head over to WalletConnect Cloud and create a new project now!

Get startedcloud illustration

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>
	)
}