Fixed the unlock push profile in the chat

[abhishek-01k]

Pull Request Template

Ticket Number

#1869

Description

Fixed the Modal display for the Push Chat. Now the Modal is visible as embedded and recommended chats are visible.

• 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

• On Left side is the Chat Modal.
• On Right side we have the normal Unlock profile Modal
  

Additional Context

Review & Approvals

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

Notes

Created a separate file for the UnlockProfile for Chat because on the wrapper the Modal was creating an issue on opening, and in the future if we want to make the chat profile modal compatible with the new modal block theme then we can directly delete that file and make this working.

[github-actions]

In the file src/components/chat/unlockProfile/UnlockProfile.tsx:

1. There is a missing closing brace '}' for the PROFILESTATE enum.
2. There is a typo in the function name. handleConnectWalletAndEnableProfile should be handleConnectWalletAndEnableProfile.
3. There is a missing import statement for StepsLeftDesign component.
4. There is a typo in handleChatprofileUnlock function call, it should be handleUnlockProfile.
5. In the CustomCheckbox styled component, the closing backtick is missing at the end of the attribute list.
6. In the RenderToolTip component, the text inside SpanV2 component is missing in single quotes.
7. The <SkeletonContainer> component opening tag is not closed properly.
8. In the RenderToolTip component, the placementProps object is missing a closing brace '}'.
9. The opening brace '{' for the RenderToolTip component is not properly closed.
10. The prop flexDirection is spelled incorrectly in the ItemVV2 component.

In the file src/components/chat/unlockProfile/UnlockProfileModalWrapper.tsx:

1. There is a missing closing brace '}' for the IntroContainerProps interface.
2. The import for MODAL_POSITION enum is incorrect. It should be imported from hooks/useModalBlur instead of components/chat/unlockProfile.

In the file src/components/chat/unlockProfile/UnlockProfileWrapper.tsx:

1. There is a missing closing brace '}' for the IntroContainerProps interface.
2. The prop position is not specified in the IntroContainerProps interface.
3. There are missing closing braces '}' for the conditional rendering blocks.

Please fix the issues mentioned above. If you need further assistance, feel free to ask.

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-09-26 12:28 UTC

[github-actions]

There are a few issues and corrections needed in the provided code:

1. Missing closing brace for the PROFILESTATE enum in UnlockProfile.tsx:

   export enum PROFILESTATE {
     CONNECT_WALLET = 'connectwallet',
     UNLOCK_PROFILE = 'unlockprofile',
   }

2. Typo in the Tooltip component in UnlockProfile.tsx - incorrect substring:

   tooltipContent={
     <SpanV2
       fontSize="10px"
       fontWeight="400"
       // The text seems to be missing, there is an error here
       Selecting 'Remember me' will save your Push Profile keys locally on this device. Proceed at your own risk.
     </SpanV2>
   }

3. Missing import for 'SkeletonContainer' in UnlockProfile.tsx:
   You need to import 'SkeletonContainer' component from wherever it is defined and used in UnlockProfile.tsx.

4. Incorrectly set width attribute for the SkeletonLine component in UnlockProfile.tsx:
   The width attribute seems to be misplaced with incorrect syntax.

   <SkeletonLine
     height="20px"
     width="150px" // Move this to a new line inside the component
   ></SkeletonLine>

5. In UnlockProfileModalWrapper.tsx, import statement for 'UnlockProfileWrapper' is incorrect:

   import { UNLOCK_PROFILE_TYPE } from './UnlockProfileWrapper';

   It should be:

   import { UNLOCK_PROFILE_TYPE } from './UnlockProfile';

6. Missing closing brace for 'IntroContainerProps' interface in UnlockProfileWrapper.tsx:

   interface IntroContainerProps {
     type?: UNLOCK_PROFILE_TYPE;
     showConnectModal?: boolean;
     description?: string;
     onClose: () => void;
     position?: number;
   } // Add a closing brace here

After making the above corrections, the code should be good. If you have any other specific requirements or questions, feel free to ask.

[rohitmalhotra1420]

also add comments in the modal file to justify these changes.

[rohitmalhotra1420]

create a typescript type in commons.types.ts and keep the unlock profile modal type there.

[rohitmalhotra1420]

We don't need this file.

[rohitmalhotra1420]

