Fix referralCode for link open modal

src/components/AccountDetails/Avatar.tsx

@@ -8,6 +8,7 @@ import { MyKyc } from 'state/kyc/actions'
 import { ReactComponent as Edit } from '../../assets/images/edit.svg'
 import { ReactComponent as DefaultAvatar } from '../../assets/images/default-avatar.svg'
 import styled from 'styled-components'
+import { useQueryParams } from 'hooks/useParams'
 
 interface ModalProps {
   isModalOpen: boolean
@@ -21,6 +22,7 @@ interface AvatarProps {
 }
 
 const Avatar: React.FC<AvatarProps> = ({ kyc, toggleWalletModal }) => {
+  const { objectParams } = useQueryParams<{ referralCode: string }>(['referralCode'])
   const [modalProps, setModalProps] = useState<ModalProps>({ isModalOpen: false, referralCode: '' })
 
   const closeModal = () => {
@@ -30,8 +32,8 @@ const Avatar: React.FC<AvatarProps> = ({ kyc, toggleWalletModal }) => {
     setModalProps({
       isModalOpen: true,
       kycType,
-      referralCode: new URL(window.location.href).href?.split('=')[1]
-        ? `/kyc/${kycType}?referralCode=${new URL(window.location.href).href?.split('=')[1]}`
+      referralCode: objectParams?.referralCode
+        ? `/kyc/${kycType}?referralCode=${objectParams?.referralCode}`
         : `/kyc/${kycType}`,
     })
   }

src/pages/App.tsx

@@ -48,7 +48,7 @@ import { setJumpTaskState } from 'state/jumpTask'
 import { CHAINS } from 'components/Web3Provider/constants'
 const Launchpad = lazy(() => import('pages/Launchpad'))
 import KYC from 'pages/KYC'
-import { isLineLiff } from 'utils'
+import { isLineLiff, isValidReferralCode } from 'utils'
 import { useLiff } from './LiffProvider'
 import TaskSuccessModal from 'components/Rewards/TaskSuccessModal'
 import { useLineReward } from 'providers/LineRewardProvider'
@@ -259,6 +259,11 @@ export default function App() {
     if (!code) {
       return
     }
+
+    if (!isValidReferralCode(code)) {
+      return
+    }
+
     const storedReferralCode = localStorage.getItem('referralCode')
     if (!storedReferralCode) {
       localStorage.setItem('referralCode', code)

src/pages/KYC/index.tsx

@@ -33,6 +33,7 @@ import { KYC_REWARD, LineRewardAction } from 'constants/lineRewards'
 import { apiService as lineRewardApiService } from 'hooks/useLineReward'
 import { linePoint } from 'services/apiUrls'
 import { useLineReward } from 'providers/LineRewardProvider'
+import { useQueryParams } from 'hooks/useParams'
 
 interface DescriptionProps {
   description: string | null
@@ -95,6 +96,7 @@ const Description: FC<DescriptionProps> = ({ description }: DescriptionProps) =>
 )
 
 const KYC = () => {
+  const { objectParams } = useQueryParams<{ referralCode: string }>(['referralCode'])
   const { account } = useWeb3React()
   const { chainId } = useAccount()
   const [cookies] = useCookies(['annoucementsSeen'])
@@ -161,9 +163,7 @@ const KYC = () => {
     setModalProps({
       isModalOpen: true,
       kycType,
-      referralCode: new URL(window.location.href).href?.split('=')[1]
-        ? `/kyc/${kycType}?referralCode=${new URL(window.location.href).href?.split('=')[1]}`
-        : `/kyc/${kycType}`,
+      referralCode: objectParams?.referralCode ? `/kyc/${kycType}?referralCode=${objectParams?.referralCode}` : `/kyc/${kycType}`,
       // Add more props as needed
     })
   }

src/utils/index.ts

@@ -186,3 +186,9 @@ export function tryClearIndexedDB() {
 
 export const isLineLiff =
   window.location.hostname.includes('line-liff.ixswap.io') || window.location.hostname.includes('localhost')
+
+export const isValidReferralCode = (code: string) => {
+  // Define the regex pattern for 6 characters, only alphabets and digits
+  const pattern = /^[A-Za-z0-9]{6}$/
+  return pattern.test(code)
+}