Fix Email/Telegram Issues

[corlard3y]

Pull Request Template

#1995

Description

• Problem/Feature:
• Add Telegram Success/Error Message
• Add Third Step with 'Complete Verification Button'
• Disable Claim Button till user has completed email/telegram flow

Type of Change

• Bug fix
• New feature
• Code refactor
• Documentation update
• Other (please describe):

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

In the first file (AddTelegram.tsx):

1. In the function handleVerificationCode, there are missing parentheses around the object in the verifyVerification call. It should be like this:

   verifyVerification({
       verificationCode: telegramCode,
   });

2. In the same function handleVerificationCode, there are missing parentheses around the parameters in the error callback. It should look like this:

   onError: (error: Error) => {
       console.log('Error verifying code', error);
       setErrorMessage('Error verifying code');
   }

3. The <form> tag is not closed properly within the JSX. It should be closed before the return statement.

4. Inside the <Text> component, the variant prop is missing for the text "Enter your Telegram ID". It should be provided like this:

   variant="h4-semibold"

5. Similarly, the <Text> component for the instructional text is missing the variant prop. It should be added to maintain consistency with other text components.

6. In the Telegram component, there is a missing closing tag. It should be self-closing like this:

   <Telegram />

7. The Step 2 text is not wrapped in a <Text> component properly, it should be enclosed to render correctly.

8. The <Link> component is missing the closing tag </Link> after the URL rendering.

9. The comment // Formik hooks from form.ts seems unnecessary in the code.

In the second file (SocialHandleItem.tsx):

1. The comparison operator == should be replaced with === in the useEffect hook for better type safety:

   if (activity?.activityType === 'follow_push_on_discord' || activity?.activityType === 'follow_push_on_twitter') {

2. The comments inside the file are incomplete and seem like placeholders. They should be either completed or removed for better code readability.

3. In the <Alert> component for displaying error messages, the errorMessage prop should be properly passed as a child element, not in the heading attribute.

4. The <SocialHandles> component should be imported from the correct path, currently, it is incorrectly imported.

5. Within the claimButton prop for the <SocialHandles> component, the Claim text should be wrapped in quotes like this: 'Claim'.

6. The text prop inside the internal <Link> component should be enclosed in quotes, like this: 'bl-semibold'.

7. The condition for rendering the claim button could be simplified for better readability and maintenance. This conditional logic should be reviewed.

In the third file (verifyHandlesVerificationCode.ts):

1. The missing closing single quote in the headers of axios call. It should be corrected to close the object properly:

   'Content-Type': 'application/json',

All looks good.

[github-actions]

PR Preview Action v1.4.7
🚀 Deployed preview to https://push-protocol.github.io/push-dapp/pr-preview/pr-1997/
on branch gh-pages at 2024-12-24 12:58 UTC