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

npm install @mrx999/ai-tech-vpn

Important: Also install peer dependencies:

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

Or in one command:

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 and create a new project.

2. Basic Usage

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

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

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

Hooks

useVpnConnection

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

useWeb3Transactions

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

useTokenRate

Automatically fetches AITECH token rate from CoinGecko API:

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):

npm install

Example application:

cd example
npm install

Running in Development Mode

The example application automatically picks up changes from src/:

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

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:

<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:

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

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

License

MIT