| 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deploy Custom Hook</title>
<link rel="stylesheet" href="/shared/styles.css">
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
.step { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); }
.step:last-child { border-bottom: none; }
.step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; }
.step-number.active { background: var(--accent); }
.step-number.complete { background: (--success); }
{ : ; }
{ : ; : (--text-muted); }
{ : ; : ; : solid (--border-color); }
{ : ; }
{ : ; }
{ : flex; : ; : wrap; : ; }
{ : ; : solid (--border-color); : ; : pointer; : ; : (--bg-primary); : (--text-primary); }
{ : (--accent); : (--accent); }
{ : (--bg-primary); : solid (--border-color); : ; : ; : monospace; : ; : auto; : pre-wrap; : break-all; : ; : auto; }
</style>
</head>
<body>
<div class="container">
<h1>Deploy Custom Hook</h1>
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">Compile, deploy, and attach hooks to your Juicebox project</p>
<div class="card" style="margin-bottom: 1rem;">
<button class="btn" id="connect-btn" onclick="connectWallet()">Connect Wallet</button>
<div id="wallet-info" class="hidden" style="margin-top: 0.75rem;">
<span class="badge-success">Connected: <span id="wallet-address"></span> on <span id="wallet-chain"></span></span>
</div>
</div>
<div class="card" style="margin-bottom: 1rem;">
<div class="step"><div class="step-number" id="step1-num">1</div><div><div class="step-title">Source Code</div><div class="step-desc">Paste or load Solidity code</div></div></div>
<div class="step"><div class="step-number" id="step2-num">2</div><div><div class="step-title">Compile</div><div class="step-desc">Generate ABI and bytecode</div></div></div>
<div class="step"><div class="step-number" id="step3-num">3</div><div><div class="step-title">Deploy</div><div class="step-desc">Deploy contract to chain</div></div></div>
<div class="step"><div class="step-number" id="step4-num">4</div><div><div class="step-title">Attach</div><div class="step-desc">Set as project hook</div></div></div>
</div>
<div class="grid">
<div>
<div class="card">
<h2>Source Code</h2>
<div class="tabs" style="margin-bottom: 1rem;">
<div class="tab active" onclick="showTab('paste')">Paste</div>
<div class="tab" onclick="showTab('catalog')">From Catalog</div>
<div class="tab" onclick="showTab('file')">Upload</div>
</div>
<div id="tab-paste">
<textarea id="source-code" rows="18" style="font-family: monospace; font-size: 0.8rem;" placeholder="// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;
import {IJBPayHook} from '@bananapus/core/src/interfaces/IJBPayHook.sol';
// ... your hook code"></textarea>
</div>
<div id="tab-catalog" class="hidden">
<label>Select Hook Template</label>
<select id="catalog-select" onchange="loadFromCatalog()">
<option value="">-- Select a template --</option>
<optgroup label="Pay Hooks">
<option value="pay-cap">Payment Cap Hook</option>
<option value="pay-allowlist">Allowlist Pay Hook</option>
</optgroup>
<optgroup label="Cash Out Hooks">
<option value="cashout-fee">Fee Extraction Hook</option>
</optgroup>
</select>
<div id="catalog-preview" class="output" style="margin-top: 0.5rem; min-height: 100px;"></div>
</div>
<div id="tab-file" class="hidden">
<input type="file" id="file-input" accept=".sol" onchange="loadFromFile()">
</div>
<button class="btn" style="margin-top: 1rem;" onclick="compileSource()">Compile</button>
</div>
<div class="card">
<h2>Compiler Output</h2>
<div id="compile-status"></div>
<div id="compile-errors" class="output hidden" style="color: var(--error);"></div>
<div id="compile-success" class="hidden">
<label>Select Contract</label>
<select id="contract-select" onchange="selectContract()">
<option value="">-- Select contract to deploy --</option>
</select>
<div id="constructor-args" class="constructor-args hidden">
<label style="font-weight: 600;">Constructor Arguments</label>
<div id="args-container"></div>
</div>
</div>
</div>
</div>
<div>
<div class="card">
<h2>Target Chain</h2>
<div class="chain-select" id="chain-select">
<div class="chain-chip selected" data-chain="1" onclick="selectChain(this)">Ethereum</div>
<div class="chain-chip" data-chain="11155111" onclick="selectChain(this)">Sepolia</div>
<div class="chain-chip" data-chain="10" onclick="selectChain(this)">Optimism</div>
<div class="chain-chip" data-chain="8453" onclick="selectChain(this)">Base</div>
<div class="chain-chip" data-chain="42161" onclick="selectChain(this)">Arbitrum</div>
</div>
</div>
<div class="card">
<h2>Deploy Contract</h2>
<div id="deploy-status"></div>
<button class="btn" id="deploy-btn" onclick="deployContract()" disabled>Deploy Hook</button>
<div id="deploy-result" class="hidden" style="margin-top: 1rem;">
<label>Contract Address</label>
<div class="output" id="deployed-address"></div>
<div style="display: flex; gap: 0.5rem; margin-top: 0.75rem;">
<button class="btn-secondary" onclick="copyAddress()">Copy</button>
<button class="btn-secondary" onclick="viewOnExplorer()">Explorer</button>
</div>
</div>
</div>
<div class="card">
<h2>Verify Contract (Optional)</h2>
<label>Etherscan API Key</label>
<input type="text" id="etherscan-key" placeholder="Your API key">
<button class="btn-secondary" id="verify-btn" onclick="verifyContract()" disabled>Verify</button>
<div id="verify-status" style="margin-top: 0.5rem;"></div>
</div>
<div class="card">
<h2>Attach to Project</h2>
<label>Project ID</label>
<input type="number" id="project-id" placeholder="e.g., 1">
<label>Hook Type</label>
<select id="hook-type">
<option value="pay">Pay Hook</option>
<option value="cashout">Cash Out Hook</option>
<option value="both">Both</option>
</select>
<button class="btn" id="attach-btn" onclick="attachToProject()" disabled>Queue Ruleset with Hook</button>
<div id="attach-status" style="margin-top: 0.5rem;"></div>
</div>
</div>
</div>
</div>
<script type="module">
import { createWalletClient, custom, encodeDeployData, encodeFunctionData } from 'https://esm.sh/viem';
import { mainnet, optimism, base, arbitrum, sepolia } from 'https://esm.sh/viem/chains';
import { CHAIN_CONFIGS, truncateAddress } from '/shared/wallet-utils.js';
const CHAINS_MAP = { 1: mainnet, 10: optimism, 8453: base, 42161: arbitrum, 11155111: sepolia };
const EXPLORERS = {
1: { name: 'Etherscan', url: 'https://etherscan.io', api: 'https://api.etherscan.io' },
11155111: { name: 'Sepolia', url: 'https://sepolia.etherscan.io', api: 'https://api-sepolia.etherscan.io' },
10: { name: 'Optimism', url: 'https://optimistic.etherscan.io', api: 'https://api-optimistic.etherscan.io' },
8453: { name: 'Basescan', url: 'https://basescan.org', api: 'https://api.basescan.org' },
42161: { name: 'Arbiscan', : , : }
};
= {
: { : , : },
: { : , : },
: { : , : }
};
walletClient = ;
connectedAddress = ;
compiledContracts = {};
selectedContract = ;
deployedAddress = ;
selectedChainId = ;
sourceCode = ;
. = () {
.().( t..());
event...();
.()..(, tab !== );
.()..(, tab !== );
.()..(, tab !== );
};
. = () {
template = [.().];
(template) {
.(). = template.;
.(). = template.;
sourceCode = template.;
}
};
. = () {
file = .().[];
(!file) ;
reader = ();
reader. = {
.(). = e..;
sourceCode = e..;
};
reader.(file);
};
. = () {
.().( c..());
el..();
selectedChainId = (el..);
};
. = () {
(!.) { (); ; }
{
[address] = ..({ : });
connectedAddress = address;
walletClient = ({ : [selectedChainId], : (.) });
chainId = ..({ : });
.(). = (address);
.(). = [(chainId, )]?. || ;
.()..();
.(). = ;
.(). = ;
(, );
} (e) { .(e); (); }
};
. = () {
sourceCode = .().;
(!sourceCode.()) { (, , ); ; }
(, , );
.()..();
.()..();
{
response = (, {
: ,
: { : },
: .({ : sourceCode })
});
(!response.) ();
result = response.();
(result.?.( e. === )) {
errors = result..( e. === );
.(). = errors.( e.).();
.()..();
(, , );
;
}
compiledContracts = {};
( [fileName, file] .(result. || {})) {
( [contractName, contract] .(file)) {
compiledContracts[contractName] = { : contract., : contract... };
}
}
(.(compiledContracts). === ) {
(, , );
;
}
select = .();
select. = +
.(compiledContracts).( ).();
.()..();
(, , );
(, );
} (error) {
(, , );
}
};
. = () {
name = .().;
(!name) { selectedContract = ; .(). = ; ; }
selectedContract = compiledContracts[name];
constructor = selectedContract..( i. === );
argsContainer = .();
argsContainer. = ;
(constructor?.?. > ) {
.()..();
constructor..( {
argsContainer. += ;
});
} {
.()..();
}
.(). = ;
};
. = () {
(!selectedContract || !connectedAddress) { (, , ); ; }
chainId = ..({ : });
((chainId, ) !== selectedChainId) {
(, , );
{
..({ : , : [{ : + selectedChainId.() }] });
walletClient = ({ : [selectedChainId], : (.) });
} (e) { ; }
}
(, , );
.(). = ;
{
constructor = selectedContract..( i. === );
args = [];
(constructor?.) {
constructor..( {
value = .().;
args.((value, input.));
});
}
hash = walletClient.({
: selectedContract.,
: ,
args,
: connectedAddress
});
(, , );
receipt = (hash);
deployedAddress = receipt.;
.(). = deployedAddress;
.()..();
(, , );
(, );
.(). = ;
.(). = ;
} (error) {
(, , );
.(). = ;
}
};
() {
( i = ; i < attempts; i++) {
receipt = ..({ : , : [hash] });
(receipt) receipt;
( (r, ));
}
();
}
() {
(type.() || type.()) (value);
(type === ) value.() === ;
(type.()) .(value);
value;
}
. = { navigator..(deployedAddress); (, , ); };
. = { .(, ); };
. = () {
apiKey = .().;
(!apiKey) { (, , ); ; }
(, , );
{
response = (, {
: ,
: { : },
: ({
: apiKey, : , : ,
: deployedAddress, : sourceCode,
: ,
: .().,
: , : , :
})
});
result = response.();
(, result. === ? : ,
result. === ? : );
} (error) { (, , ); }
};
. = () {
projectId = .().;
hookType = .().;
(!projectId) { (, , ); ; }
(, , );
(, );
};
() {
el = .(id);
el. = type === ? : type === ? : type === ? : ;
el.. = ;
el.. = ;
el.. = ;
el.. = ;
el. = msg;
}
() {
.(). = + status;
}
</script>
</body>
</html>
Compilation API Endpoint
For browser compilation, you'll need a server-side endpoint:
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) {
return { error: + path };
}
Import Resolution
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
