feat: [IXSPD1-2332] enable user claim reward for joining line campaign

.env.line-next

@@ -22,3 +22,5 @@ REACT_APP_BRIDGE_URL=https://staging-bridge.ixswap.io
 REACT_APP_BRIDGE_ADMIN_URL=https://staging-bridge-admin.ixswap.io
 REACT_APP_DEFAULT_CHAIN_ID=8453
 REACT_APP_LIFF_MODE=mainnet
+REACT_APP_LINE_REWARD_API_URL=https://api.line.ixswap.io
+REACT_APP_LINE_REWARD_API_KEY=91b7c8d5-cf31-49cb-9bde-62363435394d

src/components/Rewards/TaskSuccessModal.tsx

@@ -26,7 +26,7 @@ const TaskSuccessModal = ({ show, onClose }: Props) => {
 
   const handleClaimRewards = async () => {
     if (!account || !rewardsData.points || !rewardsData.action) return
-    
+
     await mutatePoint.mutateAsync({
       account,
       points: rewardsData.points,
@@ -35,7 +35,7 @@ const TaskSuccessModal = ({ show, onClose }: Props) => {
 
     onClose()
 
-    toast.success("You have successfully claimed the point reward.", {
+    toast.success('You have successfully claimed the point reward.', {
       transition: Slide,
     })
   }
@@ -44,18 +44,24 @@ const TaskSuccessModal = ({ show, onClose }: Props) => {
     <IssuanceDialog show={show} onClose={onClose} padding="0" width="475px">
       <Wrapper>
         <LeftConfettiSvg className="left" />
-        <Stack direction='column' alignItems='center' gap={4} p={2}>
+        <Stack direction="column" alignItems="center" gap={4} p={2}>
           <OuterCircle>
             <InnerCircle>
               <Check color={theme.launchpad.colors.primary} size="20" />
             </InnerCircle>
           </OuterCircle>
           <Title>Task Completed</Title>
           <Box style={{ textAlign: 'center' }}>
-            <TYPE.black color='text6'>You&apos;ve erned <strong>{formatAmount(rewardsData.points)} IXSurge</strong>.</TYPE.black>
-            <TYPE.black color='text6'>Keep going to unlock more rewards!</TYPE.black>
+            <TYPE.black color="text6">
+              You&apos;ve erned <strong>{formatAmount(rewardsData.points)} IXSurge</strong>.
+            </TYPE.black>
+            <TYPE.black color="text6">Keep going to unlock more rewards!</TYPE.black>
           </Box>
-          <FilledButton disabled={mutatePoint.isPending} onClick={handleClaimRewards} style={{ zIndex: 30, width: '100%' }}>
+          <FilledButton
+            disabled={mutatePoint.isPending}
+            onClick={handleClaimRewards}
+            style={{ zIndex: 30, width: '100%' }}
+          >
             <BtnLabel>Get IXSurge</BtnLabel>
           </FilledButton>
         </Stack>

src/constants/lineRewards.ts

@@ -1,6 +1,8 @@
 
 export const DAILY_REWARD = 100
 
+export const JOIN_CAMPAIGN_REWARD = 100
+
 export const KYC_REWARD = 1_000
 
 export const INVEST_REWARD_PER_TOKEN = 1_000
@@ -9,6 +11,7 @@ export enum LineRewardAction {
   CONNECT_WALLET = 'connect_wallet',
   KYC = 'kyc',
   INVEST = 'invest',
+  JOIN_CAMPAIGN = 'join_campaign',
 }
 
 export const API_KEY = process.env.REACT_APP_LINE_REWARD_API_KEY

src/hooks/useLineReward.ts

@@ -1,9 +1,12 @@
-import { useMutation } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
 import axios from 'axios'
 import { linePoint } from 'services/apiUrls'
 import { Address } from 'viem'
-import { API_KEY, LineRewardAction } from 'constants/lineRewards'
+import { API_KEY, JOIN_CAMPAIGN_REWARD, LineRewardAction } from 'constants/lineRewards'
+import { useWeb3React } from './useWeb3React'
+import { isLineLiff } from 'utils'
+import { apiService as lineRewardApiService } from 'hooks/useLineReward'
 
 export const apiService = axios.create({
   baseURL: linePoint.baseUrl,
@@ -13,6 +16,7 @@ export const apiService = axios.create({
 })
 
 function useLineReward() {
+  const { account } = useWeb3React()
   const [openTaskSuccessModal, setOpenTaskSuccessModal] = useState(false)
   const [rewardsData, setRewardsData] = useState<{
     points: number
@@ -36,6 +40,36 @@ function useLineReward() {
     },
   })
 
+  // Claim rewards for joining campaign
+  const validateClaimRewards = useQuery({
+    queryKey: ['validateJoinCampaignRewards', account],
+    enabled: isLineLiff,
+    queryFn: async () => {
+      const { data } = await lineRewardApiService.get(linePoint.checkClaimed, {
+        params: {
+          address: account,
+          action: LineRewardAction.JOIN_CAMPAIGN,
+        },
+      })
+      return data
+    },
+    staleTime: Infinity,
+  })
+  useEffect(() => {
+    if (
+      !account ||
+      !validateClaimRewards.isFetched ||
+      validateClaimRewards.data?.claimed
+    )
+      return
+
+    setOpenTaskSuccessModal(true)
+    setRewardsData({
+      action: LineRewardAction.JOIN_CAMPAIGN,
+      points: JOIN_CAMPAIGN_REWARD,
+    })
+  }, [account, validateClaimRewards.isFetched, validateClaimRewards.data?.claimed])
+
   return {
     mutatePoint,
     openTaskSuccessModal,