Ecosystem Builders

drift-common: the fastest path to UI parity

drift-common is the monorepo of shared packages used by the official Drift UI. If you’re building a frontend, start here, not with the raw SDK.

Packages

@drift-labs/react

This package gives you a complete React integration layer:

DriftProvider, wrap your app to handle wallet connection, DriftClient initialization, RPC management, geoblocking, and idle polling. This is the entry point for any React app using Drift.

import { DriftProvider, DEFAULT_BREAKPOINTS } from "@drift-labs/react";
 
function App() {
  return (
    <DriftProvider breakpoints={DEFAULT_BREAKPOINTS}>
      <YourApp />
    </DriftProvider>
  );
}

useCommonDriftStore, Zustand store that holds the central DriftClient instance, user accounts, connection state, and SDK config. This is how you access Drift state throughout your app.

import { useCommonDriftStore } from "@drift-labs/react";
 
function TradingPanel() {
  const driftClient = useCommonDriftStore((s) => s.driftClient.client);
  const isReady = useCommonDriftStore((s) => s.checkIsDriftClientReady());
  const userAccounts = useCommonDriftStore((s) => s.userAccounts);
 
  if (!isReady) return <div>Connecting...</div>;
 
  // driftClient is a fully subscribed DriftClient instance
  // Use it for orders, positions, market data, etc.
}

useDriftClientIsReady, simple hook to check if the DriftClient is subscribed and ready:

import { useDriftClientIsReady } from "@drift-labs/react";
 
function OrderButton() {
  const isReady = useDriftClientIsReady();
  return <button disabled={!isReady}>Place Order</button>;
}

useOraclePriceStore, Zustand store for real-time oracle prices across all markets. Synced automatically via useSyncOraclePriceStore:

import { useOraclePriceStore } from "@drift-labs/react";
import { MarketId } from "@drift-labs/common-ts";
 
function PriceDisplay({ marketId }: { marketId: MarketId }) {
  const priceData = useOraclePriceStore((s) => s.getMarketPriceData(marketId));
  return <span>${priceData?.priceData.price.toFixed(2)}</span>;
}

@drift-labs/common-ts

Shared TypeScript utilities that handle the repetitive parts of working with Drift data:

UIMarket, wraps SDK market configs with display-friendly properties (symbol, display name, base asset, pool ID). Use this instead of raw market configs:

import { UIMarket, MarketId } from "@drift-labs/common-ts";
 
// Create from market index and type
const solPerp = UIMarket.createPerpMarket({ marketIndex: 0 });
console.log(solPerp.marketName);  // "SOL-PERP"
 
// MarketId is a lightweight identifier for maps and lookups
const id = MarketId.createPerpMarket(0);

NumLib, number formatting utilities for converting BN values to display strings with locale support:

import { NumLib } from "@drift-labs/common-ts";
 
// Format a BN price for display
const displayPrice = NumLib.formatNum.toDisplayPrice(rawPriceBN);

ENUM_UTILS, helpers for working with Anchor/Drift enum types (the isVariant pattern used throughout the SDK):

import { ENUM_UTILS } from "@drift-labs/common-ts";
 
// Check enum variants without the boilerplate
ENUM_UTILS.match(order.orderType, "limit");

Constants, commonly used market indexes and pool IDs:

import {
  USDC_SPOT_MARKET_INDEX,
  SOL_SPOT_MARKET_INDEX,
  MAIN_POOL_ID,
} from "@drift-labs/common-ts";

UI utility modules, pre-built helpers for common UI operations:

Data sources

For real-time and historical data, Drift exposes several APIs:

• Data API, historical data, candles, trades, market stats (https://data.api.drift.trade)
• DLOB server, real-time orderbook and trades websocket (https://dlob.drift.trade)
• Swift, signed message orders for fast execution (https://swift.drift.trade)

Detailed guides:

• Reading data (API + websockets)
• Orderbook + DLOB websocket

Sending actions

Once your UI state is ready, use the SDK to place orders, cancel, and manage accounts:

• Sending actions
• SDK Setup, if you need to initialize DriftClient manually (non-React apps)

Staying up to date

• GitHub: protocol-v2 , watch releases for SDK breaking changes
• GitHub: drift-common , shared UI packages
• Data API playground