$ show jbx-protocol/juice-interface
This repository is the primary web frontend (dApp) for the Juicebox protocol, a decentralized programmable funding platform on Ethereum and other EVM chains. It is a full-stack Next.js application that allows users to create, manage, and contribute to projects across multiple protocol versions (V1, V2/V3, V4/V5). The application handles the complete project lifecycle: creation via a multi-step wizard, funding cycles, payout splits, token issuance, NFT rewards, governance (ballots, Safe multisig), and treasury management. It also serves as the project's marketing site with pages for about, success stories, and FAQs. Architecturally, it is a monolithic Next.js application with a strong internal package structure separating protocol versions. It employs a Provider/Context pattern for dependency injection (e.g., V2V3ProjectContext, CurrencyContext) and Redux for complex form and flow state. On-chain data is read via GraphQL subgraphs (Apollo) and direct contract calls (ethers/wagmi), while off-chain metadata is stored on IPFS and cached in Supabase. The codebase demonstrates sophisticated patterns for blockchain interaction, including a generic contract reader with state change detection and a standardized transaction abstraction. The codebase is actively maintained with recent commits and a low issue count. It contains several well-crafted, reusable components. However, it suffers from significant code duplication between the v2v3 and v4v5 packages, an incomplete migration from ethers v5 to viem/wagmi, and scattered commented-out code and TODOs. This technical drift is manageable but requires careful navigation for new contributors or AI agents evaluating the code for reuse.
The LLM identified 6 files worth highlighting for reuse:
A generic hook for subscribing to on-chain state changes. It reads from any contract using a provided ABI and address, deeply compares the returned values to detect changes, and emits events. This solves the common dApp problem of efficiently polling blockchain state and is a highly reusable, self-contained pattern for any project interacting with smart contracts.
A standardized abstraction for sending blockchain transactions. It handles wallet connection checks, transaction construction, sending, receipt waiting, and error handling in a uniform way. This pattern is cleanly isolated and can be extracted and reused in any decentralized application to manage on-chain writes.
A robust input component for formatted numbers that handles decimals, commas, and unit suffixes (e.g., ETH/wei). It solves the notoriously tricky UI problem of formatting and parsing numbers during user input without breaking cursor position. It is fully isolated and reusable in any application requiring formatted numeric input.
A custom Apollo Link/utility for exhaustive GraphQL pagination using a 'deplete' pattern (fetching all pages until empty). This is a common requirement when querying blockchain subgraphs for complete historical data. It is a well-encapsulated utility that can be reused in any GraphQL-based project needing bulk data retrieval.
A UI component for visually diffing two states of a configuration, specifically designed for funding cycle splits. It compares beneficiary, percentage, and lock duration fields and renders a clear visual diff. This is a non-trivial, reusable pattern for any application that needs to show changes in complex configuration objects.
Clean, well-tested utility functions for parsing beneficiary payout splits from CSV files. It handles headers, data validation, and conversion to internal data structures. This module is isolated from the rest of the codebase and can be directly reused in any project requiring CSV-based data import for structured financial or allocation data.