load perp market

2022-10-10 22:16:13 -04:00 · 2022-10-10 22:16:13 -04:00 · 7c75d04d52
parent a6aca2a30d
commit 7c75d04d52
11 changed files with 285 additions and 184 deletions
--- a/components/stats/SpotMarketsTable.tsx
+++ b/components/stats/SpotMarketsTable.tsx
@ -64,7 +64,7 @@ const SpotMarketsTable = () => {
                <tr key={market.publicKey.toString()}>
                  <td>
                    <div className="flex items-center">
-                      <MarketLogos serumMarket={market} />
+                      <MarketLogos market={market} />
                      <p className="font-body tracking-wide">{market.name}</p>
                    </div>
                  </td>
@ -167,7 +167,7 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
    <div className="border-b border-th-bkg-3 px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center">
-          <MarketLogos serumMarket={market} />
+          <MarketLogos market={market} />
          <div>
            <p className="text-th-fgd-1">{market.name}</p>
            <div className="flex items-center space-x-3">
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@ -1,4 +1,4 @@
-import { Serum3Market } from '@blockworks-foundation/mango-v4'
+import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
 import Change from '@components/shared/Change'
 import { Popover } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
@ -12,10 +12,11 @@ import MarketLogos from './MarketLogos'
 const MarketSelectDropdown = () => {
  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
  const serumMarkets = mangoStore((s) => s.serumMarkets)
+  const perpMarkets = mangoStore((s) => s.perpMarkets)
  const set = mangoStore((s) => s.set)

  const handleSelectMarket = useCallback(
-    (market: Serum3Market, close: any) => {
+    (market: Serum3Market | PerpMarket, close: any) => {
      set((s) => {
        s.selectedMarket.current = market
      })
@ -32,7 +33,9 @@ const MarketSelectDropdown = () => {
          id="trade-step-one"
        >
          <Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-primary">
-            <MarketLogos serumMarket={selectedMarket!} />
+            <>
+              {selectedMarket ? <MarketLogos market={selectedMarket} /> : null}
+            </>
            <div className="text-xl font-bold text-th-fgd-1 md:text-base">
              {selectedMarket?.name || DEFAULT_MARKET_NAME}
            </div>
@ -44,28 +47,58 @@ const MarketSelectDropdown = () => {
          </Popover.Button>

          <Popover.Panel className="absolute -left-5 top-[46px] z-50 mr-4 w-screen bg-th-bkg-2 py-2 sm:w-56 md:top-[37px]">
-            {serumMarkets?.length
-              ? serumMarkets.map((m) => {
-                  return (
-                    <div
-                      key={m.publicKey.toString()}
-                      className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-3"
-                      onClick={() => handleSelectMarket(m, close)}
-                    >
-                      <MarketLogos serumMarket={m} />
-                      <span
-                        className={
-                          m.name === selectedMarket?.name
-                            ? 'text-th-primary'
-                            : ''
-                        }
-                      >
-                        {m.name}
-                      </span>
-                    </div>
-                  )
-                })
-              : null}
+            <div className="grid grid-cols-2">
+              <div>
+                <div className="font-lg text-center text-th-fgd-4">Spot</div>
+                {serumMarkets?.length
+                  ? serumMarkets.map((m) => {
+                      return (
+                        <div
+                          key={m.publicKey.toString()}
+                          className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
+                          onClick={() => handleSelectMarket(m, close)}
+                        >
+                          <MarketLogos market={m} />
+                          <span
+                            className={
+                              m.name === selectedMarket?.name
+                                ? 'text-th-primary'
+                                : ''
+                            }
+                          >
+                            {m.name}
+                          </span>
+                        </div>
+                      )
+                    })
+                  : null}
+              </div>
+              <div>
+                <div className="font-lg text-center text-th-fgd-4">Perp</div>
+                {perpMarkets?.length
+                  ? perpMarkets.map((m) => {
+                      return (
+                        <div
+                          key={m.publicKey.toString()}
+                          className="flex items-center bg-th-bkg-1 py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2"
+                          onClick={() => handleSelectMarket(m, close)}
+                        >
+                          <MarketLogos market={m} />
+                          <span
+                            className={
+                              m.name === selectedMarket?.name
+                                ? 'text-th-primary'
+                                : ''
+                            }
+                          >
+                            {m.name}
+                          </span>
+                        </div>
+                      )
+                    })
+                  : null}
+              </div>
+            </div>
          </Popover.Panel>
        </div>
      )}
@ -79,16 +112,18 @@ const OraclePrice = () => {

  if (!group || !selectedMarket) return null

-  const baseTokenBank = group.getFirstBankByTokenIndex(
-    selectedMarket?.baseTokenIndex
-  )
+  let price
+  if (selectedMarket instanceof Serum3Market) {
+    price = group.getFirstBankByTokenIndex(
+      selectedMarket?.baseTokenIndex
+    ).uiPrice
+  } else {
+    price = selectedMarket.uiPrice
+  }

  return (
    <div className="font-mono text-xs text-th-fgd-2">
-      $
-      {baseTokenBank.uiPrice
-        ? formatFixedDecimals(baseTokenBank.uiPrice)
-        : null}
+      ${price ? formatFixedDecimals(price) : null}
    </div>
  )
 }
--- a/components/trade/AdvancedTradeForm.tsx
+++ b/components/trade/AdvancedTradeForm.tsx
@ -1,4 +1,5 @@
 import {
+  Serum3Market,
  Serum3OrderType,
  Serum3SelfTradeBehavior,
  Serum3Side,
@ -21,6 +22,7 @@ import { calculateMarketPrice } from 'utils/tradeForm'
 import Image from 'next/image'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import Loading from '@components/shared/Loading'
+import { Market } from '@project-serum/serum'

 const TABS: [string, number][] = [
  ['Limit', 0],
@ -156,13 +158,19 @@ const AdvancedTradeForm = () => {
  useEffect(() => {
    const group = mangoStore.getState().group
    if (!group || !selectedMarket) return
-    const baseBank = group?.getFirstBankByTokenIndex(
-      selectedMarket.baseTokenIndex
-    )
-    if (baseBank.uiPrice) {
-      const price = baseBank.uiPrice.toString()
+    if (selectedMarket instanceof Serum3Market) {
+      const baseBank = group?.getFirstBankByTokenIndex(
+        selectedMarket.baseTokenIndex
+      )
+      if (baseBank.uiPrice) {
+        const price = baseBank.uiPrice.toString()
+        set((s) => {
+          s.tradeForm.price = price
+        })
+      }
+    } else {
      set((s) => {
-        s.tradeForm.price = price
+        s.tradeForm.price = selectedMarket._uiPrice.toString()
      })
    }
  }, [set, selectedMarket])
@ -191,25 +199,27 @@ const AdvancedTradeForm = () => {
        price = calculateMarketPrice(orderbook, baseSize, tradeForm.side)
      }

-      const tx = await client.serum3PlaceOrder(
-        group,
-        mangoAccount,
-        selectedMarket!.serumMarketExternal,
-        tradeForm.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
-        price,
-        baseSize,
-        Serum3SelfTradeBehavior.decrementTake,
-        orderType,
-        Date.now(),
-        10
-      )
-      actions.reloadMangoAccount()
-      actions.fetchSerumOpenOrders()
-      notify({
-        type: 'success',
-        title: 'Transaction successful',
-        txid: tx,
-      })
+      if (selectedMarket instanceof Serum3Market) {
+        const tx = await client.serum3PlaceOrder(
+          group,
+          mangoAccount,
+          selectedMarket!.serumMarketExternal,
+          tradeForm.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
+          price,
+          baseSize,
+          Serum3SelfTradeBehavior.decrementTake,
+          orderType,
+          Date.now(),
+          10
+        )
+        actions.reloadMangoAccount()
+        actions.fetchSerumOpenOrders()
+        notify({
+          type: 'success',
+          title: 'Transaction successful',
+          txid: tx,
+        })
+      }
    } catch (e: any) {
      notify({
        title: 'There was an issue.',
--- a/components/trade/MarketLogos.tsx
+++ b/components/trade/MarketLogos.tsx
@ -1,33 +1,42 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
+import { PerpMarket } from '@blockworks-foundation/mango-v4/dist/types/src/accounts/perp'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import Image from 'next/image'
 import { useMemo } from 'react'

-const MarketLogos = ({ serumMarket }: { serumMarket: Serum3Market }) => {
+const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
  const group = mangoStore((s) => s.group)
  const jupiterTokens = mangoStore((s) => s.jupiterTokens)

  const logos = useMemo(() => {
-    if (!group || !jupiterTokens.length || !serumMarket)
+    if (!group || !jupiterTokens.length || !market)
      return { baseLogoURI: '', quoteLogoURI: '' }
-    const baseBank = group.getFirstBankByTokenIndex(serumMarket.baseTokenIndex)
-    const quoteBank = group.getFirstBankByTokenIndex(
-      serumMarket.quoteTokenIndex
-    )
-    const jupiterBaseToken = jupiterTokens.find(
-      (t) => t.address === baseBank.mint.toString()
-    )
-    const jupiterQuoteToken = jupiterTokens.find(
-      (t) => t.address === quoteBank.mint.toString()
-    )
+
+    let jupiterBaseToken, jupiterQuoteToken
+    if (market instanceof Serum3Market) {
+      const baseBank = group.getFirstBankByTokenIndex(market.baseTokenIndex)
+      const quoteBank = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
+
+      jupiterBaseToken = jupiterTokens.find(
+        (t) => t.address === baseBank.mint.toString()
+      )
+      jupiterQuoteToken = jupiterTokens.find(
+        (t) => t.address === quoteBank.mint.toString()
+      )
+    } else {
+      jupiterBaseToken = jupiterTokens.find(
+        (t) => t.address === market.name.split('-')[0]
+      )
+    }
    const baseLogoURI = jupiterBaseToken ? jupiterBaseToken.logoURI : ''
    const quoteLogoURI = jupiterQuoteToken ? jupiterQuoteToken.logoURI : ''
    return {
      baseLogoURI,
      quoteLogoURI,
    }
-  }, [group, jupiterTokens, serumMarket])
+  }, [group, jupiterTokens, market])
+
  return (
    <div className="relative mr-1.5 h-5 w-[34px]">
      <div className="absolute left-0 top-0">
@ -44,7 +53,7 @@ const MarketLogos = ({ serumMarket }: { serumMarket: Serum3Market }) => {
        )}
      </div>
      <div className="absolute right-0 top-0">
-        {logos.quoteLogoURI ? (
+        {logos.quoteLogoURI && market instanceof Serum3Market ? (
          <Image
            alt=""
            className="rounded-full opacity-60"
--- a/components/trade/OpenOrders.tsx
+++ b/components/trade/OpenOrders.tsx
@ -1,4 +1,4 @@
-import { Serum3Side } from '@blockworks-foundation/mango-v4'
+import { Serum3Market, Serum3Side } from '@blockworks-foundation/mango-v4'
 import { IconButton } from '@components/shared/Button'
 import Loading from '@components/shared/Loading'
 import SideBadge from '@components/shared/SideBadge'
@ -35,19 +35,21 @@ const OpenOrders = () => {
      if (!group || !mangoAccount) return
      setCancelId(o.orderId.toString())
      try {
-        const tx = await client.serum3CancelOrder(
-          group,
-          mangoAccount,
-          selectedMarket!.serumMarketExternal,
-          o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
-          o.orderId
-        )
-        actions.fetchSerumOpenOrders()
-        notify({
-          type: 'success',
-          title: 'Transaction successful',
-          txid: tx,
-        })
+        if (selectedMarket instanceof Serum3Market) {
+          const tx = await client.serum3CancelOrder(
+            group,
+            mangoAccount,
+            selectedMarket!.serumMarketExternal,
+            o.side === 'buy' ? Serum3Side.bid : Serum3Side.ask,
+            o.orderId
+          )
+          actions.fetchSerumOpenOrders()
+          notify({
+            type: 'success',
+            title: 'Transaction successful',
+            txid: tx,
+          })
+        }
      } catch (e: any) {
        console.error('Error canceling', e)
        notify({
@ -95,7 +97,7 @@ const OpenOrders = () => {
                    >
                      <td>
                        <div className="flex items-center">
-                          <MarketLogos serumMarket={serumMarket!} />
+                          <MarketLogos market={serumMarket!} />
                          {serumMarket?.name}
                        </div>
                      </td>
@ -161,7 +163,7 @@ const OpenOrders = () => {
                  key={`${o.side}${o.size}${o.price}`}
                >
                  <div className="flex items-center">
-                    <MarketLogos serumMarket={serumMarket!} />
+                    <MarketLogos market={serumMarket!} />
                    <div>
                      <p className="text-sm text-th-fgd-1">
                        {serumMarket?.name}
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@ -16,54 +16,64 @@ import Tooltip from '@components/shared/Tooltip'
 import GroupSize from './GroupSize'
 import { breakpoints } from '../../utils/theme'
 import { useViewport } from 'hooks/useViewport'
+import {
+  BookSide,
+  BookSideType,
+  MangoClient,
+  PerpMarket,
+  Serum3Market,
+} from '@blockworks-foundation/mango-v4'

 function decodeBookL2(
-  market: Market,
-  accInfo: AccountInfo<Buffer>
+  client: MangoClient,
+  market: Market | PerpMarket,
+  accInfo: AccountInfo<Buffer>,
+  side: 'bids' | 'asks'
 ): number[][] {
  if (market && accInfo?.data) {
    const depth = 40
    if (market instanceof Market) {
      const book = SpotOrderBook.decode(market, accInfo.data)
      return book.getL2(depth).map(([price, size]) => [price, size])
+    } else if (market instanceof PerpMarket) {
+      // FIXME: Review the null being passed here
+      const decodedAcc = client.program.coder.accounts.decode(
+        'bookSide',
+        accInfo.data
+      )
+      const book = BookSide.from(
+        client,
+        market,
+        side === 'bids' ? BookSideType.bids : BookSideType.asks,
+        decodedAcc
+      )
+      return book.getL2Ui(depth)
    }
-    // else if (market instanceof PerpMarket) {
-    //   // FIXME: Review the null being passed here
-    //   const book = new BookSide(
-    //     // @ts-ignore
-    //     null,
-    //     market,
-    //     BookSideLayout.decode(accInfo.data),
-    //     undefined,
-    //     100000
-    //   )
-    //   return book.getL2Ui(depth)
-    // }
  }
  return []
 }

-export function decodeBook(
-  market: Market,
-  accInfo: AccountInfo<Buffer>
-): SpotOrderBook | undefined {
-  if (market && accInfo?.data) {
-    if (market instanceof Market) {
-      return SpotOrderBook.decode(market, accInfo.data)
-    }
-    // else if (market instanceof PerpMarket) {
-    //   // FIXME: Review the null being passed here
-    //   return new BookSide(
-    //     // @ts-ignore
-    //     null,
-    //     market,
-    //     BookSideLayout.decode(accInfo.data),
-    //     undefined,
-    //     100000
-    //   )
-    // }
-  }
-}
+// export function decodeBook(
+//   market: Market,
+//   accInfo: AccountInfo<Buffer>
+// ): SpotOrderBook | undefined {
+//   if (market && accInfo?.data) {
+//     if (market instanceof Market) {
+//       return SpotOrderBook.decode(market, accInfo.data)
+//     }
+//     else if (market instanceof PerpMarket) {
+//       // FIXME: Review the null being passed here
+//       return new BookSide(
+//         // @ts-ignore
+//         null,
+//         market,
+//         BookSideLayout.decode(accInfo.data),
+//         undefined,
+//         100000
+//       )
+//     }
+//   }
+// }

 type cumOrderbookSide = {
  price: number
@ -100,7 +110,7 @@ const getCumulativeOrderbookSide = (

 const groupBy = (
  ordersArray: number[][],
-  market: Market,
+  market: PerpMarket | Market,
  grouping: number,
  isBids: boolean
 ) => {
@ -171,21 +181,23 @@ const Orderbook = () => {
  const depthArray = useMemo(() => {
    const bookDepth = !isMobile ? depth : 7
    return Array(bookDepth).fill(0)
-  }, [depth, isMobile])
+  }, [isMobile])

-  const serum3MarketExternal = useMemo(() => {
+  const market = useMemo(() => {
    const group = mangoStore.getState().group
    if (!group || !selectedMarket) return
-    return group.serum3ExternalMarketsMap.get(
-      selectedMarket.serumMarketExternal.toBase58()
-    )
+
+    if (selectedMarket instanceof Serum3Market) {
+      return group?.getSerum3ExternalMarket(selectedMarket.serumMarketExternal)
+    } else {
+      return selectedMarket
+    }
  }, [selectedMarket])

  useEffect(() => {
-    if (serum3MarketExternal) {
-      setGrouping(serum3MarketExternal.tickSize)
-    }
-  }, [serum3MarketExternal])
+    if (!market) return
+    setGrouping(market.tickSize)
+  }, [market])

  useEffect(
    () =>
@ -213,10 +225,8 @@ const Orderbook = () => {
  useInterval(() => {
    const orderbook = mangoStore.getState().selectedMarket.orderbook
    const group = mangoStore.getState().group
-    if (!selectedMarket || !group) return
-    const serum3MarketExternal = group.serum3ExternalMarketsMap.get(
-      selectedMarket.serumMarketExternal.toBase58()
-    )
+    if (!market || !group) return
+
    if (
      nextOrderbookData?.current &&
      (!isEqual(currentOrderbookData.current, nextOrderbookData.current) ||
@ -236,10 +246,8 @@ const Orderbook = () => {
      // }

      // updated orderbook data
-      const bids =
-        groupBy(orderbook?.bids, serum3MarketExternal!, grouping, true) || []
-      const asks =
-        groupBy(orderbook?.asks, serum3MarketExternal!, grouping, false) || []
+      const bids = groupBy(orderbook?.bids, market!, grouping, true) || []
+      const asks = groupBy(orderbook?.asks, market!, grouping, false) || []

      const sum = (total: number, [, size]: number[], index: number) =>
        index < depth ? total + size : total
@ -303,13 +311,26 @@ const Orderbook = () => {
    const connection = mangoStore.getState().connection
    const group = mangoStore.getState().group
    const set = mangoStore.getState().set
+    const client = mangoStore.getState().client

    let previousBidInfo: AccountInfo<Buffer> | null = null
    let previousAskInfo: AccountInfo<Buffer> | null = null
-    if (!serum3MarketExternal || !group) return
+    if (!market || !group) return
    console.log('in orderbook WS useEffect')
-
-    const bidsPk = serum3MarketExternal['_decoded'].bids
+    const bidsPk =
+      market instanceof Market ? market['_decoded'].bids : market.bids
+    connection.getAccountInfo(bidsPk).then((info) => {
+      if (!info) return
+      set((state) => {
+        // state.accountInfos[bidsPk.toString()] = info
+        state.selectedMarket.orderbook.bids = decodeBookL2(
+          client,
+          market,
+          info,
+          'bids'
+        )
+      })
+    })
    const bidSubscriptionId = connection.onAccountChange(
      bidsPk,
      (info, context) => {
@ -323,14 +344,29 @@ const Orderbook = () => {
          set((state) => {
            // state.accountInfos[bidsPk.toString()] = info
            state.selectedMarket.orderbook.bids = decodeBookL2(
-              serum3MarketExternal,
-              info
+              client,
+              market,
+              info,
+              'bids'
            )
          })
        }
      }
    )
-    const asksPk = serum3MarketExternal['_decoded'].asks
+    const asksPk =
+      market instanceof Market ? market['_decoded'].asks : market.asks
+    connection.getAccountInfo(asksPk).then((info) => {
+      if (!info) return
+      set((state) => {
+        // state.accountInfos[bidsPk.toString()] = info
+        state.selectedMarket.orderbook.asks = decodeBookL2(
+          client,
+          market,
+          info,
+          'bids'
+        )
+      })
+    })
    const askSubscriptionId = connection.onAccountChange(
      asksPk,
      (info, context) => {
@ -344,8 +380,10 @@ const Orderbook = () => {
          set((state) => {
            // state.accountInfos[asksPk.toString()] = info
            state.selectedMarket.orderbook.asks = decodeBookL2(
-              serum3MarketExternal,
-              info
+              client,
+              market,
+              info,
+              'asks'
            )
          })
        }
@ -355,7 +393,7 @@ const Orderbook = () => {
      connection.removeAccountChangeListener(bidSubscriptionId)
      connection.removeAccountChangeListener(askSubscriptionId)
    }
-  }, [serum3MarketExternal])
+  }, [market])

  useEffect(() => {
    window.addEventListener('resize', verticallyCenterOrderbook)
@ -404,11 +442,11 @@ const Orderbook = () => {
            </button>
          </Tooltip>
        </div>
-        {serum3MarketExternal ? (
+        {market ? (
          <div id="trade-step-four">
            <Tooltip content={t('trade:grouping')} placement="top" delay={250}>
              <GroupSize
-                tickSize={serum3MarketExternal.tickSize}
+                tickSize={market.tickSize}
                onChange={onGroupSizeChange}
                value={grouping}
              />
@ -429,10 +467,10 @@ const Orderbook = () => {
          ? depthArray.map((_x, index) => {
              return (
                <div className="h-[24px]" key={index}>
-                  {!!orderbookData?.asks[index] && serum3MarketExternal ? (
+                  {!!orderbookData?.asks[index] && market ? (
                    <MemoizedOrderbookRow
-                      minOrderSize={serum3MarketExternal.minOrderSize}
-                      tickSize={serum3MarketExternal.tickSize}
+                      minOrderSize={market.minOrderSize}
+                      tickSize={market.tickSize}
                      // hasOpenOrder={hasOpenOrderForPriceGroup(
                      //   openOrderPrices,
                      //   price,
@ -472,10 +510,10 @@ const Orderbook = () => {
        {showBuys
          ? depthArray.map((_x, index) => (
              <div className="h-[24px]" key={index}>
-                {!!orderbookData?.bids[index] && serum3MarketExternal ? (
+                {!!orderbookData?.bids[index] && market ? (
                  <MemoizedOrderbookRow
-                    minOrderSize={serum3MarketExternal.minOrderSize}
-                    tickSize={serum3MarketExternal.tickSize}
+                    minOrderSize={market.minOrderSize}
+                    tickSize={market.tickSize}
                    // hasOpenOrder={hasOpenOrderForPriceGroup(
                    //   openOrderPrices,
                    //   price,
--- a/components/trade/RecentTrades.tsx
+++ b/components/trade/RecentTrades.tsx
@ -6,18 +6,23 @@ import { floorToDecimal, getDecimalCount } from 'utils/numbers'
 import Decimal from 'decimal.js'
 import { ChartTradeType } from 'types'
 import { useTranslation } from 'next-i18next'
+import { Serum3Market } from '@blockworks-foundation/mango-v4'

 const RecentTrades = () => {
  const { t } = useTranslation(['common', 'trade'])
  const [trades, setTrades] = useState<any[]>([])
  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
-  const selectedMarketPk = selectedMarket?.serumMarketExternal.toBase58()

-  const serum3MarketExternal = useMemo(() => {
+  const market = useMemo(() => {
    const group = mangoStore.getState().group
-    if (!group || !selectedMarketPk) return
-    return group.serum3ExternalMarketsMap.get(selectedMarketPk)
-  }, [selectedMarketPk])
+    if (!group || !selectedMarket) return
+
+    if (selectedMarket instanceof Serum3Market) {
+      return group?.getSerum3ExternalMarket(selectedMarket.serumMarketExternal)
+    } else {
+      return selectedMarket
+    }
+  }, [selectedMarket])

  const baseSymbol = useMemo(() => {
    return selectedMarket?.name.split('/')[0]
@ -28,11 +33,11 @@ const RecentTrades = () => {
  }, [selectedMarket])

  const fetchTradesForChart = useCallback(async () => {
-    if (!selectedMarketPk) return
+    if (!market) return

    try {
      const response = await fetch(
-        `https://event-history-api-candles.herokuapp.com/trades/address/${selectedMarketPk}`
+        `https://event-history-api-candles.herokuapp.com/trades/address/${market.publicKey}`
      )
      const parsedResp = await response.json()
      const newTrades = parsedResp.data
@ -46,7 +51,7 @@ const RecentTrades = () => {
    } catch (e) {
      console.error('Unable to fetch recent trades', e)
    }
-  }, [selectedMarketPk, trades])
+  }, [market, trades])

  useEffect(() => {
    if (CLUSTER === 'mainnet-beta') {
@ -71,18 +76,12 @@ const RecentTrades = () => {
      {!!trades.length && (
        <div className="px-4 font-mono text-xs">
          {trades.map((trade: ChartTradeType, i: number) => {
-            const formattedPrice = serum3MarketExternal?.tickSize
-              ? floorToDecimal(
-                  trade.price,
-                  getDecimalCount(serum3MarketExternal.tickSize)
-                )
+            const formattedPrice = market?.tickSize
+              ? floorToDecimal(trade.price, getDecimalCount(market.tickSize))
              : new Decimal(trade?.price || 0)

-            const formattedSize = serum3MarketExternal?.minOrderSize
-              ? floorToDecimal(
-                  trade.size,
-                  getDecimalCount(serum3MarketExternal.minOrderSize)
-                )
+            const formattedSize = market?.minOrderSize
+              ? floorToDecimal(trade.size, getDecimalCount(market.minOrderSize))
              : new Decimal(trade?.size || 0)
            return (
              <div key={i} className={`grid grid-cols-3 leading-6`}>
--- a/components/trade/SpotSlider.tsx
+++ b/components/trade/SpotSlider.tsx
@ -1,3 +1,4 @@
+import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import LeverageSlider from '@components/swap/LeverageSlider'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
@ -13,6 +14,7 @@ const SpotSlider = () => {
  const leverageMax = useMemo(() => {
    const group = mangoStore.getState().group
    if (!mangoAccount || !group || !selectedMarket) return 100
+    if (!(selectedMarket instanceof Serum3Market)) return 100

    try {
      if (side === 'buy') {
--- a/components/trade/UnsettledTrades.tsx
+++ b/components/trade/UnsettledTrades.tsx
@ -86,7 +86,7 @@ const UnsettledTrades = ({
                  <tr key={mktAddress} className="text-sm">
                    <td>
                      <div className="flex items-center">
-                        <MarketLogos serumMarket={market!} />
+                        <MarketLogos market={market!} />
                        <span>{market ? market.name : ''}</span>
                      </div>
                    </td>
@ -140,7 +140,7 @@ const UnsettledTrades = ({
                  className="flex items-center justify-between border-b border-th-bkg-3 p-4"
                >
                  <div className="flex items-center">
-                    <MarketLogos serumMarket={market!} />
+                    <MarketLogos market={market!} />
                    <span>{market ? market.name : ''}</span>
                  </div>
                  <div className="flex items-center space-x-3">
--- a/store/mangoStore.ts
+++ b/store/mangoStore.ts
@ -34,6 +34,7 @@ import {
 import { retryFn } from '../utils'
 import { Orderbook, SpotBalances } from 'types'
 import spotBalancesUpdater from './spotBalancesUpdater'
+import { PerpMarket } from '@blockworks-foundation/mango-v4/'

 const GROUP = new PublicKey('DLdcpC6AsAJ9xeKMR3WhHrN5sM5o7GVVXQhQ5vwisTtz')

@ -187,13 +188,14 @@ export type MangoStore = {
  markets: Serum3Market[] | undefined
  notificationIdCounter: number
  notifications: Array<Notification>
+  perpMarkets: PerpMarket[]
  profile: {
    details: ProfileDetails
    loadDetails: boolean
  }
  selectedMarket: {
    name: string
-    current: Serum3Market | undefined
+    current: Serum3Market | PerpMarket | undefined
    orderbook: Orderbook
  }
  serumMarkets: Serum3Market[]
@ -289,6 +291,7 @@ const mangoStore = create<MangoStore>()(
      markets: undefined,
      notificationIdCounter: 0,
      notifications: [],
+      perpMarkets: [],
      profile: {
        loadDetails: false,
        details: { profile_name: '', trader_category: '', wallet_pk: '' },
@ -503,11 +506,14 @@ const mangoStore = create<MangoStore>()(
            const serumMarkets = Array.from(
              group.serum3MarketsMapByExternal.values()
            )
+            const perpMarkets = Array.from(group.perpMarketsMapByName.values())
+            console.log('perpmarkets', perpMarkets)

            set((state) => {
              state.group = group
              state.groupLoaded = true
              state.serumMarkets = serumMarkets
+              state.perpMarkets = perpMarkets
              state.selectedMarket.current =
                state.selectedMarket.current ||
                getDefaultSelectedMarket(serumMarkets)
--- a/yarn.lock
+++ b/yarn.lock
@ -52,7 +52,7 @@

 "@blockworks-foundation/mango-v4@git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#main":
  version "0.0.1-beta.3"
-  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#7466123934359673e4cba694c72e8b9d6d34a2d4"
+  resolved "git+https://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:x-oauth-basic@github.com/blockworks-foundation/mango-v4.git#286563b0ef038cff6e16602d091abeda5764667f"
  dependencies:
    "@project-serum/anchor" "^0.25.0"
    "@project-serum/serum" "^0.13.65"
@ -1766,9 +1766,9 @@
  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==

 "@types/node@*", "@types/node@>=13.7.0":
-  version "18.8.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.3.tgz#ce750ab4017effa51aed6a7230651778d54e327c"
-  integrity sha512-0os9vz6BpGwxGe9LOhgP/ncvYN5Tx1fNcd2TM3rD/aCGBkysb+ZWpXEocG24h6ZzOi13+VB8HndAQFezsSOw1w==
+  version "18.8.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.4.tgz#54be907698f40de8a45770b48486aa3cbd3adff7"
+  integrity sha512-WdlVphvfR/GJCLEMbNA8lJ0lhFNBj4SW3O+O5/cEGw9oYrv0al9zTwuQsq+myDUXgNx2jgBynoVgZ2MMJ6pbow==

 "@types/node@17.0.23":
  version "17.0.23"