Fragola - Starknet Counter App

A beautiful React + TypeScript app demonstrating gasless transactions on Starknet using Privy authentication and AVNU Paymaster. Fragola features a delightful cappuccino brown and pink design with floating circles.

Features

• 🔐 Privy authentication (email, phone, social login)
• ⛽ Gasless transactions via AVNU Paymaster
• 📊 Real-time counter display
• 🎨 Modern UI with toast notifications

Setup

1. Install dependencies:

bun install

2. Configure environment variables (copy from .env.example to .env and fill in your values):

Privy App ID & Client ID:

• Go to https://dashboard.privy.io
• Sign up or log in
• Create a new app
• Copy the App ID and Client ID from your app settings

AVNU API Key:

• Request at https://docs.avnu.fi
• Or use the example key provided (may have rate limits)

Starknet RPC URL:

• Get an API key from https://alchemy.com (or use any Starknet RPC provider)
• Format: https://starknet-sepolia.g.alchemy.com/starknet/version/rpc/v0_10/YOUR_KEY

Contract Address:

• Deploy the Counter contract to Sepolia (see Step 0 in the reference repo)
• Or use the example address provided

VITE_PRIVY_APP_ID=your-privy-app-id
VITE_PRIVY_CLIENT_ID=your-privy-client-id
VITE_AVNU_API_KEY=your-avnu-api-key
VITE_STARKNET_RPC_URL=your-starknet-rpc-url
VITE_CONTRACT_ADDRESS=your-counter-contract-address

3. Run development server:

bun run dev

4. Build for production:

bun run build

Project Structure

• src/components/ - React components (LoginButton, Counter, AccountInfo, GitHubCorner)
• src/hooks/ - Custom hooks (useCounter)
• src/privy-starknet-provider/ - Privy Starknet SDK integration
• src/providers.tsx - App-level providers (Privy, Starknet, Toast)

Contract Deployment

To deploy the Counter contract:

brew install scarb

Screenshot

To add a screenshot of your project:

1. Take a screenshot of your running app
2. Save it as screenshot.png in the root directory
3. The image will automatically display above (already configured in README)

Note: Make sure your screenshot doesn't contain any private information like:

• Real API keys
• Personal account addresses
• Private contract addresses
• Any sensitive data

Reference

Based on stark-land/cohort-5 week-5