# @0xmonaco/react 中文文档

规范地址：https://npmcn.com/package/%400xmonaco/react/

版本：1\.1\.9
npm 元数据更新时间：2026-11-06T20:40:48.510Z
中文译文更新时间：2026-11-06T05:03:34.817Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%400xmonaco/react
原文对照：https://npmcn.com/package/%400xmonaco/react/?lang=original
项目主页：https://docs.0xmonaco.com/sdk/typescript

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：300 kB，184 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：viem ^2\.45\.2，react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，wagmi ^2\.0\.0 \|\| ^3\.0\.0
- 首次发布：2025-08-28T01:53:21.772Z
- 最新版本发布：2026-11-06T20:40:48.319Z
- 近 30 天下载量：4981（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：198（近 12 个月 174 个）

## 中文简介

摩纳哥议定书的反应钩和部件。 与React一起构建交易应用程序,使用类型安全钩子进行认证,交易,市场数据,以及WebSocket连接.

## 安装

```sh
npm install @0xmonaco/react
```

也可以使用：`pnpm add @0xmonaco/react`、`yarn add @0xmonaco/react`、`bun add @0xmonaco/react`

## README

# 摩纳哥反应 SDK

摩纳哥议定书的反应钩和部件。 与React一起构建交易应用程序,使用类型安全钩子进行认证,交易,市场数据,以及WebSocket连接.

## 安装

```bash
# Install the React SDK and its dependencies
npm install @0xmonaco/react react wagmi@^2.17.5 viem@^2.31.7

# Or with bun
bun add @0xmonaco/react react wagmi@^2.17.5 viem@^2.31.7

# Or with yarn
yarn add @0xmonaco/react react wagmi@^2.17.5 viem@^2.31.7
```

## 特征

-   🎣 **反应钩**摩纳哥《议定书》所有行动的安全型钩
-   🔐 **认证**数字 : `useAuth` 基于钱包的登录和会话管理钩
-   📈 **贸易**数字 : `useTrade` 放置和管理订单的钩子
-   📊 **市场数据**数字 : `useMarket` 交易对和烛台数据的钩子
-   ⚡ **清算种子**数字 : `useLiquidationFeed` 将公共历史页面与活动对等频道合并
-   👤 **简介**数字 : `useProfile` 用户账户信息的钩子
-   🔄 **网络安全套**: 订单的实时钩子, OHLCV, 和订单更新
-   💼 **默认**数字 : `useVault` 保证金和提款的钩子

## 快速启动

### 1\. 设立摩纳哥提供者

用 `MonacoProvider`数字 :

```tsx
import { MonacoProvider } from "@0xmonaco/react";
import { WagmiProvider, createConfig, http } from "wagmi";
import { sei } from "wagmi/chains";

const wagmiConfig = createConfig({
  chains: [sei],
  transports: {
    [sei.id]: http("https://evm-rpc.sei-apis.com"),
  },
});

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <MonacoProvider
        network="mainnet"
        seiRpcUrl="https://evm-rpc.sei-apis.com"
      >
        <YourApp />
      </MonacoProvider>
    </WagmiProvider>
  );
}
```

### 2\. 使用摩纳哥虎克

```tsx
import { useMonaco, useAuth, useTrade, useMarket } from "@0xmonaco/react";

function TradingComponent() {
  const sdk = useMonaco();
  const { login, logout, isAuthenticated } = useAuth();
  const { placeLimitOrder, placeMarketOrder } = useTrade();
  const { tradingPairs, getTradingPairBySymbol } = useMarket();

  // Login
  const handleLogin = async () => {
    await login("your-client-id", { connectWebSocket: true });
  };

  // Place an order
  const handlePlaceOrder = async () => {
    const order = await placeLimitOrder(
      "BTC/USDC",
      "BUY",
      "0.001",
      "50000"
    );
    console.log("Order placed:", order.order_id);
  };

  return (
    <div>
      <button onClick={handleLogin}>
        {isAuthenticated ? "Logout" : "Login"}
      </button>
      <button onClick={handlePlaceOrder}>Place Order</button>
    </div>
  );
}
```

## 可用钩

### 核心钩

#### `useMonaco()`

直接访问摩纳哥SDK案例.

```tsx
const sdk = useMonaco();
const address = sdk.getAccountAddress();
```

#### `useAuth()`

验证和会话管理.

```tsx
const { login, logout, isAuthenticated, authState } = useAuth();

// Login with auto-connect WebSocket
await login(clientId, { connectWebSocket: true });

// Check authentication status
if (isAuthenticated) {
  console.log("User:", authState?.user);
}

// Logout
await logout();
```

### 贸易钩

#### `useTrade()`

安排和管理订单.

```tsx
const {
  placeLimitOrder,
  placeMarketOrder,
  cancelOrder,
  replaceOrder,
  getOrder,
  getPaginatedOrders,
} = useTrade();

// Place a limit order
const order = await placeLimitOrder(
  "BTC/USDC",
  "BUY",
  "0.001",
  "50000",
  { timeInForce: "GTC" }
);

// Place a market order
const marketOrder = await placeMarketOrder(
  "BTC/USDC",
  "SELL",
  "0.001",
  { slippageTolerance: 0.01 } // 1%
);

// Cancel an order
await cancelOrder(orderId);

// Get orders
const { data: orders } = await getPaginatedOrders({
  status: "SUBMITTED",
  trading_pair: "BTC/USDC",
});
```

