Clarity Contract Analyzer

A modern, professional web application for analyzing Clarity smart contracts with advanced dependency tracking, function analysis, and testing capabilities.

Features

🔍 Smart Contract Analysis

• Advanced Parser: Enhanced Clarity syntax parsing with support for public, private, and read-only functions
• Dependency Tracking: Intelligent detection of cross-contract calls and internal dependencies
• Complexity Analysis: Automatic complexity scoring for functions and contracts
• Code Metrics: Lines of code, function counts, and size analysis

🎨 Professional UI/UX

• Modern Design: Glass-morphism effects, gradients, and smooth animations
• Responsive Layout: Optimized for desktop, tablet, and mobile devices
• Dark Theme: Professional dark theme with accent colors
• Interactive Components: Hover effects, transitions, and micro-interactions

🧪 Function Testing

• Interactive Testing: Test contract functions with custom parameters
• Mock Execution: Simulated function execution with realistic results
• Test Case Management: Create, save, and run multiple test scenarios
• Performance Metrics: Execution time tracking and performance analysis

📊 Analytics Dashboard

• Comprehensive Metrics: Function types, complexity distribution, and dependency analysis
• Visual Charts: Interactive charts and graphs for data visualization
• Performance Insights: Code efficiency scoring and optimization recommendations
• Risk Assessment: Security and maintainability analysis

🏗️ Modular Architecture

• Component-Based: Highly modular React components with clear separation of concerns
• State Management: Zustand for efficient global state management
• Type Safety: Full TypeScript support with comprehensive type definitions
• Clean Code: Well-organized codebase following best practices

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• UI Library: React 19 with Radix UI components
• Styling: Tailwind CSS v4 with custom animations
• State Management: Zustand
• Code Editor: Monaco Editor with Clarity syntax support
• Notifications: Sonner for toast notifications
• Build Tool: Turbopack for fast development

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository

   git clone <repository-url>
   cd clarity-contract-analyzer

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:3000 (or the port shown in your terminal)

Building for Production

pnpm build
pnpm start

Project Structure

client/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles and animations
│   ├── layout.tsx         # Root layout component
│   └── page.tsx           # Main application page
├── components/
│   ├── analysis/          # Analysis and visualization components
│   │   ├── AnalysisDashboard.tsx
│   │   ├── Analytics.tsx
│   │   ├── DependencyGraph.tsx
│   │   └── FunctionCard.tsx
│   ├── contract/          # Contract management components
│   │   └── ContractInputArea.tsx
│   ├── editor/            # Code editor components
│   │   └── CodeEditor.tsx
│   ├── layout/            # Layout components
│   │   ├── Header.tsx
│   │   └── Sidebar.tsx
│   ├── testing/           # Function testing components
│   │   └── FunctionTester.tsx
│   └── ui/                # Reusable UI components
│       ├── button.tsx
│       ├── card.tsx
│       ├── dialog.tsx
│       ├── input.tsx
│       ├── tabs.tsx
│       └── textarea.tsx
├── lib/
│   ├── parser.ts          # Enhanced Clarity contract parser
│   ├── store.ts           # Zustand state management
│   ├── types.ts           # TypeScript type definitions
│   └── utils.ts           # Utility functions
└── public/                # Static assets

Key Features in Detail

Smart Contract Parser

The enhanced parser supports:

• Multiple Function Types: define-public, define-private, define-read-only
• Parameter Analysis: Automatic extraction of function parameters and types
• Dependency Resolution: Detection of contract-call? and internal function calls
• Complexity Scoring: Algorithmic complexity calculation based on code patterns
• Code Analysis: Constants, variables, and data structure detection

Testing Interface

• Parameter Input: Dynamic form generation based on function signatures
• Mock Execution: Realistic simulation of contract function execution
• Test Management: Create, edit, and organize test cases
• Result Tracking: Detailed execution results with timing information
• Code Generation: Automatic test code generation for external testing

Analytics Dashboard

• Overview Metrics: Contract counts, function analysis, and complexity distribution
• Dependency Analysis: Visual representation of function dependencies
• Performance Insights: Code efficiency and optimization recommendations
• Risk Assessment: Security and maintainability scoring

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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 - see the LICENSE file for details.

Acknowledgments

• Built for the Stacks Hacker House
• Powered by Next.js and React
• UI components from Radix UI
• Styling with Tailwind CSS
• Code editing with Monaco Editor

---

Note: This is a demonstration application for analyzing Clarity smart contracts. For production use, additional security measures and comprehensive testing should be implemented.