--- name: jb-hook-deploy-ui description: Deploy custom Juicebox hooks from browser. Compile Solidity, deploy contracts, verify on explorers, and attach to projects. Works with Claude-generated hooks. --- # Juicebox V5 Hook Deployment UI Deploy custom hooks directly from the browser. Compile Solidity code, deploy to any chain, verify on block explorers, and attach to your Juicebox project. ## Overview ``` 1. Paste or load Solidity source code 2. Compile in browser using solc.js 3. Deploy via connected wallet 4. Optionally verify on Etherscan/Basescan/etc. 5. Attach hook to project ruleset ``` ## Complete Hook Deploy UI Template ```html Deploy Custom Hook

Deploy Custom Hook

Compile, deploy, and attach hooks to your Juicebox project

1
Source Code
Paste or load Solidity code
2
Compile
Generate ABI and bytecode
3
Deploy
Deploy contract to chain
4
Attach
Set as project hook

Source Code

Paste
From Catalog
Upload

Compiler Output

Target Chain

Ethereum
Sepolia
Optimism
Base
Arbitrum

Deploy Contract

Verify Contract (Optional)

Attach to Project

``` ## Compilation API Endpoint For browser compilation, you'll need a server-side endpoint: ```typescript // pages/api/compile.ts import solc from 'solc'; export default async function handler(req, res) { if (req.method !== 'POST') return res.status(405).json({ error: 'Method not allowed' }); const { source } = req.body; const input = { language: 'Solidity', sources: { 'contract.sol': { content: source } }, settings: { outputSelection: { '*': { '*': ['abi', 'evm.bytecode'] } }, optimizer: { enabled: true, runs: 200 } } }; const output = JSON.parse(solc.compile(JSON.stringify(input), { import: findImports })); res.json(output); } function findImports(path) { // Resolve from GitHub/npm return { error: 'Import not found: ' + path }; } ``` ## Import Resolution ```javascript const IMPORT_MAPPINGS = { '@bananapus/core/': 'https://raw.githubusercontent.com/Bananapus/nana-core-v5/main/', '@bananapus/721-hook/': 'https://raw.githubusercontent.com/Bananapus/nana-721-hook-v5/main/', '@openzeppelin/contracts/': 'https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/v5.0.0/contracts/' }; ``` ## Related Skills - `/jb-pay-hook` - Generate pay hook Solidity code - `/jb-cash-out-hook` - Generate cash out hook Solidity code - `/jb-split-hook` - Generate split hook Solidity code - `/jb-interact-ui` - Queue rulesets with hooks