### 市场数据钩

#### `useMarket()`

获取交易对元数据和市场数据.

```tsx
const { tradingPairs, getTradingPairBySymbol, getCandlestickData } = useMarket();

// Get all trading pairs
const pairs = await tradingPairs();

// Get specific pair
const btcPair = await getTradingPairBySymbol("BTC/USDC");

// Get candlestick data
const candles = await getCandlestickData(
  "BTC/USDC",
  "1h",
  Date.now() - 86400000, // 24h ago
  Date.now()
);
```

#### `useTradeFeed()`

找最近交易的对子.

```tsx
const { getTradeFeed } = useTradeFeed();

const trades = await getTradeFeed("BTC/USDC", { limit: 50 });
```

### 断层钩

#### `useVault()`

使用资产标识管理象征性存款和提款.

```tsx
const { deposit, withdraw, approve, needsApproval } = useVault();
const { getUserBalanceByAssetId } = useProfile();

// Get asset ID from trading pair
const pair = await getTradingPairBySymbol("USDC/USDT");
const assetId = pair.base_asset_id;

// Check balance
const balance = await getUserBalanceByAssetId(assetId);
console.log(`Balance: ${balance.total_balance} ${balance.symbol}`);

// Check if approval is needed
if (await needsApproval(assetId, amount)) {
  await approve(assetId, amount);
}

// Deposit tokens
await deposit(assetId, amount);

// Withdraw tokens
await withdraw(assetId, amount);
```

### 配置钩

#### `useProfile()`

访问用户简介和账户信息.

```tsx
const { fetchProfile, getUserBalances, getPaginatedUserMovements } = useProfile();

// Get profile (also populates the hook's balances/movements/orders state)
const profile = await fetchProfile();

// Get balances — cursor paged: omit pageToken to start, then follow
// nextPageToken until it comes back empty.
const balances = await getUserBalances({
  pageSize: 10,
});

// Get movements (transaction history)
const firstPage = await getPaginatedUserMovements({
  pageSize: 20,
});

// Walk the rest
let pageToken = firstPage.nextPageToken;
while (pageToken) {
  const next = await getPaginatedUserMovements({ pageSize: 20, pageToken });
  pageToken = next.nextPageToken;
}
```

### 网索钩

#### `useOrderWebSocket()`

订阅实时订单更新 .

```tsx
const { subscribe, unsubscribe, connect, disconnect } = useOrderWebSocket();

useEffect(() => {
  // Connect and subscribe
  await connect();
  
  subscribe("BTC/USDC", "SPOT", (event) => {
    console.log("Order event:", event.eventType);
    if (event.eventType === "ORDER_FILLED") {
      console.log("Order filled:", event.order);
    }
  });

  return () => {
    unsubscribe("BTC/USDC", "SPOT");
    disconnect();
  };
}, []);
```

#### `useOHLCVWebSocket()`

订阅实时烛台数据.

```tsx
const { subscribe, unsubscribe, connect, disconnect } = useOHLCVWebSocket();

useEffect(() => {
  await connect();
  
  subscribe("BTC/USDC", "SPOT", "1m", (event) => {
    console.log("New candle:", event.candlestick);
  });

  return () => {
    unsubscribe("BTC/USDC", "SPOT", "1m");
    disconnect();
  };
}, []);
```

#### `useOrderbook()`

订阅实时订货簿更新.

```tsx
const { subscribe, unsubscribe, connect, disconnect } = useOrderbook();

useEffect(() => {
  await connect();
  
  subscribe("BTC/USDC", "SPOT", (event) => {
    console.log("Orderbook:", {
      bids: event.bids.length,
      asks: event.asks.length,
    });
  });

  return () => {
    unsubscribe("BTC/USDC", "SPOT");
    disconnect();
  };
}, []);
```

## 类型脚本配置

对于最佳类型推断,请使用这些类型脚本设置:

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}
```

## 发展

### 构建

```bash
bun run build
```

### 监视模式

```bash
bun run dev
```

### 林特

```bash
bun run lint
```

## 许可证

这个项目根据麻省理工学院的许可证获得许可.

## 支助

支持请:

-   在 GitHub 上打开一期
-   加入我们 [Discord 社区](https://discord.gg/monaco)
-   拜访我们 [文档网站](https://docs.monaco.xyz/)
-   检查我们 [API 文档](https://docs.0xmonaco.com/)

## 常见问题

### @0xmonaco/react 是什么？

摩纳哥议定书的反应钩和部件。 与React一起构建交易应用程序,使用类型安全钩子进行认证,交易,市场数据,以及WebSocket连接\.

### 如何安装 @0xmonaco/react？

在项目目录运行 npm install @0xmonaco/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：viem（^2\.45\.2）、react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、wagmi（^2\.0\.0 \|\| ^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @0xmonaco/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @0xmonaco/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @0xmonaco/react 可以商用吗？

@0xmonaco/react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @0xmonaco/react 的下载量有多少？

根据 npm 官方下载统计，@0xmonaco/react 在 2026/10/04 – 2026/11/02 这 30 天内被下载 4,981 次，日均约 166 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @0xmonaco/react 还在维护吗？

最新版本 1\.1\.9 发布于 2026/11/07（今天）；至今共发布 198 个版本，其中过去 12 个月发布了 174 个；首次发布于 2025/08/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。