The WalletConnect Solana Adapter allows you to integrate the WalletConnect protocol into the Wallet Adapter library.
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 Cloud at https://cloud.reown.com and obtain a new project ID.
Don’t have a project ID?
Head over to Reown Cloud and create a new project now!
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>
);
};