Videos

Description

🛡️ 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

Progress During 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.

Tech Stack

React

Node

Metamask

Permissions

Security

Advanced

Wallet

Web3

Fundraising Status

N/A

PermitGuard