React Examples

type KashEmbedProps =
  | { kind: 'market'; id: string; height?: number }
  | { kind: 'thread'; id: string; height?: number };

const PATHS = {
  market: (id: string) => `/markets/${id}/iframe`,
  thread: (id: string) => `/threads/${id}/iframe`,
};

const DEFAULT_HEIGHT = { market: 520, thread: 900 };

export function KashEmbed({ kind, id, height }: KashEmbedProps) {
  return (
    <iframe
      src={`https://app.kash.bot${PATHS[kind](encodeURIComponent(id))}`}
      width="100%"
      height={height ?? DEFAULT_HEIGHT[kind]}
      loading="lazy"
      allow="clipboard-write"
      title="Kash prediction markets"
      style={{ border: 0, borderRadius: 12 }}
    />
  );
}

import { useEffect } from 'react';

type KashMessage = { type: string; data: Record<string, unknown> };

export function useKashEmbedEvents(onMessage: (msg: KashMessage) => void) {
  useEffect(() => {
    function handle(event: MessageEvent) {
      if (event.origin !== 'https://app.kash.bot') return;
      const msg = event.data as KashMessage | undefined;
      if (!msg || typeof msg.type !== 'string' || !msg.type.startsWith('kash-')) return;
      if (msg.type === 'kash-open-twitter' && typeof msg.data?.url === 'string') {
        window.open(msg.data.url, '_blank', 'noopener');
      }
      onMessage(msg);
    }
    window.addEventListener('message', handle);
    return () => window.removeEventListener('message', handle);
  }, [onMessage]);
}

import { useEffect, useState } from 'react';

const API = 'https://app.kash.bot/api';

type Outcome = { outcomeIndex: number; label: string; impliedChance: number };
type Market = { id: string; title: string; status: string; tradable: boolean; outcomes: Outcome[] };
type MarketState = { id: string; outcomes: { outcomeIndex: number; impliedChance: number }[] };

async function getJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  const body = await res.json();
  if (!res.ok) throw new Error(body?.message ?? `HTTP ${res.status}`);
  return body as T;
}

export function ThreadMarketGrid({ threadId, amount = 10 }: { threadId: string; amount?: number }) {
  const [markets, setMarkets] = useState<Market[]>([]);
  const [prices, setPrices] = useState<Record<string, number[]>>({});
  const [error, setError] = useState<string | null>(null);

  // 1. Load the markets once.
  useEffect(() => {
    getJson<{ markets: Market[] }>(`${API}/threads/${threadId}/markets?limit=24&sortBy=total_volume`)
      .then(({ markets }) => setMarkets(markets))
      .catch((e) => setError(e.message));
  }, [threadId]);

  // 2. Keep the prices live.
  useEffect(() => {
    if (markets.length === 0) return;
    const ids = markets.map((m) => m.id).join(',');
    let timer: ReturnType<typeof setTimeout>;
    const tick = async () => {
      try {
        const { markets: states } = await getJson<{ markets: MarketState[] }>(`${API}/markets/state?ids=${ids}`);
        setPrices(Object.fromEntries(states.map((s) => [s.id, s.outcomes.map((o) => o.impliedChance)])));
      } finally {
        timer = setTimeout(tick, 10_000);
      }
    };
    tick();
    return () => clearTimeout(timer);
  }, [markets]);

  async function predict(marketId: string, outcomeIndex: number) {
    const tab = window.open('', '_blank'); // open synchronously so popup blockers allow it
    try {
      const { twitterUrl } = await getJson<{ twitterUrl: string }>(
        `${API}/markets/${marketId}/twitter-link?outcomeIndex=${outcomeIndex}&amount=${amount}`
      );
      if (tab) tab.location.href = twitterUrl;
    } catch (e) {
      tab?.close();
      alert((e as Error).message);
    }
  }

  if (error) return <p>Could not load markets: {error}</p>;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }}>
      {markets.map((m) => (
        <article key={m.id} style={{ border: '1px solid #333', borderRadius: 12, padding: 16 }}>
          <a href={`https://app.kash.bot/markets/${m.id}`} target="_blank" rel="noopener noreferrer">
            <h3>{m.title}</h3>
          </a>
          {m.outcomes.map((o) => {
            const chance = prices[m.id]?.[o.outcomeIndex] ?? o.impliedChance;
            return (
              <button key={o.outcomeIndex} disabled={!m.tradable} onClick={() => predict(m.id, o.outcomeIndex)}>
                {o.label} · {Math.round(chance * 100)}%
              </button>
            );
          })}
        </article>
      ))}
    </div>
  );
}

export const revalidate = 30;

export default async function MarketsPage() {
  const res = await fetch('https://app.kash.bot/api/markets?status=active&tradableOnly=true&limit=12', {
    next: { revalidate: 30 },
  });
  const { markets } = await res.json();

  return (
    <ul>
      {markets.map((m: { id: string; title: string }) => (
        <li key={m.id}>
          <a href={`https://app.kash.bot/markets/${m.id}`}>{m.title}</a>
        </li>
      ))}
    </ul>
  );
}