// ── Markets View ────────────────────────────────────────────── const { useState: useMkt, useEffect: useEfMkt, useRef: useRfMkt } = React; const CM = window.SC; const mktStyle = document.createElement('style'); mktStyle.textContent = ` @keyframes mkt-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Outer wrapper: owns the entry animation only */ .market-card { animation: mkt-card-in 0.45s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--card-index, 0) * 50ms); position: relative; } /* Inner card: owns hover transform only — no animation conflict */ .market-card-inner { height: 100%; box-sizing: border-box; will-change: transform; backface-visibility: hidden; isolation: isolate; box-shadow: 0 2px 14px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.03); } .market-card-clickable { cursor: pointer; transition: box-shadow 0.22s ease-out, transform 0.22s cubic-bezier(0.34,1.20,0.64,1); } .market-card-clickable:hover { transform: translateY(-6px) scale(1.025); box-shadow: 0 18px 48px rgba(0,0,0,0.48), 0 0 0 1px rgba(92,200,230,0.28), 0 0 32px rgba(92,200,230,0.14); } .market-card-clickable:active { transform: translateY(-2px) scale(1.01); } .market-card-static { cursor: default; transition: box-shadow 0.22s ease-out, transform 0.22s ease-out; } .market-card-static:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 12px 32px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.08); } .market-card-static:active { transform: translateY(-1px) scale(1.005); } .price-flash-up { animation: flashUp 0.35s ease; } .price-flash-down { animation: flashDown 0.35s ease; } @keyframes flashUp { 0% { background: rgba(92,212,168,0.22); border-radius: 3px; } 100% { background: transparent; } } @keyframes flashDown { 0% { background: rgba(232,101,101,0.22); border-radius: 3px; } 100% { background: transparent; } } /* Gold ring — child element, independent animation, no conflict with parent */ .first-card-gold-ring { position: absolute; inset: -2px; border-radius: 12px; pointer-events: none; z-index: 0; animation: goldBorderPulse 2.2s ease-in-out infinite; } @keyframes goldBorderPulse { 0%, 100% { border: 1.5px solid rgba(200,145,50,0.40); box-shadow: 0 0 8px rgba(200,145,50,0.18), 0 0 18px rgba(200,145,50,0.08); } 50% { border: 1.5px solid rgba(255,215,80,0.82); box-shadow: 0 0 14px rgba(255,210,70,0.42), 0 0 32px rgba(255,195,50,0.18), inset 0 0 10px rgba(255,215,70,0.06); } } /* Create market ring — child element */ .create-market-ring { position: absolute; inset: -1px; border-radius: 11px; pointer-events: none; z-index: 0; animation: createBorderPulse 3.5s ease-in-out 0.8s infinite; } @keyframes createBorderPulse { 0%, 100% { border: 1px solid rgba(92,200,230,0.13); box-shadow: none; } 50% { border: 1px solid rgba(92,200,230,0.28); box-shadow: 0 0 16px rgba(92,200,230,0.07); } } /* Hint overlay — fades in on static card hover */ .market-hint-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 10px 8px; border-radius: 0 0 9px 9px; background: linear-gradient(to top, rgba(5,6,16,0.97) 0%, rgba(5,6,16,0.72) 55%, transparent 100%); opacity: 0; transform: translateY(4px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; z-index: 3; } .market-card-static:hover .market-hint-overlay { opacity: 1; transform: translateY(0); } /* CreateMarketCard — entry only, hover via transition */ .create-market-card { cursor: pointer; animation: mkt-card-in 0.45s cubic-bezier(0.16,1,0.3,1) calc(4 * 50ms) both; transition: background 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out; } .create-market-card:hover { box-shadow: 0 6px 26px rgba(0,0,0,0.28), 0 0 0 1px rgba(92,200,230,0.22); border-color: rgba(92,200,230,0.26) !important; } `; if (!document.getElementById('mkt-style')) { mktStyle.id = 'mkt-style'; document.head.appendChild(mktStyle); } function DriftPct({ value }) { const animated = window.useAnimatedNumber(value, 320); const prev = useRfMkt(value); const [flash, setFlash] = useMkt(''); useEfMkt(() => { if (value !== prev.current) { setFlash(value > prev.current ? 'price-flash-up' : 'price-flash-down'); prev.current = value; const t = setTimeout(() => setFlash(''), 400); return () => clearTimeout(t); } }, [value]); return ( {Math.round(animated)}% ); } function OutcomeRow({ outcome, drifted }) { const [sel, setSel] = useMkt(null); return (
{outcome.name}
); } function BinaryButtons() { const [sel, setSel] = useMkt(null); return (
); } function MarketCard({ market, onSelect, idx, isFirst }) { window.useMarketDrift(); const drift = window.MARKET_PROB[market?.id] || {}; if (!market) return null; return (
{isFirst &&
}
isFirst && onSelect && onSelect(market)} > {isFirst && (
Try it →
)}
{market.title}
{market.type === 'multi' && market.outcomes && (
{market.outcomes.slice(0, 2).map((o, i) => ( ))}
)} {market.type === 'binary' && (
)}
{market.volume} VOL
{!isFirst && market.hint && (
{market.hint}
)}
); } function CreateMarketCard({ onOpenWaitlist }) { return (
Community Markets Beta
Create your own market

Create market, share with your community and earn fees

Join Waitlist
Early access
); } function ActivityFeed() { const [entries, setEntries] = useMkt(() => [ { id: 1, name: 'alphatrader.mega', action: 'bought NO', market: 'Brent Oil', amount: 294 }, { id: 2, name: '0x8b2…11', action: 'bought YES', market: 'Bad Bunnz', amount: 2147 }, { id: 3, name: 'nightowl.mega', action: 'bought YES', market: 'WLFI Subpoena', amount: 2386 }, { id: 4, name: '0x91c…aa', action: 'sold NO', market: 'Fed Rate Cuts', amount: 316 }, ]); useEfMkt(() => { let id = 100; const schedule = () => { const delay = 4000 + Math.random() * 3000; return setTimeout(() => { const name = window.ACTIVITY_NAMES[Math.floor(Math.random() * window.ACTIVITY_NAMES.length)]; const action = window.ACTIVITY_ACTIONS[Math.floor(Math.random() * window.ACTIVITY_ACTIONS.length)]; const amount = Math.round(40 + Math.random() * 2360); const market = window.ACTIVITY_MARKETS[Math.floor(Math.random() * window.ACTIVITY_MARKETS.length)]; setEntries(prev => [...prev.slice(-3), { id: ++id, name, action, market, amount }]); t = schedule(); }, delay); }; let t = schedule(); return () => clearTimeout(t); }, []); return (
Live
{entries.map(e => { const isBuy = e.action.startsWith('bought'); return (
{e.name} {e.action} {e.market && · {e.market}} ${e.amount.toLocaleString()}
); })}
); } function MarketsView({ onSelectMarket, onOpenWaitlist, isMobile }) { const markets = window.SM.filter(m => m.type !== 'promo').slice(0, 10); if (isMobile) { return ( <>
{markets.slice(0, 4).map((m, idx) => ( ))} {markets.slice(4, 8).map((m, idx) => ( ))}
); } return ( <>
{markets.slice(0, 4).map((m, idx) => ( ))}
); } Object.assign(window, { MarketsView, MarketCard, CreateMarketCard, ActivityFeed });