--- name: jb-deploy-ui description: Generate minimal frontends for deploying Juicebox V5 projects and hooks. Creates standalone HTML files with wallet connection, transaction forms, and live status updates. --- # Juicebox V5 Deployment UI Generator Generate simple frontends for deploying Juicebox projects, hooks, and configurations. Uses shared styles and viem for blockchain interactions. ## Philosophy > **Show users exactly what they're doing. Make wallet connection trivial. Display transactions in flight.** - Single HTML file, no build step - viem from ESM CDN - Shared CSS from `/shared/styles.css` - Clear transaction previews before signing ## Template: Project Deployment UI ```html Deploy Juicebox Project

Deploy Juicebox Project

Project Details

Project Name Description Owner Address (defaults to connected wallet)

Ruleset Configuration

Duration (days, 0 = no cycles) Tokens per ETH Reserved Rate (%) Cash Out Tax Rate (%)

Transaction Preview

Connect wallet to see preview

``` ## Template: 721 NFT Project Deployment ```html Deploy NFT Project

Deploy NFT Project

Collection Details

Collection Name Symbol Base URI (IPFS folder)

NFT Tiers

Treasury Settings

Reserved Rate (%) Cash Out Tax Rate (%)

``` ## Template: Revnet Deployment ```html Deploy Revnet

Deploy Revnet

Launch an autonomous tokenized treasury

Revnets are autonomous - configuration is permanent after deployment.

Token Configuration

Token Name Token Symbol

Stage 1 Configuration

Initial Issuance (tokens per ETH) Issuance Cut (% reduction per period) Cut Frequency (days) Cash Out Tax Rate (%) Split to Operator (%)

Operator Address

Receives split percentage. Can update splits but not core rules.

``` ## V5 Contract Addresses Load from shared chain config: ```javascript import { loadChainConfig } from '/shared/wallet-utils.js'; const config = await loadChainConfig(); // V5.1 addresses (new projects) const controller = config.chains[1].contracts.JBController; const terminal = config.chains[1].contracts.JBMultiTerminal; // V5.0 addresses (revnets only) const revDeployer = config.chains[1].contractsV5.REVDeployer; ``` ## Related Skills - `/jb-project` - Project configuration details - `/jb-ruleset` - Ruleset parameters - `/jb-interact-ui` - UIs for interacting with existing projects - `/jb-omnichain-ui` - Multi-chain deployments