PermitGuard
Take control of your wallet. See every permission. Revoke with one click.
视频
描述
🛡️ 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 test25 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
本次黑客松进展
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.
技术栈
融资状态
N/A