How to Connect a Wallet with React

Solana's wallet-adapter library makes it easy to manage wallet connections with a frontend application.

Reference Nextjs Template

This template is only compatible with @solana/web3.js.

Deploy your first Solana application - a simple Counter Program built using the Anchor framework. This example covers all the core Solana concepts to get started building on Solana. View the source code here.

For a @solana/kit example, reference the Kit example.

Dependencies

If you are creating a new Nextjs project, install the following dependencies:

Terminal
$
npm install @solana/web3.js \
@solana/wallet-adapter-base \
@solana/wallet-adapter-react \
@solana/wallet-adapter-react-ui \
@solana/wallet-adapter-wallets

Create Solana Provider

Create a SolanaProvider that will be used to provide the Solana context to the application.

Source Reference

Solana Provider
"use client";
import React, { FC, ReactNode, useMemo } 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";
interface SolanaProviderProps {
children: ReactNode;
}
export const SolanaProvider: FC<SolanaProviderProps> = ({ children }) => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'
const network = WalletAdapterNetwork.Devnet;
// You can also provide a custom RPC endpoint
const endpoint = useMemo(() => clusterApiUrl(network), [network]);
return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={[]} autoConnect>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Wrap the Application in the Solana Provider

Add the SolanaProvider to the RootLayout in the app directory.

Source Reference

Root Layout
import "./globals.css";
import "@solana/wallet-adapter-react-ui/styles.css";
import { SolanaProvider } from "@/components/counter/provider/Solana";
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html>
<body>
<SolanaProvider>{children}</SolanaProvider>
</body>
</html>
);
}

Is this page helpful?