Orderbook

The "OrderBook" component provides live buy and sell orders on the SDEX.

Features

Automatically populates a divided list of Buy and Sell orders.
Provides each orders amount and quantity.
Provides visual aid using red and green to differentiate the buy and sell orders.

Additional Resources

An order book is a record of outstanding orders on a network, and each record sits between two assets.

Review the documentation on Orderbook functionality below

Visit Stellars SDEX Documentation

C#

Install the PakanaRazorSDEX NuGet package via the NuGet Package Manager Console.

.Net8.0 or greater is required.

dotnet add package PakanaRazorSDEX --version 0.0.4

Stellar Horizon Dependency will install automatically

NuGet Package Implementation

<PakanaRazorSDEX.Component.OrderBook/>

@page "/OrderBook"
@rendermode InteractiveAuto
 
@using Microsoft.JSInterop
 
<div class="container">
    <h2>Open Orders</h2>
    <label for="secretKeyInput">Enter Your Secret Key:</label>
    <input type="password" id="secretKeyInput" placeholder="Secret Key" />
    <button id="submitKeyButton">Submit</button>
    <div id="ordersTable">
        <p>Loading open orders...</p>
    </div>
    <p id="message"></p>
</div>
 
@code {
    string secretKeyInput { set; get; } = "";
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>
<script src="./_content/PakanaRazorSDEX/js/openOrders.html"></script>
<script src="./_content/PakanaRazorSDEX/js/global.js"></script>

Javascript

We've provided simple HTML and JavaScript that can be used in your project as partial-components or be customized and integrated into your existing codebase.

Stellar CDN

*Current Version as of 2024-24-12*
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/13.0.0/stellar-sdk.min.js"></script>

JavaScript

 
<script>
         async function fetchOrderBook() {
             try {
                 const orderBook = await server.orderbook(usdcAsset, xlmAsset).call();
 
                 // Display buy orders
                 const buyOrders = orderBook.bids.slice(0, 20).map(order => `
                     <div class="order-item">
                         <span>${parseFloat(order.amount).toFixed(6)}</span>
                         <span class="buy-order">${(1 / parseFloat(order.price)).toFixed(4)}</span>
                     </div>`).join('');
                 document.getElementById('buyOrders').innerHTML = buyOrders;
 
                 // Display sell orders
                 const sellOrders = orderBook.asks.slice(0, 20).map(order => `
                     <div class="order-item">
                         <span class="sell-order">${(1 / parseFloat(order.price)).toFixed(4)}</span>
                         <span>${parseFloat(order.amount).toFixed(2)}</span>
                     </div>`).join('');
                 document.getElementById('sellOrders').innerHTML = sellOrders;
 
             } catch (error) {
                 console.error('Error fetching order book:', error);
             }
         }
 
         // Fetch order book data every 10 seconds
         fetchOrderBook();
         setInterval(fetchOrderBook, 500);
</script>

HTML

 
<body>
    <div class="container">
    <div class="header">
        <span>
            <span>Amount(XLM)</span>
            <span>Bid(USD)</span>
        </span>
        <span>
            <span>Ask(USD)</span>
            <span>Amount(XLM)</span>
        </span>
    </div>
    <div class="order-book">
        <div class="order-book-column">
            <div id="buyOrders"></div>
        </div>
        <div class="order-book-column">
            <div id="sellOrders"></div>
        </div>
    </div>
</div>
</body>

Openorders Portfoliotracker