Solana Wallet Adapter

To enable wallet functionality, wrap your application components in a hierarchy of context providers. You must include ConnectionProvider, WalletProvider, and WalletModalProvider.

Key configuration details:

• Network: Use WalletAdapterNetwork (e.g., Devnet, Testnet, or MainnetBeta) to define the network.
• Endpoint: Provide an RPC endpoint, typically generated via clusterApiUrl(network) from @solana/web3.js.
• Wallets: Pass an array of wallet instances to WalletProvider. Wallets following the Solana Wallet Standard or Mobile Wallet Adapter Protocol are available automatically. For legacy wallets, instantiate them from @solana/wallet-adapter-wallets.
• Styles: Import @solana/wallet-adapter-react-ui/styles.css to ensure the UI components render correctly.

Common UI components provided by @solana/wallet-adapter-react-ui include:

• WalletMultiButton: A button to trigger the wallet selection modal.
• WalletDisconnectButton: A button to disconnect the current wallet.

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 app
import '@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(
        () => [
            /**
             * Wallets that implement either of these standards will be available automatically.
             *
             *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
             *     (https://github.com/solana-mobile/mobile-wallet-adapter)
             *   - Solana Wallet Standard
             *     (https://github.com/anza-xyz/wallet-standard)
             *
             * If you wish to support a wallet that supports neither of those standards, 
             * instantiate its legacy wallet adapter here. Common legacy adapters can be found
             * in the npm package `@solana/wallet-adapter-wallets`.
             */
            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>
    );
};