Common Issues & Debugging

your-domain.com/
├── .well-known/
│   └── farcaster.json          # Required manifest file
├── your-app/
│   ├── index.html              # Your app entry point
│   └── ...                     # Your app files

{
  "accountAssociation": {
    "header": "eyJmaWQiOjkxNTIsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHgwMmVmNzkwRGQ3OTkzQTM1ZkQ4NDdDMDUzRURkQUU5NDBEMDU1NTk2In0",
    "payload": "eyJkb21haW4iOiJyZXdhcmRzLndhcnBjYXN0LmNvbSJ9",
    "signature": "MHgxMGQwZGU4ZGYwZDUwZTdmMGIxN2YxMTU2NDI1MjRmZTY0MTUyZGU4ZGU1MWU0MThiYjU4ZjVmZmQxYjRjNDBiNGVlZTRhNDcwNmVmNjhlMzQ0ZGQ5MDBkYmQyMmNlMmVlZGY5ZGQ0N2JlNWRmNzMwYzUxNjE4OWVjZDJjY2Y0MDFj"
  },
  "frame": {
    "version": "1",
    "name": "Example Mini App",
    "iconUrl": "https://example.com/app.png",
    "splashImageUrl": "https://example.com/logo.png",
    "splashBackgroundColor": "#000000",
    "homeUrl": "https://example.com",
    "webhookUrl": "https://example.com/api/webhook",
    "subtitle": "Example Mini App subtitle",
    "description": "Example Mini App subtitle",
    "screenshotUrls": [
      "https://example.com/screenshot1.png",
      "https://example.com/screenshot2.png",
      "https://example.com/screenshot3.png"
    ],
    "primaryCategory": "social",
    "tags": [
      "example",
      "mini app",
      "coinbase wallet"
    ],
    "heroImageUrl": "https://example.com/og.png",
    "tagline": "Example Mini App tagline",
    "ogTitle": "Example Mini App",
    "ogDescription": "Example Mini App description",
    "ogImageUrl": "https://example.com/og.png"
  }
}

<meta name="fc:frame" content="...">

// 1. Install dependencies
// npm install @coinbase/onchainkit

// 2. Set up your app with MiniKitProvider
import { MiniKitProvider } from '@coinbase/onchainkit/minikit';
import { base } from 'wagmi/chains';

function App() {
  return (
    <MiniKitProvider
      apiKey="your-onchainkit-api-key"
      chain={base}
    >
      <YourAppContent />
    </MiniKitProvider>
  );
}

// 3. Use wallet component
import { Wallet } from '@coinbase/onchainkit/wallet';

function YourAppContent() {
  return (
    <div>
      <Wallet />
      {/* Your app content */}
    </div>
  );
}

import { useAccount } from 'wagmi';

function WalletInfo() {
  const { address, isConnected } = useAccount();
  
  if (!isConnected) {
    return <div>Please connect your wallet</div>;
  }
  
  return (
    <div>
      <div>Status: Connected</div>
      <div>Address: {address}</div>
    </div>
  );
}

import { useAccount, useConnect } from 'wagmi';

function WalletConnection() {
  const { address, isConnected } = useAccount();
  const { connect, connectors, error, isLoading } = useConnect();

  if (error) {
    return <div>Connection error: {error.message}</div>;
  }

  if (isLoading) {
    return <div>Connecting...</div>;
  }

  if (!isConnected) {
    return (
      <button onClick={() => connect({ connector: connectors[0] })}>
        Connect Wallet
      </button>
    );
  }

  return <div>Connected: {address}</div>;
}

<!-- Add to your HTML head for debugging only -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
  // Only enable in development
  if (window.location.hostname === 'localhost' || window.location.hostname.includes('ngrok')) {
    eruda.init();
  }
</script>