Suggested change

	return (
	const {
	isModalOpen: isProfileModalOpen,
	showModal: showProfileModal,
	ModalComponent: ProfileModalComponent,
	} = useModalBlur();
	useEffect(() => {
	if (type === UNLOCK_PROFILE_TYPE.MODAL && position === MODAL_POSITION.ON_ROOT && showConnectModal) {
	showProfileModal();
	}
	}, [type, showConnectModal]);
	return (

[rohitmalhotra1420]

Suggested change

	<UnlockProfileModalWrapper
	type={type}
	showConnectModal={showConnectModal}
	description={description}
	/>
	<ProfileModalComponent
	InnerComponent={UnlockProfile}
	InnerComponentProps={{
	type,
	description,
	}}
	modalRadius="24px"
	modalBorder={false}
	modalPosition={MODAL_POSITION.ON_PARENT}
	/>

[github-actions]

There are several issues in the provided code snippets:

1. In Common.types.ts:

• There is a typo in the type name. It should be ModalResponseType instead of ModalResponse.
• There is a missing curly brace at the end of the PROFILESTATE enum.

2. In UnlockProfile.tsx:

• The enum PROFILESTATE is missing a closing curly brace.
• There is a missing import statement for styled-components.
• The RenderToolTip component is not closed properly with a closing curly brace and parenthesis.
• The CustomCheckbox styled component is missing a closing backtick for the template literal.
• In the StepsLeftDesign styled component, there is a missing closing curly brace for the &:checked block.

3. In UnlockProfileWrapper.tsx:

• There is a missing } at the end of the file.
• The IntroContainerProps interface is missing a closing curly brace and semicolon.
• The DEFAULT_PROPS object should be defined within the component function and not outside.
• The Container styled component is missing a closing curly brace and semicolon.

Overall, there are syntax errors, missing import statements, and typos that need to be fixed in the code snippets provided.

Let me correct them for you:

// Common.types.ts
export type ModalResponseType = {
  isOpen: boolean;
  onClose: () => void;
  open: () => void;
};

export const VAR_MODAL_POSITION = {
  ON_ROOT: 'ON_ROOT',
  ON_PARENT: 'ON_PARENT',
} as const;
export type MODAL_POSITION_TYPE = keyof typeof VAR_MODAL_POSITION;

// UnlockProfile.tsx
import styled from 'styled-components';

// Inside the file
// Fix missing closing curly brace for PROFILESTATE enum
export enum PROFILESTATE {
  CONNECT_WALLET = 'connectwallet',
  UNLOCK_PROFILE = 'unlockprofile',
}

// Fix missing import for styled-components

const RenderToolTip = ({ children, type }) => {
  return (
    // Tooltip component code
  );
};

// Fix missing closing backtick for CustomCheckbox styled component

const CustomCheckbox = styled.input.attrs({ type: 'checkbox' })`
  // Checkbox styles
`;

// Fix missing closing curly brace for &:checked block in StepsLeftDesign styled component

const StepsLeftDesign = styled(SpanV2)`
  // StepsLeftDesign styles
`;

// UnlockProfileWrapper.tsx
interface IntroContainerProps {
  type?: UNLOCK_PROFILE_TYPE;
  showConnectModal?: boolean;
  description?: string;
  onClose: () => void;
}

const UnlockProfileWrapper: FC<IntroContainerProps> = ({
  type = DEFAULT_PROPS.type,
  showConnectModal = false,
  description,
  onClose,
  position = 'ON_ROOT',
}) => {
  // Component code

const DEFAULT_PROPS = {
   type: UNLOCK_PROFILE_TYPE.MODAL,
};

// Container styled component missing closing curly brace

const Container = styled(ItemVV2)`
  // Container styles
`;

export default UnlockProfileWrapper;

After the corrections, the code snippets should be free of syntax errors and typos. Let me know if you need further assistance.

[github-actions]

File: src/common/Common.types.ts

All looks good.

File: src/components/chat/unlockProfile/UnlockProfile.tsx

1. Line 14: The enum PROFILESTATE is missing a closing bracket '}'.

2. Line 58: The gap prop value should be enclosed in quotes i.e. '16px'.

3. Line 61: Missing closing '>' at the end of the HorizontalBar component.

4. Line 132: In the Button component, the second button element doesn't have the variant prop defined properly. It should be 'variant="primary"' as in the first button.

5. Line 160: Missing closing '}' after the width and before the flexDirection.

6. Line 190: The RenderToolTip component is missing a closing '}'.

7. Line 207: The CustomCheckbox component is missing a closing '}' after the border property.

8. Line 181: Syntax error in the <SpanV2> tag, the content text should be enclosed in quotes.

File: src/components/chat/unlockProfile/UnlockProfileWrapper.tsx

1. Line 36: The DEFAULT_PROPS object is missing a closing '}'.

2. Line 56: The useEffect hook dependency array should include 'showProfileModal' as a dependency.

3. Line 70: The 'className' attribute in the Container styled component should be 'className={type}'.

4. Line 118: The 'renderPortalModal' and 'renderContainerModal' ternary statements should have proper closing brackets ')}'.

5. Line 164: The 'modalBorder' prop is missing a value, it should be 'modalBorder={false}'.

6. Line 192: 'modalBorder' prop should be properly formatted i.e., 'modalBorder={false}'.

7. Line 214: The backdrop-filter property in the Container styled component should have a semicolon at the end i.e., 'backdrop-filter: blur(8px);'.

File: src/sections/chat/ChatSection.tsx

All looks good.