add cancel perp order call and remove unused imports

components/DepositModal.tsx

@@ -9,36 +9,21 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
 } from '@heroicons/react/solid'
-import { nativeToUi, sleep } from '@blockworks-foundation/mango-client'
-import {
-  MerpsAccount as MarginAccount,
-  uiToNative,
-} from '@blockworks-foundation/mango-client'
 import Modal from './Modal'
 import Input from './Input'
 import AccountSelect from './AccountSelect'
 import { ElementTitle } from './styles'
-import useMangoStore, {
-  mangoClient,
-  WalletToken,
-} from '../stores/useMangoStore'
-import useMarketList from '../hooks/useMarketList'
+import useMangoStore from '../stores/useMangoStore'
 import {
-  getSymbolForTokenMintAddress,
   DECIMALS,
   trimDecimals,
 } from '../utils/index'
 import useConnection from '../hooks/useConnection'
-// import { deposit, initMarginAccountAndDeposit } from '../utils/mango'
-import { PublicKey } from '@solana/web3.js'
 import Loading from './Loading'
 import Button, { LinkButton } from './Button'
 import Tooltip from './Tooltip'
 import Slider from './Slider'
 import InlineNotification from './InlineNotification'
-import { notify } from '../utils/notifications'
-import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
-import { QUOTE_INDEX } from '@blockworks-foundation/mango-client/lib/src/MerpsGroup'
 import { deposit } from '../utils/mango'
 
 interface DepositModalProps {

components/OpenOrdersTable.tsx

@@ -14,7 +14,7 @@ import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import SideBadge from './SideBadge'
 import { useSortableData } from '../hooks/useSortableData'
 import { Order, Market } from '@project-serum/serum/lib/market'
-import { Order as PerpOrder, PerpMarket } from '@blockworks-foundation/mango-client'
+import { PerpOrder, PerpMarket } from '@blockworks-foundation/mango-client'
 
 const OpenOrdersTable = () => {
   const { asPath } = useRouter()
@@ -35,15 +35,21 @@ const OpenOrdersTable = () => {
     try {
       if (!selectedMangoGroup || !selectedMarginAccount) return
       if (market instanceof Market) {
-      await mangoClient.cancelSpotOrder(
-        selectedMangoGroup,
-        selectedMarginAccount,
-        wallet,
-        market,
-        order as Order
-      )
+        await mangoClient.cancelSpotOrder(
+          selectedMangoGroup,
+          selectedMarginAccount,
+          wallet,
+          market,
+          order as Order
+        )
       } else if (market instanceof PerpMarket) {
-        console.log('TBD');
+        await mangoClient.cancelPerpOrder(
+          selectedMangoGroup,
+          selectedMarginAccount,
+          wallet,
+          market,
+          order as PerpOrder
+        )
       }
       actions.fetchMarginAccounts()
     } catch (e) {

components/TradeForm.tsx

@@ -1,16 +1,11 @@
 import { useState, useEffect, useRef } from 'react'
 import styled from '@emotion/styled'
-import useMarket from '../hooks/useMarket'
 import useIpAddress from '../hooks/useIpAddress'
-import useConnection from '../hooks/useConnection'
-import { PublicKey } from '@solana/web3.js'
 import {
   getTokenBySymbol,
-  IDS,
   PerpMarket,
 } from '@blockworks-foundation/mango-client'
 import { notify } from '../utils/notifications'
-// import { placeAndSettle } from '../utils/mango'
 import { calculateMarketPrice, getDecimalCount } from '../utils'
 import FloatingElement from './FloatingElement'
 import { floorToDecimal } from '../utils/index'
@@ -20,10 +15,6 @@ import TradeType from './TradeType'
 import Input from './Input'
 import Switch from './Switch'
 import { Market } from '@project-serum/serum'
-import {
-  I80F48,
-  NEG_ONE_I80F48,
-} from '@blockworks-foundation/mango-client/lib/src/fixednum'
 import Big from 'big.js'
 
 const StyledRightInput = styled(Input)`
@@ -34,7 +25,6 @@ export default function TradeForm() {
   const set = useMangoStore((s) => s.set)
   const connected = useMangoStore((s) => s.wallet.connected)
   const actions = useMangoStore((s) => s.actions)
-  const { connection, cluster } = useConnection()
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const market = useMangoStore((s) => s.selectedMarket.current)
@@ -437,10 +427,3 @@ export default function TradeForm() {
     </FloatingElement>
   )
 }
-
-function divideBnToNumber(numerator: BN, denominator: BN): number {
-  const quotient = numerator.div(denominator).toNumber()
-  const rem = numerator.umod(denominator)
-  const gcd = rem.gcd(denominator)
-  return quotient + rem.div(gcd).toNumber() / denominator.div(gcd).toNumber()
-}

components/account-page/AccountBorrows.tsx

@@ -180,7 +180,7 @@ export default function AccountBorrows() {
                             Object.keys(symbols).findIndex(
                               (key) => key === asset.coin
                             )
-                          ) * 100
+                          ).toNumber() * 100
                         ).toFixed(2)}
                         %
                       </span>

hooks/useHydrateStore.tsx

@@ -1,17 +1,7 @@
 import { useEffect } from 'react'
-import { Market } from '@project-serum/serum'
-// import { AccountInfo, PublicKey } from '@solana/web3.js'
-import { AccountInfo, PublicKey } from '@solana/web3.js'
-import useConnection from './useConnection'
-import useMangoStore, {
-  DEFAULT_CONNECTION,
-  mangoClient,
-  WEBSOCKET_CONNECTION,
-} from '../stores/useMangoStore'
-// import useSerumStore from '../stores/useSerumStore'
-// import useMarketList from './useMarketList'
+import { AccountInfo } from '@solana/web3.js'
+import useMangoStore, { WEBSOCKET_CONNECTION } from '../stores/useMangoStore'
 import useInterval from './useInterval'
-import { PerpMarket } from '@blockworks-foundation/mango-client'
 
 const SECONDS = 1000
 // const _SLOW_REFRESH_INTERVAL = 60 * SECONDS

hooks/useOpenOrders.tsx

@@ -1,7 +1,6 @@
-import { Order as PerpOrder, BookSide, BookSideLayout, getMarketByPublicKey, MarketConfig, PerpMarket, MerpsAccount as MarginAccount, LeafNode, PerpMarketConfig } from '@blockworks-foundation/mango-client'
-import { Market, OpenOrders, Orderbook } from '@project-serum/serum'
+import { PerpOrder, BookSide, BookSideLayout, getMarketByPublicKey, MarketConfig, PerpMarket, MerpsAccount as MarginAccount } from '@blockworks-foundation/mango-client'
+import { Market, Orderbook } from '@project-serum/serum'
 import { Order } from '@project-serum/serum/lib/market'
-import { PublicKey } from '@solana/web3.js'
 import useMangoStore from '../stores/useMangoStore'
 
 type OrderInfo = {
@@ -10,6 +9,9 @@ type OrderInfo = {
 
 function parseSpotOrders(market: Market, config: MarketConfig, marginAccount: MarginAccount, accountInfos) {
   const openOrders = marginAccount.spotOpenOrdersAccounts[config.marketIndex];
+  if (!openOrders)
+    return [];
+
   const bidData = accountInfos[market['_decoded'].bids.toBase58()]?.data
   const askData = accountInfos[market['_decoded'].asks.toBase58()]?.data
 

stores/useMangoStore.tsx

@@ -4,7 +4,6 @@ import { Market } from '@project-serum/serum'
 import {
   IDS,
   Config,
-  MarketKind,
   MerpsClient as MangoClient,
   MerpsGroup as MangoGroup,
   MerpsAccount as MarginAccount,
@@ -20,8 +19,6 @@ import {
   PerpMarket,
   getAllMarkets,
   getMultipleAccounts,
-  PerpMarketConfig,
-  SpotMarketConfig,
   PerpMarketLayout,
 } from '@blockworks-foundation/mango-client'
 // import { SRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
@@ -30,19 +27,10 @@ import {
   Commitment,
   Connection,
   PublicKey,
-  TokenAmount,
 } from '@solana/web3.js'
 import { EndpointInfo, WalletAdapter } from '../@types/types'
-import { getWalletTokenInfo } from '../utils/tokens'
-import {
-  chunks,
-  decodeAndLoadMarkets,
-  getOrderBookAccountInfos,
-  isDefined,
-  zipDict,
-} from '../utils'
+import { zipDict } from '../utils'
 import { notify } from '../utils/notifications'
-import useAllMarkets from '../hooks/useAllMarkets'
 
 export const ENDPOINTS: EndpointInfo[] = [
   {
@@ -72,7 +60,7 @@ export const WEBSOCKET_CONNECTION = new Connection(
   'processed' as Commitment
 )
 
-const DEFAULT_MANGO_GROUP_NAME = 'merps_test_v2.1'
+const DEFAULT_MANGO_GROUP_NAME = 'merps_test_v2.2'
 const DEFAULT_MANGO_GROUP_CONFIG = Config.ids().getGroup(
   CLUSTER,
   DEFAULT_MANGO_GROUP_NAME

utils/index.ts

@@ -6,7 +6,6 @@ import { I80F48 } from '@blockworks-foundation/mango-client/lib/src/fixednum'
 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 { DEFAULT_CONNECTION, Orderbook } from '../stores/useMangoStore'
 
 export function isValidPublicKey(key) {
@@ -214,8 +213,11 @@ export function* chunks(arr, n) {
   }
 }
 
-export function zipDict<K, V>(keys: K[], values: V[]): Record<K, V> {
-  let result: Record<K, V> = {}
+export function zipDict<K extends string | number | symbol, V>(
+  keys: K[],
+  values: V[]
+) {
+  const result: Partial<Record<K, V>> = {}
   keys.forEach((key, index) => {
     result[key] = values[index]
   })

utils/mango.tsx

@@ -1,13 +1,5 @@
-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'
+import { TokenAccount } from '@blockworks-foundation/mango-client'
+import useMangoStore, {mangoClient} from '../stores/useMangoStore'
 
 export async function deposit({
   amount,