Take control of your wallet. See every permission. Revoke with one click.
Take control of your wallet. See every permission. Revoke with one click.
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.
A beautiful, functional dashboard that gives users complete visibility and control over their MetaMask permissions.
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 |
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) |
# 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
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 stylesWe use property-based testing to ensure correctness:
npm test25 tests covering:
✅ Risk level calculation determinism
✅ Filter result correctness
✅ Filter idempotence
✅ Stats calculation accuracy
Frosted glass effect with backdrop blur for a modern Web3 look.
🟢 Green (Safe) - Read-only access
🟡 Yellow (Moderate) - Write access with limits
🔴 Red (Dangerous) - Unlimited spending access
Framer Motion powered transitions for a polished feel.
Core dashboard functionality
Risk assessment system
Search and filter
Bulk revocation
Real-time permission alerts
Cross-chain support
Browser extension
Mobile app
Built with ❤️ for the Web3 community.
MIT License - feel free to use this project for your own purposes.
MetaMask team for the SDK
The Web3 security community
All the dApps that inspired better permission management
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