@ agg- building/ hooks (韩语)

反应钩和提供者 恶作剧 预测市场聚合物. 环绕 @agg-build/sdk 有反应上下文, 共享授权/会话 状态, TanStack 查询 – 正在获取数据, 并运行 WebSocket 流 .

这是什么

@agg-build/hooks 是反应绑定层。 它拥有 AggClient 在提供者内部, 保存认证 平衡状态,在您的组件树上同步, 并暴露钩子 每个AGG表面 - 市场、订单、图表、活交易、执行、管理钱包、存款、搜索和UI 相会. 数据钩子由 TanStack 查询和活数据钩 由SDK的车厢支撑 AggWebSocket。 。 。 .

何时使用此软件包

• 你正在制造一个反应应用程序 想要钩子 而不是直接给SDK打电话.
• 您想要一个单一的提供者来管理会话、 UI 配置、 平衡和 WebSocket 生命周期 .
• 你计划让AGG与 @agg-build/ui 或 模块认证 UI 中 @agg-build/auth - 都要求这样 软件包.

如果您没有使用 React, 请使用 @agg-build/sdk 直接说.

安装

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

快开始

import { AggProvider, QueryClient, QueryClientProvider } from "@agg-build/hooks";
import { createAggClient } from "@agg-build/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market",
  // Optional: orderbookUrl: "wss://ob.agg.market", orderbookLatency: "realtime",
  // With orderbookUrl set, orderbook isLive follows that socket. Trades stay on wsUrl.
});
const queryClient = new QueryClient();

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

AggProvider 将SDK,UI配置,平衡,和WebSocket上下文组成一个. 狦 更喜欢自己编剧,个人的供货商AggSdkProvider, (中文(简体) ), AggUiProvider, (中文(简体) ), AggBalanceProvider)也输出.

AggProvider 使用 TanStack 查询共享请求和活数据缓存, 所以 QueryClientProvider 须取祖相. 软件包再出口 QueryClient 财务报告和审定财务报表 QueryClientProvider 仅供钩子消费者使用.

用钱包签名

useAggAuth 是连接您自己的钱包 UI 的下等钩 。 通过 a signMessage 回调 从 wagmi (Ethereum) 或 Solana 钱包适配器 :

import { useAggAuth } from "@agg-build/hooks";
import { useAccount, useSignMessage } from "wagmi";

