refactor to use selected market hook

components/shared/BalancesTable.tsx

@@ -14,6 +14,7 @@ import { breakpoints } from 'utils/theme'
 import { calculateMarketPrice } from 'utils/tradeForm'
 import { LinkButton } from './Button'
 import { Table, Td, Th, TrBody, TrHead } from './TableElements'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 
 const BalancesTable = () => {
   const { t } = useTranslation(['common', 'trade'])
@@ -203,7 +204,7 @@ export default BalancesTable
 
 const Balance = ({ bank }: { bank: Bank }) => {
   const { mangoAccount } = useMangoAccount()
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
   const { asPath } = useRouter()
 
   const handleBalanceClick = (balance: number, type: 'base' | 'quote') => {

components/trade/AdvancedMarketHeader.tsx

@@ -6,6 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import { useCoingecko } from 'hooks/useCoingecko'
 import useOraclePrice from 'hooks/useOraclePrice'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import { useCallback, useMemo, useState } from 'react'
 import { DEFAULT_MARKET_NAME } from 'utils/constants'
@@ -13,7 +14,7 @@ import { formatFixedDecimals } from 'utils/numbers'
 import MarketLogos from './MarketLogos'
 
 const MarketSelectDropdown = () => {
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
   const serumMarkets = mangoStore((s) => s.serumMarkets)
   const perpMarkets = mangoStore((s) => s.perpMarkets)
   const set = mangoStore((s) => s.set)
@@ -113,7 +114,7 @@ const MarketSelectDropdown = () => {
 
 const AdvancedMarketHeader = () => {
   const { t } = useTranslation(['common', 'trade'])
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
   const { data: tokenPrices } = useCoingecko()
   const oraclePrice = useOraclePrice()
 

components/trade/Orderbook.tsx

@@ -23,6 +23,7 @@ import {
   PerpMarket,
   Serum3Market,
 } from '@blockworks-foundation/mango-v4'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 
 function decodeBookL2(
   client: MangoClient,
@@ -174,7 +175,7 @@ const depth = 40
 
 const Orderbook = () => {
   const { t } = useTranslation(['common', 'trade'])
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
 
   const [isScrolled, setIsScrolled] = useState(false)
   const [orderbookData, setOrderbookData] = useState<any | null>(null)

components/trade/PerpButtonGroup.tsx

@@ -2,12 +2,13 @@ import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import ButtonGroup from '@components/forms/ButtonGroup'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useCallback, useMemo, useState } from 'react'
 import { notify } from 'utils/notifications'
 
 const PerpButtonGroup = () => {
   const side = mangoStore((s) => s.tradeForm.side)
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
   const { mangoAccount } = useMangoAccount()
   const [sizePercentage, setSizePercentage] = useState('')
 

components/trade/PerpPositions.tsx

@@ -3,6 +3,7 @@ import { LinkButton } from '@components/shared/Button'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import { calculateMarketPrice } from 'utils/tradeForm'
 import MarketLogos from './MarketLogos'
@@ -12,7 +13,7 @@ const PerpPositions = () => {
   const { t } = useTranslation(['common', 'trade'])
   const group = mangoStore((s) => s.group)
   const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
 
   const handlePositionClick = (positionSize: number) => {
     const tradeForm = mangoStore.getState().tradeForm

components/trade/RecentTrades.tsx

@@ -7,11 +7,12 @@ import Decimal from 'decimal.js'
 import { ChartTradeType } from 'types'
 import { useTranslation } from 'next-i18next'
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 
 const RecentTrades = () => {
   const { t } = useTranslation(['common', 'trade'])
   const [trades, setTrades] = useState<any[]>([])
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
 
   const market = useMemo(() => {
     const group = mangoStore.getState().group

components/trade/SpotButtonGroup.tsx

@@ -2,12 +2,13 @@ import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import ButtonGroup from '@components/forms/ButtonGroup'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
+import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useCallback, useMemo, useState } from 'react'
 import { notify } from 'utils/notifications'
 
 const SpotButtonGroup = () => {
   const side = mangoStore((s) => s.tradeForm.side)
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
   const { mangoAccount } = useMangoAccount()
   const [sizePercentage, setSizePercentage] = useState('')
 

hooks/useOraclePrice.ts

@@ -1,9 +1,10 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import mangoStore from '@store/mangoStore'
+import useSelectedMarket from './useSelectedMarket'
 
 export default function useOraclePrice() {
   const group = mangoStore((s) => s.group)
-  const selectedMarket = mangoStore((s) => s.selectedMarket.current)
+  const { selectedMarket } = useSelectedMarket()
 
   if (!group || !selectedMarket) return false