From 094b3f5d9e2541a193962949eb5050f20f4affec Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 25 Sep 2023 10:17:19 +1000
Subject: [PATCH] fix market select search

---
 components/trade/MarketSelectDropdown.tsx | 194 +++++++++++-----------
 public/locales/en/trade.json              |   1 +
 public/locales/es/trade.json              |   1 +
 public/locales/ru/trade.json              |   1 +
 public/locales/zh/trade.json              |   1 +
 public/locales/zh_tw/trade.json           |   1 +
 6 files changed, 105 insertions(+), 94 deletions(-)

diff --git a/components/trade/MarketSelectDropdown.tsx b/components/trade/MarketSelectDropdown.tsx
index 322b5131..f642d62f 100644
--- a/components/trade/MarketSelectDropdown.tsx
+++ b/components/trade/MarketSelectDropdown.tsx
@@ -67,7 +67,7 @@ const startSearch = (
 }
 
 const MarketSelectDropdown = () => {
-  const { t } = useTranslation('common')
+  const { t } = useTranslation(['common', 'trade'])
   const { selectedMarket } = useSelectedMarket()
   const [spotOrPerp, setSpotOrPerp] = useState(
     selectedMarket instanceof PerpMarket ? 'perp' : 'spot',
@@ -307,7 +307,7 @@ const MarketSelectDropdown = () => {
                   })}
                 </>
               ) : null}
