@agg-building/ ui (英语)

预建的 React 组件库 恶作剧 预测市场 聚会. 基于 Tailwind 的风格,主题 CSS 符号, 以及组合成原始的组件, 事件表面、交易流量、完整页和模式.

看到每个组件都生活在 AGG 故事书。 。 。 .

这是什么

@agg-build/ui 船UI 你必须自己建造: 事件卡、市场细节页、订单 原始图、订货入帐表、押金/提取/登船模式和有意见的页 排布图。 组件建在 @agg-build/hooks 并期望一个 <AggProvider> 在树上 Styling 是 Tailwind v4 + CSS 定制 属性,这样您就可以从自己的样式表中标出所有主题.

此套件有意包含 没有钱包代码和自动适配器 模块 连接/ 签名用户界面 居住于 @agg-build/auth继续 @agg-build/ui 免费 wagmi, (中文(简体) ), @solana/*,和相关同行.

何时使用此软件包

• 你想要生产准备的AGG 交易UI 没有线从头到尾的每一个视图.
• 你计划把AGG全程带回家 / 活动 / 市场 / 外观 在你的应用程序里.
• 您想要符合主题原始( 按钮、 卡片、 Modal、 Chart、 Tooltip等) 其余的AGG表面.

如果您只需要基本逻辑, 请安装 @agg-build/sdk 财务报告和审定财务报表 @agg-build/hooks 建立自己的UI.

安装

npm install @agg-build/sdk @agg-build/hooks @agg-build/ui liveline

liveline 是用来绘制图表的引擎 Chart 编号 : LineChart 并被宣布为对等者 依赖性.

快开始

import "@agg-build/ui/styles.css";
import { QueryClient, QueryClientProvider } from "@agg-build/hooks";
import { createAggClient } from "@agg-build/sdk";
import { AggProvider } from "@agg-build/ui";
import { HomePage } from "@agg-build/ui/pages";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market",
});
const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AggProvider
        client={client}
        config={{
          general: { locale: "en-US", theme: "dark" },
          features: { enableAnimations: true, enableLiveUpdates: true, showFeesBreakdown: true },
        }}
      >
        <HomePage withHeader />
      </AggProvider>
    </QueryClientProvider>
  );
}

设定 config.features.enableEventDiscoveryUrlPersistence 改为 true 坚持初级 HomePage 章节 category,重复 subcategory, (中文(简体) ), venue,以及 sort 浏览器中的过滤器 历史 它默认被禁用, 并保存不相关的查询参数, 如 search。 。 。 .

样式

在您的应用程序入口处导入默认主题 :

import "@agg-build/ui/styles.css";

UI级 AggProvider 将AGG的土司表面加入到钩子供应商中. 还需要.. 不变 client 螺旋桨和 QueryClientProvider 上所显祖相. 用 CSS 覆盖主题符号 变量 .agg-root 容器(自动应用) AggProvider:

.agg-root {
  --agg-color-primary: #ed8200;
  --agg-color-foreground: #1a1a1a;
  --agg-radius-md: 8px;
  --agg-font-family-sans: "Your Font", ui-sans-serif, system-ui, sans-serif;
}

您也可以设置 --agg-font-family-sans 打开 :root; 一个值 .agg-root 赢是因为是 距离AGG UI树更近.

与下个.js next/font,然后将其映射到 打开 AGG 令牌 .agg-root数字 :

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function App() {
  return (
    <div className={inter.variable}>
      <QueryClientProvider client={queryClient}>
        <AggProvider client={client}>
          <AggApp />
        </AggProvider>
      </QueryClientProvider>
    </div>
  );
}

.agg-root {
  --agg-font-family-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

如果您已经在您的应用程序中使用了 Tailwind v4 并且希望 AGG 预设与您的配置合并, 导入 @agg-build/ui/tailwind.css 而不是(或同时) styles.css。 。 。 .

树摇

从分组子路径导入以保持捆绑的窄度 :

// 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";

使用完整页面

这个 HomePage 财务报告和审定财务报表 EventMarketPage 组件采用合作伙伴拥有的导航回调。 在那个 演示应用软件,我们把他们传送到Next.js router.push数字 :

"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 }}
    />
  );
}

构成部分

基础 - @agg-build/ui/primitives

事件—— @agg-build/ui/events

贸易 - @agg-build/ui/trading

页- @agg-build/ui/pages

潮汐计数器.. @agg-build/ui/modals

classNames 覆盖

大多数组件接受a classNames 复合道具使合作伙伴能够瞄准子元素:

<Modal.Header
  title="Place order"
  classNames={{
    root: "custom-header",
    title: "custom-title",
    close: "custom-close-btn",
  }}
/>

主要组件道具

HomePage

EventMarketPage

将整个事件页面显示为交易内容。 要求数 <AggProvider> 和用途 EventTradingContext 内部。 访问选择状态 useEventTradingContext() 从 @agg-build/hooks。 。 。 .

PlaceOrder

订入表. 内部渲染 EventMarketPage 或独立——需要活动 EventTradingContext 具有特定市场和结果。 与管理下的执行相结合 钩从 @agg-build/hooks。 。 。 .

入境点

同伴依赖关系

• @agg-build/sdk
• @agg-build/hooks
• react ^18.0.0或^19.0
• react-dom ^18.0.0或^19.0
• liveline ^0.0.7 — 绘图引擎 Chart 编号 : LineChart

不需要钱包包 。 钱包支持的 Auth 住在 @agg-build/auth。 。 。 .

链接

• 文 件 - 存档副本 https://docs.agg.market/ 互联网档案馆的存檔,存档日期2013-12-02
• 童话书—— https://storybook.agg.market/ 页面存档备份,存于互联网档案馆
• Demo app - 软件 https://demo.agg.market/ 页面存档备份,存于互联网档案馆
• 香草SDK - - 。 @agg-build/sdk
• 反应钩- @agg-build/hooks
• 连接/ 登录 UX —— @agg-build/auth

许可证

麻省理工学院