Embedded: Flip10 - Social-Native Mini App

Overview

Embedded is a social-native gaming protocol designed for the Base ecosystem. Flip10 is the flagship Mini App within this protocol, offering a high-fidelity 3D coin-flip experience integrated directly into social layers like Farcaster.

The platform leverages the "Deferred Auth" pattern, allowing users to start playing immediately and only upgrading to full onchain interactions (signing/purchasing) when necessary via Base Smart Wallets.

🚀 Key Features

• 3D Game Engine: Real-time 3D coin physics powered by react-three-fiber and Three.js.
• Real-time Synchronization: WebSocket-based game state with optimistic UI updates.
• Onchain Transactions: Purchase game flips directly on Base Sepolia using Wagmi and OnchainKit.
• Social Identity: Rankings that resolve addresses to Farcaster usernames and Basenames.
• Share to Farcaster: Native sharing intents to post results directly to the Farcaster feed.

🛠 Tech Stack

• Frontend: Next.js 15 (App Router), React 19, Tailwind CSS.
• 3D Graphics: Three.js, React Three Fiber, R3F Drei.
• Web3: OnchainKit, Wagmi, Viem.
• Network: Base Sepolia (Testnet).

🏃 Getting Started

Prerequisites

• pnpm installed.
• Access to the Base Build Dashboard.

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd embedded-baseapp-miniapp/frontend

2. Install dependencies:

   pnpm install

3. Configure environment variables: Create a .env.local file in the frontend directory:

   NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_api_key
   NEXT_PUBLIC_FLIP10_WS_URL=wss://your-backend-ws.com/ws
   FLIP10_API_URL=http://your-backend-api.com

4. Run the development server:

   pnpm dev

🏗 Deployment to Vercel

1. Link your repository to Vercel.
2. Add the environment variables listed above in the Vercel Dashboard.
3. Deploy!

🆔 Base App Verification

To verify your app in the Base Dashboard, ensure the following meta tag is present in src/app/layout.tsx (already implemented):

<meta name="base:app_id" content="6976dca888e3bac59cf3d910" />

Copy your deployed Vercel URL and paste it into the Verify & Add URL section of your Base App Dashboard.

📂 Project Structure

• src/components/features/flip10: Main game logic, 3D canvas, and UI components.
• src/hooks/flip10: WebSocket and contract interaction hooks.
• src/lib/flip10: Constants, ABI, and shared types.
• src/app/games: Page routing for the game.

📄 License

MIT