-              {spotOrPerp === 'spot' && serumMarketsToShow.length ? (
+              {spotOrPerp === 'spot' ? (
                 <>
                   <div className="mb-3 flex items-center justify-between px-4">
                     <div className="relative w-1/2">
@@ -372,104 +372,110 @@ const MarketSelectDropdown = () => {
                       />
                     </p>
                   </div>
-                  {serumMarketsToShow.map((m) => {
-                    const baseBank = group?.getFirstBankByTokenIndex(
-                      m.baseTokenIndex,
-                    )
-                    const quoteBank = group?.getFirstBankByTokenIndex(
-                      m.quoteTokenIndex,
-                    )
-                    const market = group?.getSerum3ExternalMarket(
-                      m.serumMarketExternal,
-                    )
-                    let leverage
-                    if (group) {
-                      leverage = m.maxBidLeverage(group)
-                    }
-                    let price
-                    if (baseBank && market && quoteBank) {
-                      price = floorToDecimal(
-                        baseBank.uiPrice / quoteBank.uiPrice,
-                        getDecimalCount(market.tickSize),
-                      ).toNumber()
-                    }
+                  {serumMarketsToShow.length ? (
+                    serumMarketsToShow.map((m) => {
+                      const baseBank = group?.getFirstBankByTokenIndex(
+                        m.baseTokenIndex,
+                      )
+                      const quoteBank = group?.getFirstBankByTokenIndex(
+                        m.quoteTokenIndex,
+                      )
+                      const market = group?.getSerum3ExternalMarket(
+                        m.serumMarketExternal,
+                      )
+                      let leverage
+                      if (group) {
+                        leverage = m.maxBidLeverage(group)
+                      }
+                      let price
+                      if (baseBank && market && quoteBank) {
+                        price = floorToDecimal(
+                          baseBank.uiPrice / quoteBank.uiPrice,
+                          getDecimalCount(market.tickSize),
+                        ).toNumber()
+                      }
 
-                    const volumeData = m?.marketData?.quote_volume_24h
+                      const volumeData = m?.marketData?.quote_volume_24h
 
-                    const volume = volumeData ? volumeData : 0
+                      const volume = volumeData ? volumeData : 0
 
-                    return (
-                      <div className="flex w-full items-center" key={m.name}>
-                        <Link
-                          className={MARKET_LINK_CLASSES}
-                          href={{
-                            pathname: '/trade',
-                            query: { name: m.name },
-                          }}
-                          onClick={() => {
-                            close()
-                            setSearch('')
-                          }}
-                          shallow={true}
-                        >
-                          <div className="col-span-1 flex items-center">
-                            <div className="hidden sm:block">
-                              <MarketLogos market={m} size="small" />
+                      return (
+                        <div className="flex w-full items-center" key={m.name}>
+                          <Link
+                            className={MARKET_LINK_CLASSES}
+                            href={{
+                              pathname: '/trade',
+                              query: { name: m.name },
+                            }}
+                            onClick={() => {
+                              close()
+                              setSearch('')
+                            }}
+                            shallow={true}
+                          >
+                            <div className="col-span-1 flex items-center">
+                              <div className="hidden sm:block">
+                                <MarketLogos market={m} size="small" />
+                              </div>
+                              <span className="mr-1.5 text-xs text-th-fgd-2">
+                                {m.name}
+                              </span>
+                              {leverage ? (
+                                <LeverageBadge leverage={leverage} />
+                              ) : null}
                             </div>
-                            <span className="mr-1.5 text-xs text-th-fgd-2">
-                              {m.name}
-                            </span>
-                            {leverage ? (
-                              <LeverageBadge leverage={leverage} />
-                            ) : null}
+                            <div className="col-span-1 flex justify-end">
+                              {price && market?.tickSize ? (
+                                <span className="font-mono text-xs text-th-fgd-2">
+                                  {quoteBank?.name === 'USDC' ? '$' : ''}
+                                  {getDecimalCount(market.tickSize) <= 6
+                                    ? formatNumericValue(
+                                        price,
+                                        getDecimalCount(market.tickSize),
+                                      )
+                                    : price.toExponential(3)}
+                                  {quoteBank?.name !== 'USDC' ? (
+                                    <span className="font-body text-th-fgd-3">
+                                      {' '}
+                                      {quoteBank?.name}
+                                    </span>
+                                  ) : null}
+                                </span>
+                              ) : null}
+                            </div>
+                            <div className="col-span-1 flex justify-end">
+                              <MarketChange market={m} size="small" />
+                            </div>
+                            <div className="col-span-1 hidden sm:flex sm:justify-end">
+                              {loadingMarketData ? (
+                                <SheenLoader className="mt-0.5">
+                                  <div className="h-3.5 w-12 bg-th-bkg-2" />
+                                </SheenLoader>
+                              ) : (
+                                <span className="font-mono text-xs text-th-fgd-2">
+                                  {quoteBank?.name === 'USDC' ? '$' : ''}
+                                  {volume ? numberCompacter.format(volume) : 0}
+                                  {quoteBank?.name !== 'USDC' ? (
+                                    <span className="font-body text-th-fgd-3">
+                                      {' '}
+                                      {quoteBank?.name}
+                                    </span>
+                                  ) : null}
+                                </span>
+                              )}
+                            </div>
+                          </Link>
+                          <div className="px-3">
+                            <FavoriteMarketButton market={m} />
                           </div>
-                          <div className="col-span-1 flex justify-end">
-                            {price && market?.tickSize ? (
-                              <span className="font-mono text-xs text-th-fgd-2">
-                                {quoteBank?.name === 'USDC' ? '$' : ''}
-                                {getDecimalCount(market.tickSize) <= 6
-                                  ? formatNumericValue(
-                                      price,
-                                      getDecimalCount(market.tickSize),
-                                    )
-                                  : price.toExponential(3)}
-                                {quoteBank?.name !== 'USDC' ? (
-                                  <span className="font-body text-th-fgd-3">
-                                    {' '}
-                                    {quoteBank?.name}
-                                  </span>
-                                ) : null}
-                              </span>
-                            ) : null}
-                          </div>
-                          <div className="col-span-1 flex justify-end">
-                            <MarketChange market={m} size="small" />
-                          </div>
-                          <div className="col-span-1 hidden sm:flex sm:justify-end">
-                            {loadingMarketData ? (
-                              <SheenLoader className="mt-0.5">
-                                <div className="h-3.5 w-12 bg-th-bkg-2" />
-                              </SheenLoader>
-                            ) : (
-                              <span className="font-mono text-xs text-th-fgd-2">
-                                {quoteBank?.name === 'USDC' ? '$' : ''}
-                                {volume ? numberCompacter.format(volume) : 0}
-                                {quoteBank?.name !== 'USDC' ? (
-                                  <span className="font-body text-th-fgd-3">
-                                    {' '}
-                                    {quoteBank?.name}
-                                  </span>
-                                ) : null}
-                              </span>
-                            )}
-                          </div>
-                        </Link>
-                        <div className="px-3">
-                          <FavoriteMarketButton market={m} />
                         </div>
-                      </div>
-                    )
-                  })}
+                      )
+                    })
+                  ) : (
+                    <p className="mb-2 mt-4 text-center">
+                      {t('trade:no-markets-found')}
+                    </p>
+                  )}
                 </>
               ) : null}
             </div>
diff --git a/public/locales/en/trade.json b/public/locales/en/trade.json
index b0838600..f6025a9a 100644
--- a/public/locales/en/trade.json
+++ b/public/locales/en/trade.json
@@ -53,6 +53,7 @@
     "min-order-size-error": "Min order size is {{minSize}} {{symbol}}",
     "more-details": "More Details",
     "no-balances": "No balances",
+    "no-markets-found": "No markets found...",
     "no-orders": "No open orders",
     "no-positions": "No perp positions",
     "no-unsettled": "No unsettled funds",
diff --git a/public/locales/es/trade.json b/public/locales/es/trade.json
index 13690f8b..deec2828 100644
--- a/public/locales/es/trade.json
+++ b/public/locales/es/trade.json
@@ -53,6 +53,7 @@
     "min-order-size-error": "Min order size is {{minSize}} {{symbol}}",
     "more-details": "More Details",
     "no-balances": "No balances",
+    "no-markets-found": "No markets found...",
     "no-orders": "No open orders",
     "no-positions": "No perp positions",
     "no-unsettled": "No unsettled funds",
diff --git a/public/locales/ru/trade.json b/public/locales/ru/trade.json
index 13690f8b..deec2828 100644
--- a/public/locales/ru/trade.json
+++ b/public/locales/ru/trade.json
@@ -53,6 +53,7 @@
     "min-order-size-error": "Min order size is {{minSize}} {{symbol}}",
     "more-details": "More Details",
     "no-balances": "No balances",
+    "no-markets-found": "No markets found...",
     "no-orders": "No open orders",
     "no-positions": "No perp positions",
     "no-unsettled": "No unsettled funds",
diff --git a/public/locales/zh/trade.json b/public/locales/zh/trade.json
index dc700801..47bdcf3f 100644
--- a/public/locales/zh/trade.json
+++ b/public/locales/zh/trade.json
@@ -53,6 +53,7 @@
     "min-order-size-error": "订单的最小数量是 {{minSize}} {{symbol}}",
     "more-details": "看细节",
     "no-balances": "无余额",
+    "no-markets-found": "No markets found...",
     "no-orders": "无订单",
     "no-positions": "无持仓",
     "no-unsettled": "无未结清余额",
diff --git a/public/locales/zh_tw/trade.json b/public/locales/zh_tw/trade.json
index 481c7608..856d3aa7 100644
--- a/public/locales/zh_tw/trade.json
+++ b/public/locales/zh_tw/trade.json
@@ -53,6 +53,7 @@
     "min-order-size-error": "訂單的最小數量是 {{minSize}} {{symbol}}",
     "more-details": "看細節",
     "no-balances": "無餘額",
+    "no-markets-found": "No markets found...",
     "no-orders": "無訂單",
     "no-positions": "無持倉",
     "no-unsettled": "無未結清餘額",