fix bad trade page link

components/TokenList.tsx

@@ -51,6 +51,7 @@ import { floorToDecimal } from 'utils/numbers'
 import { useQuery } from '@tanstack/react-query'
 import { TotalInterestDataItem } from 'types'
 import SheenLoader from './shared/SheenLoader'
+import { handleGoToTradePage } from 'utils/markets'
 
 export const handleOpenCloseBorrowModal = (borrowBank: Bank) => {
   const group = mangoStore.getState().group
@@ -678,11 +679,12 @@ export const ActionsMenu = ({
   const { isUnownedAccount } = useUnownedAccount()
   const { isDesktop } = useViewport()
 
-  const spotMarket = useMemo(() => {
-    return spotMarkets.find((m) => {
-      const base = m.name.split('/')[0]
-      return base.toUpperCase() === bank.name.toUpperCase()
-    })
+  const hasSpotMarket = useMemo(() => {
+    const markets = spotMarkets.filter(
+      (m) => m.baseTokenIndex === bank?.tokenIndex,
+    )
+    if (markets?.length) return true
+    return false
   }, [spotMarkets])
 
   const handleShowActionModals = useCallback(
@@ -741,10 +743,6 @@ export const ActionsMenu = ({
     router.push('/swap', undefined, { shallow: true })
   }, [bank, router, set])
 
-  const handleTrade = useCallback(() => {
-    router.push(`/trade?name=${spotMarket?.name}`, undefined, { shallow: true })
-  }, [spotMarket, router])
-
   return (
     <>
       {isUnownedAccount ? null : (
@@ -832,8 +830,12 @@ export const ActionsMenu = ({
                   <ActionsLinkButton onClick={handleSwap}>
                     {t('swap')}
                   </ActionsLinkButton>
-                  {spotMarket ? (
-                    <ActionsLinkButton onClick={handleTrade}>
+                  {hasSpotMarket ? (
+                    <ActionsLinkButton
+                      onClick={() =>
+                        handleGoToTradePage(bank, spotMarkets, router)
+                      }
+                    >
                       {t('trade')}
                     </ActionsLinkButton>
                   ) : null}

components/token/ActionPanel.tsx

@@ -9,6 +9,7 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
 import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
+import { handleGoToTradePage } from 'utils/markets'
 
 const ActionPanel = ({ bank }: { bank: Bank }) => {
   const { t } = useTranslation('common')
@@ -26,23 +27,6 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
     return []
   }, [group])
 
-  const handleTrade = () => {
-    const markets = spotMarkets.filter(
-      (m) => m.baseTokenIndex === bank?.tokenIndex,
-    )
-    if (markets) {
-      if (markets.length === 1) {
-        router.push(`/trade?name=${markets[0].name}`)
-      }
-      if (markets.length > 1) {
-        const market = markets.find((mkt) => !mkt.reduceOnly)
-        if (market) {
-          router.push(`/trade?name=${market.name}`)
-        }
-      }
-    }
-  }
-
   return (
     <>
       <div className="w-full rounded-md bg-th-bkg-2 p-4 md:w-[343px]">
@@ -87,7 +71,7 @@ const ActionPanel = ({ bank }: { bank: Bank }) => {
               !mangoAccount ||
               !serumMarkets.find((m) => m.baseTokenIndex === bank?.tokenIndex)
             }
-            onClick={handleTrade}
+            onClick={() => handleGoToTradePage(bank, spotMarkets, router)}
           >
             {t('trade')}
           </Button>

utils/markets.ts

@@ -1,7 +1,9 @@
+import { Bank, Serum3Market } from '@blockworks-foundation/mango-v4'
 import {
   PerpMarketWithMarketData,
   SerumMarketWithMarketData,
 } from 'hooks/useListedMarketsWithMarketData'
+import { NextRouter } from 'next/router'
 
 export type AllowedKeys =
   | 'notionalQuoteVolume'
@@ -91,3 +93,24 @@ export const startSearch = (
     .sort((i1, i2) => i2.matchingSymbolPercent - i1.matchingSymbolPercent)
     .map((item) => item.token)
 }
+
+export const handleGoToTradePage = (
+  bank: Bank | undefined,
+  spotMarkets: Serum3Market[],
+  router: NextRouter,
+) => {
+  const markets = spotMarkets.filter(
+    (m) => m.baseTokenIndex === bank?.tokenIndex,
+  )
+  if (markets) {
+    if (markets.length === 1) {
+      router.push(`/trade?name=${markets[0].name}`)
+    }
+    if (markets.length > 1) {
+      const market = markets.find((mkt) => !mkt.reduceOnly)
+      if (market) {
+        router.push(`/trade?name=${market.name}`)
+      }
+    }
+  }
+}