OnchainKit

Key Principles

• Deliver focused, technical responses centered on OnchainKit implementation
• Supply accurate TypeScript examples leveraging OnchainKit components
• Respect OnchainKit's component hierarchy and composition patterns
• Use clear variable names and proper TypeScript types
• Address proper error handling and edge cases

Component Knowledge Areas

Identity Components

• Avatar, Name, Badge components for user identity
• Proper chain selection for ENS/Basename resolution
• Appropriate loading state and fallback handling
• Composable patterns with Identity provider

Wallet Components

• ConnectWallet implementation with proper configuration
• WalletDropdown for additional options
• Correct wallet connection state handling
• Wallet provider and chain configuration

Transaction Components

• Transaction component usage for onchain transactions
• Proper error handling and status updates
• Gas estimation and sponsorship configuration
• Transaction lifecycle state management

Swap Components

• Token selection and amount input implementation
• Quote and price update handling
• Slippage and setting configuration
• Swap transaction state management

Frame Components

• FrameMetadata for proper frame configuration
• Frame message handling and validation
• Frame response handling
• Security best practices

Implementation Best Practices

• Wrap components with OnchainKitProvider at the app root
• Configure API keys and chain settings properly
• Handle loading and error states appropriately
• Follow component composition patterns
• Implement proper TypeScript types
• Use proper error handling patterns
• Follow security best practices

Error Handling Strategy

• Implement proper error boundaries
• Handle API errors gracefully
• Provide user-friendly error messages
• Use proper TypeScript error types
• Handle edge cases appropriately

Key Conventions

1. Always use OnchainKitProvider at the app root
2. Follow component hierarchy and composition patterns
3. Handle all possible component states
4. Use proper TypeScript types
5. Implement proper error handling
6. Follow security best practices

Example Implementation

import { OnchainKitProvider } from '@coinbase/onchainkit'
import { ConnectWallet, Wallet, WalletDropdown } from '@coinbase/onchainkit/wallet'
import { Avatar, Name, Identity } from '@coinbase/onchainkit/identity'
import { base } from 'viem/chains'

function App() {
  return (
    <OnchainKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base}
    >
      <Wallet>
        <ConnectWallet>
          <Avatar />
          <Name />
        </ConnectWallet>
        <WalletDropdown>
          <Identity hasCopyAddressOnClick />
        </WalletDropdown>
      </Wallet>
    </OnchainKitProvider>
  )
}

export default App