[P-1149] Add Porto example (WIP)

.env.example

@@ -0,0 +1,2 @@
+# Formo Analytics Write Key
+NEXT_PUBLIC_FORMO_WRITE_KEY=your_formo_analytics_write_key_here

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

README.md

@@ -1 +1,95 @@
-# formo-example-porto
+# Porto + Formo Analytics Integration Example
+
+This is a comprehensive example application demonstrating the integration of [Porto SDK](https://porto.sh/) (passkey-based wallet) with [Formo Analytics](https://formo.so/) for tracking wallet events and user interactions.
+
+## 🚀 Features
+
+This example app demonstrates:
+
+- **Porto SDK Integration**: Passkey-based wallet authentication through Wagmi
+- **Formo Analytics Integration**: Comprehensive event tracking for wallet interactions
+- **Event Testing Matrix**: Complete testing suite for all wallet events
+- **Real-time Event Monitoring**: Live tracking of user interactions
+
+## 📊 Tracked Events
+
+| Event Type | Status | Description |
+|------------|--------|-------------|
+| Page View | ✅ Automatic | Tracks page visits and navigation |
+| Identify | ✅ Automatic | Links wallet address to user sessions |
+| Connect | 🔄 Manual | Wallet connection events |
+| Disconnect | 🔄 Manual | Wallet disconnection events |
+| Chain Changed | 🔄 Manual | Network switching events |
+| Signature | 🔄 Manual | Message signing events |
+| Transaction | 🔄 Manual | On-chain transaction events |
+| Custom Events | 🔄 Manual | User-defined custom events |
+
+## 🛠 Setup
+
+1. **Clone and install dependencies:**
+   ```bash
+   git clone [this-repo]
+   cd porto-example
+   npm install
+   ```
+
+2. **Configure environment variables:**
+   ```bash
+   cp .env.example .env.local
+   ```
+
+   Update `.env.local` with your keys:
+   - `NEXT_PUBLIC_FORMO_WRITE_KEY`: Your Formo Analytics write key
+   - `NEXT_PUBLIC_WC_PROJECT_ID`: Your WalletConnect project ID (optional)
+
+3. **Start the development server:**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open the app:**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## 🧪 Testing
+
+### Testing Porto Integration
+
+1. **Connect with Porto**: Click the "Porto ⭐" button to connect using passkey authentication
+2. **Test Wallet Events**: Use the UI components to trigger different wallet events
+3. **Monitor Events**: Check browser console for Formo Analytics events
+4. **Dashboard Verification**: Monitor your Formo Analytics dashboard for incoming events
+
+### Supported Chains
+
+- **Mainnet** (Chain ID: 1)
+- **Sepolia** (Chain ID: 11155111) 
+- **Base Sepolia** (Chain ID: 84532) - Recommended for Porto testing
+
+### Event Testing Workflow
+
+1. **Page Load**: Automatic page view and identify events
+2. **Connect Wallet**: Test wallet connection with Porto
+3. **Switch Chains**: Test network switching functionality
+4. **Sign Messages**: Test message signing capabilities
+5. **Send Transactions**: Test transaction submission (use testnet!)
+6. **Custom Events**: Test custom event tracking
+
+## 📚 Key Dependencies
+
+- **Next.js**: React framework with SSR support
+- **Wagmi**: React hooks for Ethereum
+- **Porto**: Passkey-based wallet SDK
+- **Formo Analytics**: Web3 analytics and event tracking
+- **Viem**: TypeScript interface for Ethereum
+
+## 📖 Learn More
+
+### Documentation
+
+- [Porto SDK Documentation](https://porto.sh/sdk)
+- [Formo Analytics Documentation](https://docs.formo.so/)
+- [Wagmi Documentation](https://wagmi.sh)
+
+## 📄 License
+
+MIT License - See the original create-wagmi template for details.

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig