improve open orders display on orderbook

components/trade/OpenOrders.tsx

@@ -252,10 +252,12 @@ const OpenOrders = () => {
                 let market: PerpMarket | Serum3Market
                 let tickSize: number
                 let minOrderSize: number
+                let expiryTimestamp: number | undefined
                 if (o instanceof PerpOrder) {
                   market = group.getPerpMarketByMarketIndex(o.perpMarketIndex)
                   tickSize = market.tickSize
                   minOrderSize = market.minOrderSize
+                  expiryTimestamp = o.expiryTimestamp.toNumber()
                 } else {
                   market = group.getSerum3MarketByExternalMarket(
                     new PublicKey(marketPk)
@@ -319,6 +321,11 @@ const OpenOrders = () => {
                     )}
                     <Td className="w-[16.67%] text-right font-mono">
                       <FormatNumericValue value={o.size * o.price} isUsd />
+                      {expiryTimestamp ? (
+                        <div className="h-min text-xxs leading-tight text-th-fgd-4">{`Expires ${new Date(
+                          expiryTimestamp * 1000
+                        ).toLocaleTimeString()}`}</div>
+                      ) : null}
                     </Td>
                     {!isUnownedAccount ? (
                       <Td className="w-[16.67%]">

components/trade/Orderbook.tsx

@@ -309,8 +309,6 @@ const Orderbook = () => {
 
     if (!market || !group) return
 
-    let previousBidInfo: AccountInfo<Buffer> | undefined = undefined
-    let previousAskInfo: AccountInfo<Buffer> | undefined = undefined
     let bidSubscriptionId: number | undefined = undefined
     let askSubscriptionId: number | undefined = undefined
 
@@ -318,30 +316,32 @@ const Orderbook = () => {
       market instanceof Market ? market['_decoded'].bids : market.bids
     console.log('bidsPk', bidsPk?.toString())
     if (bidsPk) {
-      connection.getAccountInfo(bidsPk).then((info) => {
+      connection
+        .getAccountInfoAndContext(bidsPk)
+        .then(({ context, value: info }) => {
           if (!info) return
           const decodedBook = decodeBook(client, market, info, 'bids')
           set((state) => {
+            state.selectedMarket.lastSeenSlot.bids = context.slot
             state.selectedMarket.bidsAccount = decodedBook
             state.selectedMarket.orderbook.bids = decodeBookL2(decodedBook)
           })
         })
       bidSubscriptionId = connection.onAccountChange(
         bidsPk,
-        (info, _context) => {
-          if (
-            !previousBidInfo ||
-            !previousBidInfo.data.equals(info.data) ||
-            previousBidInfo.lamports !== info.lamports
-          ) {
-            previousBidInfo = info
+        (info, context) => {
+          const lastSeenSlot =
+            mangoStore.getState().selectedMarket.lastSeenSlot.bids
+          if (context.slot > lastSeenSlot) {
             const decodedBook = decodeBook(client, market, info, 'bids')
             set((state) => {
               state.selectedMarket.bidsAccount = decodedBook
               state.selectedMarket.orderbook.bids = decodeBookL2(decodedBook)
+              state.selectedMarket.lastSeenSlot.bids = context.slot
             })
           }
-        }
+        },
+        'processed'
       )
     }
 
@@ -349,30 +349,32 @@ const Orderbook = () => {
       market instanceof Market ? market['_decoded'].asks : market.asks
     console.log('asksPk', asksPk?.toString())
     if (asksPk) {
-      connection.getAccountInfo(asksPk).then((info) => {
+      connection
+        .getAccountInfoAndContext(asksPk)
+        .then(({ context, value: info }) => {
           if (!info) return
           const decodedBook = decodeBook(client, market, info, 'asks')
           set((state) => {
             state.selectedMarket.asksAccount = decodedBook
             state.selectedMarket.orderbook.asks = decodeBookL2(decodedBook)
+            state.selectedMarket.lastSeenSlot.asks = context.slot
           })
         })
       askSubscriptionId = connection.onAccountChange(
         asksPk,
-        (info, _context) => {
-          if (
-            !previousAskInfo ||
-            !previousAskInfo.data.equals(info.data) ||
-            previousAskInfo.lamports !== info.lamports
-          ) {
-            previousAskInfo = info
+        (info, context) => {
+          const lastSeenSlot =
+            mangoStore.getState().selectedMarket.lastSeenSlot.bids
+          if (context.slot > lastSeenSlot) {
             const decodedBook = decodeBook(client, market, info, 'asks')
             set((state) => {
               state.selectedMarket.asksAccount = decodedBook
               state.selectedMarket.orderbook.asks = decodeBookL2(decodedBook)
+              state.selectedMarket.lastSeenSlot.asks = context.slot
             })
           }
-        }
+        },
+        'processed'
       )
     }
     return () => {

store/mangoStore.ts

@@ -305,6 +305,10 @@ export type MangoStore = {
     asksAccount: BookSide | Orderbook | undefined
     orderbook: OrderbookL2
     markPrice: number
+    lastSeenSlot: {
+      bids: number
+      asks: number
+    }
   }
   serumMarkets: Serum3Market[]
   serumOrders: Order[] | undefined
@@ -443,6 +447,10 @@ const mangoStore = create<MangoStore>()(
         fills: [],
         bidsAccount: undefined,
         asksAccount: undefined,
+        lastSeenSlot: {
+          bids: 0,
+          asks: 0,
+        },
         orderbook: {
           bids: [],
           asks: [],

yarn.lock

@@ -15,16 +15,23 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.6.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.6.2":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
   integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.10.5", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@blockworks-foundation/mango-v4@https://github.com/blockworks-foundation/mango-v4.git#ts-client":
   version "0.4.3"
-  resolved "https://github.com/blockworks-foundation/mango-v4.git#c0b9ff2a94faff918ba8dfb5708959fd977fda6d"
+  resolved "https://github.com/blockworks-foundation/mango-v4.git#dbf7fce21ac31ef789dd3d3197f090aa87d18b10"
   dependencies:
     "@project-serum/anchor" "^0.25.0"
     "@project-serum/serum" "^0.13.65"