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 on Vercel

Deploy your first Solana application on Vercel

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.