mango-ui-v3/components/SerumCompModal.tsx

71 lines
2.2 KiB
TypeScript

import React from 'react'
import { CheckCircleIcon, XIcon } from '@heroicons/react/solid'
import Modal from './Modal'
import Button from './Button'
import useLocalStorageState from '../hooks/useLocalStorageState'
import { useRouter } from 'next/router'
export const SEEN_SERUM_COMP_KEY = 'seenSerumCompInfo'
const SerumCompModal = ({
isOpen,
onClose,
}: {
isOpen: boolean
onClose?: (x) => void
}) => {
const [, setSeenSerumCompInfo] = useLocalStorageState(SEEN_SERUM_COMP_KEY)
const router = useRouter()
const handleFindOutMore = () => {
setSeenSerumCompInfo(true)
router.push('/win-srm')
}
return (
<Modal isOpen={isOpen} onClose={onClose}>
<Modal.Header>
<div className="flex flex-col items-center">
<div className="flex items-center justify-center space-x-4">
<img
className={`h-10 w-auto`}
src="/assets/icons/srm.svg"
alt="next"
/>
<XIcon className="h-5 w-5 text-th-primary" />
<img
className={`h-12 w-auto`}
src="/assets/icons/logo.svg"
alt="next"
/>
</div>
</div>
</Modal.Header>
<h1 className="relative m-auto mb-2 w-max">Win a Share in 400k SRM</h1>
<p className="text-center">
40k SRM are up for grabs every week until 12 Sep
</p>
<div className="mt-4 space-y-2 border-t border-th-bkg-4 pt-4">
<div className="flex items-center text-th-fgd-1">
<CheckCircleIcon className="mr-1.5 h-6 w-6 flex-shrink-0 text-th-green" />
<p className="mb-0 text-th-fgd-1">
40k SRM distributed proportionally to everyone who contributes at
least 1% of total spot volume for both maker and taker
</p>
</div>
{/* <div className="flex items-center text-th-fgd-1">
<CheckCircleIcon className="mr-1.5 h-6 w-6 flex-shrink-0 text-th-green" />
<p className="mb-0 text-th-fgd-1">
10k SRM for the top 10 traders by spot PnL
</p>
</div> */}
</div>
<Button className="mt-6 w-full" onClick={() => handleFindOutMore()}>
Find Out More
</Button>
</Modal>
)
}
export default SerumCompModal