jb-interact-ui

Generate minimal frontends for interacting with existing Juicebox V5 projects. Pay, cash out, claim tokens, view project state - all in standalone HTML files.

Ir para a instalação

Repositório: Demerzels-lab/elsamultiskillagent
Última atividade na origem: 7 de fevereiro de 2026 às 06:16
Idioma detectado do SKILL.md: inglês
Estrelas: 10
Forks: 1

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/Demerzels-lab/elsamultiskillagent --skill jb-interact-ui

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

conatus

The philosophical layer for AI agents.

2026-05-14

0protocol

Agents can sign plugins, rotate credentials without losing identity, and publicly attest to behavior.

2026-05-14

clawstead

A relaxing resource-gathering RPG where AI agents collect resources, trade with NPCs, and manage and build their world at their own pace.

2026-05-14

Ver todas deste repositório

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pay Project</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 480px; margin: 0 auto; }
    .input-suffix { position: relative; }
    .input-suffix input { padding-right: 3rem; }
    .input-suffix span { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-75%); color: var(--text-muted); }
    .receive-preview { background: var(--bg-primary); border-radius: 4px; padding: 0.75rem; margin: 0.75rem 0; text-align: center; }
    .receive-amount { font-size: 1.25rem; font-weight: 600; }
    .receive-label { font-size: 0.75rem; color: var(--text-muted); }
    .subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
  </style>
</head>
<body>
  <h1>Pay Project #<span id="project-id">1</span></h1>
  <p class="subtitle">Contribute ETH and receive tokens</p>

  <div class="card">
    <button id="connect-btn" class="btn" onclick="connectWallet()">Connect Wallet</button>
    <div id="wallet-status" class="hidden">
      <div class="stat-row"><span class="stat-label">Connected</span><span class="stat-value" id="wallet-address"></span></div>
      <div class="stat-row"><span class="stat-label">Balance</span><span class="stat-value" id="wallet-balance"></span></div>
    </div>
  </div>

  <div class="card" id="project-stats">
    <div class="stat-row"><span class="stat-label">Treasury Balance</span><span class="stat-value" id="treasury-balance">-</span></div>
    <div class="stat-row"><span class="stat-label">Token Supply</span><span class="stat-value" id="token-supply">-</span></div>
    <div class="stat-row"><span class="stat-label">Tokens per ETH</span><span class="stat-value" id="tokens-per-eth">-</span></div>
  </div>

  <div class="card">
    <label>Amount to Pay</label>
    <div class="input-suffix">
      <input type="number" id="pay-amount" placeholder="0.0" step="0.001" min="0" oninput="updateReceivePreview()">
      <span>ETH</span>
    </div>
    <div class="receive-preview">
      <div class="receive-amount" id="receive-amount">0</div>
      <div class="receive-label">tokens you'll receive</div>
    </div>
    <label>Memo (optional)</label>
    <input type="text" id="memo" placeholder="Thanks for building!">
    <button id="pay-btn" class="btn" onclick="pay()" disabled>Pay Project</button>
  </div>

  <div id="tx-status" class="card hidden">
    <span id="tx-state"></span>
    <a id="tx-link" href="#" target="_blank" class="hidden">View transaction</a>
  </div>

  <script type="module">
    import { createPublicClient, createWalletClient, http, custom, formatEther, parseEther, getContract } from 'https://esm.sh/viem';
    import { mainnet, optimism, base, arbitrum, sepolia } from 'https://esm.sh/viem/chains';
    import { CHAIN_CONFIGS, truncateAddress, getTxUrl } from '/shared/wallet-utils.js';

    // Configuration
    const PROJECT_ID = 1n;
    const CHAIN_ID = 1;

    const CHAINS = { 1: mainnet, 10: optimism, 8453: base, 42161: arbitrum, 11155111: sepolia };
    const NATIVE_TOKEN = '0x000000000000000000000000000000000000EEEe';

    const TERMINAL_ABI = [
      { name: 'pay', type: 'function', stateMutability: 'payable',
        inputs: [
          { name: 'projectId', type: 'uint256' }, { name: 'token', type: 'address' },
          { name: 'amount', type: 'uint256' }, { name: , :  },
          { : , :  }, { : , :  },
          { : , :  }
        ],
        : [{ :  }]
      }
    ];

     publicClient, walletClient, address, tokensPerEth = ;

    .(). = .();

    . =  () {
       (!.) { (); ; }

       chain = [];
       rpc = []?. || chain...[];

      publicClient = ({ chain, : (rpc) });
      walletClient = ({ chain, : (.) });

       [addr] =  walletClient.();
      address = addr;

       chainId =  walletClient.();
       (chainId !== ) {
         {  walletClient.({ :  }); }
         { (); ; }
      }

      .(). = (address);
       balance =  publicClient.({ address });
      .(). = ;
      .()..();
      .()..();
      .(). = ;

       ();
    };

      () {
      tokensPerEth = ();
      .(). = ;
      .(). = ;
      .(). = ;
    }

    . = () {
       amount = .(). || ;
       (tokensPerEth > ) {
         receive = (amount) * ((tokensPerEth));
        .(). = receive.(, { :  });
      }
    };

    . =  () {
       amount = .().;
       memo = .(). || ;
       (!amount || (amount) <= ) { (); ; }

       terminal = []?.?.;
       value = (amount);

      ();

       {
         hash =  walletClient.({
          : terminal,
          : ,
          : ,
          : [, , value, address, , memo, ],
          value,
          : address
        });

        (hash);
         publicClient.({ hash });
        ();
      }  (error) {
        (error);
      }
    };

     () {
      .()..();
      .(). = msg;
      .()..();
    }
     () {
      .(). = ;
       link = .();
      link. = (, hash);
      link..();
    }
     () { .(). = ; }
     () { .(). = error. || error.; }
  </script>
