Update notification for upcoming rewards S2

[riyanshu-patro]

Pull Request Template

Ticket Number

• Ticket Number

Description

• Problem/Feature:

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]

1. In the file src/blocks/illustrations/index.ts, there seem to be a typo in the import statement for the Cross component. It is imported from 'blocks' but should be imported from 'blocks/notification'.

2. In the same file src/blocks/illustrations/index.ts, there is a missing closing brace in the styled component StyledToaster. It should have a closing brace after width: 100%;.

3. In the same file src/blocks/illustrations/index.ts, the styled component TextContainer is missing a closing brace after the definition of flex property.

4. In the file src/blocks/notification/Notification.tsx, the styled component NotificationDescription seems to be missing a closing backtick for the template literal of the NotificationTitle style definition.

5. In the file src/common/hooks/useRewardsNotification.tsx, the onClose function inside the showNotification function is missing an implementation. It is defined but not utilized or implemented. It should have a closing brace and any necessary logic inside it.

Apart from these issues, the code seems mostly fine.

All looks good.

[github-actions]

PR Preview Action v1.4.7
🚀 Deployed preview to https://push-protocol.github.io/push-dapp/pr-preview/pr-2029/
on branch gh-pages at 2025-03-18 13:16 UTC

[github-actions]

In file 'src/blocks/illustrations/index.ts':

• Typo: 'sonner' should be 'stunner' in the import statement:
  import { toast, Toaster } from 'stunner';

In file 'src/blocks/notification/Notification.tsx':

• There is a missing closing brace in the 'StyledToaster' styled component:

const StyledToaster = styled(Toaster)`
  width: 100%;
}

• Typo: 'bes-regular' should be 'pbe-regular' in the style definition for 'NotificationDescription':

${() => getTextVariantStyles('pbe-regular', 'components-in-app-notification-text-secondary')}

• The closing tag for the NotificationContainer component is missing:

</NotificationContainer>

In file 'src/common/hooks/useRewardsNotification.tsx':

• The 'onClick' and 'onClose' functions in the 'showNotification' function should be uncommented and implemented:

  const showNotification = () =>
    notification.show({
      title: 'Push Chain Devnet Drop S2 coming 20 Mar, 2025',
      description: 'Explore Push Chain Devnet, complete quests, bang out multipliers, and earn airdrops.',
      image: <RewardPointsS2 />,
      position: 'bottom-left',
      onClick: () => {
        window.open('https://x.com/PushChain', '_blank');
        localStorage.setItem(CommonLocalStorageKeys.notificationShown, 'true');
        notification.hide();
      },
      onClose: () => {
        notification.hide();
      }
    });

• The closing brace for the 'useEffect' hook should be added to close the function body.

These are the identified issues in the provided code.

All looks good.

[github-actions]

In the src/blocks/illustrations/index.ts file:

1. It seems that there is a typo in the import statements for components. The import for Cross is incorrect. It should be '../notification/Notification' instead of 'blocks'.

In the src/blocks/notification/Notification.tsx file:

1. There is a missing closing curly brace } after the StyledToaster styled component.
2. The TextContainer styled component is missing a closing backtick }.
3. The NotificationTitle styled component is missing a closing backtick }.
4. The CloseButton styled component is missing a closing backtick }.
5. The IconContainer styled component seems to have some incomplete styling properties and the ellipsis styles for NotificationDescription might not work as intended.

In the src/common/hooks/useRewardsNotification.tsx file:

1. Inside the showNotification function, there is a missing closing curly brace } after the onClose function.
2. The showNotificationFn function is missing a closing curly brace } after the condition in the onClose function.
3. In the useEffect hook, the dependency array should also include hasMounted to prevent unnecessary re-renders.
4. The comment // include componentDidMount logic is not necessary and can be removed.

Other than the above-mentioned issues, everything looks good.