Recipe: full exchange integration (Privy, no wagmi)

import {createTakerClient} from "@parlays-live/taker";

export const parlayClient = createTakerClient({
  relayerUrl: process.env.NEXT_PUBLIC_PARLAY_RELAYER_URL!, // your HL-testnet relayer
  escrow: process.env.NEXT_PUBLIC_PARLAY_ESCROW! as `0x${string}`,
  collateralToken: process.env.NEXT_PUBLIC_PARLAY_USDC! as `0x${string}`,
  chainId: 998,
});

import {useMemo} from "react";
import {useWallets} from "@privy-io/react-auth";
import {createWalletAdapter, type ParlayEvent} from "@parlays-live/taker";
import {hyperEvmTestnet} from "@parlays-live/sdk";
import {parlayClient} from "@/config/parlay";
import {track} from "@/lib/analytics"; // your PostHog wrapper

export function useParlayAdapter() {
  const {wallets} = useWallets();
  const wallet = wallets[0]; // or your active-wallet selection

  return useMemo(() => {
    if (!wallet) return null;
    return createWalletAdapter(
      parlayClient,
      {
        getProvider: () => wallet.getEthereumProvider(),
        getAddress: () => wallet.address as `0x${string}`,
      },
      {
        chain: hyperEvmTestnet,
        onEvent: (e: ParlayEvent) => track(`parlay.${e.type}`, e),
      },
    );
  }, [wallet]);
}

"use client";
import {createContext, useContext, useMemo, useState, type ReactNode} from "react";
import {toggleLeg, removeLeg, toLegs, type Picks} from "@parlays-live/taker";

const SlipCtx = createContext<ReturnType<typeof useSlipState> | null>(null);

function useSlipState() {
  const [picks, setPicks] = useState<Picks>({});
  const [open, setOpen] = useState(false);
  return useMemo(
    () => ({
      picks,
      legs: toLegs(picks),
      count: Object.keys(picks).length,
      open,
      openDrawer: () => setOpen(true),
      closeDrawer: () => setOpen(false),
      toggle: (marketId: number, outcome: number) => {
        setPicks((p) => toggleLeg(p, marketId, outcome));
        setOpen(true); // adding a leg reveals the drawer
      },
      remove: (marketId: number) => setPicks((p) => removeLeg(p, marketId)),
      clear: () => setPicks({}),
    }),
    [picks, open],
  );
}

export function ParlaySlipProvider({children}: {children: ReactNode}) {
  return <SlipCtx.Provider value={useSlipState()}>{children}</SlipCtx.Provider>;
}
export function useSlip() {
  const v = useContext(SlipCtx);
  if (!v) throw new Error("wrap the app in <ParlaySlipProvider>");
  return v;
}

import {useSlip} from "@/lib/parlay/slip-context";

export function CombineAction({marketId, outcome}: {marketId: number; outcome: number}) {
  const slip = useSlip();
  const selected = slip.picks[marketId] === outcome;
  return (
    <button
      onClick={() => slip.toggle(marketId, outcome)}
      aria-pressed={selected}
      className={selected ? "combine-btn combine-btn-on" : "combine-btn"}
    >
      {selected ? "In combo" : "Combine"}
    </button>
  );
}

"use client";
import {useEffect, useState} from "react";
import {useMutation, useQuery} from "@tanstack/react-query";
import {formatUsdc, parseUsdc} from "@parlays-live/taker";
import {parlayClient} from "@/config/parlay";
import {useParlayAdapter} from "@/lib/parlay/use-parlay-adapter";
import {useSlip} from "@/lib/parlay/slip-context";

export function ParlayDrawer() {
  const slip = useSlip();
  const adapter = useParlayAdapter();
  const [stakeText, setStakeText] = useState("10");
  const stake = parseUsdc(stakeText || "0"); // taker address is resolved inside the adapter

  // Debounced PREVIEW quote for payout display. Submit re-quotes fresh, so a
  // stale preview can never leak into a signed order.
  const [debouncedLegs, setDebouncedLegs] = useState(slip.legs);
  useEffect(() => {
    const t = setTimeout(() => setDebouncedLegs(slip.legs), 350);
    return () => clearTimeout(t);
  }, [slip.legs]);

  const preview = useQuery({
    queryKey: ["parlay-preview", debouncedLegs, stake.toString()],
    enabled: debouncedLegs.length >= 2 && stake > 0n && !!adapter,
    queryFn: async () =>
      parlayClient.quote(debouncedLegs, stake, "0x0000000000000000000000000000000000000001"),
    // any address works for a preview; the real quote is bound to the taker at submit
    staleTime: 5_000,
  });

  const submit = useMutation({
    mutationFn: () => adapter!.submitParlay(slip.legs, stake),
    onSuccess: () => slip.clear(),
  });

  if (!slip.open) return null;
  const q = preview.data?.quote;
  const oddsX = q ? (Number(q.combinedOddsBps) / 10_000).toFixed(2) : null;

  return (
    <aside className="parlay-drawer">{/* your right-drawer container */}
      <header>
        <h3>Combo slip ({slip.count})</h3>
        <button onClick={slip.closeDrawer}>Close</button>
      </header>

      {slip.legs.map((l) => (
        <div key={l.marketId} className="slip-row">
          {/* resolve marketId to your market title/side labels */}
          <span>Market {l.marketId} - {l.outcome === 1 ? "YES" : "NO"}</span>
          <button onClick={() => slip.remove(l.marketId)}>x</button>
        </div>
      ))}

      <label>
        Stake (USDC)
        <input inputMode="decimal" value={stakeText} onChange={(e) => setStakeText(e.target.value)} />
      </label>

      {q && (
        <div className="slip-summary">
          <span>{oddsX}x combined</span>
          <span>To win ${formatUsdc(BigInt(q.payout))}</span>
          {preview.data?.correlation && BigInt(preview.data.correlation.reductionBps) > 0n && (
            <small>correlation-adjusted (see pricing docs)</small>
          )}
        </div>
      )}

      <button
        disabled={!adapter || slip.count < 2 || stake <= 0n || submit.isPending}
        onClick={() => submit.mutate()}
      >
        {submit.isPending ? "Placing..." : "Place combo"}
      </button>
      {submit.error && <p className="error">{(submit.error as Error).message}</p>}
    </aside>
  );
}

import {useQuery} from "@tanstack/react-query";
import {positionsOf, positionsOnMarket, potOf, bookedOddsBps} from "@parlays-live/taker";
import {useParlayAdapter} from "./use-parlay-adapter";

export function useParlayPositions() {
  const adapter = useParlayAdapter();
  const q = useQuery({
    queryKey: ["parlay-positions"],
    enabled: !!adapter,
    queryFn: () => adapter!.positions(),
    refetchInterval: 8_000,
  });
  const rows = q.data ?? [];
  return {
    rows,
    isLoading: q.isLoading,
    mine: (addr?: `0x${string}`) => positionsOf(rows, addr),
    onMarket: (marketId: number) => positionsOnMarket(rows, marketId),
  };
}