Skip to main content
This example focuses on a client-side application where your UI builds transactions and the connected wallet signs them.

​
Build transaction data for the wallet

Create a build-only client using addresses instead of private keys. This lets your app use the SDK to construct the correct calldata without submitting through the SDK. 
import { OrderType, OstiumClient } from '@ostium/builder-sdk';

const client = await OstiumClient.createSelfAndSelf({
  traderAddress: '0xTraderAddress',
  builder: {
    address: '0xYourBuilderAddress',
    feeBps: 20,
  },
});
Build the trade request: 
const tx = client.getOpenTradeTx({
  pairId: 0,
  buy: true,
  price: '65000',
  collateral: '100',
  leverage: '5',
  type: OrderType.Market,
});
If tx.kind === 'eoa', pass it to the wallet: 
await window.ethereum.request({
  method: 'eth_sendTransaction',
  params: [
    {
      from: tx.from,
      to: tx.to,
      data: tx.data,
      value: `0x${tx.value.toString(16)}`,
    },
  ],
});
The same pattern works for getCloseTradeTx(), getModifyOrderTx(), getCancelOrderTx(), and getUpdateCollateralTx().

​
Stream live position updates

Fetch the current positions once, then stream price-driven updates over WebSocket. 
const positions = await client.getOpenPositions({ user: '0xTraderAddress' });
const stream = client.streamPositionUpdates(positions);

stream.onUpdate(next => {
  renderMarginSummary(next.marginSummary);
  renderPositions(next.pairPositions);
});

stream.onError(error => {
  console.error('position stream error', error);
});
The stream only subscribes to the unique pairId values present in the current positions response, so it is usually lighter than subscribing to the full price feed.

​
Poll trade status after wallet submission

Once a wallet sends the transaction, poll getOrders() by initiatedTxHashes until the order leaves the pending state. 
async function pollTrade(txHash: `0x${string}`) {
  while (true) {
    const orders = await client.getOrders({ initiatedTxHashes: [txHash] });
    const order = orders[0];

    if (order && !order.isPending) {
      return order;
    }

    await new Promise(resolve => setTimeout(resolve, 2000));
  }
}
This is the usual pattern for showing submitted, filled, or cancelled state in the UI after a wallet signature flow.