</body>
</html>

Template: Cash Out UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cash Out Tokens</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 480px; margin: 0 auto; }
    .input-suffix { position: relative; }
    .input-suffix input { padding-right: 4rem; }
    .input-suffix span { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-75%); color: var(--text-muted); }
    .receive-preview { background: var(--bg-primary); : ; : ; :  ; : center; }
     { : ; : ; }
     { : ; : (--text-muted); }
     { : (--text-muted); : ; }
     { : (--error) ; }
      { : ; : (--text-muted); }
  


  Cash Out
  Burn tokens to reclaim ETH from treasury

  
    Connect Wallet
    
      Your Token Balance-
    
  

  
    Tokens to Cash Out
    
      
      tokens
    
    Max
    
      0
      ETH you'll receive
    
    Cash Out
  

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

Template: NFT Mint UI (721 Hook)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mint NFT</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 640px; margin: 0 auto; }
    .tiers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
    .tier-card { cursor: pointer; transition: border-color 0.2s; }
    .tier-card:hover, .tier-card.selected { border-color: var(--jb-yellow); }
     { : ; : ; : (--jb-yellow); }
     { : ; : (--text-muted); }
  


  Mint NFT

  
    Connect Wallet
    
      Connected
    
  

  

  
    
    Price
    Remaining
    Mint for  ETH

Template: Project Admin UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Admin</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 640px; margin: 0 auto; }
    .subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
    h2 { font-size: 1rem; color: var(--text-muted); margin: 1rem 0 0.75rem; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .splits-preview { background: (--bg-primary); : ; : ; : ; : ; }
  


  Project #1 Admin
  Manage treasury operations

  
    Connect Wallet
    
      Connected
      Owner StatusChecking...
    
  

  
    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)
      
      Max Available
      
        Split Recipients:
        Loading...
      
      Send Payouts
    
  

  
    
      Use Surplus Allowance
      Withdraw from surplus (discretionary spending).
      Remaining Allowance-
      Amount to Withdraw (ETH)
      
      Beneficiary Address
      
      Withdraw from Surplus
    
  

  
    
      Distribute Reserved Tokens
      Mint and distribute accumulated reserved tokens.
      Pending Reserved Tokens-
      Distribute Reserved Tokens
    
  

  
    
    View transaction

Template: Claim Tokens UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Claim Tokens</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 480px; margin: 0 auto; }
    .subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
    h2 { font-size: 1rem; color: var(--text-muted); margin-bottom: 1rem; }
    .info { background: var(--bg-primary); padding: 0.75rem; border-radius: 4px; font-size: 0.8rem; color: (--text-muted); : ; }
     { : (--accent) ; }
      { : ; }
  


  Claim Tokens
  Convert credits to ERC-20 tokens

  
    Connect Wallet
    
      Connected
    
  

  
    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
    
    Claim All
    Claim Tokens
  

  
    This project hasn't deployed an ERC-20 token yet. Credits cannot be claimed until the project owner deploys one.
  

  
    
    View transaction

Template: Project Dashboard UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Dashboard</title>
  <link rel="stylesheet" href="/shared/styles.css">
  <style>
    body { max-width: 800px; margin: 0 auto; }
    .subtitle { color: var(--text-muted); margin-bottom: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
    .metric-card { text-align: center; }
    .metric-label { font-size: 0.75rem; : (--text-muted); : uppercase; : ; : ; }
     { : ; : ; }
     { : ; : (--text-muted); : ; }
     { : ; : (--text-muted); : ; }
  


  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

Project ID as config - Make it easy to change which project the UI targets
Network switching - Detect wrong network and prompt user to switch
Real-time previews - Show expected token amounts before transaction
Error handling - Catch wallet rejections and contract reverts gracefully
Loading states - Disable buttons and show spinners during transactions
Read-only mode - Support viewing data without wallet connection

Fetching Project Data

To show real project stats, query the contracts:

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:

// 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 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

jb-interact-ui

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

Mais deste repositório

Juicebox V5 Interaction UI Generator

Philosophy

Template: Project Payment UI

Template: Cash Out UI

Template: NFT Mint UI (721 Hook)

Template: Project Admin UI

Template: Claim Tokens UI

Template: Project Dashboard UI

Generation Guidelines

Fetching Project Data

Fetching Data with Bendystraw

Related Skills

Juicebox V5 Interaction UI Generator

Philosophy

Template: Project Payment UI

Template: Cash Out UI

Template: NFT Mint UI (721 Hook)

Template: Project Admin UI

Template: Claim Tokens UI

Template: Project Dashboard UI

Generation Guidelines

Fetching Project Data

Fetching Data with Bendystraw

Related Skills