fix modal display
This commit is contained in:
parent
e331c4c805
commit
1a8a11084e
|
@ -18,7 +18,6 @@ import useIpAddress from 'hooks/useIpAddress'
|
||||||
import RestrictedCountryModal from './shared/RestrictedCountryModal'
|
import RestrictedCountryModal from './shared/RestrictedCountryModal'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Modal from './shared/Modal'
|
import Modal from './shared/Modal'
|
||||||
import { ModalProps } from 'types/modal'
|
|
||||||
import Button from './shared/Button'
|
import Button from './shared/Button'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
@ -69,20 +68,18 @@ const TermsOfUse = () => {
|
||||||
ACCEPT_TERMS_KEY,
|
ACCEPT_TERMS_KEY,
|
||||||
'',
|
'',
|
||||||
)
|
)
|
||||||
const [, setYieldFansIntro] = useLocalStorageState(
|
const [yieldFansIntro] = useLocalStorageState(YIELD_FANS_INTRO_KEY, false)
|
||||||
YIELD_FANS_INTRO_KEY,
|
|
||||||
false,
|
|
||||||
)
|
|
||||||
|
|
||||||
const showTermsOfUse = useMemo(() => {
|
const showTermsOfUse = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
(!acceptTerms || acceptTerms < termsLastUpdated) && asPath !== '/risks'
|
(!acceptTerms || acceptTerms < termsLastUpdated) &&
|
||||||
|
asPath !== '/risks' &&
|
||||||
|
yieldFansIntro
|
||||||
)
|
)
|
||||||
}, [acceptTerms, asPath])
|
}, [acceptTerms, asPath, yieldFansIntro])
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setAcceptTerms(Date.now())
|
setAcceptTerms(Date.now())
|
||||||
setYieldFansIntro(true)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -95,18 +92,13 @@ const TermsOfUse = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const YieldFansIntro = () => {
|
const YieldFansIntro = () => {
|
||||||
const [acceptTerms] = useLocalStorageState(ACCEPT_TERMS_KEY, '')
|
|
||||||
const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
|
const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
|
||||||
YIELD_FANS_INTRO_KEY,
|
YIELD_FANS_INTRO_KEY,
|
||||||
false,
|
false,
|
||||||
)
|
)
|
||||||
|
|
||||||
const showModal = useMemo(() => {
|
return !yieldFansIntro ? (
|
||||||
return acceptTerms && !yieldFansIntro
|
<Modal isOpen={!yieldFansIntro} onClose={() => setYieldFansIntro(true)}>
|
||||||
}, [acceptTerms, yieldFansIntro])
|
|
||||||
|
|
||||||
return showModal ? (
|
|
||||||
<Modal isOpen={showModal} onClose={() => setYieldFansIntro(true)}>
|
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<Image
|
<Image
|
||||||
className="mb-3"
|
className="mb-3"
|
||||||
|
|
|
@ -5,7 +5,6 @@ import Button from '@components/shared/Button'
|
||||||
import { CheckCircleIcon } from '@heroicons/react/20/solid'
|
import { CheckCircleIcon } from '@heroicons/react/20/solid'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import Checkbox from '@components/forms/Checkbox'
|
import Checkbox from '@components/forms/Checkbox'
|
||||||
import Image from 'next/image'
|
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
|
|
||||||
const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
||||||
|
@ -23,16 +22,7 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
||||||
>
|
>
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<div className="flex flex-col items-center pb-4">
|
<div className="flex flex-col items-center pb-4">
|
||||||
<Image
|
<h2 className="mt-2 text-xl">Accept terms</h2>
|
||||||
src="/logos/yield-fans.png"
|
|
||||||
alt="Logo"
|
|
||||||
height={48}
|
|
||||||
width={48}
|
|
||||||
/>
|
|
||||||
<h2 className="mt-2 text-xl">Welcome yield fan</h2>
|
|
||||||
<p className="text-center">
|
|
||||||
Earn leveraged yield on your JLP and liquid staking tokens.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`bg-x-repeat h-2 w-full ${
|
className={`bg-x-repeat h-2 w-full ${
|
||||||
|
|
Loading…
Reference in New Issue