refactor: add ArticleModal

DimensionDev · Jun 12, 2024 · dd88cbf · dd88cbf
1 parent 8d91751
commit dd88cbf
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 170 deletions.
diff --git a/src/components/AcceptCookie.tsx b/src/components/AcceptCookie.tsx
@@ -4,9 +4,10 @@ import { ComponentType, memo, useState } from 'react'
 import { useLocalStorage } from 'react-use'
 
 import CloseCircle from '@/assets/close-circle.svg?react'
+import cookiePolicyContent from '@/assets/cookie-policy.md'
 import Heart from '@/assets/heart.svg?react'
 import { GradientButton } from '@/components/GradientButton.tsx'
-import { cookiePolicyModal } from '@/modals/CookiePolicyModal.tsx'
+import { articleModal } from '@/modals/ArticleModal'
 
 export const AcceptCookie: ComponentType = memo(() => {
   const [isAcceptedCookie, setIsAcceptedCookie] = useLocalStorage('is-accepted-cookie', false)
@@ -41,13 +42,17 @@ export const AcceptCookie: ComponentType = memo(() => {
               fontWeight={700}
               ml={1}
               color="neutrals.2"
-              onClick={() => cookiePolicyModal.show()}
+              onClick={() => {
+                articleModal.show({
+                  title: t`Cookie Policy`,
+                  content: cookiePolicyContent,
+                })
+              }}
             >{t`Learn more`}</Link>
           </Box>
-          <GradientButton
-            leftIcon={<Icon as={Heart} w={4} h={4} />}
-            onClick={() => setIsAcceptedCookie(true)}
-          >{t`Accept cookies`}</GradientButton>
+          <GradientButton leftIcon={<Icon as={Heart} w={4} h={4} />} onClick={() => setIsAcceptedCookie(true)}>
+            {t`Accept cookies`}
+          </GradientButton>
         </Stack>
         <Box as="button" w={6} h={6} onClick={() => setIsClosed(true)}>
           <Icon as={CloseCircle} w={6} h={6} />

diff --git a/src/components/Footer/Terms/index.tsx b/src/components/Footer/Terms/index.tsx
@@ -1,50 +1,47 @@
-import { HStack, Link, ModalBody, ModalCloseButton, ModalHeader, useDisclosure } from '@chakra-ui/react'
+import { HStack, Link } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
-import Markdown from 'markdown-to-jsx'
 import { ComponentType } from 'react'
 
 import cookiePolicyContent from '@/assets/cookie-policy.md'
 import privacyPolicyContent from '@/assets/privacy_policy.md'
 import termsContent from '@/assets/terms_of_use.md'
-import { ModalWithDrawer } from '@/components/ModalWithDrawer'
-import { cookiePolicyModal } from '@/modals/CookiePolicyModal'
-import { markdownBaseStyle } from '@/styles/markdown-base-style.svg.ts'
+import { articleModal } from '@/modals/ArticleModal'
 
 export const Terms: ComponentType = () => {
-  const cookiePolicy = useDisclosure()
-  const termsOfUse = useDisclosure()
-  const privacyPolicy = useDisclosure()
   return (
     <>
-      <ModalWithDrawer isOpen={cookiePolicy.isOpen} onClose={cookiePolicy.onClose}>
-        <ModalCloseButton />
-        <ModalHeader>{t`Cookie Policy`}</ModalHeader>
-        <ModalBody color="neutrals.2" fontSize="12px" fontWeight={700} lineHeight="20px" sx={markdownBaseStyle}>
-          <Markdown children={cookiePolicyContent} />
-        </ModalBody>
-      </ModalWithDrawer>
-      <ModalWithDrawer isOpen={termsOfUse.isOpen} onClose={termsOfUse.onClose}>
-        <ModalCloseButton />
-        <ModalHeader>{t`Terms of Use`}</ModalHeader>
-        <ModalBody color="neutrals.2" fontSize="12px" fontWeight={700} lineHeight="20px" sx={markdownBaseStyle}>
-          <Markdown children={termsContent} />
-        </ModalBody>
-      </ModalWithDrawer>
-      <ModalWithDrawer isOpen={privacyPolicy.isOpen} onClose={privacyPolicy.onClose}>
-        <ModalCloseButton />
-        <ModalHeader>{t`Privacy Policy`}</ModalHeader>
-        <ModalBody color="neutrals.2" fontSize="12px" fontWeight={700} lineHeight="20px" sx={markdownBaseStyle}>
-          <Markdown children={privacyPolicyContent} />
-        </ModalBody>
-      </ModalWithDrawer>
       <HStack spacing={4} color="neutrals.4" fontSize="12px" fontWeight={700} lineHeight="20px">
-        <Link cursor="pointer" onClick={termsOfUse.onOpen}>
+        <Link
+          cursor="pointer"
+          onClick={() => {
+            articleModal.show({
+              title: t`Terms of Use`,
+              content: termsContent,
+            })
+          }}
+        >
           {t`Terms of Use`}
         </Link>
-        <Link cursor="pointer" onClick={privacyPolicy.onOpen}>
+        <Link
+          cursor="pointer"
+          onClick={() => {
+            articleModal.show({
+              title: t`Privacy Policy`,
+              content: privacyPolicyContent,
+            })
+          }}
+        >
           {t`Privacy Policy`}
         </Link>
-        <Link cursor="pointer" onClick={() => cookiePolicyModal.show()}>
+        <Link
+          cursor="pointer"
+          onClick={() => {
+            articleModal.show({
+              title: t`Cookie Policy`,
+              content: cookiePolicyContent,
+            })
+          }}
+        >
           {t`Cookie Policy`}
         </Link>
       </HStack>

diff --git a/src/locales/en.po b/src/locales/en.po
@@ -105,20 +105,12 @@ msgstr ""
 msgid "Connect Wallet"
 msgstr ""
 
-#: src/modals/CookiePolicyModal.tsx
-msgid "Contact Us"
-msgstr ""
-
+#: src/components/AcceptCookie.tsx
 #: src/components/Footer/Terms/index.tsx
 #: src/components/Footer/Terms/index.tsx
-#: src/modals/CookiePolicyModal.tsx
 msgid "Cookie Policy"
 msgstr ""
 
-#: 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 ""
-
 #: src/modals/ResultModal.tsx
 msgid "Done"
 msgstr ""
@@ -147,26 +139,10 @@ msgstr ""
 msgid "FAQs"
 msgstr ""
 
-#: src/modals/CookiePolicyModal.tsx
-msgid "How to Control Cookies"
-msgstr ""
-
-#: src/modals/CookiePolicyModal.tsx
-msgid "If you have any questions or concerns about this Cookie Policy, please contact us at:"
-msgstr ""
-
-#: src/modals/CookiePolicyModal.tsx
-msgid "[email protected]"
-msgstr ""
-
 #: src/components/StakeRequirementBoundary/MaskBalanceBoundary.tsx
 msgid "Insufficient balance"
 msgstr ""
 
-#: src/modals/CookiePolicyModal.tsx
-msgid "Last Updated: 03.10 2024"
-msgstr ""
-
 #: src/components/AcceptCookie.tsx
 msgid "Learn more"
 msgstr ""
@@ -219,10 +195,6 @@ msgstr ""
 msgid "Ongoing"
 msgstr ""
 
-#: 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 ""
-
 #: src/modals/StakeModal.tsx
 msgid "Please connect first"
 msgstr ""
@@ -252,10 +224,6 @@ msgstr ""
 msgid "Ranking updates every 10 min"
 msgstr ""
 
-#: 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 ""
-
 #: src/modals/StakeModal.tsx
 msgid "Share of Pool"
 msgstr ""
@@ -346,18 +314,10 @@ msgstr ""
 msgid "The staking addresses need to pass Go+ security check. Note that staking is not available in some restricted regions. <0>More</0>"
 msgstr ""
 
-#: 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 ""
-
 #: src/components/StakeMaskStatusCard/index.tsx
 msgid "This is the first phase of the MASK staking event. You will be able to retrieve your staked MASK tokens and reward tokens only after the event concludes."
 msgstr ""
 
-#: 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 ""
-
 #: src/routes/index.tsx
 msgid "This website is specifically created for $MASK investors and believers, where you can stake $MASK to earn token rewards!"
 msgstr ""
@@ -395,10 +355,6 @@ msgstr ""
 msgid "Transaction submitted!"
 msgstr ""
 
-#: src/modals/CookiePolicyModal.tsx
-msgid "Types of Cookies We Use"
-msgstr ""
-
 #: src/components/StakeRequirementBoundary/MaskApproveBoundary.tsx
 #: src/components/StakeRequirementBoundary/MaskApproveBoundary.tsx
 msgid "Unlock MASK"
@@ -425,10 +381,6 @@ msgstr ""
 msgid "Unstake Successfully"
 msgstr ""
 
-#: src/modals/CookiePolicyModal.tsx
-msgid "Updates to the Cookie Policy"
-msgstr ""
-
 #: src/modals/VerifyModal.tsx
 msgid "Verify your account"
 msgstr ""
@@ -438,18 +390,10 @@ msgstr ""
 msgid "Waiting for transaction confirmation"
 msgstr ""
 
-#: 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/modals/CookiePolicyModal.tsx
-msgid "What Are Cookies?"
-msgstr ""
-
 #: src/components/ConnectButton.tsx
 msgid "Wrong network"
 msgstr ""
@@ -458,10 +402,6 @@ msgstr ""
 msgid "You can claim after the event ends."
 msgstr ""
 
-#: 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/components/UserStatus/RewardCard.tsx
 msgid "You have already claimed"
 msgstr ""

diff --git a/src/modals/ArticleModal.tsx b/src/modals/ArticleModal.tsx
@@ -0,0 +1,33 @@
+import { Box, ModalProps } from '@chakra-ui/react'
+import Markdown from 'markdown-to-jsx'
+
+import { BaseModal, BaseModalProps } from '@/modals/BaseModal'
+import { createUITaskManager } from '@/modals/UITaskManager'
+import { markdownBaseStyle } from '@/styles/markdown-base-style.svg.ts'
+
+interface Props extends ModalProps {
+  title?: BaseModalProps['title']
+  /** markdown content */
+  content: string
+}
+export function ArticleModal({ title, content, ...props }: Props) {
+  return (
+    <BaseModal title={title} width={572} {...props}>
+      <Box
+        color="neutrals.2"
+        fontSize="12px"
+        maxH={600}
+        overflow="auto"
+        style={{ scrollbarWidth: 'none' }}
+        fontWeight={700}
+        lineHeight="20px"
+        sx={markdownBaseStyle}
+      >
+        <Markdown>{content}</Markdown>
+      </Box>
+    </BaseModal>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const { ui: articleUi, controller: articleModal } = createUITaskManager(ArticleModal)
diff --git a/src/modals/CookiePolicyModal.tsx b/src/modals/CookiePolicyModal.tsx
diff --git a/src/modals/index.tsx b/src/modals/index.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 
-import { cookiePolicyUi } from '@/modals/CookiePolicyModal.tsx'
+import { articleUi } from '@/modals/ArticleModal.tsx'
 import { profileModalUi } from '@/modals/ProfileModal'
 import { resultModalUi } from '@/modals/ResultModal.tsx'
 import { stakeModalUi } from '@/modals/StakeModal'
@@ -10,10 +10,10 @@ export const Modals = memo(function Modals() {
   return (
     <>
       {stakeModalUi}
-      {cookiePolicyUi}
       {profileModalUi}
       {resultModalUi}
       {verifyModalUi}
+      {articleUi}
     </>
   )
 })