npm package: @mrx999/ai-tech-vpn
Description: React component for Web3 VPN integration with NFT-based access control, Reown AppKit and BSC blockchain
Author: Your Name
Latest version: 1.0.6

# Web3 VPN Component

React component for Web3 VPN integration with Reown AppKit, Wagmi, and blockchain transactions support.

## Features

- 🔐 **Web3 Authentication** via Reown AppKit
- 🌐 **Multi-network Support** (Ethereum, Polygon, Arbitrum, Optimism, Base)
- 💰 **Blockchain Payments** for premium servers
- 🎨 **Modern UI** with light/dark theme support
- 📱 **Responsive Design**
- 🔧 **TypeScript Support**

## Installation

```bash
npm install @mrx999/ai-tech-vpn
```

**Important:** Also install peer dependencies:

```bash
npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query qrcode.react framer-motion
```

Or in one command:

```bash
npm install @mrx999/ai-tech-vpn @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query qrcode.react framer-motion
```

## Quick Start

### 1. Get Reown Project ID

Register at [cloud.reown.com](https://cloud.reown.com) and create a new project.

### 2. Basic Usage

```tsx
import React from 'react'
import { Web3VpnProvider, AiTechVpn, VpnConfig } from '@mrx999/ai-tech-vpn'

const config: VpnConfig = {
  projectId: 'YOUR_REOWN_PROJECT_ID',
  metadata: {
    name: 'Ai Tech VPN',
    description: 'Decentralized VPN powered by blockchain',
    url: 'https://myapp.com',
    icons: ['https://myapp.com/icon.png']
  },
  contractAddress: '0x84f4EAa47EdA83dC742496Bb22870c9ba4C5bcbd'
}

function App() {
  return (
    <Web3VpnProvider config={config}>
      <AiTechVpn
        userPlans={[]}  // Fetch from your API
        vpnConfigs={[]} // Fetch from your API
        tokenRate={0.05}
        onPlanPurchased={() => console.log('Plan purchased!')}
        theme="dark"
      />
    </Web3VpnProvider>
  )
}
```

## API

### VpnConfig

```typescript
interface VpnConfig {
  projectId: string                    // Reown Project ID
  metadata: {
    name: string
    description: string
    url: string
    icons: string[]
  }
  enabledNetworks?: number[]           // Optional: supported network IDs
  customNetworks?: any[]               // Optional: custom networks
}
```

### VpnComponentProps

```typescript
interface VpnComponentProps {
  config: VpnConfig
  onConnect?: (server: VpnServer) => void
  onDisconnect?: () => void
  onTransaction?: (hash: string) => void
  className?: string
  theme?: 'light' | 'dark'
}
```

### Hooks

#### useVpnConnection

```typescript
const { connection, connect, disconnect } = useVpnConnection()
```

#### useWeb3Transactions

```typescript
const { 
  isConnected, 
  sendTransaction, 
  payForVpn,
  transactionHash 
} = useWeb3Transactions()
```

#### useTokenRate

Automatically fetches AITECH token rate from CoinGecko API:

```typescript
const { rate, isLoading, error } = useTokenRate()
// rate updates every 5 minutes
```

## Supported Networks

- Ethereum Mainnet
- Ethereum Sepolia (testnet)
- Polygon
- Arbitrum
- Optimism
- Base

## Development

### Project Structure

- `src/` - npm package source code (your library)
- `example/` - test application for package integration

### Installing Dependencies

**Root project (library):**
```bash
npm install
```

**Example application:**
```bash
cd example
npm install
```

### Running in Development Mode

The example application automatically picks up changes from `src/`:

```bash
cd example
npm run dev
```

Now you can:
- Edit code in `src/` (library)
- See changes in real-time in `example/` (application)
- Hot reload works for both

### Building the Library

```bash
npm run build:lib
```

This will create a ready-to-publish npm package in `dist/`

### File Structure

```
ai-tech-plugin/
├── src/                           # Library source code
│   ├── components/                # React components
│   │   ├── Web3VpnComponent.tsx
│   │   ├── Web3VpnProvider.tsx
│   │   ├── WalletConnection.tsx
│   │   ├── VpnServerList.tsx
│   │   └── ConnectionStatus.tsx
│   ├── hooks/                     # React hooks
│   │   ├── useVpnConnection.ts
│   │   └── useWeb3Transactions.ts
│   ├── config/                    # Configuration
│   │   ├── appkit.ts
│   │   └── networks.ts
│   ├── types/                     # TypeScript types
│   │   └── index.ts
│   ├── utils/                     # Utilities
│   │   └── mockData.ts
│   └── index.ts                   # Main exports
│
├── example/                       # Test application
│   ├── src/
│   │   ├── App.tsx               # Integration example
│   │   └── main.tsx
│   └── package.json              # Application dependencies
│
├── dist/                          # Built library (after build)
├── package.json                   # npm package config
└── README.md
```

## Customization

### Themes

The component supports light and dark themes:

```tsx
<AiTechVpn theme="dark" />
```

### Styling

The library includes ready-made styles from the original project. Styles are automatically imported when using components.

**Global Styles:**
- Automatically applied when importing the library
- Include dark theme, animations, scrollbars

**CSS Modules:**
- `MainToggle.module.css` - toggle styles
- `Plans.module.css` - plans styles
- `VpnConfigs.module.css` - VPN configuration styles

**Overriding Styles:**

```tsx
<AiTechVpn 
  className="my-custom-vpn"
  theme="dark"
/>
```

```css
/* your-styles.css */
.my-custom-vpn {
  --primary: #your-color;
  --background: #your-bg;
}
```

## License

MIT