@agg-build/ui 1.0.0

package/README.md

@@ -0,0 +1,287 @@
+# @agg-build/ui
+
+Pre-built React component library for the [AGG](https://docs.agg.market/) prediction market
+aggregator. Tailwind-based styles, themeable CSS tokens, and components grouped into primitives,
+event surfaces, trading flows, full pages, and modals.
+
+See every component live in the [AGG Storybook](https://storybook.agg.market/).
+
+## What it is
+
+`@agg-build/ui` ships the UI you'd have to build yourself: event cards, market detail pages, orderbook
+and chart primitives, order entry forms, deposit/withdraw/onboarding modals, and opinionated page
+layouts. Components are built on top of [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks)
+and expect an `<AggProvider>` above them in the tree. Styling is Tailwind v4 + CSS custom
+properties so you can theme everything from your own stylesheet.
+
+This package intentionally contains **no wallet code and no auth adapters** — the modular
+connect/sign-in UI lives in [`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth). That keeps
+`@agg-build/ui` free of `wagmi`, `@solana/*`, and related peers.
+
+## When to use this package
+
+- You want production-ready AGG trading UI without wiring every view from scratch.
+- You plan to render a full AGG home/event/market/profile surface inside your app.
+- You want themeable primitives (Button, Card, Modal, Chart, Tooltip, etc.) consistent with the
+  rest of the AGG surfaces.
+
+If you only need the underlying logic, install [`@agg-build/sdk`](https://www.npmjs.com/package/@agg-build/sdk)
+and [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks) and build your own UI.
+
+## Install
+
+```bash
+npm install @agg-build/sdk @agg-build/hooks @agg-build/ui liveline
+```
+
+`liveline` is the charting engine used by `Chart` / `LineChart` and is declared as a peer
+dependency.
+
+## Quick start
+
+```tsx
+import "@agg-build/ui/styles.css";
+import { AggProvider } from "@agg-build/hooks";
+import { createAggClient } from "@agg-build/sdk";
+import { HomePage } from "@agg-build/ui/pages";
+
+const client = createAggClient({
+  baseUrl: "https://api.agg.market",
+  appId: "your-app-id",
+  wsUrl: "wss://ws.agg.market",
+});
+
+export default function App() {
+  return (
+    <AggProvider
+      client={client}
+      config={{
+        general: { locale: "en-US", theme: "dark" },
+        features: { enableAnimations: true, enableLiveUpdates: true },
+      }}
+    >
+      <HomePage withHeader />
+    </AggProvider>
+  );
+}
+```
+
+## Styling
+
+Import the default theme once at your app entrypoint:
+
+```tsx
+import "@agg-build/ui/styles.css";
+```
+
+Override theme tokens with CSS variables on the `.agg-root` container (automatically applied by
+`AggProvider`):
+
+```css
+.agg-root {
+  --agg-color-primary: #ed8200;
+  --agg-color-foreground: #1a1a1a;
+  --agg-radius-md: 8px;
+  --agg-font-family-sans: "Inter", sans-serif;
+}
+```
+
+If you already use Tailwind v4 in your app and want the AGG preset to merge with your config,
+import `@agg-build/ui/tailwind.css` instead of (or alongside) `styles.css`.
+
+## Tree-shaking
+
+Import from the grouped subpaths to keep your bundle narrow:
+
+```tsx
+// Preferred
+import { Button, Card } from "@agg-build/ui/primitives";
+import { HomePage, EventMarketPage } from "@agg-build/ui/pages";
+import { DepositModal, OnboardingModal } from "@agg-build/ui/modals";
+import { PlaceOrder } from "@agg-build/ui/trading";
+
+// Wider than necessary
+import { Button } from "@agg-build/ui";
+```
+
+## Using a full page
+
+The `HomePage` and `EventMarketPage` components take partner-owned navigation callbacks. In the
+demo app we wire them to Next.js `router.push`:
+
+```tsx
+"use client";
+import { HomePage } from "@agg-build/ui/pages";
+import { useRouter } from "next/navigation";
+
+export function Home() {
+  const router = useRouter();
+  const getMarketHref = (event, market, outcome) =>
+    `/events/${event.id}?marketId=${market.id}&outcomeId=${outcome.id}`;
+  const getEventHref = (event) => `/events/${event.id}`;
+
+  return (
+    <HomePage
+      withHeader={false}
+      onEventClick={(event) => router.push(getEventHref(event))}
+      onMarketClick={(event, market, outcome) => router.push(getMarketHref(event, market, outcome))}
+      getEventHref={getEventHref}
+      getMarketHref={getMarketHref}
+      stickyOrderPanel={{ enabled: true, top: 80 }}
+    />
+  );
+}
+```
+
+## Components
+
+### Primitives — `@agg-build/ui/primitives`
+
+| Component            | Description                  |
+| -------------------- | ---------------------------- |
+| `AggErrorBoundary`   | Error boundary wrapper       |
+| `AggLogo`            | AGG wordmark                 |
+| `AutocompleteSelect` | Combobox with async results  |
+| `Badge`              | Status badge                 |
+| `Button`             | Base button primitive        |
+| `Card`               | Content card                 |
+| `Chart`              | Price chart (liveline-based) |
+| `CurrencyInput`      | Locale-aware money input     |
+| `Footer`             | Site footer                  |
+| `Header`             | Site header with search      |
+| `Icon`               | AGG icon set                 |
+| `InlineAlert`        | Error/warning inline alert   |
+| `LoadingIcon`        | Spinner                      |
+| `Modal`              | Dialog/modal                 |
+| `NumberValue`        | Formatted, animated numbers  |
+| `RemoteImage`        | Image with loading/error     |
+| `Search`             | Search input                 |
+| `Select`             | Dropdown select              |
+| `Skeleton`           | Loading placeholder          |
+| `StateMessage`       | Empty / error state display  |
+| `SwitchButton`       | Binary toggle switch         |
+| `Tabs`               | Tab navigation               |
+| `Tooltip`            | Hover / focus tooltip        |
+| `Typography`         | Text scale primitives        |
+| `VenueLogo`          | Venue icon / logo            |
+
+### Events — `@agg-build/ui/events`
+
+| Component       | Description                           |
+| --------------- | ------------------------------------- |
+| `EventList`     | Grid/list of prediction market events |
+| `EventListItem` | Single event row / card               |
+| `ItemDetails`   | Per-market detail block               |
+| `MarketDetails` | Full market detail view               |
+| `Orderbook`     | Orderbook depth view                  |
+
+### Trading — `@agg-build/ui/trading`
+
+| Component           | Description                            |
+| ------------------- | -------------------------------------- |
+| `PlaceOrder`        | Order entry form (managed execution)   |
+| `Settlement`        | Settlement status card                 |
+| `SettlementDetails` | Expanded settlement detail             |
+| `TradingContext`    | Event/market/outcome selection context |
+
+### Pages — `@agg-build/ui/pages`
+
+| Component         | Description                            |
+| ----------------- | -------------------------------------- |
+| `HomePage`        | Full home page with tabs, search, grid |
+| `EventMarketPage` | Full event/market detail page          |
+| `UserProfilePage` | User profile page with tabs            |
+
+### Modals — `@agg-build/ui/modals`
+
+| Component         | Description                             |
+| ----------------- | --------------------------------------- |
+| `DepositModal`    | Deposit flow (managed wallets + chains) |
+| `WithdrawModal`   | Withdraw flow                           |
+| `OnboardingModal` | User onboarding flow                    |
+| `ProfileModal`    | Profile edit + linked accounts          |
+| `GeoBlockModal`   | Geo-restriction modal                   |
+| `GeoBlockBanner`  | Persistent geo-block banner             |
+
+### `classNames` overrides
+
+Most components accept a `classNames` compound prop so partners can target sub-elements:
+
+```tsx
+<Modal.Header
+  title="Place order"
+  classNames={{
+    root: "custom-header",
+    title: "custom-title",
+    close: "custom-close-btn",
+  }}
+/>
+```
+
+## Key component props
+
+### `HomePage`
+
+| Prop                  | Type                                 | Description                                         |
+| --------------------- | ------------------------------------ | --------------------------------------------------- |
+| `tabs`                | `HomePageTab[]`                      | Custom tab definitions                              |
+| `eventSectionItems`   | `HomePageEventSectionItem[]`         | Custom event section configuration                  |
+| `categoriesLimit`     | `number`                             | Max number of category tabs to show                 |
+| `allCategoryTabLabel` | `string`                             | Label for the "All" category tab                    |
+| `actions`             | `ReactNode`                          | Slot for header actions (e.g., `<ConnectButton />`) |
+| `withHeader`          | `boolean` (default `true`)           | Render the built-in `Header` with search + logo     |
+| `onEventClick`        | `(event) => void`                    | Called when an event card is clicked                |
+| `onMarketClick`       | `(event, market, outcome) => void`   | Called when an outcome price is clicked             |
+| `getEventHref`        | `(event) => string`                  | Provide `href` for SSR-friendly links               |
+| `getMarketHref`       | `(event, market, outcome) => string` | Provide `href` for market links                     |
+| `stickyOrderPanel`    | `{ enabled: boolean; top?: number }` | Stick the order panel when scrolling                |
+| `classNames`          | `HomePageClassNames`                 | Style overrides                                     |
+
+### `EventMarketPage`
+
+Renders the full event page with trading context. Requires `<AggProvider>` and uses
+`EventTradingContext` internally. Access selection state with `useEventTradingContext()` from
+`@agg-build/hooks`.
+
+### `PlaceOrder`
+
+Order entry form. Renders inside `EventMarketPage` or standalone — requires an active
+`EventTradingContext` with a selected market and outcome. Integrates with the managed execution
+hooks from `@agg-build/hooks`.
+
+## Entrypoints
+
+| Entry                        | Purpose                                                    |
+| ---------------------------- | ---------------------------------------------------------- |
+| `@agg-build/ui`              | Root export (re-exports every subpath)                     |
+| `@agg-build/ui/primitives`   | Buttons, Modal, Chart, Tooltip, etc.                       |
+| `@agg-build/ui/events`       | `EventList`, `EventListItem`, `MarketDetails`, `Orderbook` |
+| `@agg-build/ui/trading`      | `PlaceOrder`, `Settlement`, trading context utilities      |
+| `@agg-build/ui/pages`        | `HomePage`, `EventMarketPage`, `UserProfilePage`           |
+| `@agg-build/ui/modals`       | Deposit/Withdraw/Onboarding/Profile/GeoBlock modals        |
+| `@agg-build/ui/styles.css`   | Default theme stylesheet (import once at app entry)        |
+| `@agg-build/ui/tailwind.css` | Tailwind preset if you run Tailwind v4 yourself            |
+
+## Peer dependencies
+
+- `@agg-build/sdk`
+- `@agg-build/hooks`
+- `react` ^18.0.0 or ^19.0.0
+- `react-dom` ^18.0.0 or ^19.0.0
+- `liveline` ^0.0.7 — charting engine used by `Chart` / `LineChart`
+
+No wallet packages required. Wallet-backed auth lives in
+[`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth).
+
+## Links
+
+- Documentation — <https://docs.agg.market/>
+- Storybook — <https://storybook.agg.market/>
+- Demo app — <https://demo.agg.market/>
+- Vanilla SDK — [`@agg-build/sdk`](https://www.npmjs.com/package/@agg-build/sdk)
+- React hooks — [`@agg-build/hooks`](https://www.npmjs.com/package/@agg-build/hooks)
+- Connect / sign-in UX — [`@agg-build/auth`](https://www.npmjs.com/package/@agg-build/auth)
+
+## License
+
+MIT

package/dist/chunk-2QJXRRYP.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  Icon,
+  cn
+} from "./chunk-6NS7D73S.mjs";
+
+// src/geo-block-banner/index.tsx
+import { useLabels } from "@agg-build/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GeoBlockBanner = ({
+  venue,
+  termsUrl = "#",
+  className
+}) => {
+  const labels = useLabels();
+  const message = venue ? labels.trading.geoBlockVenueMessage(venue) : labels.trading.geoBlockGenericMessage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-5 rounded-agg-sm bg-agg-secondary-hover p-3", className),
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 text-agg-xs leading-agg-4 text-agg-foreground", children: [
+          message,
+          /* @__PURE__ */ jsx("a", { href: termsUrl, className: "underline", target: "_blank", rel: "noreferrer noopener", children: labels.trading.geoBlockTermsLink }),
+          labels.trading.geoBlockMessageSuffix
+        ] }),
+        /* @__PURE__ */ jsx(Icon, { name: "internet-security", className: "h-6 w-6 shrink-0 text-agg-muted-foreground" })
+      ]
+    }
+  );
+};
+GeoBlockBanner.displayName = "GeoBlockBanner";
+
+export {
+  GeoBlockBanner
+};