[BUMP SDK IN DAPP] - Fix the the modal close behaviour on click outside modal

[abhishek-01k]

Pull Request Template

• 1561

Description

Create Group Modal will not be closed when clicked outside.

• Problem/Feature:

Type of Change

• [x] Bug fix
• [x] New feature

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

• [x] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] 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

• Create Group Modal in the Chats is not persistent. Once you open the modal and click away on the dapp (i.e, toggle the light mode and dark mode) so the modal goes away.

• After: What's changed now

• Once you open the modal and click away on the dapp (i.e, toggle the light mode and dark mode) so the modal goes away.

Additional Context

Review & Approvals

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

Notes

CreateGroupModal from @pushprotocol/uiweb

• It has a new prop closeModalOnClickAway which if passed true will close the modal

UserProfile from @pushprotocol/uiweb

• It also has a new prop closeUserProfileModalOnClickAway which if passed true will close the Profile Modal on ClickAway.

ChatView from @pushprotocol/uiweb

• It has a new prop closeChatProfileInfoModalOnClickAway which if passed true will close the Group Info Modal on ClickAway.

Things that you need to test

• Check if the User Profile modal is getting closed or not in the clickaway
• Check if the group info modal is getting closed or not in the clickway.
• See if the modal is visible when their is a chat id and user reloads the dapp in the chat route.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-02 08:57 UTC

[mishramonalisha76]

@abhishek-01k should we close the modal when disconnect the wallet in the dapp? because i think if we dont close it creating a group will give error.

[github-actions[bot]]

All looks good.

[github-actions[bot]]

In the package.json file:

1. In the "start" script, there is a typo in "node dev-mode-link-local-sdk.mjs prodsdk cleanup nostart && yarn dev". It should be "node dev-mode-link-local-sdk.mjs prodsdk cleanup nostart && vite dev".
2. In the "build" script, there is a typo in "NODE_OPTIONS=--max-old-space-size=8192 node dev-mode-link-local-sdk.mjs prodsdk cleanup nostart && vite build". It should be "NODE_OPTIONS=--max-old-space-size=8192 node dev-mode-link-local-sdk.mjs prodsdk cleanup nostart && vite build".
3. In the "change" script, the second command "node build.mjs dev" is missing the "&&" before it. It should be "node dev-mode-link-local-sdk.mjs prodsdk cleanup nostart && node build.mjs dev".

In the ChatSection.tsx file:

1. There is an unclosed comment block after "<Welcome".
2. The styled component "IntroContainer" is missing a closing curly brace "}" at the end.
3. The styled component "BackContainer" is missing a closing curly brace "}" at the end as well.

These are the corrections needed in the provided files.

[rohitmalhotra1420]

@abhishek-01k This looks good to me. Please go ahead and make a alpha release for this and update this PR with the alpha release.

[github-actions[bot]]

In the package.json file, there are no apparent mistakes or typos. The scripts and dependencies seem to be correctly defined.

In the ChatSection.tsx file, there is a missing closing curly brace for the onChatSelected prop inside the Welcome component.

However, in the yarn.lock file, everything seems to be in order as well. The dependencies and resolutions are correctly specified.

All looks good.