filter by spot market base

apis/coingecko.ts

@@ -1,7 +1,7 @@
 export const fetchChartData = async (
   baseTokenId: string | undefined,
   quoteTokenId: string | undefined,
-  daysToShow: number
+  daysToShow: string
 ) => {
   console.log('fetching chart:', baseTokenId, quoteTokenId)
 

components/account/AccountChart.tsx

@@ -26,13 +26,13 @@ const AccountChart = ({
 }) => {
   const { t } = useTranslation('common')
   const actions = mangoStore((s) => s.actions)
-  const [daysToShow, setDaysToShow] = useState<number>(1)
+  const [daysToShow, setDaysToShow] = useState<string>('1')
   const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading)
 
-  const handleDaysToShow = async (days: number) => {
+  const handleDaysToShow = async (days: string) => {
     await actions.fetchAccountPerformance(
       mangoAccount.publicKey.toString(),
-      days
+      parseInt(days)
     )
     setDaysToShow(days)
   }

components/shared/ChartRangeButtons.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react'
 
 interface ChartRangeButtonsProps {
-  activeValue: number
+  activeValue: string
   className?: string
-  onChange: (x: number) => void
+  onChange: (x: string) => void
-  values: Array<number>
+  values: Array<string>
   names?: Array<string>
 }
 
@@ -20,7 +20,7 @@ const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
       <div className="relative flex">
         {activeValue && values.includes(activeValue) ? (
           <div
-            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-2`}
+            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
             style={{
               transform: `translateX(${
                 values.findIndex((v) => v === activeValue) * 100

components/shared/DetailedAreaChart.tsx

@@ -30,11 +30,11 @@ dayjs.extend(relativeTime)
 
 interface DetailedAreaChartProps {
   data: any[]
-  daysToShow: number
+  daysToShow: string
   hideChange?: boolean
   hideChart?: () => void
   loading?: boolean
-  setDaysToShow: (x: number) => void
+  setDaysToShow: (x: string) => void
   tickFormat?: (x: any) => string
   title?: string
   xKey: string
@@ -51,7 +51,7 @@ export const formatDateAxis = (date: string, days: number) => {
 
 const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
   data,
-  daysToShow = 1,
+  daysToShow = '1',
   hideChange,
   hideChart,
   loading,
@@ -183,7 +183,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                 <ChartRangeButtons
                   activeValue={daysToShow}
                   names={['24H', '7D', '30D']}
-                  values={[1, 7, 30]}
+                  values={['1', '7', '30']}
                   onChange={(v) => setDaysToShow(v)}
                 />
               </div>
@@ -252,7 +252,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
                         fontSize: 10,
                       }}
                       tickLine={false}
-                      tickFormatter={(d) => formatDateAxis(d, daysToShow)}
+                      tickFormatter={(d) =>
+                        formatDateAxis(d, parseInt(daysToShow))
+                      }
                     />
                     <YAxis
                       axisLine={false}

components/swap/SwapTokenChart.tsx

@@ -76,7 +76,7 @@ const SwapTokenChart = () => {
   const [baseTokenId, setBaseTokenId] = useState(inputCoingeckoId)
   const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId)
   const [mouseData, setMouseData] = useState<any>(null)
-  const [daysToShow, setDaysToShow] = useState(1)
+  const [daysToShow, setDaysToShow] = useState('1')
   const { theme } = useTheme()
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
@@ -245,7 +245,7 @@ const SwapTokenChart = () => {
               <ChartRangeButtons
                 activeValue={daysToShow}
                 names={['24H', '7D', '30D']}
-                values={[1, 7, 30]}
+                values={['1', '7', '30']}
                 onChange={(v) => setDaysToShow(v)}
               />
             </div>

components/trade/AdvancedMarketHeader.tsx

@@ -1,4 +1,5 @@
 import Change from '@components/shared/Change'
+import ChartRangeButtons from '@components/shared/ChartRangeButtons'
 import FavoriteMarketButton from '@components/shared/FavoriteMarketButton'
 import TabUnderline from '@components/shared/TabUnderline'
 import { Popover } from '@headlessui/react'
@@ -19,6 +20,21 @@ const MarketSelectDropdown = () => {
   const serumMarkets = mangoStore((s) => s.serumMarkets)
   const perpMarkets = mangoStore((s) => s.perpMarkets)
   const [activeTab, setActiveTab] = useState('perp')
+  const [spotBaseFilter, setSpotBaseFilter] = useState('All')
+
+  const spotBaseTokens: string[] = useMemo(() => {
+    if (serumMarkets.length) {
+      const baseTokens: string[] = []
+      serumMarkets.map((m) => {
+        const base = m.name.split('/')[1]
+        if (!baseTokens.includes(base)) {
+          baseTokens.push(base)
+        }
+      })
+      return baseTokens
+    }
+    return []
+  }, [serumMarkets])
 
   return (
     <Popover>
@@ -47,40 +63,57 @@ const MarketSelectDropdown = () => {
               small
               values={['perp', 'spot']}
             />
-            {activeTab === 'spot'
+            {activeTab === 'spot' ? (
-              ? serumMarkets?.length
+              serumMarkets?.length ? (
-                ? serumMarkets.map((m) => {
+                <>
-                    return (
+                  <div className="mb-2 w-56 px-4">
-                      <div
+                    <ChartRangeButtons
-                        className="flex items-center justify-between py-2 px-4"
+                      activeValue={spotBaseFilter}
-                        key={m.publicKey.toString()}
+                      values={['All', ...spotBaseTokens]}
-                      >
+                      onChange={(v) => setSpotBaseFilter(v)}
-                        <Link
+                    />
-                          href={{
+                  </div>
-                            pathname: '/trade',
+                  {serumMarkets
-                            query: { name: m.name },
+                    .filter((mkt) => {
-                          }}
+                      if (spotBaseFilter === 'All') {
-                          shallow={true}
+                        return mkt
+                      } else {
+                        return mkt.name.split('/')[1] === spotBaseFilter
+                      }
+                    })
+                    .map((m) => {
+                      return (
+                        <div
+                          className="flex items-center justify-between py-2 px-4"
+                          key={m.publicKey.toString()}
                         >
-                          <div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
+                          <Link
-                            <MarketLogos market={m} />
+                            href={{
-                            <span
+                              pathname: '/trade',
-                              className={
+                              query: { name: m.name },
-                                m.name === selectedMarket?.name
+                            }}
-                                  ? 'text-th-primary'
+                            shallow={true}
-                                  : ''
+                          >
-                              }
+                            <div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
-                            >
+                              <MarketLogos market={m} />
-                              {m.name}
+                              <span
-                            </span>
+                                className={
-                          </div>
+                                  m.name === selectedMarket?.name
-                        </Link>
+                                    ? 'text-th-primary'
-                        <FavoriteMarketButton market={m} />
+                                    : ''
-                      </div>
+                                }
-                    )
+                              >
-                  })
+                                {m.name}
-                : null
+                              </span>
-              : null}
+                            </div>
+                          </Link>
+                          <FavoriteMarketButton market={m} />
+                        </div>
+                      )
+                    })}
+                </>
+              ) : null
+            ) : null}
             {activeTab === 'perp'
               ? perpMarkets?.length
                 ? perpMarkets.map((m) => {

pages/token/[token].tsx

@@ -86,7 +86,7 @@ const Token: NextPage = () => {
   const { isLoading: loadingPrices, data: coingeckoPrices } = useCoingecko()
   const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)
   const [loadChartData, setLoadChartData] = useState(true)
-  const [daysToShow, setDaysToShow] = useState<number>(1)
+  const [daysToShow, setDaysToShow] = useState<string>('1')
   const [animationSettings] = useLocalStorageState(
     ANIMATION_SETTINGS_KEY,
     INITIAL_ANIMATION_SETTINGS
@@ -177,11 +177,11 @@ const Token: NextPage = () => {
   } = coingeckoData ? coingeckoData.market_data : DEFAULT_COINGECKO_VALUES
 
   const loadingChart = useMemo(() => {
-    return daysToShow == 1 ? loadingPrices : loadChartData
+    return daysToShow == '1' ? loadingPrices : loadChartData
   }, [loadChartData, loadingPrices])
 
   const coingeckoTokenPrices = useMemo(() => {
-    if (daysToShow === 1 && coingeckoPrices.length && bank) {
+    if (daysToShow === '1' && coingeckoPrices.length && bank) {
       const tokenPriceData = coingeckoPrices.find(
         (asset) => asset.symbol === bank.name
       )
@@ -197,8 +197,8 @@ const Token: NextPage = () => {
     return []
   }, [coingeckoPrices, bank, daysToShow, chartData, loadingChart])
 
-  const handleDaysToShow = async (days: number) => {
+  const handleDaysToShow = async (days: string) => {
-    if (days !== 1) {
+    if (days !== '1') {
       try {
         const response = await fetch(
           `https://api.coingecko.com/api/v3/coins/${coingeckoId}/market_chart?vs_currency=usd&days=${days}`
@@ -406,12 +406,12 @@ const Token: NextPage = () => {
                       <ChartRangeButtons
                         activeValue={daysToShow}
                         names={['24H', '7D', '30D']}
-                        values={[1, 7, 30]}
+                        values={['1', '7', '30']}
                         onChange={(v) => handleDaysToShow(v)}
                       />
                     </div>
                     <PriceChart
-                      daysToShow={daysToShow}
+                      daysToShow={parseInt(daysToShow)}
                       prices={coingeckoTokenPrices}
                     />
                   </>