A modern web application for managing Squads V4 multisig wallets across multiple SVM (Solana Virtual Machine) chains.
- 🔐 Ledger Hardware Wallet Support - Secure transaction signing with Ledger devices
- 🌐 Multi-Chain Support - Manage multisigs across Solana, Soon, Eclipse, SonicSVM, Solaxy, and more
- 📝 Proposal Management - Create, approve, reject, and execute multisig proposals
- 📊 Monitoring Dashboard - View and manage proposals across all multisigs in a single table view
- 🔍 Transaction Details - View detailed transaction data including instructions and account keys
- ⚙️ Custom RPC Configuration - Configure custom RPC endpoints for each chain
- 💾 Local Storage - All data stored locally in your browser
- ⚡ Smart Caching - Intelligent RPC response caching (30s TTL) to reduce network requests
- 🔍 Debounced Search - Optimized search with 300ms debounce for smooth filtering
- 📄 Pagination - Handle large proposal lists with 20 items per page
- 💪 Optimistic Updates - Instant UI feedback during proposal actions
- 🎨 Loading Skeletons - Beautiful loading states instead of spinners
- 📈 Proposal Statistics - Real-time stats showing active, executed, and rejected proposals
- ✅ Batch Operations - Approve or reject multiple proposals at once
- 🏷️ Tagging System - Organize multisigs with custom tags
- 🏷️ Address Labeling - Label wallet addresses with custom names, descriptions, and colors
- 📤 CSV Export - Export proposals and multisig data to CSV
- 🎯 Smart Filtering - Filter by status (🟢 Active, ✅ Executed, ❌ Rejected, 🚫 Cancelled), chain, and tags
- 🔄 Transaction History - View executed and cancelled proposals with default active filter
- 📦 Import/Export - Backup and restore multisig configurations
- 👥 Member Management - Propose changes to members and threshold via UI
✈️ Pre-flight Checks - Transaction validation before execution- 👤 User Highlighting - See your address highlighted in transaction details
- ⌨️ Keyboard Shortcuts - Quick access with Cmd+K for search, Shift+? for shortcuts
- 🔎 Quick Search - Global search across multisigs and proposals
- Node.js 18+ and pnpm
- Ledger device (for signing transactions)
# Install dependencies
pnpm install
# Run development server
pnpm devOpen http://localhost:3000 to view the app.
# Production build
pnpm build
# Start production server
pnpm startClick "Connect Wallet" and connect your Ledger device with the Solana app installed.
- Create New: Set up a new multisig with custom threshold and members
- Import Existing: Import an existing multisig by address
- Select a multisig from the sidebar to view its proposals
- Approve, reject, or execute proposals inline
- View threshold status and approval/rejection counts
- Sidebar Metrics: See Members, Threshold, Active, and Executed counts in Alert badges
- View your connected wallet highlighted with "You" badge
- View all proposals across all multisigs in a single table
- Batch Operations: Select multiple proposals to approve/reject at once
- Smart Filtering: Filter by status with emoji indicators (🟢 Active, ✅ Executed, ❌ Rejected, 🚫 Cancelled)
- Search: Find proposals by multisig name or address with debounced search
- Pagination: Navigate through large proposal lists (20 items per page)
- Statistics: See real-time proposal counts and success rates
- Export: Download proposal data to CSV for external analysis
- Pre-flight Checks: Transactions are validated before execution
- View detailed transaction data with your wallet highlighted
- Open member management dialog from multisig options
- Add new members by entering their Solana address
- Remove existing members
- Update the approval threshold
- Preview changes before creating a configuration proposal
Cmd+K(orCtrl+K): Open quick searchShift+?: View all keyboard shortcuts- Navigate search results with arrow keys
- Press
Enterto select
Label wallet addresses for easier identification:
- Click the Tag icon in the header to open the Address Label Manager
- Add Label: Enter address, label name, optional description, and choose a color
- Search Labels: Filter through saved labels
- Edit/Delete: Manage existing labels from the list
- Quick Access: Add labels directly from member lists and transaction details
- Visual Display: Labeled addresses show colored badges with custom names
Click the Settings icon to:
- Edit RPC URLs
- Add custom chains
- Update program IDs
- Reset to defaults
The app implements an intelligent caching layer to optimize RPC requests:
- Automatic Caching: RPC responses are cached for 30 seconds by default
- Cache Invalidation: Cache is automatically cleared when:
- Manual refresh is triggered
- Proposals are approved, rejected, or executed
- Pattern-Based Invalidation: Supports invalidating related cache entries
- TTL Management: Configurable time-to-live for different data types
- Debounced Search: Search inputs wait 300ms before filtering to reduce unnecessary re-renders
- Pagination: Large lists are paginated (20 items/page) to maintain smooth scrolling
- Loading Skeletons: Skeleton loaders provide visual feedback during data fetching
- Optimistic Updates: UI updates immediately during actions, reverting only on error
These optimizations reduce unnecessary RPC calls, provide instant feedback, and ensure smooth performance even with 100+ proposals.
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS + shadcn/ui
- State Management: Zustand
- Blockchain: @sqds/multisig, @solana/web3.js
- Hardware Wallet: @ledgerhq/device-management-kit
- Testing: Vitest + @testing-library/react
- Form Validation: Zod + React Hook Form
- Icons: Lucide React
squad/
├── app/ # Next.js app router pages
│ ├── page.tsx # Home page (multisig list)
│ ├── monitoring/ # Monitoring dashboard
│ └── proposals/ # Proposals page
├── components/ # React components
│ ├── ui/ # shadcn/ui components (Button, Card, Alert, Badge, etc.)
│ ├── skeletons.tsx # Loading skeleton components
│ ├── monitoring-view.tsx # Main monitoring dashboard
│ ├── proposal-list.tsx # Per-multisig proposal view
│ ├── proposal-stats.tsx # Proposal statistics cards
│ ├── multisig-stats-card.tsx # Alert/Badge based metrics
│ ├── member-management-dialog.tsx # Member & threshold management
│ ├── address-label-manager-dialog.tsx # Address labeling UI
│ ├── address-with-label.tsx # Address display with labels
│ ├── keyboard-shortcuts-dialog.tsx # Shortcuts reference
│ ├── quick-search-dialog.tsx # Global search
│ └── ... # Feature components
├── lib/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ │ ├── use-proposal-actions.ts # Shared proposal actions
│ │ ├── use-address-label.ts # Address label hooks
│ │ ├── use-debounce.ts # Debounce hook
│ │ ├── use-pagination.ts # Pagination hook
│ │ ├── use-local-storage.ts # localStorage hook
│ │ ├── use-clipboard.ts # Clipboard operations
│ │ └── use-keyboard-shortcuts.ts # Keyboard shortcut manager
│ ├── utils/ # Utility functions
│ │ └── format-address.ts # Address formatting utilities
│ ├── squad.ts # SquadService (blockchain interaction)
│ ├── cache.ts # Smart caching layer
│ ├── config.ts # Centralized configuration
│ ├── export-csv.ts # CSV export utilities
│ ├── transaction-simulator.ts # Pre-flight checks
│ ├── storage.ts # localStorage abstractions
│ └── validation.ts # Zod schemas & validators
├── stores/ # Zustand stores
│ ├── chain-store.ts # Chain configuration
│ ├── multisig-store.ts # Multisig management
│ ├── address-label-store.ts # Address label management
│ └── wallet-store.ts # Wallet state
├── types/ # TypeScript types
│ ├── multisig.ts # Multisig & Proposal types
│ ├── chain.ts # Chain types
│ ├── address-label.ts # Address label types
│ └── wallet.ts # Wallet types
└── __tests__/ # Test files (74 tests)
└── lib/ # Library tests
├── hooks/ # Hook tests
├── cache.test.ts
├── address-label.test.ts
├── format-address.test.ts
├── export-csv.test.ts
└── validation.test.ts
# Run tests
pnpm test
# Run linter
pnpm lint
# Format code
pnpm formatMIT