market select fixes

components/trade/MarketSelectDropdown.tsx

@@ -9,7 +9,14 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ChangeEvent,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   countLeadingZeros,
   floorToDecimal,
@@ -42,14 +49,25 @@ import { isBankVisibleForUser } from 'utils/bank'
 import Decimal from 'decimal.js'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { GRADIENT_TEXT } from '@components/explore/SpotTable'
+import Select from '@components/forms/Select'
+import Image from 'next/image'
 
 type Currencies = {
-  [key: string]: string
+  [key: string]: string | ReactNode
 }
 
 export const CURRENCY_SYMBOLS: Currencies = {
   'wBTC (Portal)': '₿',
   SOL: '◎',
+  stepSOL: (
+    <Image
+      className="inline"
+      src="/icons/stepsol.svg"
+      height={16}
+      width={16}
+      alt="stepSOL Logo"
+    />
+  ),
 }
 
 const MARKET_LINK_CLASSES =
@@ -204,7 +222,7 @@ const MarketSelectDropdown = () => {
               } ml-2 mt-0.5 h-6 w-6 shrink-0 text-th-fgd-2`}
             />
           </Popover.Button>
-          <Popover.Panel className="absolute -left-4 top-12 z-40 w-screen border-y border-th-bkg-3 bg-th-bkg-2 md:w-[580px] md:border-r">
+          <Popover.Panel className="absolute -left-4 top-12 z-40 w-screen border-y border-th-bkg-3 bg-th-bkg-1 md:w-[640px] md:border-r">
             <div className="border-b border-th-bkg-3">
               <TabButtons
                 activeValue={spotOrPerp}
@@ -216,7 +234,7 @@ const MarketSelectDropdown = () => {
                 fillWidth
               />
             </div>
-            <div className="thin-scroll h-[calc(100vh-188px)] overflow-auto py-3 md:max-h-[calc(100vh-215px)]">
+            <div className="thin-scroll h-[calc(100vh-208px)] overflow-auto py-3 md:h-[calc(100vh-188px)] ">
               {spotOrPerp === 'perp' && perpMarketsToShow.length ? (
                 <>
                   <div className="mb-2 grid grid-cols-3 border-b border-th-bkg-3 pb-1 pl-4 pr-14 text-xxs sm:grid-cols-4">
@@ -342,8 +360,8 @@ const MarketSelectDropdown = () => {
               ) : null}
               {spotOrPerp === 'spot' ? (
                 <>
-                  <div className="mb-3 flex items-center justify-between px-4">
-                    <div className="relative w-1/2">
+                  <div className="mb-3 flex items-center justify-between space-x-3 px-4">
+                    <div className="relative w-full sm:w-1/2">
                       <Input
                         className="h-8 pl-8"
                         type="text"
@@ -354,19 +372,20 @@ const MarketSelectDropdown = () => {
                       <MagnifyingGlassIcon className="absolute left-2 top-2 h-4 w-4" />
                     </div>
                     <div>
-                      {spotQuoteTokens.map((tab) => (
-                        <button
-                          className={`rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
-                            spotBaseFilter === tab
-                              ? 'bg-th-bkg-3 text-th-active md:hover:text-th-active'
-                              : 'text-th-fgd-3 md:hover:text-th-fgd-2'
-                          }`}
-                          onClick={() => setSpotBaseFilter(tab)}
-                          key={tab}
-                        >
-                          {t(tab)}
-                        </button>
-                      ))}
+                      <Select
+                        value={t(spotBaseFilter)}
+                        onChange={(token) => setSpotBaseFilter(token)}
+                        className="w-36"
+                        buttonClassName="!h-8 pt-0 pb-0"
+                      >
+                        {spotQuoteTokens.map((token) => (
+                          <Select.Option key={token} value={token}>
+                            <div className="flex w-full items-center justify-between">
+                              {t(token)}
+                            </div>
+                          </Select.Option>
+                        ))}
+                      </Select>
                     </div>
                   </div>
                   <div className="mb-2 grid grid-cols-3 border-b border-th-bkg-3 pb-1 pl-4 pr-14 text-xxs sm:grid-cols-4">

public/icons/stepsol.svg

@@ -0,0 +1,38 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.61142 10.0119L16.0036 4.01143L16.0031 16.0115L5.61096 22.012L5.61142 10.0119Z" fill="#28E0B9"/>
+<path d="M16.0058 4L26.3985 9.99965L22.9343 11.9995L12.5416 5.99988L16.0058 4Z" fill="url(#paint0_linear_436_2)"/>
+<path d="M22.9265 11.9959L22.9266 15.996L12.5345 9.99551L12.5343 5.99548L22.9265 11.9959Z" fill="#8B4FF6"/>
+<path d="M12.5278 10.0014L22.9204 16.0011L19.4562 18.001L9.0636 12.0013L12.5278 10.0014Z" fill="url(#paint1_linear_436_2)"/>
+<path d="M19.4967 18.0217L19.4969 22.0218L9.10476 16.0213L9.10461 12.0213L19.4967 18.0217Z" fill="#8B4FF6"/>
+<path d="M9.07272 16.0027L19.4653 22.0024L16.0011 24.0023L5.60852 18.0026L9.07272 16.0027Z" fill="url(#paint2_linear_436_2)"/>
+<path d="M15.9938 23.9987L15.994 27.9987L5.60184 21.9983L5.60168 17.9982L15.9938 23.9987Z" fill="#8B4FF6"/>
+<path d="M22.9308 11.9971L26.3948 9.99691L26.3943 21.997L22.9303 23.9971L22.9308 11.9971Z" fill="url(#paint3_linear_436_2)"/>
+<path d="M19.4594 17.9986L22.9235 15.9985L22.9232 23.9986L19.4591 25.9987L19.4594 17.9986Z" fill="url(#paint4_linear_436_2)"/>
+<path d="M15.988 23.9999L19.4521 21.9998L19.4519 25.9998L15.9879 28L15.988 23.9999Z" fill="url(#paint5_linear_436_2)"/>
+<defs>
+<linearGradient id="paint0_linear_436_2" x1="19.375" y1="6.25" x2="17.5" y2="9" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41E9B8"/>
+<stop offset="1" stop-color="#5B8CD9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_436_2" x1="15.897" y1="12.2514" x2="14.0219" y2="15.0014" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41E9B8"/>
+<stop offset="1" stop-color="#5B8CD9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_436_2" x1="12.4419" y1="18.2527" x2="10.5669" y2="21.0027" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41E9B8"/>
+<stop offset="1" stop-color="#5B8CD9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_436_2" x1="23.625" y1="10.75" x2="24.6626" y2="23.9971" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22EAAD"/>
+<stop offset="1" stop-color="#7F5BEE"/>
+</linearGradient>
+<linearGradient id="paint4_linear_436_2" x1="20.1538" y1="16.5365" x2="20.6848" y2="26.027" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22EAAD"/>
+<stop offset="1" stop-color="#7F5BEE"/>
+</linearGradient>
+<linearGradient id="paint5_linear_436_2" x1="16.6826" y1="22.3226" x2="16.8741" y2="28.0284" gradientUnits="userSpaceOnUse">
+<stop stop-color="#22EAAD"/>
+<stop offset="1" stop-color="#7F5BEE"/>
+</linearGradient>
+</defs>
+</svg>

utils/constants.ts

@@ -206,6 +206,7 @@ export const CUSTOM_TOKEN_ICONS: { [key: string]: boolean } = {
   slerf: true,
   sol: true,
   step: true,
+  stepsol: true,
   stsol: true,
   tbtc: true,
   tnsr: true,