---
name: jb-omnichain-ui
description: Build omnichain UIs for Juicebox projects. Deploy to multiple chains with single payment, display unified cross-chain data.
---
# Juicebox V5 Omnichain UI Development
Build frontends that deploy and interact with Juicebox projects across multiple chains using viem and shared styles.
## Philosophy
> **Pay once on any chain. Deploy everywhere. Query unified data.**
### What is an Omnichain Project?
An "omnichain project" is a set of Juicebox projects deployed across multiple chains, connected via Suckers for token bridging.
**Key concept:** Project IDs cannot be coordinated across chains—each chain assigns the next available ID independently. Deploying to Ethereum might give you project #42, while Optimism gives you project #17. Suckers link these separate projects together so they function as one logical project with unified token bridging.
Omnichain UIs enable:
- Single-payment multi-chain deployments via Relayr
- Unified project data across all chains via Bendystraw
- Cross-chain token bridging visibility via Sucker Groups
## Tool References
For complete API documentation, see:
- `/jb-relayr` - Multi-chain transaction bundling API
- `/jb-bendystraw` - Cross-chain data aggregation API
---
## Quick Start
### Relayr (Transactions)
```javascript
const RELAYR_API = 'https://api.relayr.ba5ed.com';
// 1. Sign forward requests for each chain
// 2. POST /v1/bundle/prepaid to get payment options
// 3. User pays on one chain
// 4. Poll /v1/bundle/{uuid} for completion
// No API key required
```
### Bendystraw (Data)
```javascript
const BENDYSTRAW_API = 'https://bendystraw.xyz/{API_KEY}/graphql';
// API key required - use server-side proxy
// Contact @peripheralist on X for key
```
---
## Omnichain Deploy UI Template
Complete HTML template for deploying projects to multiple chains.
```html
Deploy Omnichain Project
Deploy Omnichain Project
Deploy to multiple chains with a single payment
Connected:
Select Target Chains
Ethereum
Optimism
Base
Arbitrum
Select Payment Chain
Pay gas on one chain. Relayr handles the rest.
Total Gas Cost-
Deployment Status
```
---
## Omnichain Dashboard UI Template
Display unified stats across all chains using Bendystraw.
```html
Omnichain Dashboard
Loading...
Omnichain Project Dashboard
Total Balance
-
across all chains
Total Volume
-
all-time
Token Supply
-
total issued
Contributors
-
unique addresses
Chain Breakdown
Loading chain data...
Recent Activity
Loading activity...
```
---
## Server-Side Proxy
Bendystraw requires an API key. Use a server-side proxy to keep it secret.
### Next.js
```typescript
// pages/api/bendystraw.ts
export default async function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method not allowed' });
}
const response = await fetch(
`https://bendystraw.xyz/${process.env.BENDYSTRAW_API_KEY}/graphql`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(req.body)
}
);
res.json(await response.json());
}
```
### Express
```javascript
app.post('/api/bendystraw', async (req, res) => {
const response = await fetch(
`https://bendystraw.xyz/${process.env.BENDYSTRAW_API_KEY}/graphql`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(req.body)
}
);
res.json(await response.json());
});
```
---
## Common Patterns
### Fetch Project + Check if Omnichain
```javascript
async function loadProject(projectId, chainId) {
const project = await bendystrawQuery(`
query($projectId: Int!, $chainId: Int!) {
project(projectId: $projectId, chainId: $chainId) {
name balance volume suckerGroupId
}
}
`, { projectId, chainId });
if (project.suckerGroupId) {
const group = await bendystrawQuery(`
query($id: String!) {
suckerGroup(id: $id) {
volume balance tokenSupply
projects_rel { chainId balance }
}
}
`, { id: project.suckerGroupId });
return { project, omnichainStats: group };
}
return { project, omnichainStats: null };
}
```
### Poll After Relayr Deploy
```javascript
async function deployAndWaitForIndex(walletClient, chains, calldata) {
// Deploy via Relayr
const quote = await relayrClient.createBundle(/* ... */);
await payForBundle(quote);
await relayrClient.waitForCompletion(quote.bundle_uuid);
// Wait for Bendystraw to index (~1 minute)
console.log('Waiting for indexer...');
await new Promise(r => setTimeout(r, 60000));
// Now fetch from Bendystraw
const project = await bendystrawQuery(/* ... */);
return project;
}
```
---
---
## Important Limitation: Aggregate Payout Limits
**Payout limits in omnichain projects are per-chain, not aggregate.**
If you set a 10 ETH payout limit on a 4-chain project, you could potentially pay out 40 ETH total (10 ETH × 4 chains), not 10 ETH total.
This is a fundamental constraint of cross-chain systems - there's no atomic way to enforce aggregate limits across chains.
**See `/jb-omnichain-payout-limits` for:**
- Why this limitation exists
- Practical approaches (monitoring, cron automation, oracles)
- Tradeoffs for each approach
- Recommendations by use case
**Quick guidance:**
- Soft caps → Set per-chain limits that sum to ~80% of goal
- Need automation → Use cron + Relayr to pause when threshold approached
- Hard compliance limits → Consider single-chain only, or build oracle infrastructure
---
## Related Skills
- `/jb-omnichain-payout-limits` - Aggregate limit constraints and solutions
- `/jb-suckers` - Core sucker mechanics (prepare/toRemote/claim flow)
- `/jb-v5-currency-types` - Currency handling for cross-chain consistency
- `/jb-relayr` - Complete Relayr API reference
- `/jb-bendystraw` - Complete Bendystraw GraphQL reference
- `/jb-deploy-ui` - Single-chain deployment UIs
- `/jb-interact-ui` - Project interaction UIs