fix modal display

components/Layout.tsx

@@ -18,7 +18,6 @@ import useIpAddress from 'hooks/useIpAddress'
 import RestrictedCountryModal from './shared/RestrictedCountryModal'
 import { useRouter } from 'next/router'
 import Modal from './shared/Modal'
-import { ModalProps } from 'types/modal'
 import Button from './shared/Button'
 import Image from 'next/image'
 
@@ -69,20 +68,18 @@ const TermsOfUse = () => {
     ACCEPT_TERMS_KEY,
     '',
   )
-  const [, setYieldFansIntro] = useLocalStorageState(
+  const [yieldFansIntro] = useLocalStorageState(YIELD_FANS_INTRO_KEY, false)
-    YIELD_FANS_INTRO_KEY,
-    false,
-  )
 
   const showTermsOfUse = useMemo(() => {
     return (
-      (!acceptTerms || acceptTerms < termsLastUpdated) && asPath !== '/risks'
+      (!acceptTerms || acceptTerms < termsLastUpdated) &&
+      asPath !== '/risks' &&
+      yieldFansIntro
     )
-  }, [acceptTerms, asPath])
+  }, [acceptTerms, asPath, yieldFansIntro])
 
   const handleClose = () => {
     setAcceptTerms(Date.now())
-    setYieldFansIntro(true)
   }
 
   return (
@@ -95,18 +92,13 @@ const TermsOfUse = () => {
 }
 
 const YieldFansIntro = () => {
-  const [acceptTerms] = useLocalStorageState(ACCEPT_TERMS_KEY, '')
   const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
     YIELD_FANS_INTRO_KEY,
     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">
         <Image
           className="mb-3"

components/modals/TermsOfUseModal.tsx

@@ -5,7 +5,6 @@ import Button from '@components/shared/Button'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import { useState } from 'react'
 import Checkbox from '@components/forms/Checkbox'
-import Image from 'next/image'
 import { useTheme } from 'next-themes'
 
 const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
@@ -23,16 +22,7 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
     >
       <div className="mb-6">
         <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
           className={`bg-x-repeat h-2 w-full ${