diff --git a/example/frontend/.gitignore b/example/frontend/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/example/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/example/frontend/ANALYTICS.md b/example/frontend/ANALYTICS.md
new file mode 100644
index 0000000..85a0bbe
--- /dev/null
+++ b/example/frontend/ANALYTICS.md
@@ -0,0 +1,346 @@
+# Vercel Web Analytics Integration Guide
+
+This document explains how the OnChain Test Kit example frontend integrates with Vercel Web Analytics and provides instructions for deploying and using it in your own projects.
+
+## Overview
+
+Vercel Web Analytics is a privacy-first analytics service that provides insights into your application's performance and user interactions. This example demonstrates a complete integration with a Vite-based React application.
+
+## Current Integration
+
+### Setup in This Project
+
+The Vercel Web Analytics integration is configured in the main application entry point:
+
+**File: `src/main.tsx`**
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { Analytics } from '@vercel/analytics/react'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+ ,
+)
+```
+
+The `` component is placed as a sibling to your main app component, ensuring it initializes after your application mounts.
+
+### Package Installation
+
+The `@vercel/analytics` package is included in the project dependencies:
+
+```json
+{
+ "dependencies": {
+ "@vercel/analytics": "^1.4.0"
+ }
+}
+```
+
+## Prerequisites for Deployment
+
+Before deploying this application to Vercel with Web Analytics, you'll need:
+
+1. **A Vercel account** - [Sign up for free](https://vercel.com/signup)
+2. **A Vercel project** - [Create a new project](https://vercel.com/new)
+3. **The Vercel CLI** (optional) - Install with:
+ ```bash
+ npm install -g vercel
+ # or
+ pnpm add -g vercel
+ # or
+ yarn global add vercel
+ # or
+ bun add -g vercel
+ ```
+
+## Deployment Instructions
+
+### Step 1: Enable Web Analytics in Vercel
+
+1. Go to your [Vercel dashboard](https://vercel.com/dashboard)
+2. Select your project
+3. Navigate to the **Analytics** tab
+4. Click **Enable** to enable Web Analytics
+
+> **Note:** Enabling Web Analytics will add new routes (scoped at `/_vercel/insights/*`) after your next deployment.
+
+### Step 2: Deploy Your Application
+
+#### Option A: Using Vercel CLI
+
+```bash
+vercel deploy
+```
+
+Follow the prompts to deploy your application. The first deployment will enable the analytics routes.
+
+#### Option B: Git Integration
+
+1. Connect your Git repository to Vercel:
+ ```bash
+ vercel link
+ ```
+2. Push your code to your repository:
+ ```bash
+ git push
+ ```
+3. Vercel will automatically deploy your changes
+
+#### Option C: Manual Deployment
+
+Deploy directly from the Vercel dashboard by connecting your GitHub, GitLab, or Bitbucket repository.
+
+### Step 3: Verify Analytics is Working
+
+After your app is deployed:
+
+1. Visit your deployed application in a browser
+2. Open the browser's Developer Tools (F12 or right-click → Inspect)
+3. Go to the **Network** tab
+4. Reload the page
+5. Look for a request to `/_vercel/insights/view` - this confirms analytics is tracking
+
+Expected response will be a successful `POST` request to that endpoint.
+
+## Using Analytics in Your Application
+
+### Automatic Tracking
+
+The Analytics component automatically tracks:
+- Page views and navigation
+- Core Web Vitals (LCP, FID, CLS)
+- Custom events (when configured)
+
+### Custom Events (Requires Vercel Pro/Enterprise)
+
+To track custom events like button clicks or form submissions, use the `track` function:
+
+```tsx
+import { track } from '@vercel/analytics'
+
+export function MyComponent() {
+ return (
+
+ )
+}
+```
+
+### Accessing Analytics Data
+
+Once your app has been deployed for a few days and has users:
+
+1. Go to your [Vercel dashboard](https://vercel.com/dashboard)
+2. Select your project
+3. Click the **Analytics** tab
+4. Explore:
+ - **Real-time visitors**
+ - **Page views and routes**
+ - **Core Web Vitals**
+ - **Custom events** (if configured)
+ - **Filtering and segmentation**
+
+## Privacy and Compliance
+
+Vercel Web Analytics is designed with privacy in mind:
+
+- **No cookies** - Uses privacy-first tracking
+- **GDPR compliant** - No explicit consent required for standard tracking
+- **User-friendly** - Focuses on aggregated data, not individual tracking
+
+Learn more about [privacy and compliance standards](https://vercel.com/docs/analytics/privacy-policy).
+
+## Framework-Specific Implementation Examples
+
+### React (Current Implementation)
+
+```tsx
+import { Analytics } from '@vercel/analytics/react'
+
+export default function App() {
+ return (
+
+ {/* ... */}
+
+
+ )
+}
+```
+
+### Next.js (Pages Router)
+
+```tsx
+import { Analytics } from '@vercel/analytics/next'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+ <>
+
+
+
+ )
+}
+```
+
+### Next.js (App Router)
+
+```tsx
+import { Analytics } from '@vercel/analytics/next'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+```
+
+### SvelteKit
+
+```ts
+import { dev } from '$app/environment'
+import { injectAnalytics } from '@vercel/analytics/sveltekit'
+
+injectAnalytics({ mode: dev ? 'development' : 'production' })
+```
+
+### Astro
+
+```astro
+---
+import Analytics from '@vercel/analytics/astro'
+---
+
+
+
+
+
+
+
+
+
+```
+
+### Remix
+
+```tsx
+import { Analytics } from '@vercel/analytics/remix'
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ )
+}
+```
+
+### Nuxt
+
+```vue
+
+
+
+
+
+
+```
+
+### Vue
+
+```vue
+
+
+
+
+
+
+```
+
+### Plain HTML
+
+```html
+
+
+```
+
+### Other Frameworks
+
+```ts
+import { inject } from '@vercel/analytics'
+
+inject()
+```
+
+## Troubleshooting
+
+### Analytics Not Appearing in Dashboard
+
+1. **Wait for data collection** - It may take a few hours for data to appear
+2. **Verify deployment** - Ensure you've deployed after enabling Web Analytics
+3. **Check network requests** - Verify `/_vercel/insights/view` requests are being made (see Step 3 above)
+4. **Rebuild and redeploy** - The analytics routes need to be created during deployment
+
+### High Bounce Rate or Missing Data
+
+- Ensure the `` component is placed in a high-level component that renders on every page
+- Verify there are no JavaScript errors preventing the analytics script from loading
+- Check that you've allowed sufficient time for data collection
+
+### Development vs Production
+
+- Analytics tracking is disabled in development mode by default
+- To test analytics locally before deployment, use `npm run build && npm run preview`
+
+## Next Steps
+
+1. **Deploy to Vercel** - Follow the deployment instructions above
+2. **Monitor your analytics** - View data in the Vercel dashboard after a few hours
+3. **Implement custom events** - Add tracking for important user interactions (Pro/Enterprise plans)
+4. **Optimize performance** - Use Core Web Vitals data to improve your application
+
+## Additional Resources
+
+- [Vercel Web Analytics Documentation](https://vercel.com/docs/analytics)
+- [@vercel/analytics Package](https://www.npmjs.com/package/@vercel/analytics)
+- [Vercel Deployment Guide](https://vercel.com/docs/deployments/overview)
+- [Core Web Vitals Guide](https://web.dev/vitals/)
+- [OnChain Test Kit Repository](https://github.com/MunyayLLC/https-github.com-joe10832-onchaintestkit)
+
+## Support
+
+For issues or questions about:
+
+- **Vercel Web Analytics** - See [Vercel Docs](https://vercel.com/docs/analytics)
+- **This example** - Check the [OnChain Test Kit repository](https://github.com/MunyayLLC/https-github.com-joe10832-onchaintestkit)
+- **React/Vite** - See [React](https://react.dev/) and [Vite](https://vitejs.dev/) documentation
diff --git a/example/frontend/README.md b/example/frontend/README.md
new file mode 100644
index 0000000..98acecb
--- /dev/null
+++ b/example/frontend/README.md
@@ -0,0 +1,144 @@
+# OnChain Test Kit - Example Frontend
+
+This is an example frontend application that demonstrates the integration of the OnChain Test Kit with Vercel Web Analytics.
+
+## Features
+
+- **Vite-based React application** for fast development and optimized builds
+- **Vercel Web Analytics integration** for tracking user interactions and page performance
+- **TypeScript support** for type-safe development
+- **Modern styling** with responsive design
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 16+ or later
+- npm, pnpm, yarn, or bun package manager
+
+### Installation
+
+1. Install dependencies:
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+# or
+bun install
+```
+
+### Development
+
+Start the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+# or
+bun dev
+```
+
+The application will open at `http://localhost:3000`.
+
+### Build
+
+Build for production:
+
+```bash
+npm run build
+# or
+pnpm build
+# or
+yarn build
+# or
+bun build
+```
+
+The optimized build will be in the `dist` directory.
+
+### Preview
+
+Preview the production build locally:
+
+```bash
+npm run preview
+# or
+pnpm preview
+# or
+yarn preview
+# or
+bun preview
+```
+
+## Vercel Web Analytics Integration
+
+This application integrates Vercel Web Analytics using the `@vercel/analytics` package. The Analytics component is added to the main React entry point in `src/main.tsx`:
+
+```tsx
+import { Analytics } from '@vercel/analytics/react'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+ ,
+)
+```
+
+### Deployment to Vercel
+
+To deploy this application to Vercel with Web Analytics enabled:
+
+1. **Enable Web Analytics in Vercel Dashboard**
+ - Go to your [Vercel dashboard](/dashboard)
+ - Select your project
+ - Click the **Analytics** tab
+ - Click **Enable** to enable Web Analytics
+
+2. **Deploy your app**
+ - Using Vercel CLI:
+ ```bash
+ vercel deploy
+ ```
+ - Or connect your Git repository to Vercel for automatic deployments
+
+3. **View your analytics**
+ - Once deployed, analytics data will be collected automatically
+ - View your data in the Vercel dashboard under the **Analytics** tab
+
+## Project Structure
+
+```
+src/
+├── main.tsx # Application entry point with Analytics component
+├── App.tsx # Main application component
+├── App.css # Application styling
+├── index.css # Global styles
+└── components/ # Additional components directory
+```
+
+## Building the Package
+
+From the root of the monorepo:
+
+```bash
+npm run build
+
+# Or if using the root workspace:
+cd ..
+npm run build
+```
+
+## Learn More
+
+- [Vite Documentation](https://vitejs.dev/)
+- [React Documentation](https://react.dev/)
+- [Vercel Web Analytics Documentation](https://vercel.com/docs/analytics)
+- [OnChain Test Kit Documentation](../README.md)
diff --git a/example/frontend/index.html b/example/frontend/index.html
new file mode 100644
index 0000000..2aad172
--- /dev/null
+++ b/example/frontend/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ OnChain Test Kit - Example Frontend
+
+
+
+
+
+
diff --git a/example/frontend/package.json b/example/frontend/package.json
new file mode 100644
index 0000000..32ae288
--- /dev/null
+++ b/example/frontend/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "@coinbase/onchaintestkit-example-frontend",
+ "version": "1.0.0",
+ "description": "Example frontend application with Vercel Web Analytics",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "@vercel/analytics": "^1.4.0",
+ "@coinbase/onchaintestkit": "^1.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.43",
+ "@types/react-dom": "^18.2.17",
+ "@vitejs/plugin-react": "^4.2.1",
+ "typescript": "^5.2.2",
+ "vite": "^5.0.8",
+ "eslint": "^8.54.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0"
+ }
+}
diff --git a/example/frontend/src/App.css b/example/frontend/src/App.css
new file mode 100644
index 0000000..d387fa4
--- /dev/null
+++ b/example/frontend/src/App.css
@@ -0,0 +1,125 @@
+.container {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.header {
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 2rem 1rem;
+ text-align: center;
+ color: white;
+ border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.header h1 {
+ margin: 0 0 0.5rem 0;
+ font-size: 2.5rem;
+}
+
+.header p {
+ margin: 0;
+ font-size: 1.1rem;
+ opacity: 0.9;
+}
+
+.main {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.card {
+ background: white;
+ border-radius: 12px;
+ padding: 1.5rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ color: #333;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card h2 {
+ margin-top: 0;
+ color: #667eea;
+ font-size: 1.5rem;
+}
+
+.card p {
+ margin: 0.5rem 0;
+ line-height: 1.6;
+}
+
+.card ul {
+ margin: 1rem 0;
+ padding-left: 1.5rem;
+}
+
+.card li {
+ margin: 0.5rem 0;
+}
+
+.card a {
+ color: #667eea;
+ text-decoration: none;
+ font-weight: 500;
+}
+
+.card a:hover {
+ text-decoration: underline;
+}
+
+.card button {
+ background-color: #667eea;
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ margin-right: 0.5rem;
+ margin-top: 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: background-color 0.2s;
+}
+
+.card button:hover {
+ background-color: #764ba2;
+}
+
+.footer {
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 2rem 1rem;
+ text-align: center;
+ color: white;
+ border-top: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer p {
+ margin: 0;
+ opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+ .header h1 {
+ font-size: 1.8rem;
+ }
+
+ .main {
+ grid-template-columns: 1fr;
+ padding: 1rem;
+ }
+
+ .card {
+ padding: 1rem;
+ }
+}
diff --git a/example/frontend/src/App.tsx b/example/frontend/src/App.tsx
new file mode 100644
index 0000000..46d6a92
--- /dev/null
+++ b/example/frontend/src/App.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+ const [count, setCount] = useState(0)
+
+ return (
+
+
+
OnChain Test Kit
+
Example Frontend with Vercel Web Analytics
+
+
+
+
+
Welcome
+
+ This is an example frontend application showcasing integration of the OnChain Test Kit
+ with Vercel Web Analytics for tracking user interactions and page performance.
+
+
+
+
+
Counter Demo
+
Current count: {count}
+
+
+
+
+
+
Features
+
+
End-to-end testing toolkit for blockchain applications
+
Powered by Playwright
+
Support for multiple wallets (MetaMask, Coinbase, Phantom)
+
Integrated with Vercel Web Analytics for performance monitoring
+
+
+
+
+
Getting Started
+
+ To get started with the OnChain Test Kit, visit the{' '}
+
+ repository
+
+ {' '}for more information.
+