摩纳哥反应 SDK
摩纳哥议定书的反应钩和部件。 与React一起构建交易应用程序,使用类型安全钩子进行认证,交易,市场数据,以及WebSocket连接.
安装
# 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数字 :
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. 使用摩纳哥虎克
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案例.
const sdk = useMonaco();
const address = sdk.getAccountAddress();
useAuth()
验证和会话管理.
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()
安排和管理订单.
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()
获取交易对元数据和市场数据.
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()
找最近交易的对子.
const { getTradeFeed } = useTradeFeed();
const trades = await getTradeFeed("BTC/USDC", { limit: 50 });
断层钩
useVault()
使用资产标识管理象征性存款和提款.
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()
访问用户简介和账户信息.
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()
订阅实时订单更新 .
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()
订阅实时烛台数据.
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()
订阅实时订货簿更新.
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();
};
}, []);
类型脚本配置
对于最佳类型推断,请使用这些类型脚本设置:
{
"compilerOptions": {
"target": "ES2020",
"module": "nodenext",
"moduleResolution": "nodenext",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"resolveJsonModule": true
}
}
发展
构建
bun run build
监视模式
bun run dev
林特
bun run lint
许可证
这个项目根据麻省理工学院的许可证获得许可.
支助
支持请:
- 在 GitHub 上打开一期
- 加入我们 Discord 社区
- 拜访我们 文档网站
- 检查我们 API 文档