Công nghệ sử dụng

React

Node

Metamask

Permissions

Security

Advanced

Wallet

Web3

Sự miêu tả

🛡️ PermitGuard

Take control of your wallet. See every permission. Revoke with one click.

🎯 Problem Statement

Every Web3 user accumulates wallet permissions over time. These permissions:

🔴 Often go unnoticed and unmanaged
🔴 Create security vulnerabilities
🔴 Remain active long after they're needed
🔴 Are difficult to find and revoke

Result: Millions of wallets have unnecessary exposure to potential exploits.

💡 Our Solution

A beautiful, functional dashboard that gives users complete visibility and control over their MetaMask permissions.

Key Features

Feature	Description
🔗 One-Click Connect	Seamless MetaMask integration
📊 Risk Assessment	Color-coded risk levels (safe/moderate/dangerous)
🗑️ Easy Revocation	Single or bulk permission removal
🔍 Search & Filter	Find permissions by name, risk, or type
📈 Statistics	Overall risk score and permission breakdown
📜 History Timeline	Track permission events over time
🌙 Dark Mode	Modern Web3 aesthetic
📱 Responsive	Works on desktop, tablet, and mobile

🛠️ Tech Stack

Category	Technology
Frontend	React 19, TypeScript
Build	Vite
Styling	Pure CSS (Glassmorphism, CSS Variables)
Animations	Framer Motion
Icons	Lucide React
Wallet	MetaMask SDK
Testing	Vitest, fast-check (Property-Based Testing)

🚀 Quick Start

# Clone the repository
git clone https://github.com/AqilaRifti/PermitGuard.git

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

📁 Project Structure

src/
├── components/     # React UI components
├── hooks/          # Custom React hooks
├── services/       # MetaMask & API services
├── context/        # React context providers
├── types/          # TypeScript interfaces
├── utils/          # Utility functions
└── index.css       # Global styles

🧪 Testing

We use property-based testing to ensure correctness:

npm test

25 tests covering:

✅ Risk level calculation determinism
✅ Filter result correctness
✅ Filter idempotence
✅ Stats calculation accuracy

🎨 Design Highlights

Glassmorphism Cards

Frosted glass effect with backdrop blur for a modern Web3 look.

Risk Color Coding

🟢 Green (Safe) - Read-only access
🟡 Yellow (Moderate) - Write access with limits
🔴 Red (Dangerous) - Unlimited spending access

Smooth Animations

Framer Motion powered transitions for a polished feel.

🔮 Roadmap

Core dashboard functionality
Risk assessment system
Search and filter
Bulk revocation
Real-time permission alerts
Cross-chain support
Browser extension
Mobile app

👥 Team

Built with ❤️ for the Web3 community.

📄 License

MIT License - feel free to use this project for your own purposes.

🙏 Acknowledgments

MetaMask team for the SDK
The Web3 security community
All the dApps that inspired better permission management
Live Demo: https://permitguard.netlify.app

Tiến độ hackathon

Built PermitGuard from the ground up resulting in a sleek, production-ready React dashboard that gives MetaMask users complete visibility and control over their wallet permissions. We implemented one-click wallet connection via MetaMask SDK, a comprehensive permission card system with color-coded risk assessment (safe/moderate/dangerous), powerful search and filtering capabilities, bulk revocation actions, and a permission history timeline. The UI features a modern Web3 aesthetic with glassmorphism design, smooth Framer Motion animations, and full mobile responsiveness. We also established a robust testing foundation with 25 property-based tests using fast-check to verify risk calculation determinism, filter correctness, and idempotence, ensuring the core logic is bulletproof across all edge cases.

Trạng thái huy động vốn

N/A

PermitGuard

Video