// Mesh Button Builder — main components
const { useState, useMemo, useEffect, useRef, useCallback } = React;
// ---------- Helpers ----------
const cx = (...a) => a.filter(Boolean).join(' ');
// Dedupe by name. When the same name appears multiple times (e.g. Coinbase
// has both an exchange and a ramp variant), keep the highest-ranked one.
const uniqByName = (arr) => {
const best = new Map();
for (const i of arr) {
const cur = best.get(i.name);
if (!cur || rankOf(i) < rankOf(cur)) best.set(i.name, i);
}
// Preserve original input order on ties to avoid surprising callers that
// already sorted; just substitute each name with its best representative.
const seen = new Set();
const out = [];
for (const i of arr) {
if (seen.has(i.name)) continue;
seen.add(i.name);
out.push(best.get(i.name));
}
return out;
};
// Pick the right icon/logo variant for a given surface.
// Rule: prefer Color (full-brand) on neutral surfaces; otherwise pick the
// variant whose NAME means "for use on this surface" — Light = for light bg,
// Dark = for dark bg. Falls back gracefully through the chain.
// surface: 'light' | 'dark' | 'brand' (e.g. button using brand color)
const pickIcon = (i, surface = 'light') => {
if (!i) return '';
if (surface === 'brand') {
// On a colored brand button, prefer the icon designed for that brand
// (usually the Light variant which is the "primary" mark).
return i.iconLight || i.iconColor || i.iconDark || '';
}
if (surface === 'dark') {
return i.iconDark || i.iconColor || i.iconLight || '';
}
return i.iconColor || i.iconLight || i.iconDark || '';
};
const pickLogo = (i, surface = 'light') => {
if (!i) return '';
if (surface === 'brand') return i.logoLight || i.logoColor || i.logoDark || '';
if (surface === 'dark') return i.logoDark || i.logoColor || i.logoLight || '';
return i.logoColor || i.logoLight || i.logoDark || '';
};
// Authoritative ordering for integrations.
// rank.js exposes window.RANK_BY_ID (lower number = higher priority).
// Unranked integrations sort to the end, alphabetically.
const rankOf = (i) => {
const r = (typeof window !== 'undefined' && window.RANK_BY_ID) ? window.RANK_BY_ID[i.id] : undefined;
return (r === undefined) ? Infinity : r;
};
const byRank = (a, b) => {
const ra = rankOf(a), rb = rankOf(b);
if (ra !== rb) return ra - rb;
return a.name.localeCompare(b.name);
};
const CATEGORY_LABELS = {
exchange: 'Exchanges & Brokerages',
deFiWallet: 'Self-Custody Wallets',
};
const CATEGORY_DESCRIPTIONS = {
exchange: 'Centralized exchanges and brokerages — Coinbase, Binance, Kraken, Robinhood, etc.',
deFiWallet: 'Self-custody and hardware wallets — MetaMask, Phantom, Ledger, etc.',
};
// Default button copy per deposit lifecycle (Smart/Easy/Category) — shared by
// the live preview, embed-code generators, and customizer placeholder text.
function defaultDepositLabel({ mode, integration, category }) {
if (mode === 'single' && integration) return `Deposit with ${integration.name}`;
if (mode === 'multi') return 'Direct deposit';
if (mode === 'category') {
if (category === 'exchange') return 'Deposit from an exchange';
if (category === 'deFiWallet') return 'Deposit from a wallet';
return 'Deposit';
}
return 'Deposit with Mesh';
}
// Returns default subtext for a button based on mode (used in button preview).
function defaultDepositSubtext({ mode }) {
if (mode === 'multi') return 'Securely deposit to the correct address';
if (mode === 'single') return 'Deposit again in one tap';
return '';
}
// ---------- Icons ----------
const Icon = {
Search: ({ size = 16 }) => (
),
Check: ({ size = 16 }) => (
),
Copy: ({ size = 14 }) => (
),
ChevronRight: ({ size = 16 }) => (
),
ChevronLeft: ({ size = 16 }) => (
),
X: ({ size = 14 }) => (
),
Sparkle: ({ size = 14 }) => (
),
Plus: ({ size = 14 }) => (
),
Code: ({ size = 16 }) => (
),
Download: ({ size = 14 }) => (
),
Card: ({ size = 14 }) => (
),
Exchange: ({ size = 14 }) => (
),
Phone: ({ size = 14 }) => (
),
Checkout: ({ size = 14 }) => (
),
Mesh: ({ size = 24 }) => (
),
};
// ---------- Step indicator ----------
function Steps({ current, steps }) {
return (
{steps.map((s, i) => (
{i < current ? : i + 1}
{s}
{i < steps.length - 1 && }
))}
);
}
// ---------- Mode picker ----------
// IDs stay as 'multi'/'single'/'category' under the hood — the relabeling is
// purely a framing layer, mapping each technical mode to a deposit lifecycle
// stage from Mesh's deposit UX best-practice playbook.
const MODES = [
{
id: 'multi',
title: 'Direct deposit',
eyebrow: 'First-time users',
desc: 'Authenticate once, deposit forever. A single button opens a curated chooser of your top providers — Coinbase, Binance, Metamask, and more.',
bestFor: 'Your default deposit CTA',
preview: 'multi',
},
{
id: 'single',
title: 'Quick deposit',
eyebrow: 'Returning users',
desc: 'One-click from already linked accounts. Each provider gets its own dedicated button — "Coinbase", "Metamask" — for the fastest repeat flow.',
bestFor: 'Returning-user deposit page',
preview: 'single',
},
{
id: 'category',
title: 'Category Deposit',
eyebrow: 'Scoped flows',
desc: 'Filter the full Mesh catalog to a category — wallets, exchanges, or DeFi. Best for contextual prompts like "Connect a wallet".',
bestFor: 'Contextual entry points',
preview: 'category',
},
];
function ModeCard({ mode, active, disabled, onClick, sample }) {
return (
);
}
function ModePreview({ type, sample }) {
if (type === 'single') {
// Standalone preview specifically uses Coinbase — it's the most
// recognizable consumer-facing brand on the rank list and reads cleanly
// as "Connect Coinbase" in the preview chip.
const i = sample.find(s => s.name === 'Coinbase') || sample[0];
return (
Connect {i?.name || 'Coinbase'}
);
}
if (type === 'multi') {
return (
{sample.slice(0, 4).map((i, idx) => (
))}
Connect account
);
}
return (
{sample.slice(0, 6).map(i => (
))}
Connect a wallet
);
}
// ---------- Integration grid ----------
function IntegrationCard({ integration, selected, onToggle }) {
// Always use the icon-only mark in Step 2 — keeps Easy / Smart / Category
// pickers visually consistent and lets the grid stay scannable at a glance.
const iconSrc = pickIcon(integration);
return (
);
}
// Curated featured set for the multi-select picker — names match the
// integrations.js `name` field exactly. uniqByName collapses platform
// duplicates (e.g. two "Coinbase" rows) before this set filters.
const FEATURED_INTEGRATION_NAMES = [
'Binance', 'Coinbase', 'MetaMask', 'Trust Wallet', 'Phantom', 'Ledger',
];
function IntegrationCatalog({ integrations, selected, onToggle, mode, maxSelect }) {
const [query, setQuery] = useState('');
const [filter, setFilter] = useState('all');
const [showAll, setShowAll] = useState(false);
// Full filtered set (everything matching search + type filter).
const filtered = useMemo(() => {
let list = uniqByName(integrations).filter(i =>
i.logoColor || i.logoLight || i.logoDark || i.iconColor || i.iconLight || i.iconDark
);
if (filter !== 'all') list = list.filter(i => i.type === filter || i.category === filter);
if (query) {
const q = query.toLowerCase();
list = list.filter(i => i.name.toLowerCase().includes(q));
}
list.sort(byRank);
return list;
}, [integrations, query, filter]);
// The featured shortlist is a curated subset of `filtered` — same filter +
// search rules apply, but only items whose name appears in
// FEATURED_INTEGRATION_NAMES are kept, ordered by that array.
const featured = useMemo(() => {
const featuredSet = new Set(FEATURED_INTEGRATION_NAMES);
const byName = new Map(filtered.map(i => [i.name, i]));
return FEATURED_INTEGRATION_NAMES
.map(n => byName.get(n))
.filter(Boolean);
}, [filtered]);
// Show the curated list when the user hasn't searched/filtered/expanded.
// Show curation in any category filter (All / Exchanges / Wallets) — only
// searching or clicking "See all" disables it. The featured list is itself
// re-filtered by category, so toggling Exchanges shows the featured
// exchanges only, plus a "See all N integrations" pill if more match.
const isCurated = !showAll && !query;
const visible = isCurated ? featured : filtered;
const hiddenCount = filtered.length - featured.length;
return (
);
}
// ---------- Button styling helper ----------
// SHARED between the live ButtonPreview and the embed-code generator so the
// emitted HTML is byte-for-byte the same look as the preview. If you change
// styling here, both update together.
const BTN_SIZE_MAP = {
sm: { pad: '8px 14px', font: 13, icon: 16 },
md: { pad: '11px 18px', font: 14, icon: 18 },
lg: { pad: '14px 22px', font: 15, icon: 20 },
};
const BTN_RADIUS_MAP = { pill: 999, rounded: 10, square: 4 };
function computeButtonStyles({ mode, integration, config }) {
const { theme, size, shape, style, customRadius, customBg, customFg, borderWidth, borderColor } = config;
const isDark = theme === 'dark';
const i = integration;
let bg = '#0F172A';
let fg = '#FFFFFF';
let border = 'transparent';
let shadow = 'none';
if (mode === 'single' && i) {
if (style === 'brand') {
bg = isDark ? (i.primaryDark || i.primary || '#0F172A') : (i.primary || '#0F172A');
fg = isDark ? (i.textDark || i.text || '#fff') : (i.text || '#fff');
shadow = '0 1px 2px rgba(15,23,42,0.08)';
} else if (style === 'outline') {
bg = 'transparent';
fg = isDark ? '#F1F5F9' : '#0F172A';
border = isDark ? '#475569' : '#CBD5E1';
} else if (style === 'light') {
bg = isDark ? '#1E293B' : '#FFFFFF';
fg = isDark ? '#F1F5F9' : '#0F172A';
border = isDark ? '#1E293B' : '#FFFFFF';
shadow = isDark
? '0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)'
: '0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.06)';
} else {
bg = isDark ? '#F8FAFC' : '#0F172A';
fg = isDark ? '#0F172A' : '#FFFFFF';
shadow = '0 1px 2px rgba(15,23,42,0.08)';
}
} else {
if (style === 'outline') {
bg = 'transparent';
fg = isDark ? '#F1F5F9' : '#0F172A';
border = isDark ? '#475569' : '#CBD5E1';
} else if (style === 'light') {
bg = isDark ? '#1E293B' : '#FFFFFF';
fg = isDark ? '#F1F5F9' : '#0F172A';
border = isDark ? '#1E293B' : '#FFFFFF';
shadow = isDark
? '0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)'
: '0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.06)';
} else {
bg = isDark ? '#F8FAFC' : '#0F172A';
fg = isDark ? '#0F172A' : '#FFFFFF';
shadow = '0 1px 2px rgba(15,23,42,0.08)';
}
}
// Apply user overrides on top of preset-derived values.
if (customBg) bg = customBg;
if (customFg) fg = customFg;
if (borderColor) border = borderColor;
const sz = BTN_SIZE_MAP[size] || BTN_SIZE_MAP.md;
const presetRadius = BTN_RADIUS_MAP[shape] || 10;
const radius = (customRadius != null && customRadius >= 0) ? customRadius : presetRadius;
const bw = (borderWidth != null && borderWidth >= 0) ? borderWidth : 1;
const borderCss = bw === 0 ? 'none' : `${bw}px solid ${border}`;
const iconSurface = (mode === 'single' && style === 'brand') ? 'brand' : (isDark ? 'dark' : 'light');
return { bg, fg, border, borderCss, shadow, sz, radius, iconSurface, isDark };
}
// ---------- Button preview ----------
// Renders a single button. For single-mode with multiple integrations,
// the parent renders a stack of these (one per integration).
function ButtonPreview({ mode, selected, integration, config, onLaunch }) {
const { label, style, showIcon } = config;
// Compute subtext - use default based on mode
const subtext = defaultDepositSubtext({ mode });
// In single mode, the per-button integration is whichever one this button
// represents. In multi/category, fall back to the cluster.
const i = integration || (mode === 'single' ? selected[0] : null);
const { bg, fg, borderCss, shadow, sz, radius, iconSurface, isDark } =
computeButtonStyles({ mode, integration: i, config });
const btnStyle = {
background: bg,
color: fg,
border: borderCss,
padding: sz.pad,
fontSize: sz.font,
borderRadius: radius,
boxShadow: shadow,
};
let displayLabel = label;
if (displayLabel && mode === 'single' && i) {
// Allow {provider} template substitution so a single label string can
// resolve to the right provider name on each standalone button.
displayLabel = displayLabel.replace(/\{provider\}/g, i.name);
} else if (displayLabel && /\{provider\}/.test(displayLabel)) {
// Aggregator/category buttons can't resolve {provider} — use the default.
displayLabel = defaultDepositLabel({ mode, integration: i, category: config.category });
}
if (!displayLabel) {
displayLabel = defaultDepositLabel({ mode, integration: i, category: config.category });
}
return (
);
}
// Renders the right number of buttons for the current mode.
// Single + multiple selected => one button per integration (stacked).
// Single + 0 selected => placeholder button.
// Multi / category => one aggregator button.
function ButtonPreviewArea({ mode, selected, config, onLaunch }) {
if (mode === 'single' && selected.length > 1) {
return (
{selected.map(i => (
onLaunch(i)}
/>
))}
);
}
return (
onLaunch(selected[0])}
/>
);
}
// Renders ALL of a user's routes stacked together — the live preview of what
// will end up on their checkout page. Each route's Launch handler reports its
// route + (optionally) the integration that was clicked, so the modal can open
// in the right state.
function RouteStack({ routes, config, resolveRouteProviders, onLaunch }) {
if (!routes.length) return null;
return (
);
}
// ---------- Mock app context ----------
function MockAppContext({ children, dark }) {
return (
app.yourcompany.com
Acme Finance
PortfolioConnectSettings
Add an account
Bring your assets in
Connect securely with bank-level encryption. Your credentials never touch our servers.
{children}
By connecting, you agree to our Terms and Privacy Policy.
);
}
// ---------- Realistic surfaces (Step 3 preview) ----------
//
// These mockup surfaces let evaluators see the deposit button in context — not
// just floating in a card. Each surface is intentionally generic (no Mesh
// branding, plausible labels) so it reads as "any product surface" rather than
// "a Mesh-branded screen."
//
// - SurfaceExchange: trading dashboard (browser chrome, desktop crypto vibe)
// - SurfaceFintech: banking/personal-finance app (iPhone frame, mobile)
// - SurfaceCheckout: e-commerce checkout drawer (browser chrome)
//
// All surfaces accept { dark, children } and slot the live RouteStack into a
// natural place — wherever a real product would put the "Add funds" CTA.
function SurfaceExchange({ children, dark }) {
// Generic crypto/trading dashboard. Side nav, balance card, deposit CTA.
// Mostly chrome and dummy UI; the deposit button slot is the visual focus.
return (
🔒app.exchange.com / dashboard
Wallet · Balances
Total balance
$0.00
Fund your wallet to start trading
{children}
Top movers
BTC+2.4%
ETH+1.8%
SOL−0.6%
Watchlist
Add tokens to follow
);
}
function SurfaceFintech({ children, dark }) {
// iPhone-style portrait frame, fintech "Add funds" screen. The button slot
// sits under a balance card so evaluators see it as the primary CTA.
return (
9:41●●●●5G100
‹
Add funds
?
Available balance
$0.00
Deposit method
{children}
🔒Bank-level encryption
);
}
function SurfaceCheckout({ children, dark }) {
// E-commerce / SaaS-style checkout panel. Order summary on left,
// payment-method panel on right where the deposit/connect CTA lives.
return (
🔒checkout.yourbrand.com
Order summary
Pro plan · Annual
Billed yearly
$240.00
Subtotal$240.00
Tax$0.00
Total$240.00
Pay with crypto
Connect your wallet or exchange to pay $240.00 in crypto.
