sort trade market select list

components/trade/AdvancedMarketHeader.tsx

@@ -55,7 +55,7 @@ const AdvancedMarketHeader = ({
 
   return (
     <div className="flex flex-col bg-th-bkg-1 md:h-12 md:flex-row md:items-center">
-      <div className=" w-full px-5 md:w-auto md:py-0 md:pr-6 lg:pb-0">
+      <div className="w-full px-5 md:w-auto md:py-0 md:pr-6 lg:pb-0">
         <MarketSelectDropdown />
       </div>
       <div className="border-t border-th-bkg-3 py-2 px-5 md:border-t-0 md:py-0 md:px-0">

components/trade/MarketSelectDropdown.tsx

@@ -21,11 +21,13 @@ const MarketSelectDropdown = () => {
   const [spotBaseFilter, setSpotBaseFilter] = useState('All')
 
   const perpMarkets = useMemo(() => {
-    return allPerpMarkets.filter(
-      (p) =>
-        p.publicKey.toString() !==
-        '9Y8paZ5wUpzLFfQuHz8j2RtPrKsDtHx9sbgFmWb5abCw'
-    )
+    return allPerpMarkets
+      .filter(
+        (p) =>
+          p.publicKey.toString() !==
+          '9Y8paZ5wUpzLFfQuHz8j2RtPrKsDtHx9sbgFmWb5abCw'
+      )
+      .sort((a, b) => a.name.localeCompare(b.name))
   }, [allPerpMarkets])
 
   const spotBaseTokens: string[] = useMemo(() => {
@@ -87,6 +89,7 @@ const MarketSelectDropdown = () => {
                         return mkt.name.split('/')[1] === spotBaseFilter
                       }
                     })
+                    .sort((a, b) => a.name.localeCompare(b.name))
                     .map((m) => {
                       return (
                         <div