105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { Menu, Transition } from '@headlessui/react'
|
|
import { useRouter } from 'next/router'
|
|
import { Fragment, useCallback, useContext, useEffect } from 'react'
|
|
import { ClusterContext, DEFAULT_CLUSTER } from '../contexts/ClusterContext'
|
|
import Arrow from '../images/icons/down.inline.svg'
|
|
|
|
const ClusterSwitch = ({ light }: { light?: boolean | null }) => {
|
|
const router = useRouter()
|
|
|
|
const { cluster, setCluster } = useContext(ClusterContext)
|
|
const handleChange = useCallback(
|
|
(event: any) => {
|
|
if (event.target.value) {
|
|
router.query.cluster = event.target.value
|
|
setCluster(event.target.value)
|
|
router.push(
|
|
{
|
|
pathname: router.pathname,
|
|
query: router.query,
|
|
},
|
|
undefined,
|
|
{ scroll: false }
|
|
)
|
|
}
|
|
},
|
|
[setCluster, router]
|
|
)
|
|
|
|
useEffect(() => {
|
|
router.query && router.query.cluster
|
|
? setCluster(router.query.cluster)
|
|
: setCluster(DEFAULT_CLUSTER)
|
|
}, [setCluster, router])
|
|
|
|
const clusters = [
|
|
{
|
|
value: 'pythnet',
|
|
name: 'pythnet',
|
|
},
|
|
{
|
|
value: 'mainnet-beta',
|
|
name: 'mainnet-beta',
|
|
},
|
|
{
|
|
value: 'testnet',
|
|
name: 'testnet',
|
|
},
|
|
{
|
|
value: 'devnet',
|
|
name: 'devnet',
|
|
},
|
|
// hide pythtest as its broken
|
|
// {
|
|
// value: 'pythtest',
|
|
// name: 'pythtest',
|
|
// },
|
|
]
|
|
|
|
return (
|
|
<Menu as="div" className="relative z-[2] block w-[180px] text-left">
|
|
{({ open }) => (
|
|
<>
|
|
<Menu.Button
|
|
className={`inline-flex w-full items-center justify-between py-3 px-6 text-sm outline-0 ${
|
|
light ? 'bg-beige2' : 'bg-darkGray2'
|
|
}`}
|
|
>
|
|
<span className="mr-3">{cluster}</span>
|
|
<Arrow className={`${open && 'rotate-180'}`} />
|
|
</Menu.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95"
|
|
>
|
|
<Menu.Items className="absolute right-0 mt-2 w-full origin-top-right">
|
|
{clusters.map((c) => (
|
|
<Menu.Item key={c.name}>
|
|
<button
|
|
className={`block w-full py-3 px-6 text-left text-sm ${
|
|
light
|
|
? 'bg-beige2 hover:bg-beige3'
|
|
: 'bg-darkGray hover:bg-darkGray2'
|
|
} `}
|
|
value={c.value}
|
|
onClick={handleChange}
|
|
>
|
|
{c.name}
|
|
</button>
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.Items>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
export default ClusterSwitch
|