Add client order id to interact page

client/ts/src/client.ts

@@ -430,12 +430,14 @@ export class ManifestClient {
    *
    * @param connection Connection
    * @param marketPk PublicKey of the market
+   * @param trader PublicKey for trader whose wrapper to fetch
    *
    * @returns ManifestClient
    */
   public static async getClientReadOnly(
     connection: Connection,
     marketPk: PublicKey,
+    trader?: PublicKey,
   ): Promise<ManifestClient> {
     const marketObject: Market = await Market.loadFromAddress({
       connection: connection,
@@ -454,9 +456,21 @@ export class ManifestClient {
       address: getGlobalAddress(quoteMint.address),
     });
 
+    let wrapper: Wrapper | null = null;
+    if (trader != null) {
+      const userWrapper: WrapperResponse | null =
+        await ManifestClient.fetchFirstUserWrapper(connection, trader);
+      if (userWrapper) {
+        wrapper = Wrapper.loadFromBuffer({
+          address: userWrapper.pubkey,
+          buffer: userWrapper.account.data,
+        });
+      }
+    }
+
     return new ManifestClient(
       connection,
-      null,
+      wrapper,
       marketObject,
       null,
       baseMint,

client/ts/src/wrapperObj.ts

@@ -45,12 +45,12 @@ export interface WrapperMarketInfo {
  * OpenOrder on a wrapper. Accurate as of the latest sync.
  */
 export interface WrapperOpenOrder {
+  /** Price as float in atoms of quote per atoms of base. */
+  price: number;
   /** Client order id used for cancelling orders. Does not need to be unique. */
   clientOrderId: bignum;
   /** Exchange defined id for an order. */
   orderSequenceNumber: bignum;
-  /** Price as float in atoms of quote per atoms of base. */
-  price: number;
   /** Number of base atoms in the order. */
   numBaseAtoms: bignum;
   /** Hint for the location of the order in the manifest dynamic data. */
@@ -61,6 +61,8 @@ export interface WrapperOpenOrder {
   isBid: boolean;
   /** Type of order (Limit, PostOnly, ...). */
   orderType: OrderType;
+  /** unused */
+  padding: number[];
 }
 
 /**
@@ -168,7 +170,7 @@ export class Wrapper {
    *
    * @param marketPk PublicKey for the market
    *
-   * @return OpenOrder[]
+   * @return WrapperOpenOrder[]
    */
   public openOrdersForMarket(marketPk: PublicKey): WrapperOpenOrder[] | null {
     const filtered: WrapperMarketInfo[] = this.data.marketInfos.filter(

debug-ui/app/components/MyStatus.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { fetchMarket } from '@/lib/data';
 import { getSolscanSigUrl, setupClient } from '@/lib/util';
-import { Market, RestingOrder } from '@cks-systems/manifest-sdk';
+import {
+  ManifestClient,
+  Market,
+  RestingOrder,
+} from '@cks-systems/manifest-sdk';
 import { WrapperCancelOrderParams } from '@cks-systems/manifest-sdk/wrapper';
+import { WrapperOpenOrder } from '@cks-systems/manifest-sdk/wrapperObj';
 import { getAssociatedTokenAddressSync } from '@solana/spl-token';
 import { useConnection, useWallet } from '@solana/wallet-adapter-react';
 import {
@@ -38,6 +42,9 @@ const MyStatus = ({
   const [quoteExchangeBalance, setQuoteExchangeBalance] = useState<number>(0);
   const [myBids, setMyBids] = useState<RestingOrder[]>([]);
   const [myAsks, setMyAsks] = useState<RestingOrder[]>([]);
+  const [myWrapperOpenOrders, setMyWrapperOpenOrders] = useState<
+    WrapperOpenOrder[]
+  >([]);
   const [clientOrderId, setClientOrderId] = useState('0');
   const [actOnQuote, setActOnQuote] = useState(true);
   const [amountTokens, setAmountTokens] = useState('0');
@@ -194,7 +201,13 @@ const MyStatus = ({
     if (signerPub) {
       const updateState = async (): Promise<void> => {
         const marketPub = new PublicKey(marketAddress);
-        const market: Market = await fetchMarket(conn, marketPub);
+        const mClient: ManifestClient = await ManifestClient.getClientReadOnly(
+          conn,
+          marketPub,
+          signerPub,
+        );
+        await mClient.reload();
+        const market: Market = mClient.market;
         setBaseMint(market.baseMint().toBase58());
         setQuoteMint(market.quoteMint().toBase58());
 
@@ -217,6 +230,15 @@ const MyStatus = ({
           // don't notify since not having an ata would trigger spammy notifications...
         }
 
+        // Get the client to get a wrapper which is needed for client order ids.
+        if (mClient.wrapper) {
+          const wrapperOpenOrders: WrapperOpenOrder[] | null =
+            mClient.wrapper.openOrdersForMarket(marketPub);
+          if (wrapperOpenOrders) {
+            setMyWrapperOpenOrders(wrapperOpenOrders);
+          }
+        }
+
         const signerAddr = signerPub.toBase58();
         setMyAsks(
           market
@@ -366,13 +388,24 @@ const MyStatus = ({
               <tr className="border-b border-gray-700">
                 <th className="py-2">Price</th>
                 <th className="py-2">Amount</th>
+                <th className="py-2">ClientOrderId</th>
               </tr>
             </thead>
             <tbody>
               {myAsks.map((restingOrder: RestingOrder, i: number) => (
                 <tr key={i} className="border-b border-gray-700">
                   <td className="py-2">{restingOrder.tokenPrice}</td>
                   <td className="py-2">{Number(restingOrder.numBaseTokens)}</td>
+                  <td className="py-2">
+                    {myWrapperOpenOrders
+                      .filter((openOrder: WrapperOpenOrder) => {
+                        return (openOrder.orderSequenceNumber =
+                          restingOrder.sequenceNumber);
+                      })
+                      .reduce((_acc, current) => {
+                        return current.clientOrderId.toString();
+                      }, '')}
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -386,13 +419,24 @@ const MyStatus = ({
               <tr className="border-b border-gray-700">
                 <th className="py-2">Price</th>
                 <th className="py-2">Amount</th>
+                <th className="py-2">ClientOrderId</th>
               </tr>
             </thead>
             <tbody>
               {myBids.map((restingOrder: RestingOrder, i: number) => (
                 <tr key={i} className="border-b border-gray-700">
                   <td className="py-2">{restingOrder.tokenPrice}</td>
                   <td className="py-2">{Number(restingOrder.numBaseTokens)}</td>
+                  <td className="py-2">
+                    {myWrapperOpenOrders
+                      .filter((openOrder: WrapperOpenOrder) => {
+                        return (openOrder.orderSequenceNumber =
+                          restingOrder.sequenceNumber);
+                      })
+                      .reduce((_acc, current) => {
+                        return current.clientOrderId.toString();
+                      }, '')}
+                  </td>
                 </tr>
               ))}
             </tbody>