Solana CookbookWallets
How to Connect a Wallet with React
Solana's wallet-adapter library makes it easy to manage wallet connections client-side. For a full length guide, check out Add Solana Wallet Adapter to a NextJS application.
For web3.js v2, please reference the react example from the Anza Web3js v2 Blog.
How to Connect to a Wallet with React
Currently,
create-solana-dapp
only works with Solana Web3.js v1.
For quick setup with React use:
npx create-solana-dapp <app-name>
For manual setup, run the following command to install the required dependencies:
npm install --save \@solana/wallet-adapter-base \@solana/wallet-adapter-react \@solana/wallet-adapter-react-ui \@solana/wallet-adapter-wallets \@solana/web3.js@1 \react
The WalletProvider
can than be setup to connect to a user's wallet and later
send transactions.
import React, { FC, useMemo } from 'react';import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';import {WalletModalProvider,WalletDisconnectButton,WalletMultiButton} from '@solana/wallet-adapter-react-ui';import { clusterApiUrl } from '@solana/web3.js';// Default styles that can be overridden by your apprequire('@solana/wallet-adapter-react-ui/styles.css');export const Wallet: FC = () => {// 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]);const wallets = useMemo(() => [new UnsafeBurnerWalletAdapter(),],// eslint-disable-next-line react-hooks/exhaustive-deps[network]);return (<ConnectionProvider endpoint={endpoint}><WalletProvider wallets={wallets} autoConnect><WalletModalProvider><WalletMultiButton /><WalletDisconnectButton />{ /* Your app's components go here, nested within the context providers. */ }</WalletModalProvider></WalletProvider></ConnectionProvider>);};