--- name: jb-interact-ui description: Generate minimal frontends for interacting with existing Juicebox V5 projects. Pay, cash out, claim tokens, view project state - all in standalone HTML files. --- # Juicebox V5 Interaction UI Generator Generate simple frontends for interacting with existing Juicebox projects using viem and shared styles. Pay into treasuries, cash out tokens, view project state - no build tools required. ## Philosophy > **Let users interact with Juicebox projects without touching a command line.** These UIs are for: - Paying into a project treasury - Cashing out tokens for ETH - Viewing project configuration and state - Claiming ERC-20 tokens from credits ## Template: Project Payment UI ```html Pay Project

Pay Project #1

Contribute ETH and receive tokens

Treasury Balance-

Token Supply-

Tokens per ETH-

Amount to Pay

ETH

tokens you'll receive

Memo (optional)

``` ## Template: Cash Out UI ```html Cash Out Tokens

Cash Out

Burn tokens to reclaim ETH from treasury

Tokens to Cash Out

tokens

ETH you'll receive

Cash outs burn your tokens permanently. You'll receive your proportional share of the treasury surplus.

``` ## Template: NFT Mint UI (721 Hook) ```html Mint NFT

Mint NFT

``` ## Template: Project Admin UI ```html Project Admin

Project #1 Admin

Manage treasury operations

Treasury Status

Balance-

Distributable-

Payout Limit-

Current Cycle-

Send Payouts

Use Allowance

Reserved

Distribute to Splits

Send funds to configured split recipients.

Amount to Distribute (ETH)

Split Recipients:

Use Surplus Allowance

Withdraw from surplus (discretionary spending).

Remaining Allowance-

Amount to Withdraw (ETH) Beneficiary Address

Distribute Reserved Tokens

Mint and distribute accumulated reserved tokens.

Pending Reserved Tokens-

``` ## Template: Claim Tokens UI ```html Claim Tokens

Claim Tokens

Convert credits to ERC-20 tokens

Your Balances

Credits (unclaimed)-

ERC-20 Tokens-

Total Balance-

Credits are stored in the Juicebox protocol. Claiming converts them to ERC-20 tokens in your wallet.

Amount to Claim

``` ## Template: Project Dashboard UI ```html Project Dashboard

Loading...

Project #1

Treasury Balance

ETH

Token Supply

tokens issued

Token Holders

unique addresses

Current Cycle

Current Ruleset

Duration-

Issuance (tokens/ETH)-

Reserved Rate-

Cash Out Tax Rate-

Payout Limit-

Data Hook-

Project Owner

Address -

``` ## Generation Guidelines 1. **Project ID as config** - Make it easy to change which project the UI targets 2. **Network switching** - Detect wrong network and prompt user to switch 3. **Real-time previews** - Show expected token amounts before transaction 4. **Error handling** - Catch wallet rejections and contract reverts gracefully 5. **Loading states** - Disable buttons and show spinners during transactions 6. **Read-only mode** - Support viewing data without wallet connection ## Fetching Project Data To show real project stats, query the contracts: ```javascript async function getProjectStats(projectId) { const controller = CHAIN_CONFIGS[chainId]?.contracts?.JBController; const [ruleset, metadata] = await publicClient.readContract({ address: controller, abi: CONTROLLER_ABI, functionName: 'currentRulesetOf', args: [projectId] }); return { weight: ruleset.weight, duration: ruleset.duration, reservedRate: metadata.reservedRate, cashOutTaxRate: metadata.cashOutTaxRate }; } ``` ## Fetching Data with Bendystraw Instead of querying contracts directly, use Bendystraw for faster, indexed data: ```javascript // Bendystraw client (use server-side proxy to hide API key) async function bendystrawQuery(query, variables = {}) { const response = await fetch('/api/bendystraw', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query, variables }) }); return (await response.json()).data; } // Get project stats async function getProjectStats(projectId, chainId) { return bendystrawQuery(` query($projectId: Int!, $chainId: Int!) { project(projectId: $projectId, chainId: $chainId) { name handle logoUri owner balance volume volumeUsd tokenSupply token tokenSymbol paymentsCount contributorsCount trendingScore trendingVolume } } `, { projectId, chainId }); } ``` Contact [@peripheralist](https://x.com/peripheralist) for an API key. ## Related Skills - `/jb-deploy-ui` - UIs for deploying new projects - `/jb-omnichain-ui` - Multi-chain UIs with Relayr & Bendystraw - `/jb-query` - Direct contract queries (when Bendystraw unavailable) - `/jb-v5-api` - Contract function signatures