60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import useMarketList from '../hooks/useMarketList'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
|
|
const MarketSelect = () => {
|
|
const { spotMarkets } = useMarketList()
|
|
const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
|
|
const selectedMangoGroupMarkets = useMangoStore(
|
|
(s) => s.selectedMangoGroup.markets
|
|
)
|
|
const setMangoStore = useMangoStore((s) => s.set)
|
|
|
|
const handleChange = (mktName) => {
|
|
const newMarket = Object.entries(selectedMangoGroupMarkets).find(
|
|
(m) => m[0] == spotMarkets[mktName]
|
|
)[1]
|
|
setMangoStore((state) => {
|
|
state.selectedMarket.current = newMarket
|
|
state.selectedMarket.name = mktName
|
|
state.selectedMarket.address = spotMarkets[mktName]
|
|
})
|
|
}
|
|
|
|
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>
|
|
{Object.entries(spotMarkets).map(([name, address]) => (
|
|
<div
|
|
className={`border-r border-th-fgd-4 cursor-pointer default-transition flex font-semibold px-4 text-xs hover:text-th-primary
|
|
${
|
|
selectedMarketName === name
|
|
? `text-th-primary`
|
|
: `text-th-fgd-3`
|
|
}
|
|
`}
|
|
onClick={() => handleChange(name)}
|
|
key={address as string}
|
|
>
|
|
{name.split('/')[0]}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mr-10 text-xs">
|
|
<a
|
|
href="https://old.mango.markets"
|
|
className="text-th-fgd-3 default-transition underline hover:text-th-primary hover:no-underline"
|
|
>
|
|
Use V1
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MarketSelect
|