Farcaster Mini Apps

repository·main·Indexed 42 days ago

https://github.com/farcasterxyz/miniapps

A suite of tools and SDKs for building Farcaster Mini Apps, including the @farcaster/frame-sdk, @farcaster/frame-node for backend signature verification, and @farcaster/create-mini-app for project scaffolding. The repository also provides automated codemods via the miniapp-migrate CLI to migrate existing Frame-based codebases to the Mini App standard, updating imports, API methods, and TypeScript types.

Tokens
71K
Snippets
230
Records
345
Agent score
3%

What's inside Farcaster Mini Apps

  1. Understand the Vanilla Mini App interaction model

    main
    The Vanilla Example demonstrates the fundamental communication pattern between a Mini App Host and a Mini App using the postMessage API. This is a minimal implementation used to show how these two entities interact without the abstraction of higher-level SDKs.
  2. Neynar Mini App Stack services

    main

    Neynar provides several managed services for building and managing Farcaster mini apps:

    • Mini app starter kit: Scaffolding for new projects via npx @neynar/create-farcaster-mini-app@latest.
    • Send notifications to mini app users: A notification server that allows sending notifications via API or a portal, supporting features like batching and targeting.
    • Convert existing web app to mini app: A guided process to transform standard web applications into mini apps.
    • Fetch mini apps by categories: API to retrieve mini apps based on specific categories.
    • Fetch relevant mini apps for a given user: API to discover mini apps tailored to a specific user.
    • Search mini app namespace: API to search within the mini app namespace.
    • Crawl mini app metadata: API to extract metadata from a mini app URL.
  3. Interacting with Ethereum wallets in Mini Apps

    main

    Mini Apps can interact with a user's EVM wallet via an EIP-1193 Ethereum Provider API exposed at sdk.wallet.getEthereumProvider().

    While you can use the provider directly, it is highly recommended to use Wagmi for type-safe, high-level interactions. The Farcaster client handles wallet selection and connection, so your app does not need to show a wallet selection dialog.

  4. Verify signatures and webhooks in @farcaster/miniapp-node

    main

    The package provides utility methods for handling secure backend operations for Mini Apps.

    Available Methods

    • parseWebhookEvent: Parses and verifies incoming webhook events. Requires a VerifyAppKey method.
    • verifyJsonFarcasterSignature: Verifies a JSON Farcaster Signature payload. Requires a VerifyAppKey method.
    • createJsonFarcasterSignature: Creates a JSON Farcaster Signature payload.

    Signature Verification Requirements

    To verify signatures, you must provide a VerifyAppKey method that validates that a specific app key is valid for a given FID (Farcaster ID).

    Using Neynar for Verification

    You can use the built-in verifyAppKeyWithNeynar method to handle this verification via Neynar. This requires the NEYNAR_API_KEY environment variable to be set in your environment.

  5. Interact with Solana wallets in Mini Apps

    main

    The Farcaster Mini App SDK allows you to interact with a user's Solana wallet by leveraging the Wallet Standard.

    Depending on your application type, you can use different interfaces:

    • React Apps: Use the Wallet Adapter's React hooks. These function similarly to Wagmi in the Ethereum ecosystem.
    • Non-React Apps: Use the low-level interface provided by the Wallet Adapter.

    For detailed implementation steps, refer to the Guide on interacting with Solana wallets.

  6. Overview of Mini App Notifications

    main

    Mini App notifications allow you to send in-app messages to users who have added your app to their Farcaster client (e.g., Warpcast) and enabled notifications.

    The Workflow:

    1. User Action: A user adds your Mini App and enables notifications.
    2. Token Generation: The Farcaster client generates a unique Notification Token and sends it to your server via a webhook.
    3. Storage: Your server must securely save this token and the associated url in a database.
    4. Sending: To notify the user, your server makes a POST request to the stored url including the token and content.
    5. User Interaction: When the user clicks the notification, the client opens your Mini App at a specified targetUrl and sets the context.location to a MiniAppLocationNotificationContext type of 'notification'.
  7. Use Wallet Standard directly

    main

    You can interface with the user's Solana wallet directly through the Wallet Standard or via Wallet Adapter's non-React (core) integrations.

    To ensure the Farcaster wallet registers correctly with Wallet Standard, you must import the integration package in your app entry point:

    import '@farcaster/mini-app-solana';

    Important: If you are using Wallet Adapter without the FarcasterSolanaProvider component, you are responsible for manually selecting the user's Farcaster wallet before attempting any wallet operations.

  8. Detect supported chains and capabilities at runtime

    main

    If your Mini App provides optional support for certain features, you should detect them at runtime using the SDK instead of declaring them as requirements in the manifest. This allows your app to gracefully degrade or provide different experiences based on the host's capabilities.

    • Use getChains() to retrieve an array of supported CAIP-2 blockchain identifiers.
    • Use getCapabilities() to retrieve an array of supported SDK method paths.
  9. Disable native gestures in Mini Apps

    main
    Mini Apps are rendered in modal elements. By default, certain swipe gestures or clicks outside the app surface may cause the app to close. If your application implements custom gestures that conflict with these native behaviors, you can set the disableNativeGestures flag to prevent the app from closing unexpectedly.
  10. Limitations of using tunnel domains

    main

    Tunnel domains (e.g., from ngrok or cloudflared) are intended for development only. Using them has the following limitations:

    • SDK Failures: Actions like addMiniApp() will fail when using tunnel domains.
    • Discovery: Your app will not appear in discovery or search.
    • Manifest Mismatch: The manifest domain must exactly match your app's hosting domain. If you use a tunnel, your manifest must point to the tunnel URL.

    For production: Always deploy your app to a permanent domain that matches your manifest.

  11. Understand Mini App App Surface and UI requirements

    main

    Mini Apps are rendered in a vertical modal.

    • Web: Size should be set to 424x695px.
    • Mobile: Size should be dictated by device dimensions.
    • Header: Hosts should render a header above the Mini App containing the name and author specified in the manifest.
    • Splash Screen: Hosts should show a splash screen immediately upon launch. The icon and background must be specified in the Mini App manifest or embed meta tags. The Mini App can hide the splash screen once loading is complete using the SDK.
  12. What the migration transforms cover

    main

    The codemods automate several key areas of the migration:

    1. Package imports

    Converts imports from Frame SDKs to Mini App SDKs.

    - import { frameHost } from '@farcaster/frame-sdk'
    + import { miniAppHost } from '@farcaster/miniapp-sdk'
    
    - import { FrameContext } from '@farcaster/frame-core'
    + import { MiniAppContext } from '@farcaster/miniapp-core'

    2. API methods

    Renames host and context methods.

    - const context = await frameHost.getFrameContext()
    + const context = await miniAppHost.getMiniAppContext()
    
    - frameHost.addFrame({ url: 'https://example.com' })
    + miniAppHost.addMiniApp({ url: 'https://example.com' })

    3. TypeScript types

    Updates type definitions.

    - const context: FrameContext = { ... }
    + const context: MiniAppContext = { ... }
    
    - export interface MyFrameHost extends FrameHost { ... }
    + export interface MyMiniAppHost extends MiniAppHost { ... }

    4. Event names

    Updates event listener strings.

    - sdk.on('frame_added', handler)
    + sdk.on('miniapp_added', handler)
    
    - if (event.type === 'frame_removed') { ... }
    + if (event.type === 'miniapp_removed') { ... }

    5. Manifest files

    Updates farcaster.json files to include both frame and miniapp properties for backward compatibility.

    {
      "accountAssociation": { ... },
      "frame": {
        "version": "1",
        "name": "My App",
        ...
      }
    + "miniapp": {
    +   "version": "1",
    +   "name": "My App",
    +   ...
    + }
    }