Commit 650f0838 authored by Max Alekseenko's avatar Max Alekseenko

fix ref code validation

parent a3b7e741
import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Skeleton, Divider } from '@chakra-ui/react'; import { Text, Button, useColorModeValue, Image, Box, Flex, Switch, useBoolean, Input, FormControl, Alert, Skeleton, Divider } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import React, { useCallback, useState, useEffect } from 'react'; import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { useRewardsContext } from 'lib/contexts/rewards'; import { useRewardsContext } from 'lib/contexts/rewards';
import * as cookies from 'lib/cookies'; import * as cookies from 'lib/cookies';
...@@ -28,6 +28,16 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -28,6 +28,16 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
const { login, checkUserQuery } = useRewardsContext(); const { login, checkUserQuery } = useRewardsContext();
const profileQuery = useProfileQuery(); const profileQuery = useProfileQuery();
const isAddressMismatch = useMemo(() =>
Boolean(address) &&
Boolean(profileQuery.data?.address_hash) &&
profileQuery.data?.address_hash !== address,
[ address, profileQuery.data ]);
const isSignUp = useMemo(() =>
isConnected && !isAddressMismatch && !checkUserQuery.isFetching && !checkUserQuery.data?.exists,
[ isConnected, isAddressMismatch, checkUserQuery ]);
const handleRefCodeChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => { const handleRefCodeChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
setRefCode(event.target.value); setRefCode(event.target.value);
}, []); }, []);
...@@ -36,7 +46,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -36,7 +46,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
try { try {
setRefCodeError.off(); setRefCodeError.off();
setIsLoading.on(); setIsLoading.on();
const { isNewUser, invalidRefCodeError } = await login(isRefCodeUsed ? refCode : ''); const { isNewUser, invalidRefCodeError } = await login(isSignUp && isRefCodeUsed ? refCode : '');
if (invalidRefCodeError) { if (invalidRefCodeError) {
setRefCodeError.on(); setRefCodeError.on();
} else { } else {
...@@ -49,15 +59,15 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -49,15 +59,15 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
} }
} catch (error) {} } catch (error) {}
setIsLoading.off(); setIsLoading.off();
}, [ login, goNext, setIsLoading, router, closeModal, refCode, setRefCodeError, isRefCodeUsed ]); }, [ login, goNext, setIsLoading, router, closeModal, refCode, setRefCodeError, isRefCodeUsed, isSignUp ]);
useEffect(() => { useEffect(() => {
if (refCode.length > 0 && refCode.length !== 6) { if (isSignUp && isRefCodeUsed && refCode.length > 0 && refCode.length !== 6) {
setRefCodeError.on(); setRefCodeError.on();
} else { } else {
setRefCodeError.off(); setRefCodeError.off();
} }
}, [ refCode ]); // eslint-disable-line react-hooks/exhaustive-deps }, [ refCode, isRefCodeUsed, isSignUp ]); // eslint-disable-line react-hooks/exhaustive-deps
const { start: loginToAccount } = useSignInWithWallet({ const { start: loginToAccount } = useSignInWithWallet({
isAuth: Boolean(!profileQuery.isLoading && profileQuery.data?.email), isAuth: Boolean(!profileQuery.isLoading && profileQuery.data?.email),
...@@ -74,11 +84,6 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -74,11 +84,6 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
loginToRewardsProgram(); loginToRewardsProgram();
}, [ loginToAccount, loginToRewardsProgram, profileQuery, setIsLoading ]); }, [ loginToAccount, loginToRewardsProgram, profileQuery, setIsLoading ]);
const isAddressMismatch =
Boolean(address) &&
Boolean(profileQuery.data?.address_hash) &&
profileQuery.data?.address_hash !== address;
return ( return (
<> <>
<Image <Image
...@@ -93,7 +98,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => { ...@@ -93,7 +98,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
More about Blockscout Merits More about Blockscout Merits
</LinkExternal> </LinkExternal>
</Box> </Box>
{ (isConnected && !isAddressMismatch && !checkUserQuery.isFetching && !checkUserQuery.data?.exists) && ( { isSignUp && (
<Box mb={ 6 }> <Box mb={ 6 }>
<Divider bgColor="divider" mb={ 6 }/> <Divider bgColor="divider" mb={ 6 }/>
<Flex w="full" alignItems="center" justifyContent="space-between"> <Flex w="full" alignItems="center" justifyContent="space-between">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment