LSSVM
← Back to Home

Farcaster Miniapp

A user-friendly Farcaster miniapp for interacting with NFT liquidity pools. Built with Next.js 14, Wagmi, and the Farcaster Miniapp SDK.

NFT Liquidity Pool Miniapp

A Farcaster miniapp for interacting with NFT liquidity pools built on the LSSVM protocol.

Features

  • Pool Discovery: Enter pool addresses to view pool details
  • Buy NFTs: Purchase NFTs from liquidity pools using ETH or ERC20 tokens
  • Sell NFTs: Sell your NFTs to liquidity pools in exchange for tokens
  • Real-time Quotes: Get up-to-date pricing information before trading
  • Transaction Tracking: Monitor transaction status with explorer links

Setup

  1. Install dependencies:
npm install
  1. Create a .env.local file with your contract addresses:
# Base Sepolia (chainId: 84532)
NEXT_PUBLIC_ROUTER_ADDRESS_84532=0x...
NEXT_PUBLIC_FACTORY_ADDRESS_84532=0x...

# Base Mainnet (chainId: 8453)
NEXT_PUBLIC_ROUTER_ADDRESS_8453=0x...
NEXT_PUBLIC_FACTORY_ADDRESS_8453=0x...

  1. Update public/.well-known/farcaster.json with your domain and sign it using the Farcaster Manifest Tool

  2. Run the development server:

npm run dev

Project Structure

  • app/ - Next.js app router pages
    • page.tsx - Home page with pool address input
    • pool/[address]/page.tsx - Pool detail page
    • buy/[poolAddress]/page.tsx - Buy NFTs interface
    • sell/[poolAddress]/page.tsx - Sell NFTs interface
  • components/ - React components
    • PoolCard.tsx - Pool summary card
    • PoolDetails.tsx - Detailed pool information display
    • NFTSelector.tsx - NFT selection component
    • PriceQuote.tsx - Price breakdown display
    • TransactionStatus.tsx - Transaction status indicator
  • hooks/ - React hooks for data fetching
    • usePoolData.ts - Fetch pool information
    • useBuyQuote.ts - Get buy price quotes
    • useSellQuote.ts - Get sell price quotes
    • useUserNFTs.ts - Fetch user's NFTs
    • useTokenData.ts - Fetch token information
  • lib/ - Utility functions and contract ABIs
    • contracts.ts - Contract ABIs and types
    • pool.ts - Pool data fetching utilities
    • wagmi.ts - Wagmi configuration

Contract Integration

The miniapp integrates with:

  • LSSVMRouter - Main router contract for executing swaps
  • ILSSVMPair - Pair contract interface for pool data
  • ERC721/ERC1155 - NFT standards
  • ERC20 - Token standard

Deployment

  1. Build the project:
npm run build

  1. Deploy to Vercel, Netlify, or your preferred hosting platform

  2. Update the farcaster.json manifest with your production domain

  3. Sign the manifest using your Farcaster custody address

Notes

  • The app currently supports manual pool address entry. For production, consider integrating with an indexer or subgraph for pool discovery.
  • NFT metadata fetching (images, names) is not implemented. Consider integrating with IPFS or a metadata service.
  • User NFT fetching uses tokenOfOwnerByIndex which may not be supported by all ERC721 contracts. Consider using an indexer for production.

Configuration

Required Environment Variables

All environment variables must be prefixed with NEXT_PUBLIC_ to be accessible in the browser.

RPC Configuration

  • NEXT_PUBLIC_BASE_RPC_URL - RPC endpoint URL for Base Mainnet (required to avoid rate limits)
    • Example: https://base-mainnet.g.alchemy.com/v2/YOUR_API_KEY
    • Defaults to public endpoint if not set (may hit rate limits)

IPFS Configuration

  • NEXT_PUBLIC_IPFS_URL - IPFS gateway URL for resolving IPFS metadata and images
    • Example: https://sapphire-dear-marsupial-522.mypinata.cloud (Pinata gateway)
    • Defaults to https://ipfs.io if not set
    • Used for fetching NFT metadata stored on IPFS

Base Mainnet (Chain ID: 8453)

  • NEXT_PUBLIC_ROUTER_ADDRESS_8453 - Address of the LSSVMRouter contract on Base Mainnet
  • NEXT_PUBLIC_FACTORY_ADDRESS_8453 - Address of the LSSVMPairFactory contract on Base Mainnet

Example .env.local file

# RPC Configuration (required to avoid rate limits)
NEXT_PUBLIC_BASE_RPC_URL=https://base-mainnet.g.alchemy.com/v2/YOUR_API_KEY

# IPFS Configuration
NEXT_PUBLIC_IPFS_URL=https://sapphire-dear-marsupial-522.mypinata.cloud

# Base Mainnet (chainId: 8453)
NEXT_PUBLIC_ROUTER_ADDRESS_8453=0x0000000000000000000000000000000000000000
NEXT_PUBLIC_FACTORY_ADDRESS_8453=0x0000000000000000000000000000000000000000

Notes

  • Replace the placeholder addresses (0x0000...) with your actual deployed contract addresses
  • All addresses must be valid Ethereum addresses (42 characters, starting with 0x)
  • The router address is used for executing buy/sell transactions
  • The factory address is available via getFactoryAddress() but may not be currently used in the UI

Related Documentation

Indexer →
Graph Protocol subgraph for data indexing
Deployment →
Deploy the miniapp and contracts