Add join twitter task

dappforce · Jul 5, 2024 · 34a5cf0 · 34a5cf0
1 parent 24eb7fa
commit 34a5cf0
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 39 deletions.
diff --git a/src/modules/telegram/TasksPage/ClaimTaskTokensModal.tsx b/src/modules/telegram/TasksPage/ClaimTaskTokensModal.tsx
@@ -1,5 +1,6 @@
 import Diamond from '@/assets/emojis/diamond.png'
 import Telegram from '@/assets/graphics/tasks/telegram.png'
+import TwitterX from '@/assets/graphics/tasks/twitter-x.png'
 import VerticalStepsDots from '@/assets/icons/vertical-steps-dots.svg'
 import WarningIcon from '@/assets/icons/warning.png'
 import Button from '@/components/Button'
@@ -26,23 +27,30 @@ import { FiArrowUpRight } from 'react-icons/fi'
 import { HiXMark } from 'react-icons/hi2'
 import TasksRewardsModal from './TasksRewardsModal'
 
-export type ClaimModalVariant = 'epic-telegram' | null
+export type ClaimModalVariant =
+  | 'JOIN_TELEGRAM_CHANNEL_EpicAppNet'
+  | 'JOIN_TWITTER_EpicAppNet'
+  | null
 
 export const claimTaskErrorStore = new LocalStorage(() => 'claim-tasks-error')
 
 type ModalConfig = {
   image: StaticImageData
+  title: string
   steps: React.ReactNode[]
+  event: string
   tag: string
 }
 
 export const modalConfigByVariant: Record<
   Exclude<ClaimModalVariant, null>,
   ModalConfig
 > = {
-  'epic-telegram': {
+  JOIN_TELEGRAM_CHANNEL_EpicAppNet: {
     image: Telegram,
     tag: 'JOIN_TELEGRAM_CHANNEL_EpicAppNet',
+    title: 'Join Our Telegram Channel',
+    event: 'tasks_telegram_open',
     steps: [
       <div key='join-channel' className='flex flex-col gap-3'>
         <span className='text-sm font-medium leading-none text-slate-200'>
@@ -61,6 +69,35 @@ export const modalConfigByVariant: Record<
       </span>,
     ],
   },
+  JOIN_TWITTER_EpicAppNet: {
+    image: TwitterX,
+    tag: 'JOIN_TWITTER_EpicAppNet',
+    title: 'Join Our Twitter',
+    event: 'tasks_x_open',
+    steps: [
+      <div key='join-channel' className='flex flex-col gap-3'>
+        <span className='text-sm font-medium leading-none text-slate-200'>
+          Follow us on X
+        </span>
+        <LinkText
+          href='https://x.com/EpicAppNet'
+          variant='primary'
+          className='flex items-center gap-2 leading-none'
+        >
+          @EpicAppNet <FiArrowUpRight />
+        </LinkText>
+      </div>,
+      <span key='claim-click' className='text-sm font-medium text-slate-200'>
+        Click the button below to earn your reward.
+      </span>,
+      <span
+        key='rewaed-granted'
+        className='flex-1 text-sm font-medium text-slate-200'
+      >
+        If you&apos;re not subscribed, a penalty of 1M points will be deducted.
+      </span>,
+    ],
+  },
 }
 
 type ClaimTasksTokensModalProps = {
@@ -88,7 +125,7 @@ const ClaimTasksTokensModal = ({
 
   const isOpen = !!modalVariant
 
-  const variant = modalVariant || 'epic-telegram'
+  const variant = modalVariant || 'JOIN_TELEGRAM_CHANNEL_EpicAppNet'
 
   const { image: taskImage, steps, tag } = modalConfigByVariant[variant]
 

diff --git a/src/modules/telegram/TasksPage/index.tsx b/src/modules/telegram/TasksPage/index.tsx
@@ -2,8 +2,6 @@ import Diamond from '@/assets/emojis/diamond.png'
 import Calendar from '@/assets/graphics/tasks/calendar.png'
 import Like from '@/assets/graphics/tasks/like.png'
 import Present from '@/assets/graphics/tasks/present.png'
-import Telegram from '@/assets/graphics/tasks/telegram.png'
-import TwitterX from '@/assets/graphics/tasks/twitter-x.png'
 import Alarm from '@/assets/icons/alarm.svg'
 import Check from '@/assets/icons/check.svg'
 import Card from '@/components/Card'
@@ -187,10 +185,7 @@ function BasicTasks() {
     myAddress || ''
   )
 
-  const data = gamificationTasks?.data
-
-  const { tag } = modalConfigByVariant['epic-telegram']
-  const task = data?.find((task) => task.tag === tag)
+  const data = gamificationTasks?.data || []
 
   return (
     <div className='flex flex-col gap-5'>
@@ -203,32 +198,30 @@ function BasicTasks() {
         </span>
       </div>
       <div className='flex flex-col gap-2'>
-        <TaskCard
-          image={Telegram}
-          onClick={() => {
-            sendEvent('tasks_telegram_open')
+        {data.map((task, index) => {
+          const tag = task.tag as Exclude<ClaimModalVariant, null>
 
-            if (task !== undefined && !task?.claimed) {
-              clearGamificationTasksError(client)
-              setModalVariant('epic-telegram')
-            }
-          }}
-          title='Join Our Telegram Channel'
-          openInNewTab
-          reward={parseInt(task?.rewardPoints ?? '0')}
-          completed={task?.claimed ?? false}
-        />
-        <TaskCard
-          image={TwitterX}
-          onClick={() => {
-            sendEvent('tasks_x_open')
-          }}
-          href='https://x.com/EpicAppNet'
-          openInNewTab
-          title='Join Our Twitter'
-          reward={30000}
-          completed={false}
-        />
+          const { image, title, event } = modalConfigByVariant[tag]
+
+          return (
+            <TaskCard
+              key={index}
+              image={image}
+              onClick={() => {
+                sendEvent(event)
+
+                if (task !== undefined && !task.claimed) {
+                  clearGamificationTasksError(client)
+                  setModalVariant(tag)
+                }
+              }}
+              title={title}
+              openInNewTab
+              reward={parseInt(task.rewardPoints ?? '0')}
+              completed={task.claimed ?? false}
+            />
+          )
+        })}
       </div>
       <ClaimTasksTokensModal
         modalVariant={modalVariant}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -44,11 +44,11 @@ export type AppCommonProps = {
 }
 
 export default function App(props: AppProps<AppCommonProps>) {
-  useEffect(() => {
-    import('eruda').then(({ default: eruda }) => {
-      eruda.init()
-    })
-  })
+  // useEffect(() => {
+  //   import('eruda').then(({ default: eruda }) => {
+  //     eruda.init()
+  //   })
+  // })
 
   return (
     <SessionProvider