Basic Solana Provider for React apps - a personal reference.

app-feature.tsx

import { useConnection, useWallet } from '@solana/wallet-adapter-react'
import { useSolana } from './solana-provider'

export function AppFeature() {
  const { connection } = useConnection()
  const { network } = useSolana()
  const wallet = useWallet()

  if (wallet.connecting) {
    return <div>Connecting wallet...</div>
  }

  if (!wallet.connected || !wallet?.publicKey) {
    return <div>Connect your wallet to continue</div>
  }

  return (
    <div>
      <div>Endpoint {`${connection.rpcEndpoint}`}</div>
      <div>Network {`${network}`}</div>
      <div>Public Key {`${wallet.publicKey}`}</div>
    </div>
  )
}

app.tsx

import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
import { clusterApiUrl } from '@solana/web3.js'
import { useMemo } from 'react'
import { SolanaProvider } from './solana-provider'
import { AppFeature } from './app-feature'

export function App() {
  const network = WalletAdapterNetwork.Devnet
  const endpoint = clusterApiUrl(network)
  const wallets = useMemo(
    () => [
      // Add more wallets here
      new SolflareWalletAdapter({ network }),
      new PhantomWalletAdapter({ network }),
    ],
    [network],
  )

  return (
    <SolanaProvider endpoint={endpoint} network={network} wallets={wallets}>
      <AppFeature />
    </SolanaProvider>
  )
}

solana-provider.tsx

import { Adapter, WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { ConnectionProvider, WalletProvider as SolanaWalletProvider } from '@solana/wallet-adapter-react'
import { createContext, ReactNode, useContext } from 'react'
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'

export interface SolanaProviderContext {
  network: WalletAdapterNetwork
  endpoint: string
}

const SolanaContext = createContext<SolanaProviderContext>({} as SolanaProviderContext)

export function SolanaProvider({
  children,
  endpoint,
  network,
  wallets = [],
}: {
  children: ReactNode
  endpoint: string
  network: WalletAdapterNetwork
  wallets?: Adapter[]
}) {
  const value: SolanaProviderContext = {
    network,
    endpoint,
  }

  return (
    <SolanaContext.Provider value={value}>
      <ConnectionProvider endpoint={endpoint}>
        <SolanaWalletProvider wallets={wallets} autoConnect>
          <WalletModalProvider>{children}</WalletModalProvider>
        </SolanaWalletProvider>
      </ConnectionProvider>
    </SolanaContext.Provider>
  )
}

export const useSolana = () => useContext(SolanaContext)