🔍 CoinSight - On-chain Research Assistant Agent

AI-powered blockchain research and analytics platform with decentralized marketplace

🚀 Tech Stack

Frontend

• Next.js 14 - App Router, Server Components
• TypeScript - Type safety and better DX
• Tailwind CSS - Utility-first styling
• Shadcn/ui - High-quality component library
• Wagmi/Viem 2.x - Web3 interactions
• RainbowKit - Wallet connection
• Recharts - Data visualization
• React Query - Data fetching and caching

Blockchain Networks

• Polygon Mumbai (Testnet)
• Sepolia (Testnet)
• Base Sepolia (Testnet)
• Arbitrum Sepolia (Testnet)

📋 Prerequisites

• Node.js 18+
• npm or yarn
• MetaMask or other Web3 wallet
• WalletConnect Project ID (get from cloud.walletconnect.com)

🛠️ Installation

1. Clone the repository

git clone <repository-url>
cd fe-coinsight

2. Install dependencies

npm install

3. Set up environment variables

# Copy the example environment file
cp env.example.txt .env.local

# Edit .env.local with your values
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here
NEXT_PUBLIC_ENABLE_TESTNETS=true
NEXT_PUBLIC_API_URL=http://localhost:8000/api

4. Run development server

npm run dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

fe-coinsight/
├── src/
│   ├── app/                    # Next.js app router pages
│   │   ├── dashboard/          # Dashboard page
│   │   ├── marketplace/        # Research marketplace
│   │   ├── agents/             # AI agents registry
│   │   ├── reports/            # Research reports library
│   │   ├── layout.tsx          # Root layout
│   │   ├── page.tsx            # Homepage
│   │   └── globals.css         # Global styles
│   ├── components/             # React components
│   │   └── ui/                 # Shadcn/ui components
│   ├── lib/                    # Utility functions
│   │   └── utils.ts            # Class merging utilities
│   ├── providers/              # Context providers
│   │   └── Web3Provider.tsx    # Web3/Wallet provider
│   └── hooks/                  # Custom React hooks
├── public/                     # Static assets
├── components.json             # Shadcn/ui config
├── tsconfig.json               # TypeScript config
├── next.config.ts              # Next.js config
├── postcss.config.mjs          # PostCSS config
└── package.json                # Dependencies

🎨 Features

Current Features

• ✅ Web3 Integration - Full wallet connection with RainbowKit
• ✅ Modern UI - Beautiful glassmorphism design with gradients
• ✅ Dashboard - Overview of research requests and stats
• ✅ Marketplace - Browse and filter research requests
• ✅ Responsive Design - Works on all devices

Upcoming Features

• 🔄 AI Agents Registry - Browse and select specialized AI agents
• 🔄 Research Request Creation - Create custom research requests
• 🔄 Real-time Updates - WebSocket integration for live data
• 🔄 Reports Library - Access completed research reports
• 🔄 Portfolio Integration - Track wallet performance
• 🔄 Smart Contract Integration - Interact with on-chain marketplace
• 🔄 Data Visualization - Interactive charts with Recharts
• 🔄 Dispute Resolution - On-chain dispute handling

🔧 Available Scripts

# Development
npm run dev          # Start dev server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Type Checking
npm run type-check   # TypeScript type checking

🌐 Environment Variables

Variable	Description	Required
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID	WalletConnect project ID	Yes
NEXT_PUBLIC_ENABLE_TESTNETS	Enable testnet networks	No
NEXT_PUBLIC_API_URL	Backend API URL	Yes
NEXT_PUBLIC_BACKEND_URL	Backend base URL	Yes

📦 Adding Shadcn/ui Components

To add new components from shadcn/ui:

# Example: Add a button component
npx shadcn@latest add button

# Add multiple components
npx shadcn@latest add card dialog dropdown-menu

🎯 Development Workflow

1. Create a new page: Add a new folder in src/app/
2. Add components: Create reusable components in src/components/
3. Styling: Use Tailwind CSS classes with the cn() utility
4. Web3 Integration: Use wagmi hooks in client components
5. Data Fetching: Use React Query for API calls

🔐 Web3 Integration Example

'use client';

import { useAccount, useBalance } from 'wagmi';
import { ConnectButton } from '@rainbow-me/rainbowkit';

export function WalletInfo() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });

  if (!isConnected) return <ConnectButton />;

  return (
    <div>
      <p>Address: {address}</p>
      <p>Balance: {balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}

🎨 Design System

Color Palette

• Primary: Purple to Pink gradient (from-purple-500 to-pink-600)
• Background: Dark gradient (from-slate-900 via-purple-900 to-slate-900)
• Glass Effect: bg-white/5 backdrop-blur-lg border border-white/10

Typography

• Headings: Geist Sans (variable font)
• Code: Geist Mono (variable font)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License.

🔗 Links

• Next.js Documentation
• Tailwind CSS
• Shadcn/ui
• Wagmi
• RainbowKit
• Recharts

💡 Support

For support, please open an issue in the GitHub repository or contact the development team.

---

Built with ❤️ by the CoinSight Team