add tabs to market selector

components/shared/TabUnderline.tsx

@@ -4,12 +4,14 @@ const TabUnderline = ({
   activeValue,
   values,
   onChange,
+  small,
 }: {
   activeValue: string
   onChange: (x: any) => void
   values: string[]
+  small?: boolean
 }) => {
-  const { t } = useTranslation(['common', 'swap', 'trade'])
+  const { t } = useTranslation('common')
   return (
     <div
       className={`relative mb-3 pb-1 md:-mt-2.5 md:border-b md:border-th-bkg-3`}
@@ -35,7 +37,9 @@ const TabUnderline = ({
           <button
             onClick={() => onChange(value)}
             className={`default-transition relative flex h-10 w-1/2 
-            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 text-sm font-bold md:h-auto md:rounded-none md:hover:opacity-100 lg:text-base
+            cursor-pointer items-center justify-center whitespace-nowrap rounded py-1 font-bold md:h-auto md:rounded-none md:hover:opacity-100 ${
+              small ? 'text-sm' : 'text-sm lg:text-base'
+            }
             ${
               activeValue === value
                 ? activeValue === 'buy'

components/trade/AdvancedMarketHeader.tsx

@@ -1,10 +1,11 @@
 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'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { DEFAULT_MARKET_NAME } from 'utils/constants'
 import { formatFixedDecimals } from 'utils/numbers'
 import MarketLogos from './MarketLogos'
@@ -14,6 +15,7 @@ const MarketSelectDropdown = () => {
   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) => {
@@ -45,60 +47,61 @@ const MarketSelectDropdown = () => {
               } mt-0.5 ml-2 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
             />
           </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]">
-            <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)}
+          <Popover.Panel className="absolute -left-5 top-[46px] z-50 mr-4 w-screen bg-th-bkg-2 pb-2 pt-4 sm:w-56 md:top-[37px]">
+            <TabUnderline
+              activeValue={activeTab}
+              onChange={(v) => setActiveTab(v)}
+              small
+              values={['perp', 'spot']}
+            />
+            {activeTab === 'spot'
+              ? 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'
+                              : ''
+                          }
                         >
-                          <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)}
+                          {m.name}
+                        </span>
+                      </div>
+                    )
+                  })
+                : null
+              : null}
+            {activeTab === 'perp'
+              ? perpMarkets?.length
+                ? perpMarkets.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'
+                              : ''
+                          }
                         >
-                          <MarketLogos market={m} />
-                          <span
-                            className={
-                              m.name === selectedMarket?.name
-                                ? 'text-th-primary'
-                                : ''
-                            }
-                          >
-                            {m.name}
-                          </span>
-                        </div>
-                      )
-                    })
-                  : null}
-              </div>
-            </div>
+                          {m.name}
+                        </span>
+                      </div>
+                    )
+                  })
+                : null
+              : null}
           </Popover.Panel>
         </div>
       )}

components/trade/MarketLogos.tsx

@@ -1,5 +1,4 @@
-import { Serum3Market } from '@blockworks-foundation/mango-v4'
-import { PerpMarket } from '@blockworks-foundation/mango-v4/dist/types/src/accounts/perp'
+import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import Image from 'next/image'
@@ -26,7 +25,7 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
       )
     } else {
       jupiterBaseToken = jupiterTokens.find(
-        (t) => t.address === market.name.split('-')[0]
+        (t) => t.symbol === market.name.split('-')[0]
       )
     }
     const baseLogoURI = jupiterBaseToken ? jupiterBaseToken.logoURI : ''
@@ -38,7 +37,11 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
   }, [group, jupiterTokens, market])
 
   return (
-    <div className="relative mr-1.5 h-5 w-[34px]">
+    <div
+      className={`relative mr-1.5 h-5 ${
+        market instanceof Serum3Market ? 'w-[34px]' : 'w-[20px]'
+      }`}
+    >
       <div className="absolute left-0 top-0">
         {logos.baseLogoURI ? (
           <Image
@@ -61,7 +64,7 @@ const MarketLogos = ({ market }: { market: Serum3Market | PerpMarket }) => {
             height="20"
             src={logos.quoteLogoURI}
           />
-        ) : (
+        ) : market instanceof PerpMarket ? null : (
           <QuestionMarkCircleIcon className="h-5 w-5 text-th-fgd-3" />
         )}
       </div>

public/locales/en/common.json

@@ -63,6 +63,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
   "pnl": "PnL",
   "price": "Price",
   "quantity": "Quantity",

public/locales/es/common.json

@@ -63,6 +63,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
   "pnl": "PnL",
   "price": "Price",
   "quantity": "Quantity",

public/locales/ru/common.json

@@ -63,6 +63,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
   "pnl": "PnL",
   "price": "Price",
   "quantity": "Quantity",

public/locales/zh/common.json

@@ -63,6 +63,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
   "pnl": "PnL",
   "price": "Price",
   "quantity": "Quantity",

public/locales/zh_tw/common.json

@@ -63,6 +63,7 @@
   "new-account": "New Account",
   "new-account-failed": "Failed to create account",
   "new-account-success": "Your new account is ready 😎",
+  "perp": "Perp",
   "pnl": "PnL",
   "price": "Price",
   "quantity": "Quantity",