show open orders and wire up cancel order

components/OpenOrdersTable.tsx

@@ -8,7 +8,7 @@ import Button, { LinkButton } from './Button'
 import Loading from './Loading'
 // import { PublicKey } from '@solana/web3.js'
 // import useConnection from '../hooks/useConnection'
-import useMangoStore from '../stores/useMangoStore'
+import useMangoStore, { mangoClient } from '../stores/useMangoStore'
 import { notify } from '../utils/notifications'
 import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import SideBadge from './SideBadge'
@@ -23,7 +23,7 @@ const OpenOrdersTable = () => {
   const actions = useMangoStore((s) => s.actions)
 
   const handleCancelOrder = async (order) => {
-    // const wallet = useMangoStore.getState().wallet.current
+    const wallet = useMangoStore.getState().wallet.current
     const selectedMangoGroup =
       useMangoStore.getState().selectedMangoGroup.current
     const selectedMarginAccount =
@@ -31,15 +31,13 @@ const OpenOrdersTable = () => {
     setCancelId(order?.orderId)
     try {
       if (!selectedMangoGroup || !selectedMarginAccount) return
-      // await cancelOrderAndSettle(
-      //   connection,
-      //   new PublicKey(programId),
-      //   selectedMangoGroup,
-      //   selectedMarginAccount,
-      //   wallet,
-      //   order.market,
-      //   order
-      // )
+      await mangoClient.cancelSpotOrder(
+        selectedMangoGroup,
+        selectedMarginAccount,
+        wallet,
+        order.market,
+        order
+      )
       actions.fetchMarginAccounts()
     } catch (e) {
       notify({
@@ -48,6 +46,8 @@ const OpenOrdersTable = () => {
         txid: e.txid,
         type: 'error',
       })
+      console.log('error', `${e}`)
+
       return
     } finally {
       setCancelId(null)

hooks/useOpenOrders.tsx

@@ -1,7 +1,6 @@
-// import { useEffect, useRef } from 'react'
 import { Orderbook } from '@project-serum/serum'
+import { PublicKey } from '@solana/web3.js'
 import useMangoStore from '../stores/useMangoStore'
-import useMarketList from './useMarketList'
 
 const getOrderBookAccounts = (market, accountInfos) => {
   const bidData = accountInfos[market._decoded.bids.toString()]?.data
@@ -19,22 +18,17 @@ export function useOpenOrders() {
   const markets = useMangoStore((s) => s.selectedMangoGroup.markets)
   const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current)
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const accountInfos = useMangoStore((s) => s.accountInfos)
-  const { marketList } = useMarketList()
 
-  console.log('in useOpenorders, before if')
-  console.log('markets length', markets.length)
   if (!mangoGroup || !marginAccount || !accountInfos) return null
-  console.log('in useOpenorders, after if')
 
   const openOrders = Object.entries(markets).map(([address, market]) => {
-    const marketIndex = mangoGroup.getSpotMarketIndex(market)
+    const marketIndex = mangoGroup.getSpotMarketIndex(new PublicKey(address))
     const openOrdersAccount = marginAccount.spotOpenOrdersAccounts[marketIndex]
-    console.log('=================')
-    console.log('my open orders acc: ', openOrdersAccount)
 
-    const marketName = marketList.find(
-      (mkt) => mkt.address.toString() === address
+    const marketName = mangoGroupConfig.spot_markets.find(
+      (mkt) => mkt.key.toString() === address
     ).name
 
     if (!openOrdersAccount) return []

package.json

@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "@blockworks-foundation/mango-client": "git+ssh://git@github.com/blockworks-foundation/merps-ts#ts/ui-exports",
+    "@blockworks-foundation/mango-client": "git+ssh://git@github.com/blockworks-foundation/merps-ts#main",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@headlessui/react": "^1.2.0",

stores/useMangoStore.tsx

@@ -18,17 +18,23 @@ import {
   nativeToUi,
   MerpsCache,
   PerpMarket,
+  getMultipleAccounts,
 } from '@blockworks-foundation/mango-client'
 // import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
 import {
   AccountInfo,
+  Commitment,
   Connection,
   PublicKey,
   TokenAmount,
 } from '@solana/web3.js'
 import { EndpointInfo, WalletAdapter } from '../@types/types'
 import { getWalletTokenInfo } from '../utils/tokens'
-import { isDefined } from '../utils'
+import {
+  decodeAndLoadMarkets,
+  getOrderBookAccountInfos,
+  isDefined,
+} from '../utils'
 import { notify } from '../utils/notifications'
 import useAllMarkets from '../hooks/useAllMarkets'
 
@@ -51,8 +57,14 @@ type ClusterType = 'mainnet-beta' | 'devnet'
 
 const CLUSTER = (process.env.NEXT_PUBLIC_CLUSTER as ClusterType) || 'devnet'
 const ENDPOINT = ENDPOINTS.find((e) => e.name === CLUSTER)
-const DEFAULT_CONNECTION = new Connection(ENDPOINT.url, 'processed')
-const WEBSOCKET_CONNECTION = new Connection(ENDPOINT.websocket, 'processed')
+export const DEFAULT_CONNECTION = new Connection(
+  ENDPOINT.url,
+  'processed' as Commitment
+)
+const WEBSOCKET_CONNECTION = new Connection(
+  ENDPOINT.websocket,
+  'processed' as Commitment
+)
 
 const DEFAULT_MANGO_GROUP_NAME = 'merps_test_v1'
 const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
@@ -222,7 +234,6 @@ const useMangoStore = create<MangoStore>((set, get) => ({
   set: (fn) => set(produce(fn)),
   actions: {
     async fetchWalletTokens() {
-      const connection = get().connection.current
       const groupConfig = get().selectedMangoGroup.config
       const wallet = get().wallet.current
       const connected = get().wallet.connected
@@ -231,7 +242,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       if (wallet?.publicKey && connected) {
         const ownerAddress = wallet.publicKey
         const ownedTokenAccounts = await getTokenAccountsByOwnerWithWrappedSol(
-          connection,
+          DEFAULT_CONNECTION,
           ownerAddress
         )
         const tokens = []
@@ -267,7 +278,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       }
 
       return mangoClient
-        .getMarginAccountsForOwner(mangoGroup, wallet.publicKey)
+        .getMarginAccountsForOwner(mangoGroup, wallet.publicKey, true)
         .then((marginAccounts) => {
           if (marginAccounts.length > 0) {
             const sortedAccounts = marginAccounts
@@ -305,17 +316,29 @@ const useMangoStore = create<MangoStore>((set, get) => ({
     },
     async fetchMangoGroup() {
       const set = get().set
-
-      if (!mangoClient) return
       const mangoGroupPk = merpsGroupPk
 
+      const mangoGroupConfig = get().selectedMangoGroup.config
+      console.log('CONFIG:', mangoGroupConfig)
+
       return mangoClient
         .getMerpsGroup(mangoGroupPk)
         .then(async (mangoGroup) => {
-          console.log('we have a mango group', mangoGroup)
           const rootBanks = await mangoGroup.loadRootBanks(DEFAULT_CONNECTION)
           const merpsCache = await mangoGroup.loadCache(DEFAULT_CONNECTION)
-          console.log('we have merps cache::', merpsCache)
+
+          const spotMarketAccountInfos = await getMultipleAccounts(
+            DEFAULT_CONNECTION,
+            mangoGroupConfig.spot_markets.map((mkt) => mkt.key)
+          )
+          const spotOrderBookAccountInfos = await getOrderBookAccountInfos(
+            mangoGroup.dexProgramId,
+            spotMarketAccountInfos.map(({ accountInfo }) => accountInfo)
+          )
+          const spotMarkets = await decodeAndLoadMarkets(
+            mangoGroup.dexProgramId,
+            spotMarketAccountInfos
+          )
 
           // const srmAccountInfoPromise = connection.getAccountInfo(
           //   mangoGroup.srmVault
@@ -330,6 +353,14 @@ const useMangoStore = create<MangoStore>((set, get) => ({
             state.selectedMangoGroup.current = mangoGroup
             state.selectedMangoGroup.rootBanks = rootBanks
             state.selectedMangoGroup.cache = merpsCache
+            state.selectedMangoGroup.markets = spotMarkets
+
+            spotMarketAccountInfos
+              .concat(spotOrderBookAccountInfos)
+              .forEach(({ publicKey, accountInfo }) => {
+                state.accountInfos[publicKey.toString()] = accountInfo
+              })
+
             // state.selectedMangoGroup.srmAccount = srmAccountInfo
             // state.selectedMangoGroup.mintDecimals = mangoGroup.mintDecimals // TODO store "tokens" from merps group ids
             // state.selectedMangoGroup.prices = prices
@@ -344,6 +375,7 @@ const useMangoStore = create<MangoStore>((set, get) => ({
           console.log('Could not get mango group: ', err)
         })
     },
+    async fetchAllMarkets() {},
     // async fetchTradeHistory(marginAccount = null) {
     //   const selectedMarginAccount =
     //     marginAccount || get().selectedMarginAccount.current

utils/index.ts

@@ -1,9 +1,10 @@
+import { getMultipleAccounts } from '@blockworks-foundation/mango-client'
 import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
-import { TOKEN_MINTS } from '@project-serum/serum'
-import { PublicKey } from '@solana/web3.js'
+import { Market, TOKEN_MINTS } from '@project-serum/serum'
+import { AccountInfo, PublicKey } from '@solana/web3.js'
 import BN from 'bn.js'
 import { Side } from '../public/charting_library/charting_library'
-import { Orderbook } from '../stores/useMangoStore'
+import { DEFAULT_CONNECTION, Orderbook } from '../stores/useMangoStore'
 
 export function isValidPublicKey(key) {
   if (!key) {
@@ -223,3 +224,52 @@ export const trimDecimals = (n, digits) => {
 
 export const i80f48ToPercent = (value: I80F48) =>
   value.mul(I80F48.fromNumber(100))
+
+export async function decodeAndLoadMarkets(
+  serumProgramId: PublicKey,
+  marketAccountInfos
+): Promise<{ [marketPk: string]: Market }> {
+  const markets = {}
+
+  for (let i = 0; i < marketAccountInfos.length; i++) {
+    const { publicKey, accountInfo } = marketAccountInfos[i]
+    const decodedAcc = await Market.getLayout(serumProgramId).decode(
+      accountInfo.data
+    )
+
+    const baseMintDecimals = 6
+    const quoteMintDecimals = 9
+    markets[publicKey] = new Market(
+      decodedAcc,
+      baseMintDecimals,
+      quoteMintDecimals,
+      {},
+      serumProgramId
+    )
+  }
+  console.log('loaded markets', markets)
+
+  return markets
+}
+
+export async function getOrderBookAccountInfos(
+  serumProgramId,
+  spotMarketAccountInfos: AccountInfo<Buffer>[]
+): Promise<
+  {
+    publicKey: PublicKey
+    accountInfo: AccountInfo<Buffer>
+  }[]
+> {
+  const decodedMarkets = spotMarketAccountInfos.map((accountInfo) =>
+    Market.getLayout(serumProgramId).decode(accountInfo.data)
+  )
+
+  const orderBookPks = []
+  decodedMarkets.forEach((mkt) => {
+    orderBookPks.push(mkt.bids)
+    orderBookPks.push(mkt.asks)
+  })
+
+  return await getMultipleAccounts(DEFAULT_CONNECTION, orderBookPks)
+}

utils/mango.tsx

@@ -1,5 +1,13 @@
-import { TokenAccount } from '@blockworks-foundation/mango-client'
-import useMangoStore, { mangoClient } from '../stores/useMangoStore'
+import {
+  getMultipleAccounts,
+  TokenAccount,
+} from '@blockworks-foundation/mango-client'
+import { Market } from '@project-serum/serum'
+import { PublicKey } from '@solana/web3.js'
+import useMangoStore, {
+  DEFAULT_CONNECTION,
+  mangoClient,
+} from '../stores/useMangoStore'
 
 export async function deposit({
   amount,