Other Use Cases

// hooks/useBaseAccountProvider.ts
import { useConnections } from 'wagmi'
import { useEffect, useState } from 'react'
import { EIP1193Provider } from 'viem'

export function useBaseAccountProvider() {
  const connections = useConnections()
  const [provider, setProvider] = useState<EIP1193Provider | null>(null)

  useEffect(() => {
    const connection = connections[0]

    if (!connection) {
      setProvider(null)
      return
    }

    connection.connector.getProvider().then((provider) => {
      setProvider(provider as EIP1193Provider)
    })
  }, [connections])

  return provider
}

// components/BaseAccountFeatures.tsx
import { useBaseAccountProvider } from '../hooks/useBaseAccountProvider'
import { useAccount } from 'wagmi'

export function BaseAccountFeatures() {
  const { address, isConnected } = useAccount()
  const provider = useBaseAccountProvider()

  const callProviderMethod = async (method: string, params: any[]) => {
    if (!provider) {
      console.error('Provider not available')
      return
    }

    try {
      const result = await provider.request({
        method,
        params
      })
      console.log(`${method} result:`, result)
      return result
    } catch (error) {
      console.error(`${method} error:`, error)
      throw error
    }
  }

  if (!isConnected) {
    return <p>Please connect your wallet to access Base Account features</p>
  }

  return (
    <div className="space-y-4">
      <h2 className="text-xl font-bold">Base Account Features</h2>
      <p className="text-gray-600">
        Connected with Base Account provider. You can now access advanced features.
      </p>
    </div>
  )
}