Merge branch 'market-type-switch' into main

components/MarketHeader.tsx

@@ -82,9 +82,11 @@ const MarketHeader = () => {
               className={`mr-2.5`}
             />
 
-            <div className="font-semibold pr-1.5 text-xl">{baseSymbol}</div>
-            <span className="text-th-fgd-4 text-xl">/</span>
-            <div className="font-semibold pl-1.5 text-xl">
+            <div className="font-semibold pr-0.5 text-xl">{baseSymbol}</div>
+            <span className="text-th-fgd-4 text-xl">
+              {selectedMarketName.includes('PERP') ? '–' : '/'}
+            </span>
+            <div className="font-semibold pl-0.5 text-xl">
               {selectedMarketName.split(/\/|-/)[1]}
             </div>
           </div>

components/MarketSelect.tsx

@@ -1,8 +1,29 @@
+import { useState } from 'react'
+import styled from '@emotion/styled'
+import { RadioGroup } from '@headlessui/react'
+import useLocalStorageState from '../hooks/useLocalStorageState'
 import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
 import useMangoStore from '../stores/useMangoStore'
 import { getMarketByBaseSymbolAndKind } from '@blockworks-foundation/mango-client'
 
+const StyledMarketTypeToggleWrapper = styled.div`
+  background: rgba(255, 255, 255, 0.12);
+`
+
+const StyledArrow = styled.div`
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid rgba(255, 255, 255, 0.12);
+`
+
 const MarketSelect = () => {
+  // const [lastViewedMarket, setLastViewedMarket] = useLocalStorageState(
+  //   'lastViewedMarket',
+  //   { baseSymbol: 'BTC', kind: 'spot' }
+  // )
+  const [marketType, setMarketType] = useState('spot')
   const groupConfig = useMangoGroupConfig()
   const selectedMarket = useMangoStore((s) => s.selectedMarket.config)
   const setMangoStore = useMangoStore((s) => s.set)
@@ -13,41 +34,61 @@ const MarketSelect = () => {
       state.selectedMarket.current = null
       state.selectedMarket.config = newMarket
     })
+    // setLastViewedMarket({ baseSymbol: symbol, kind: kind })
   }
 
-  return (
-    <div className="bg-th-bkg-3 py-2">
-      <div className="flex justify-between items-center">
-        <div className="flex items-center px-4 md:px-10">
-          <div className="border-r border-th-fgd-4 pr-4 text-th-fgd-4 text-xs">
-            MARKETS
-          </div>
-          {groupConfig.perpMarkets.map((s) => (
-            <div
-              className={`border-r border-th-fgd-4 cursor-pointer default-transition flex font-semibold px-4 text-xs hover:text-th-primary
-              ${
-                selectedMarket.name === s.name
-                  ? `text-th-primary`
-                  : `text-th-fgd-3`
-              }
-            `}
-              onClick={() => handleChange(s.baseSymbol, 'perp')}
-              key={s.publicKey.toBase58()}
-            >
-              {s.name}
-            </div>
-          ))}
+  const markets =
+    marketType === 'perp' ? groupConfig.perpMarkets : groupConfig.spotMarkets
 
-          {groupConfig.spotMarkets.map((s) => (
+  return (
+    <div className="bg-th-bkg-3 flex h-10">
+      <StyledMarketTypeToggleWrapper className="flex items-center pl-6 md:pl-9 pr-1">
+        <RadioGroup
+          value={marketType}
+          onChange={(t) => setMarketType(t)}
+          className="flex font-bold rounded-md text-xs w-30"
+        >
+          <RadioGroup.Option value="spot" className="flex-1 focus:outline-none">
+            {({ checked }) => (
+              <button
+                className={`${
+                  checked
+                    ? 'bg-th-primary text-th-bkg-1'
+                    : 'bg-th-bkg-2 hover:bg-th-bkg-1'
+                } rounded-r-none text-th-fgd-3 text-center py-1 px-2.5 h-full w-full focus:outline-none`}
+              >
+                Spot
+              </button>
+            )}
+          </RadioGroup.Option>
+          <RadioGroup.Option value="perp" className="flex-1 focus:outline-none">
+            {({ checked }) => (
+              <button
+                className={`${
+                  checked
+                    ? 'bg-th-primary text-th-bkg-1'
+                    : 'bg-th-bkg-2 hover:bg-th-bkg-1'
+                } rounded-l-none text-th-fgd-3 text-center py-1 px-2.5 h-full w-full focus:outline-none`}
+              >
+                Perp
+              </button>
+            )}
+          </RadioGroup.Option>
+        </RadioGroup>
+      </StyledMarketTypeToggleWrapper>
+      <StyledArrow />
+      <div className="flex items-center justify-between w-full">
+        <div className="flex items-center">
+          {markets.map((s) => (
             <div
-              className={`border-r border-th-fgd-4 cursor-pointer default-transition flex font-semibold px-4 text-xs hover:text-th-primary
+              className={`cursor-pointer default-transition flex font-bold px-4 text-xs hover:text-th-primary
               ${
                 selectedMarket.name === s.name
                   ? `text-th-primary`
                   : `text-th-fgd-3`
               }
             `}
-              onClick={() => handleChange(s.baseSymbol, 'spot')}
+              onClick={() => handleChange(s.baseSymbol, marketType)}
               key={s.publicKey.toBase58()}
             >
               {s.name}