graph TB
 subgraph "User Layer"
 A[Web Browser]
 B[Mobile Wallet]
 end
 subgraph "Frontend Layer"
 C[React App]
 D[ConnectKit]
 E[Wagmi Provider]
 end
 subgraph "Blockchain Layer"
 F[Base Network]
 G[BaseBatchPay Contract]
 end
 subgraph "External Services"
 H[WalletConnect]
 I[Infura/Alchemy RPC]
 end
 A --> C
 B --> H
 C --> D
 D --> E
 E --> F
 F --> G
 H --> E
 E --> I

sequenceDiagram
 participant U as User
 participant F as Frontend
 participant W as Wallet
 participant C as Contract
 participant B as Blockchain
 U->>F: Upload CSV or Add Recipients Manually
 F->>F: Parse and Validate Data
 F->>U: Show Preview & Total Amount
 U->>F: Confirm Batch Payment
 F->>W: Request Transaction Signature
 W->>U: Show Transaction Details
 U->>W: Approve Transaction
 W->>F: Return Signed Transaction
 F->>B: Submit Batch Transaction
 B->>C: Execute batchPay Function
 C->>C: Process Each Payment
 C->>B: Emit Payment Events
 B->>F: Transaction Confirmation
 F->>U: Show Success Message

classDiagram
 class BaseBatchPay {
 +address owner
 +uint256 protocolFee
 +mapping(address => Payment[]) paymentHistory
 +batchPay(address[], uint256[])
 +getPaymentHistory(address)
 +withdrawFunds()
 +addEmployee(address)
 +removeEmployee(address)
 -_validateRecipients(address[], uint256[])
 }
 class Payment {
 +address recipient
 +uint256 amount
 +uint256 timestamp
 +bytes32 txHash
 }
 class Ownable {
 +address owner
 +transferOwnership(address)
 +renounceOwnership()
 }
 class ReentrancyGuard {
 -uint256 _status
 +nonReentrant()
 }
 BaseBatchPay --|> Ownable
 BaseBatchPay --|> ReentrancyGuard
 BaseBatchPay --> Payment

graph TD
 A[App.tsx] --> B[Router]
 B --> C[Home Page]
 B --> D[Create Page]
 B --> E[History Page]
 B --> F[About Page]
 C --> G[Hero Component]
 C --> H[Features Component]
 D --> I[RecipientInput]
 I --> J[CSVUpload]
 I --> K[ManualInput]
 D --> L[PaymentPreview]
 D --> M[TransactionStatus]
 J --> N[CSV Parser]
 K --> O[Recipient Form]
 E --> P[Payment History List]
 E --> Q[Transaction Details]
 F --> R[About Content]
 F --> S[Technical Details]

flowchart TD
 A[Local Development] --> B[Write Tests]
 B --> C[Run Tests]
 C --> D{Tests Pass?}
 D -->|No| E[Fix Issues]
 E --> C
 D -->|Yes| F[Compile Contract]
 F --> G[Deploy to Testnet]
 G --> H[Verify Contract]
 H --> I[Frontend Integration]
 I --> J[End-to-End Testing]
 J --> K{Ready for Mainnet?}
 K -->|No| L[Iterate & Improve]
 L --> I
 K -->|Yes| M[Deploy to Mainnet]
 M --> N[Final Verification]
 N --> O[Production Ready]

journey
 title BatchPay User Experience
 section Discovery
 User discovers BatchPay: 5: User
 Reads documentation: 4: User
 section Setup
 Connects wallet: 5: User
 Switches to Base network: 4: User
 section Payment Creation
 Chooses input method: 5: User
 Uploads CSV or adds manually: 4: User
 Reviews payment details: 5: User
 section Execution
 Approves transaction: 5: User
 Waits for confirmation: 3: User
 Receives success feedback: 5: User
 section Management
 Views payment history: 4: User
 Tracks transaction status: 4: User

stateDiagram-v2
 [*] --> InputValidation
 InputValidation --> RecipientsValidated: Valid data
 InputValidation --> Error: Invalid data
 Error --> InputValidation: Fix issues
 RecipientsValidated --> WalletConnection: Proceed
 WalletConnection --> NetworkCheck: Connected
 WalletConnection --> Error: No wallet
 NetworkCheck --> BaseNetwork: On Base
 NetworkCheck --> NetworkSwitch: Wrong network
 NetworkSwitch --> BaseNetwork: Switched
 BaseNetwork --> TransactionApproval: Ready
 TransactionApproval --> Signing: Approved
 TransactionApproval --> Cancelled: Rejected
 Signing --> Broadcasting: Signed
 Broadcasting --> Confirming: Submitted
 Confirming --> Success: Confirmed
 Confirming --> Failed: Error
 Success --> [*]: Complete
 Failed --> Retry: Try again
 Retry --> TransactionApproval
 Cancelled --> [*]: Aborted

pie title Gas Savings with Batch Payments
 "Individual Transactions" : 100
 "Batch Transaction Cost" : 25
 "Protocol Fee (0.5%)" : 2
 "Net Savings" : 73

graph TD
 A[Security Audit] --> B[Contract Logic]
 A --> C[Access Controls]
 A --> D[Input Validation]
 A --> E[Reentrancy Protection]
 A --> F[Overflow Protection]
 B --> B1[Business Logic Correct]
 B --> B2[Payment Distribution Accurate]
 C --> C1[Owner Functions Protected]
 C --> C2[Employee Management Secure]
 D --> D1[Address Validation]
 D --> D2[Amount Validation]
 D --> D3[Array Length Checks]
 E --> E1[ReentrancyGuard Implemented]
 E --> E2[State Changes Before Transfers]
 F --> F1[SafeMath Usage]
 F --> F2[Uint256 Overflow Checks]