function SignIn() {
  const { address, chainId } = useAccount();
  const { signMessageAsync } = useSignMessage();
  const { signIn, signOut, isAuthenticated, user, isLoading, error } = useAggAuth({
    signMessage: (message) => signMessageAsync({ message }),
    address,
    chainId,
  });

  if (isAuthenticated) {
    return (
      <div>
        <p>Signed in as {user?.id}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }

  return (
    <button disabled={isLoading} onClick={() => signIn("Sign in to AGG")}>
      Sign in with Ethereum
    </button>
  );
}

对索拉纳来说,通过一个 signMessage 并返回一个已编码的基数 签名 :

import bs58 from "bs58";
import { useWallet } from "@solana/wallet-adapter-react";
import { useAggAuth } from "@agg-build/hooks";

function SolanaSignIn() {
  const { publicKey, signMessage } = useWallet();
  const { signIn, isLoading } = useAggAuth({
    address: publicKey?.toBase58(),
    chain: "solana",
    chainId: "mainnet",
    signMessage: async (message) => {
      const bytes = await signMessage!(new TextEncoder().encode(message));
      return bs58.encode(bytes);
    },
  });

  return (
    <button disabled={isLoading} onClick={() => signIn("Sign in to AGG")}>
      Sign in with Solana
    </button>
  );
}

与SIWE、SIWS、Google、苹果、Twitter/X和电子邮件的全包连接/签名用户界面 魔法链接支持, 使用 @agg-build/auth。 。 。 .

提供市场数据

import { useVenueEvents, useMarketOrderbook } from "@agg-build/hooks";

function MarketList() {
  const { data, isLoading, fetchNextPage, hasNextPage } = useVenueEvents({
    limit: 20,
  });

  if (isLoading) return <p>Loading…</p>;

  return (
    <>
      {data?.pages
        .flatMap((page) => page.data)
        .map((event) => (
          <article key={event.id}>{event.title}</article>
        ))}
      {hasNextPage ? <button onClick={() => fetchNextPage()}>Load more</button> : null}
    </>
  );
}

function LiveOrderbook({ venueMarketIds }: { venueMarketIds: string[] }) {
  const { book, isLoading } = useMarketOrderbook({ venueMarketIds });
  if (isLoading) return null;
  return <pre>{JSON.stringify(book, null, 2)}</pre>;
}

连接外部伙伴用户ID

在您的后端生成签名的断言 signExternalId() 从 @agg-build/sdk/server,则 调用 useExternalId() 在前端 :

import { useEffect, useRef } from "react";
import { useExternalId } from "@agg-build/hooks";

function LinkPartnerAccount({
  assertion,
}: {
  assertion: { externalId: string; timestamp: number; hmac: string } | null;
}) {
  const { linkExternalId } = useExternalId();
  const lastLinked = useRef<string | null>(null);

  useEffect(() => {
    if (!assertion) return;
    const key = `${assertion.externalId}:${assertion.timestamp}`;
    if (lastLinked.current === key) return;
    lastLinked.current = key;
    void linkExternalId(assertion).catch(() => {
      lastLinked.current = null;
    });
  }, [assertion, linkExternalId]);

  return null;
}

主钩

核心

市场数据

订单和路由

图表

实时数据

网络安全套

余额

命令和职位

管理下的执行

引用和填充,取引自 useSmartRoute 并通过它的 quoteId 改为 useExecuteManaged。 。 。 .

const buyRoute = useSmartRoute({
  venueMarketOutcomeId,
  tradeSide: "buy",
  maxSpend: 50,
});

const sellRoute = useSmartRoute({
  venueMarketOutcomeId,
  tradeSide: "sell",
  sellShares: 10,
});

在v4中被删除. useQuoteManaged 被删除——包裹 client.quoteManaged(),其终点POST /execution/quote没有 在API上存在,所以这个电话只返回了404.

矿藏(子路径)

从 @agg-build/hooks/deposit 将钱包重的钩子从主包中取出:

倾斜

用户界面配置和公用事业

供应商

用户界面配置

AggProvider 接受分区配置对象 :

• enableLogs 编号 : enableWebsocketsLogs ——开启调试日志
• general —— 说 locale, (中文(简体) ), theme (单位:千美元)"light" | "dark", (中文(简体) ), rootClassName, (中文(简体) ), labels
• features ——UI行为标志包括: enableAnimations, (中文(简体) ), enableLiveUpdates, (中文(简体) ), enableVenueEventDiscoveryFilters,以及 enableEventDiscoveryUrlPersistence
• market —— 说 arbitrageThreshold, (中文(简体) ), maxMidpointIdsPerRequest 用于代理/安全CDN中点批量
• chart —— 说 defaultChartTimeRange, (中文(简体) ), selectedChartTimeRange
• search ——供应商拥有的搜索状态+对主机-应用程序路由/分析的回调

locale, (中文(简体) ), theme,以及 selectedChartTimeRange 自动坚持 localStorage。 。 。 .

查询密钥

对于直接反应查询缓存访问(例如. queryClient.invalidateQueries():

import { executionKeys } from "@agg-build/hooks";

queryClient.invalidateQueries({ queryKey: executionKeys.balances() });
queryClient.invalidateQueries({ queryKey: executionKeys.positions() });
queryClient.invalidateQueries({ queryKey: executionKeys.orders() });

executionKeys 是唯一公开出口的关键构建者——市场数据查询得到管理 内部由 WebSocket 提供者提供.

行为说明

• useOrderbookQuote 弹出 size 在查询前更改 300 ms .
• useDepositAddresses 在管理钱包时每3秒投票一次 (单位:千美元)ready === false),然后切换到60 sstale时间.
• useLiveCandles 将 REST 历史蜡烛与直播合并 CandleBuilder 输出; 碰撞 现场版本获胜.
• 对于二进制市场,第一个结果得到中点,第二个得到 1 − midpoint。 。 。 .
• CandleBuilder 批号 onChange 以 ~16 ms 调用(浏览器中的 RAF, 另设置 Timeout) .
• 执行突变useExecuteManaged, (中文(简体) ), useWithdrawManaged, (中文(简体) ), useSyncBalances(中文(简体) ) 自动验证相关的平衡/位置/顺序查询.

入境点

同伴依赖关系

要求 :

• @agg-build/sdk
• react ^18.0.0或^19.0

可选( 只需要基于钱包的签名/ 存款) :

• wagmi ^ 2.0.0 (SIWE + ERC-20 矿床)
• viem ^ 2.0.0 (与 wagmi(中文(简体) )
• @solana/wallet-adapter-react ^0.15.0 (SIWS + SPL 矿床)
• @solana/web3.js ^ 1.95.0 (韩语)

链接

• 文 件 - 存档副本 https://docs.agg.market/ 互联网档案馆的存檔,存档日期2013-12-02
• Demo app - 软件 https://agg.market/ (中文(简体) )
• 香草SDK - - 。 @agg-build/sdk
• 贸易UI - @agg-build/ui
• 连接/ 登录 UX —— @agg-build/auth

许可证

麻省理工学院