feat: accept cookie (#18)

* fix: fix nav bar merge errors

* style: format the ci files

* perf: replace blur with images to optimize performance and eliminate differences between different browsers

* feat: add footer content

* feat: add terms dialog and drawer

* fix: fix merge errors

* feat: disable click on decorative images

* feat: adjust terms

* chore: lingui extract

* chore: prettier

* fix: fix i18n

* chore: cspell words

* chore: cspell words

* chore: prettier

* chore: cspell words

* feat: add tooltip

* feat: add accept cookie component

* feat: adjust stake modal style

* chore: lingui extract

---------

Co-authored-by: LeifXu <[email protected]>

src/components/AcceptCookie.tsx

@@ -0,0 +1,46 @@
+import { FC, memo, useState } from 'react'
+import { Box, Fade, HStack, Icon, Link } from '@chakra-ui/react'
+import CloseCircle from '../assets/close-circle.svg?react'
+import Heart from '../assets/heart.svg?react'
+import { t } from '@lingui/macro'
+import { GradientButton } from './GradientButton.tsx'
+import { cookiePolicyModal } from '../modals'
+import { useLocalStorage } from 'react-use'
+
+export const AcceptCookie: FC = memo(() => {
+  const [isAcceptedCookie, setIsAcceptedCookie] = useLocalStorage('is-accepted-cookie', false)
+  const [isClosed, setIsClosed] = useState(false)
+
+  return (
+    <Fade in={!isAcceptedCookie && !isClosed}>
+      <HStack
+        color="neutrals.4"
+        fontSize="12px"
+        fontWeight={400}
+        lineHeight="150%"
+        pos="fixed"
+        bottom="40px"
+        right="70px"
+      >
+        <HStack bg="neutrals.8" rounded="100px" py={2} px={4} spacing={6}>
+          <Box>
+            {t`We use our own cookies.`}
+            <Link
+              fontWeight={700}
+              ml={1}
+              color="neutrals.2"
+              onClick={() => cookiePolicyModal.show()}
+            >{t`Learn more`}</Link>
+          </Box>
+          <GradientButton
+            leftIcon={<Icon as={Heart} w={4} h={4} />}
+            onClick={() => setIsAcceptedCookie(true)}
+          >{t`Accept cookies`}</GradientButton>
+        </HStack>
+        <Box as="button" w={6} h={6} onClick={() => setIsClosed(true)}>
+          <Icon as={CloseCircle} w={6} h={6} />
+        </Box>
+      </HStack>
+    </Fade>
+  )
+})

src/components/Footer/Terms/index.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { HStack, Link, ModalBody, ModalCloseButton, ModalHeader, useDisclosure } from '@chakra-ui/react'
 import { ModalWithDrawer } from '../../ModalWithDrawer'
 import { t } from '@lingui/macro'
+import { cookiePolicyModal } from '../../../modals'
 
 const CookiePolicyContent = () => (
   <>
@@ -189,7 +190,7 @@ export const Terms: FC = () => {
         <Link cursor="pointer" onClick={privacyPolicy.onOpen}>
           Privacy Policy
         </Link>
-        <Link cursor="pointer" onClick={cookiePolicy.onOpen}>
+        <Link cursor="pointer" onClick={() => cookiePolicyModal.show()}>
           Cookie Policy
         </Link>
       </HStack>

src/components/GradientButton.tsx

@@ -1,5 +1,15 @@
 import { Button, ButtonProps } from '@chakra-ui/react'
 
 export function GradientButton(props: ButtonProps) {
-  return <Button bg="gradient.purple" {...props} />
+  return (
+    <Button
+      bg="gradient.purple"
+      color="neutrals.8"
+      _hover={{ transform: 'scale(1.05)' }}
+      _active={{ transform: 'scale(0.95)' }}
+      fontSize="14px"
+      rounded="100px"
+      {...props}
+    />
+  )
 }

src/locales/en.po

@@ -21,6 +21,10 @@ msgstr ""
 msgid "About"
 msgstr ""
 
+#: src/components/AcceptCookie.tsx
+msgid "Accept cookies"
+msgstr ""
+
 #: src/components/StakeMaskStatusCard/index.tsx
 #: src/modals/StakeModal.tsx
 msgid "APR"
@@ -44,14 +48,17 @@ msgid "Connect Wallet"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Contact Us"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Cookie Policy"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences."
 msgstr ""
 
@@ -65,14 +72,17 @@ msgid "FAQs"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "How to Control Cookies"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "If you have any questions or concerns about this Cookie Policy, please contact us at:"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "[email protected]"
 msgstr ""
 
@@ -111,9 +121,14 @@ msgid ""
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Last Updated: 03.10 2024"
 msgstr ""
 
+#: src/components/AcceptCookie.tsx
+msgid "Learn more"
+msgstr ""
+
 #: src/modals/StakeModal.tsx
 msgid "Link 𝕏"
 msgstr ""
@@ -123,6 +138,7 @@ msgid "MAX"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website."
 msgstr ""
 
@@ -139,6 +155,7 @@ msgid "Privacy Policy"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart."
 msgstr ""
 
@@ -218,6 +235,7 @@ msgid "The staking addresses need to pass Go+ security check. Note that staking
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests."
 msgstr ""
 
@@ -226,6 +244,7 @@ msgid "This is the first phase of the MASK staking event. You will be able to re
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "This website (hereinafter referred to as \"the Site\") uses cookies. By using the Site, you consent to the use of cookies as described in this Cookie Policy."
 msgstr ""
 
@@ -242,6 +261,7 @@ msgid "Total Rewards"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Types of Cookies We Use"
 msgstr ""
 
@@ -250,18 +270,26 @@ msgid "Unlock MASK Time"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "Updates to the Cookie Policy"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "We reserve the right to update this Cookie Policy at any time. The updated Cookie Policy will be posted on this page and will become effective immediately. We recommend checking back regularly for updates."
 msgstr ""
 
+#: src/components/AcceptCookie.tsx
+msgid "We use our own cookies."
+msgstr ""
+
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "What Are Cookies?"
 msgstr ""
 
 #: src/components/Footer/Terms/index.tsx
+#: src/modals/CookiePolicyModal.tsx
 msgid "You can manage and delete cookies through your browser settings. Please note that disabling cookies may affect your access to and experience on the Site."
 msgstr ""
 

src/modals/CookiePolicyModal.tsx

@@ -0,0 +1,63 @@
+import { ModalWithDrawer } from '../components/ModalWithDrawer'
+import { ModalBody, ModalCloseButton, ModalHeader } from '@chakra-ui/react'
+import { t } from '@lingui/macro'
+
+const CookiePolicyContent = () => (
+  <>
+    <p>{t`This website (hereinafter referred to as "the Site") uses cookies. By using the Site, you consent to the use of cookies as described in this Cookie Policy.`}</p>
+    <p>
+      {t`What Are Cookies?`}
+      <br />
+      {t`Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.`}
+    </p>
+    <p>
+      {t`Types of Cookies We Use`}
+      <ul>
+        <li>{t`Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.`}</li>
+        <li>{t`Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.`}</li>
+        <li>{t`Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.`}</li>
+      </ul>
+    </p>
+    <p>
+      {t`How to Control Cookies`}
+      <br />
+      {t`You can manage and delete cookies through your browser settings. Please note that disabling cookies may affect your access to and experience on the Site.`}
+      {t`Updates to the Cookie Policy`}
+      {t`We reserve the right to update this Cookie Policy at any time. The updated Cookie Policy will be posted on this page and will become effective immediately. We recommend checking back regularly for updates.`}
+    </p>
+    <p>
+      {t`Contact Us`}
+      <br />
+      {t`If you have any questions or concerns about this Cookie Policy, please contact us at:`}
+      <br />
+      {t`[email protected]`}
+      <br />
+      {t`Last Updated: 03.10 2024`}
+    </p>
+  </>
+)
+
+export function CookiePolicyModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  return (
+    <ModalWithDrawer isOpen={isOpen} onClose={onClose}>
+      <ModalCloseButton />
+      <ModalHeader>{t`Cookie Policy`}</ModalHeader>
+      <ModalBody
+        color="neutrals.2"
+        fontSize="12px"
+        fontWeight={700}
+        lineHeight="20px"
+        sx={{
+          p: {
+            mb: 6,
+          },
+          ul: {
+            pl: 6,
+          },
+        }}
+      >
+        <CookiePolicyContent />
+      </ModalBody>
+    </ModalWithDrawer>
+  )
+}