beeman · February 19, 2023 20:23 · Feb 19, 2023
diff --git a/app-feature.tsx b/app-feature.tsx
@@ -0,0 +1,24 @@
+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>
+  )
+}
diff --git a/app.tsx b/app.tsx
@@ -0,0 +1,25 @@
+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>
+  )
+}
diff --git a/solana-provider.tsx b/solana-provider.tsx
@@ -0,0 +1,40 @@
+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)