Content Licensing Platform

A Next.js web application for purchasing digital content licenses using World ID MiniKit and cross-chain smart contracts. Features a complete mobile-first UI with real MiniKit integration.

Features

• Mobile-First Design: Optimized for World App with safe area support
• Real MiniKit Integration: Live payments and World ID verification
• Cross-Chain Fulfillment: Automatic license and receipt token minting
• Creator Verification: World ID verification for content creators
• Bottom Tab Navigation: Native app-like navigation experience
• Payment Flow: Complete purchase flow with PaySheet modal
• Toast Notifications: Real-time user feedback
• Responsive Design: Works on desktop and mobile devices

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Blockchain: Viem for Ethereum interactions
• Validation: Zod for request validation
• Payment: Real World ID MiniKit integration
• UI Components: Custom mobile-first components
• State Management: React hooks with custom usePurchase/useVerify

Project Structure

``` src/ ├── app/ │ ├── api/ │ │ ├── fulfill/ │ │ │ └── route.ts # License fulfillment API │ │ └── verify/ │ │ └── route.ts # World ID verification API │ ├── create/ │ │ └── page.tsx # Content creation page │ ├── item/[id]/ │ │ └── page.tsx # License detail page │ ├── licenses/ │ │ └── page.tsx # User's licenses page │ ├── profile/ │ │ └── page.tsx # User profile page │ ├── globals.css # Global styles │ ├── layout.tsx # Root layout with MiniKit provider │ └── page.tsx # Home page with content discovery ├── components/ │ ├── SafeArea.tsx # Mobile safe area wrapper │ ├── Header.tsx # Page header component │ ├── TabNav.tsx # Bottom tab navigation │ ├── LicenseCard.tsx # Content card component │ ├── PaySheet.tsx # Payment modal │ ├── VerifyModal.tsx # World ID verification modal │ ├── Toast.tsx # Notification component │ └── MiniKitProvider.tsx # MiniKit initialization ├── hooks/ │ ├── usePurchase.ts # Payment flow hook │ └── useVerify.ts # Verification flow hook └── lib/ ├── minikit.ts # MiniKit integration └── api.ts # API utilities ```

Environment Variables

Create a .env.local file with the following variables:

```bash

MiniKit Configuration

NEXT_PUBLIC_MINIKIT_APP_ID=your_minikit_app_id_here

Blockchain RPC URLs

WORLDCHAIN_RPC_URL=https://worldchain.worldcoin.org STORY_RPC_URL=https://rpc.story.foundation

Contract Addresses

LICENSE_CONTRACT=0x1234567890123456789012345678901234567890 RECEIPT_CONTRACT=0x0987654321098765432109876543210987654321

Relayer Private Key (for minting licenses and receipts)

RELAYER_PK=0x1234567890123456789012345678901234567890123456789012345678901234 ```

Important: Copy .env.local.example to .env.local and update with your actual values.

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Install dependencies: ```bash npm install ```

2. Set up environment variables: ```bash cp .env.example .env.local

   Edit .env.local with your actual values

   ```

3. Run development server: ```bash npm run dev ```

4. Open in browser: ``` http://localhost:3000 ```

Usage

Content Display

The home page displays a single piece of dummy content with:

• Title: Premium Digital Art Collection
• Description: Detailed content description
• Thumbnail: High-quality image from Unsplash
• Price: 1 USDC
• Creator: Digital Artist Pro
• Category: Digital Art

Purchase Flow

1. Click "Buy License" button
2. Payment Processing: MiniKit payment simulation (2-second delay)
3. API Call: Automatic call to /api/fulfill with transaction details
4. Token Minting:
   • License token minted on Story Protocol
   • Receipt token minted on World Chain
5. Success Feedback: User sees confirmation message

API Endpoint

POST /api/fulfill

Processes license purchases and mints tokens.

Request Body: ```json { "txHash": "0x...", "contentId": "content_001" } ```

Response: ```json { "success": true, "data": { "licenseTxHash": "0x...", "receiptTxHash": "0x...", "licenseTokenId": 0, "receiptTokenId": 0, "contentId": "content_001" } } ```

Smart Contract Integration

LicenseToken (Story Protocol)

• Network: Story Protocol (Chain ID: 1514)
• Purpose: Manages content licenses with royalty support
• Functions: mintLicense(address, string, string)

LicenseReceipt (World Chain)

• Network: World Chain (Chain ID: 480)
• Purpose: Non-transferable proof of license purchase
• Functions: mintReceipt(address, address, uint256, string)

Development

Available Scripts

```bash

Development

npm run dev # Start development server npm run build # Build for production npm run start # Start production server npm run lint # Run ESLint

From root directory

pnpm web:dev # Start development server pnpm web:build # Build for production pnpm web:start # Start production server ```

Building for Production

```bash npm run build npm run start ```

The application will be available at http://localhost:3000.

MiniKit Integration

Current Implementation

The app currently uses a simulated MiniKit payment for demonstration purposes:

```typescript // Simulate MiniKit payment (replace with actual MiniKit implementation) const mockPaymentResult = { success: true, txHash: '0x' + Math.random().toString(16).substr(2, 64), } ```

Real MiniKit Integration

To integrate with real MiniKit:

1. Install MiniKit SDK (already installed)
2. Configure App ID in environment variables
3. Replace simulation with actual MiniKit API calls
4. Handle real payment flows and error states

Example real implementation: ```typescript import { MiniKit } from '@worldcoin/minikit-js'

const minikit = new MiniKit() const result = await minikit.pay({ amount: '1', asset: 'USDC', memo: 'license:content_001' }) ```

Deployment

Vercel (Recommended)

1. Connect repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push

Other Platforms

The app can be deployed to any platform supporting Next.js:

• Netlify
• AWS Amplify
• Railway
• Self-hosted

Security Considerations

• Environment Variables: Never commit .env.local to version control
• Private Keys: Store relayer private keys securely
• API Endpoints: Implement proper authentication for production
• Input Validation: All API inputs are validated with Zod
• Error Handling: Comprehensive error handling and logging

Troubleshooting

Common Issues

1. Build Errors ``` Error: Cannot find module '@worldcoin/minikit-js' ``` Solution: Run npm install to install dependencies

2. Environment Variables ``` Error: Missing environment variable ``` Solution: Create .env.local with required variables

3. API Errors ``` Error: Internal server error ``` Solution: Check server logs and environment configuration

Development Tips

• Use browser dev tools to inspect API calls
• Check console logs for detailed error information
• Verify environment variables are loaded correctly
• Test API endpoints independently using tools like Postman

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details.