Build a Trading App

npm install @0xmonaco/core @0xmonaco/react @0xmonaco/types viem

import { MonacoProvider } from '@0xmonaco/react';

<MonacoProvider
  network="staging"
  clientId="your-client-id"
  seiRpcUrl="https://evm-rpc-testnet.sei-apis.com"
  walletClient={walletClient}
>
  {children}
</MonacoProvider>

const { login, logout, authenticationStatus } = useAuth();

// Triggers a one-time wallet signature and starts a signed session
await login();

import { parseUnits } from 'viem';

const { approve, deposit, withdraw, needsApproval } = useVault();
const { getTradingPairBySymbol } = useMarket();

const pair = await getTradingPairBySymbol('ETH/USDC');
if (!pair) throw new Error('Trading pair not found');

const assetId = pair.quoteAssetId; // Use baseAssetId for the other side

// Amounts must be bigint — use parseUnits with the pair's decimals
const amount = parseUnits('100', pair.quoteDecimals);

if (await needsApproval(assetId, amount)) {
  await approve(assetId, amount);
}
await deposit(assetId, amount);

const { orderbook, subscribed } = useOrderbook(
  pair.id,   // Trading pair UUID
  'SPOT',    // Trading mode
  1,         // Magnitude: controls price-level grouping
  'BASE',    // Quotation mode: 'BASE' or 'QUOTE'
  50         // Depth (number of price levels)
);

const { placeLimitOrder, placeMarketOrder, cancelOrder } = useTrade();

// Limit order — rests on the book until filled or cancelled
await placeLimitOrder(pair.id, 'BUY', '0.5', '50000', { timeInForce: 'GTC' });

// Market order — executes immediately at the best available price
await placeMarketOrder(pair.id, 'SELL', '0.1');