add ref code validation and example format

ui/rewards/login/steps/LoginStepContent.tsx

@@ -52,7 +52,11 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
   }, [ login, goNext, setIsLoading, router, closeModal, refCode, setRefCodeError, isRefCodeUsed ]);
 
   useEffect(() => {
+    if (refCode.length > 0 && refCode.length !== 6) {
+      setRefCodeError.on();
+    } else {
       setRefCodeError.off();
+    }
   }, [ refCode ]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const { start: loginToAccount } = useSignInWithWallet({
@@ -103,6 +107,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
             />
           </Flex>
           { isRefCodeUsed && (
+            <>
               <FormControl variant="floating" id="referral-code" mt={ 3 }>
                 <Input
                   fontWeight="500"
@@ -112,6 +117,10 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
                 />
                 <InputPlaceholder text="Code"/>
               </FormControl>
+              <Text fontSize="sm" variant="secondary" mt={ 1 } color={ refCodeError ? 'red.500' : undefined }>
+                { refCodeError ? 'Incorrect code or format' : 'The code should be in format XXXXXX' }
+              </Text>
+            </>
           ) }
         </Box>
       ) }
@@ -129,7 +138,7 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
         onClick={ isConnected ? handleLogin : connect }
         isLoading={ isLoading || profileQuery.isLoading || checkUserQuery.isFetching }
         loadingText={ isLoading ? 'Sign message in your wallet' : undefined }
-        isDisabled={ isAddressMismatch }
+        isDisabled={ isAddressMismatch || refCodeError }
       >
         { isConnected ? 'Get started' : 'Connect wallet' }
       </Button>