enable linking to market pages

components/MangoProvider.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import mangoStore from '@store/mangoStore'
 import { PublicKey } from '@solana/web3.js'
 import { useRouter } from 'next/router'
@@ -6,15 +6,24 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import useMangoAccount from 'hooks/useMangoAccount'
 
 const HydrateStore = () => {
-  const actions = mangoStore((s) => s.actions)
+  const router = useRouter()
+  const { name: marketName } = router.query
   const { mangoAccount } = useMangoAccount()
 
+  const fetchData = useCallback(async () => {
+    const actions = mangoStore.getState().actions
+    await actions.fetchGroup()
+  }, [])
+
   useEffect(() => {
-    const fetchData = async () => {
-      await actions.fetchGroup()
+    const set = mangoStore.getState().set
+    if (marketName && typeof marketName === 'string') {
+      set((s) => {
+        s.selectedMarket.name = marketName
+      })
     }
     fetchData()
-  }, [actions])
+  }, [marketName])
 
   // watch selected Mango Account for changes
   useEffect(() => {

components/trade/AdvancedMarketHeader.tsx

@@ -1,4 +1,3 @@
-import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
 import Change from '@components/shared/Change'
 import TabUnderline from '@components/shared/TabUnderline'
 import { Popover } from '@headlessui/react'
@@ -8,7 +7,8 @@ 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 Link from 'next/link'
+import { useMemo, useState } from 'react'
 import { DEFAULT_MARKET_NAME } from 'utils/constants'
 import { formatFixedDecimals } from 'utils/numbers'
 import MarketLogos from './MarketLogos'
@@ -17,22 +17,11 @@ const MarketSelectDropdown = () => {
   const { selectedMarket } = useSelectedMarket()
   const serumMarkets = mangoStore((s) => s.serumMarkets)
   const perpMarkets = mangoStore((s) => s.perpMarkets)
-  const set = mangoStore((s) => s.set)
   const [activeTab, setActiveTab] = useState('perp')
 
-  const handleSelectMarket = useCallback(
-    (market: Serum3Market | PerpMarket, close: any) => {
-      set((s) => {
-        s.selectedMarket.current = market
-      })
-      close()
-    },
-    [set]
-  )
-
   return (
     <Popover>
-      {({ close, open }) => (
+      {({ open }) => (
         <div
           className="relative flex flex-col overflow-visible"
           id="trade-step-one"
@@ -61,22 +50,27 @@ const MarketSelectDropdown = () => {
               ? serumMarkets?.length
                 ? serumMarkets.map((m) => {
                     return (
-                      <div
+                      <Link
+                        href={{
+                          pathname: '/trade',
+                          query: { name: m.name },
+                        }}
                         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)}
+                        shallow={true}
                       >
-                        <MarketLogos market={m} />
-                        <span
-                          className={
-                            m.name === selectedMarket?.name
-                              ? 'text-th-primary'
-                              : ''
-                          }
-                        >
-                          {m.name}
-                        </span>
-                      </div>
+                        <div className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2">
+                          <MarketLogos market={m} />
+                          <span
+                            className={
+                              m.name === selectedMarket?.name
+                                ? 'text-th-primary'
+                                : ''
+                            }
+                          >
+                            {m.name}
+                          </span>
+                        </div>
+                      </Link>
                     )
                   })
                 : null
@@ -85,22 +79,27 @@ const MarketSelectDropdown = () => {
               ? perpMarkets?.length
                 ? perpMarkets.map((m) => {
                     return (
-                      <div
+                      <Link
+                        href={{
+                          pathname: '/trade',
+                          query: { name: m.name },
+                        }}
                         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)}
+                        shallow={true}
                       >
-                        <MarketLogos market={m} />
-                        <span
-                          className={
-                            m.name === selectedMarket?.name
-                              ? 'text-th-primary'
-                              : ''
-                          }
-                        >
-                          {m.name}
-                        </span>
-                      </div>
+                        <div className="default-transition flex items-center py-2 px-4 hover:cursor-pointer hover:bg-th-bkg-2">
+                          <MarketLogos market={m} />
+                          <span
+                            className={
+                              m.name === selectedMarket?.name
+                                ? 'text-th-primary'
+                                : ''
+                            }
+                          >
+                            {m.name}
+                          </span>
+                        </div>
+                      </Link>
                     )
                   })
                 : null

pages/trade.tsx

@@ -1,6 +1,10 @@
 import TradeAdvancedPage from '@components/trade/TradeAdvancedPage'
+import mangoStore from '@store/mangoStore'
+// import mangoStore from '@store/mangoStore'
 import type { NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -17,6 +21,28 @@ export async function getStaticProps({ locale }: { locale: string }) {
 }
 
 const Trade: NextPage = () => {
+  const router = useRouter()
+  const { name: marketName } = router.query
+
+  useEffect(() => {
+    const set = mangoStore.getState().set
+    const group = mangoStore.getState().group
+    const serumMarkets = mangoStore.getState().serumMarkets
+    const perpMarkets = mangoStore.getState().perpMarkets
+
+    if (group && marketName && typeof marketName === 'string') {
+      const mkt =
+        serumMarkets.find((m) => m.name === marketName) ||
+        perpMarkets.find((m) => m.name === marketName)
+      if (mkt) {
+        set((s) => {
+          s.selectedMarket.name = marketName
+          s.selectedMarket.current = mkt
+        })
+      }
+    }
+  }, [marketName])
+
   return (
     <div className="pb-16 md:pb-0">
       <TradeAdvancedPage />

store/mangoStore.ts

@@ -292,7 +292,7 @@ const mangoStore = create<MangoStore>()(
         details: { profile_name: '', trader_category: '', wallet_pk: '' },
       },
       selectedMarket: {
-        name: 'ETH/USDC',
+        name: DEFAULT_MARKET_NAME,
         current: undefined,
         fills: [],
         orderbook: {
@@ -471,6 +471,7 @@ const mangoStore = create<MangoStore>()(
             const set = get().set
             const client = get().client
             const group = await client.getGroup(GROUP)
+            const selectedMarketName = get().selectedMarket.name
 
             const inputBank =
               group?.banksMapByName.get(INPUT_TOKEN_DEFAULT)?.[0]
@@ -481,14 +482,18 @@ const mangoStore = create<MangoStore>()(
             )
             const perpMarkets = Array.from(group.perpMarketsMapByName.values())
 
+            const defaultMarket =
+              serumMarkets.find((m) => m.name === selectedMarketName) ||
+              perpMarkets.find((m) => m.name === selectedMarketName)
+            serumMarkets[0]
+
             set((state) => {
               state.group = group
               state.groupLoaded = true
               state.serumMarkets = serumMarkets
               state.perpMarkets = perpMarkets
               state.selectedMarket.current =
-                state.selectedMarket.current ||
-                getDefaultSelectedMarket(serumMarkets)
+                state.selectedMarket.current || defaultMarket
               if (!state.swap.inputBank && !state.swap.outputBank) {
                 state.swap.inputBank = inputBank
                 state.swap.outputBank = outputBank
@@ -858,8 +863,4 @@ mangoStore.subscribe(
   perpPositionsUpdater
 )
 
-const getDefaultSelectedMarket = (markets: Serum3Market[]): Serum3Market => {
-  return markets.find((m) => m.name === DEFAULT_MARKET_NAME) || markets[0]
-}
-
 export default mangoStore