jb-hook-deploy-ui
Deploy custom Juicebox hooks from browser. Compile Solidity, deploy contracts, verify on explorers, and attach to projects. Works with Claude-generated hooks.
Install
mkdir -p .claude/skills/jb-hook-deploy-ui && curl -L -o skill.zip "https://mcp.directory/api/skills/download/8220" && unzip -o skill.zip -d .claude/skills/jb-hook-deploy-ui && rm skill.zipInstalls to .claude/skills/jb-hook-deploy-ui
About this skill
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: var(--success); }
.step-title { font-weight: 500; }
.step-desc { font-size: 0.75rem; color: var(--text-muted); }
.constructor-args { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.arg-input { margin-bottom: 0.5rem; }
.arg-input label { font-size: 0.75rem; }
.chain-select { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chain-chip { padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; font-size: 0.875rem; background: var(--bg-primary); color: var(--text-primary); }
.chain-chip.selected { background: var(--accent); border-color: var(--accent); }
.output { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.75rem; font-family: monospace; font-size: 0.8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: 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', url: 'https://arbiscan.io', api: 'https://api.arbiscan.io' }
};
const HOOK_CATALOG = {
'pay-cap': { name: 'Payment Cap Hook', source: `// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;
import {IJBPayHook} from "@bananapus/core/src/interfaces/IJBPayHook.sol";
import {JBAfterPayRecordedContext} from "@bananapus/core/src/structs/JBAfterPayRecordedContext.sol";
import {IERC165} from "@openzeppelin/contracts/utils/introspection/IERC165.sol";
contract PaymentCapHook is IJBPayHook {
uint256 public immutable MAX_PAYMENT;
error PaymentExceedsCap(uint256 amount, uint256 cap);
constructor(uint256 _maxPayment) { MAX_PAYMENT = _maxPayment; }
function aft
---
*Content truncated.*
More by openclaw
View all skills by openclaw →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
fastapi-templates
wshobson
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
Related MCP Servers
Browse all servers
Supabase MCP ServerConnect Supabase projects to AI with Supabase MCP Server. Standardize LLM communication for secure, efficient developmen
OllamaIntegrate Ollama's local LLM models for secure, on-premise AI and data control with MCP-compatible apps. Deploy custom m
WebhooksWebhooks enable automated notifications and workflow automation software integration by sending customizable messages to
DingDing BotDingDing Bot lets you send text and markdown messages to DingDing group chats via custom webhooks, enabling automated, f
Alibaba Cloud Function ComputeEasily manage serverless functions with Alibaba Cloud Function Compute, enabling multi-language runtime, custom domains,
Developer NameDeveloper Name offers customizable dev info through a lightweight Node.js server, easily run via npx or as a Docker cont
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.