A modern, responsive web application for managing multi-signature wallets on Ethereum. Built with React, TypeScript, and Tailwind CSS, featuring a mobile-first design and comprehensive wallet management capabilities.
Experience the full functionality of MultiGuard with our deployed application on Vercel.
- Create multi-signature wallets with custom owner configurations
- Set flexible confirmation thresholds (M-of-N signatures)
- Secure transaction approval workflow
- View wallet balances and transaction history
- Manage multiple wallets from a single interface
- Real-time balance updates and transaction status
- Submit new transactions for approval
- Confirm/approve pending transactions
- Execute fully approved transactions
- Support for both ETH transfers and contract interactions
- View all wallet owners and their roles
- Monitor signature requirements and consensus levels
- Track individual confirmation status
- Mobile-first responsive design
- Accessible interface (WCAG compliant)
- Clean, intuitive user experience
- Real-time loading states and error handling
- Frontend: React 19 with TypeScript
- Styling: Tailwind CSS 4.x
- Web3: Ethers.js v6, Wagmi, Viem
- Wallet Connection: Reown AppKit (formerly Web3Modal)
- State Management: TanStack Query (React Query)
- Routing: React Router v7
- Form Handling: React Hook Form
- UI Components: Headless UI
- Styling Utilities: Class Variance Authority, Tailwind Merge
- Date Handling: Date-fns
- Build Tool: Vite
- Icons: Heroicons
- Node.js 18+ and pnpm
- A Web3 wallet (MetaMask, WalletConnect compatible)
- Access to an Ethereum network (mainnet, testnet, or local)
-
Clone the repository
git clone <repository-url> cd multi-guard-fe
-
Install dependencies
pnpm install
-
Environment Setup
cp .env.example .env
Edit
.envand configure:VITE_REOWN_PROJECT_ID: Get from Reown CloudVITE_APP_URL: Your application URL (for WalletConnect metadata)VITE_WALLET_FACTORY_ADDRESS: Your deployed WalletFactory contract addressVITE_DEFAULT_NETWORK: (Optional) Default network (e.g., sepolia)
-
Start development server
pnpm dev
-
Open your browser Navigate to
http://localhost:5173
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (Button, Card, etc.)
│ ├── layout/ # Layout components (Header, Sidebar)
│ ├── landing/ # Landing page components
│ └── wallet/ # Wallet-specific components
├── contracts/ # Smart contract ABIs and utilities
│ └── abis/ # Contract ABI files
├── hooks/ # Custom React hooks
├── pages/ # Page components
├── styles/ # Global styles and theme
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
- Click "Connect Wallet" in the header
- Choose your preferred wallet (MetaMask, WalletConnect, etc.)
- Ensure you're on the correct network
- Navigate to "Create Wallet"
- Add owner addresses (including your own)
- Set the confirmation threshold
- Submit the transaction and wait for confirmation
- Submit: Go to "Create Transaction" to propose new transactions
- Approve: Use "Pending Transactions" to confirm transactions
- Execute: Once threshold is met, execute the transaction
- Dashboard shows all your wallets and recent activity
- View detailed information in "Manage Signers"
- Track transaction history and status
This frontend works with two main contracts:
- Creates new multi-signature wallets
- Tracks wallets by creator
- Provides wallet discovery functionality
- Handles transaction submission and execution
- Manages owner confirmations
- Enforces signature thresholds
The application is built with a mobile-first approach:
- Breakpoints: Tailwind's responsive system (sm, md, lg, xl)
- Touch-friendly: Large tap targets and intuitive gestures
- Adaptive layouts: Sidebar collapses to overlay on mobile
- Optimized performance: Efficient rendering on mobile devices
- ARIA labels: Comprehensive screen reader support
- Keyboard navigation: Full keyboard accessibility
- Color contrast: WCAG AA compliant color schemes
- Focus management: Clear focus indicators
- Semantic HTML: Proper heading hierarchy and landmarks
- Input validation: All user inputs are validated
- Address verification: Ethereum address format checking
- Error handling: Graceful error states and user feedback
- No private key storage: Wallet connection only, no key management
# Development
pnpm dev # Start development server
pnpm build # Build for production
pnpm preview # Preview production build
pnpm lint # Run ESLint- TypeScript: Full type safety
- ESLint: Code linting and formatting
- Path aliases: Configured for clean imports (@/components, @/hooks, etc.)
- Consistent patterns: Standardized component structure
pnpm buildThe built files will be in the dist/ directory.
Required for production:
VITE_REOWN_PROJECT_ID: Reown project IDVITE_APP_URL: Application URL for WalletConnect metadataVITE_WALLET_FACTORY_ADDRESS: Factory contract address
Optional:
VITE_DEFAULT_NETWORK: Default network configuration
- Vercel: Zero-config deployment
- Netlify: Static site hosting
- IPFS: Decentralized hosting
- Traditional hosting: Any static file server
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
For questions and support:
- Create an issue in the repository
- Check the documentation
- Review the code examples
Note: This is a frontend interface for multi-signature wallets. Ensure you understand the security implications and test thoroughly before using with real funds.