69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import classNames from 'classnames'
|
|
import { useCallback } from 'react'
|
|
|
|
import FullOverlayContent from 'components/FullOverlayContent'
|
|
import { Check } from 'components/Icons'
|
|
import Text from 'components/Text'
|
|
import WalletSelect from 'components/Wallet/WalletSelect'
|
|
import { LocalStorageKeys } from 'constants/localStorageKeys'
|
|
import useLocalStorage from 'hooks/useLocalStorage'
|
|
import useStore from 'store'
|
|
|
|
interface BenefitsProps {
|
|
benefits: string[]
|
|
}
|
|
|
|
function Benefits({ benefits }: BenefitsProps) {
|
|
return (
|
|
<ul className='w-full px-0 list-none'>
|
|
{benefits.map((benefit, index) => (
|
|
<li className='relative flex items-center w-full h-6 px-0 pl-8 mb-6' key={index}>
|
|
<div
|
|
className={classNames(
|
|
'absolute left-0 top-0 isolate h-6 w-6 rounded-full bg-white/10',
|
|
'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-full before:p-[1px] before:border-glas',
|
|
)}
|
|
>
|
|
<Check className='p-1.5' />
|
|
</div>
|
|
<Text size='sm' className=' text-white/60'>
|
|
{benefit}
|
|
</Text>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default function TermsOfService() {
|
|
const [_, setHasAgreedToTerms] = useLocalStorage(LocalStorageKeys.TERMS_OF_SERVICE, false)
|
|
|
|
const handleAgreeTermsOfService = useCallback(() => {
|
|
setHasAgreedToTerms(true)
|
|
useStore.setState({ focusComponent: { component: <WalletSelect /> } })
|
|
}, [setHasAgreedToTerms])
|
|
|
|
return (
|
|
<FullOverlayContent
|
|
title='Master the Red Planet'
|
|
copy='Mars offers the easiest way to margin trade, lend, borrow and yield farm with leverage any whitelisted token'
|
|
button={{
|
|
className: 'w-full mt-4',
|
|
text: 'Agree & continue',
|
|
color: 'tertiary',
|
|
onClick: handleAgreeTermsOfService,
|
|
size: 'lg',
|
|
}}
|
|
docs='terms'
|
|
>
|
|
<Benefits
|
|
benefits={[
|
|
'Swap tokens with margin across any whitelisted pair',
|
|
'Amplify your LP rewards with leveraged yield farming',
|
|
'Earn interest on deposited tokens',
|
|
]}
|
|
/>
|
|
</FullOverlayContent>
|
|
)
|
|
}
|