New storage frontend bug fixes

Author: Bhupesh-mfsi

packages/messenger-widget/src/components/AddConversation/AddConversation.tsx

@@ -34,7 +34,6 @@ export default function AddConversation() {
     const submit = async (e: React.FormEvent) => {
         e.preventDefault();
         setName(name.trim());
-        console.log('name', name);
         if (name.length) {
             // start loader
             dispatch({

packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.tsx

@@ -127,10 +127,7 @@ export function ConfigureDM3Profile() {
 
     // handles existing ENS name
     useEffect(() => {
-        if (
-            account!.ensName &&
-            !account!.ensName.endsWith(globalConfig.ADDR_ENS_SUBDOMAIN())
-        ) {
+        if (account!.ensName) {
             fetchExistingDM3Name(mainnetProvider, account!, setExistingDm3Name);
         }
     }, [account]);

packages/messenger-widget/src/components/ConfigureProfile/bl.tsx

@@ -2,25 +2,23 @@ import { Account, ProfileKeys, hasUserProfile } from '@dm3-org/dm3-lib-profile';
 import {
     Actions,
     ConnectionType,
-    GlobalState,
     ModalStateType,
 } from '../../utils/enum-type-utils';
 
-import { createAlias, getAliasChain } from '@dm3-org/dm3-lib-delivery-api';
+import { createAlias } from '@dm3-org/dm3-lib-delivery-api';
 import { globalConfig, log } from '@dm3-org/dm3-lib-shared';
 import { ethers } from 'ethers';
 import React from 'react';
 import {
     claimSubdomain,
     removeAlias,
 } from '../../adapters/offchain-resolver-api';
-import { getLastDm3Name } from '../../utils/common-utils';
 import { checkEnsDM3Text } from '../../utils/ens-utils';
-import { setContactHeightToMaximum } from '../Contacts/bl';
 import { closeLoader, startLoader } from '../Loader/Loader';
 import { NAME_TYPE } from './chain/common';
 import { ConfigureEnsProfile } from './chain/ens/ConfigureEnsProfile';
 import { ConfigureGenomeProfile } from './chain/genome/ConfigureGenomeProfile';
+import { Dm3Name } from '../../hooks/topLevelAlias/nameService/Dm3Name';
 
 export const PROFILE_INPUT_FIELD_CLASS =
     'profile-input font-weight-400 font-size-14 border-radius-6 w-100 line-height-24';
@@ -116,7 +114,6 @@ export const submitDm3UsernameClaim = async (
         );
 
         setDisplayName(ensName);
-        setContactHeightToMaximum(true);
     } catch (e) {
         setError('Name is not available', NAME_TYPE.DM3_NAME);
     }
@@ -157,7 +154,6 @@ export const removeAliasFromDm3Name = async (
                 },
             });
 
-            setContactHeightToMaximum(true);
             closeLoader();
             return true;
         } else {
@@ -185,12 +181,18 @@ export const fetchExistingDM3Name = async (
 ) => {
     try {
         if (account) {
-            const dm3Names: any = await getAliasChain(account, mainnetProvider);
-            let dm3Name;
-            if (dm3Names && dm3Names.length) {
-                dm3Name = getLastDm3Name(dm3Names);
-            }
-            setExistingDm3Name(dm3Name ? dm3Name : null);
+            const dm3NameService = new Dm3Name(mainnetProvider);
+            const dm3Name = await dm3NameService.resolveAliasToTLD(
+                account.ensName,
+            );
+            // Not a DM3 name -> 0xa966.beta-addr.dm3.eth
+            // Its DM3 name -> bob.beta-user.dm3.eth
+            // Checks user sub domain for setting DM3 name
+            setExistingDm3Name(
+                dm3Name.endsWith(globalConfig.USER_ENS_SUBDOMAIN())
+                    ? dm3Name
+                    : null,
+            );
         } else {
             setExistingDm3Name(null);
         }

packages/messenger-widget/src/components/ConfigureProfile/chain/ens/bl.ts

@@ -3,7 +3,6 @@ import { Account, SignedUserProfile } from '@dm3-org/dm3-lib-profile';
 import { ethersHelper, stringify } from '@dm3-org/dm3-lib-shared';
 import { ethers } from 'ethers';
 import { Actions, ModalStateType } from '../../../../utils/enum-type-utils';
-import { setContactHeightToMaximum } from '../../../Contacts/bl';
 import { closeLoader, startLoader } from '../../../Loader/Loader';
 import { NAME_TYPE } from '../common';
 
@@ -92,8 +91,6 @@ export const submitEnsNameTransaction = async (
             const response = await ethersHelper.executeTransaction(tx);
             await response.wait();
             setEnsNameFromResolver(ensName);
-
-            setContactHeightToMaximum(true);
         } else {
             throw Error('Error creating publish transaction');
         }

packages/messenger-widget/src/components/ConfigureProfile/chain/genome/bl.ts

@@ -4,7 +4,6 @@ import { ethersHelper, stringify } from '@dm3-org/dm3-lib-shared';
 import { getConractInstance } from '@dm3-org/dm3-lib-shared/dist/ethersHelper';
 import { ethers } from 'ethers';
 import { Actions, ModalStateType } from '../../../../utils/enum-type-utils';
-import { setContactHeightToMaximum } from '../../../Contacts/bl';
 import { closeLoader, startLoader } from '../../../Loader/Loader';
 
 import { Address, namehash, toHex } from 'viem';
@@ -157,8 +156,6 @@ export const submitGenomeNameTransaction = async (
             const response = await ethersHelper.executeTransaction(tx);
             await response.wait();
             setEnsNameFromResolver(ensName);
-
-            setContactHeightToMaximum(true);
         } else {
             throw Error('Error creating publish transaction');
         }

packages/messenger-widget/src/components/Contacts/Contacts.tsx

@@ -1,8 +1,6 @@
-import { globalConfig } from '@dm3-org/dm3-lib-shared';
 import { useContext, useEffect, useState } from 'react';
 import loader from '../../assets/images/loader.svg';
 import threeDotsIcon from '../../assets/images/three-dots.svg';
-import { AuthContext } from '../../context/AuthContext';
 import { ConversationContext } from '../../context/ConversationContext';
 import { MessageContext } from '../../context/MessageContext';
 import { DashboardProps } from '../../interfaces/props';
@@ -13,13 +11,12 @@ import {
 } from '../../utils/enum-type-utils';
 import { ContactMenu } from '../ContactMenu/ContactMenu';
 import './Contacts.css';
-import { setContactHeightToMaximum, showMenuInBottom } from './bl';
+import { showMenuInBottom } from './bl';
 import { getAccountDisplayName } from '@dm3-org/dm3-lib-profile';
 
 export function Contacts(props: DashboardProps) {
     // fetches context api data
     const { state, dispatch } = useContext(GlobalContext);
-    const { account } = useContext(AuthContext);
     const {
         contacts,
         setSelectedContactName,
@@ -33,22 +30,11 @@ export function Contacts(props: DashboardProps) {
         boolean | null
     >(null);
 
-    // fetches sub domain of ENS
-    const isAddrEnsName = account?.ensName?.endsWith(
-        globalConfig.ADDR_ENS_SUBDOMAIN(),
-    );
-
-    // handles contact box view
-    //Can be removed once responsive design has been implemented @Bhupesh
-    useEffect(() => {
-        setContactHeightToMaximum(!isAddrEnsName ? true : false);
-    }, [account?.ensName]);
-
     // handles active contact removal
     // move to a better place (profile window) and Contact Info
     useEffect(() => {
         if (
-            selectedContact !== null &&
+            selectedContact &&
             state.uiView.selectedRightView !== RightViewSelected.Chat &&
             state.uiView.selectedRightView !== RightViewSelected.ContactInfo
         ) {
@@ -58,7 +44,7 @@ export function Contacts(props: DashboardProps) {
 
     // handles UI view on contact select
     useEffect(() => {
-        if (selectedContact !== undefined) {
+        if (selectedContact) {
             // set selected contact
 
             if (state.uiView.selectedRightView !== RightViewSelected.Chat) {
@@ -92,7 +78,7 @@ export function Contacts(props: DashboardProps) {
     //If a selected contact is selected and the menu is open, we want to align the menu at the bottom
     if (scroller) {
         scroller.addEventListener('scroll', () => {
-            if (selectedContact != null) {
+            if (selectedContact) {
                 setIsMenuAlignedAtBottom(
                     showMenuInBottom(selectedContact.name),
                 );
@@ -136,10 +122,6 @@ export function Contacts(props: DashboardProps) {
                                         : '',
                                 )}
                                 onClick={() => {
-                                    console.log(
-                                        'set selected contact ',
-                                        data.contactDetails.account.ensName,
-                                    );
                                     setSelectedContactName(
                                         data.contactDetails.account.ensName,
                                     );
@@ -179,7 +161,6 @@ export function Contacts(props: DashboardProps) {
                                                 </p>
                                             </div>
 
-                                            {/* @Bhupesh what is this cached contacts section for */}
                                             {id !==
                                                 selectedContact?.contactDetails
                                                     .account.ensName &&
@@ -260,7 +241,7 @@ export function Contacts(props: DashboardProps) {
                     <div
                         key={data}
                         className={
-                            selectedContact !== null
+                            selectedContact
                                 ? 'highlight-right-border'
                                 : 'highlight-right-border-none'
                         }
@@ -274,7 +255,7 @@ export function Contacts(props: DashboardProps) {
                     <div
                         key={data}
                         className={
-                            selectedContact !== null
+                            selectedContact
                                 ? 'highlight-right-border'
                                 : 'highlight-right-border-none'
                         }

packages/messenger-widget/src/components/Contacts/bl.ts

@@ -1,11 +1,3 @@
-// sets height of the left view according to content
-export const setContactHeightToMaximum = (isProfileConfigured: boolean) => {
-    const element = document.getElementsByClassName(
-        'contacts-scroller',
-    )[0] as HTMLElement;
-    element.style.height = isProfileConfigured ? '88.5vh' : '88.5vh';
-};
-
 export const showMenuInBottom = (id: string | null): boolean => {
     const scroller: HTMLElement = document.getElementById(
         'chat-scroller',

packages/messenger-widget/src/components/Loader/Loader.tsx

@@ -5,13 +5,11 @@ import loader from '../../assets/images/loader.svg';
 import { GlobalContext } from '../../utils/context-utils';
 
 export const closeLoader = () => {
-    console.log('stop loader');
     const loader = document.getElementsByClassName('loading')[0] as HTMLElement;
     loader.setAttribute('style', 'display:none !important');
 };
 
 export const startLoader = () => {
-    console.log('start loader');
     const loader = document.getElementsByClassName('loading')[0] as HTMLElement;
     loader.setAttribute('style', 'display:flex !important');
 };

packages/messenger-widget/src/components/Message/Message.tsx

@@ -93,7 +93,8 @@ export function Message(props: MessageProps) {
                                 : state.uiView.selectedMessageView
                                       .actionType === MessageActionType.EDIT &&
                                   state.uiView.selectedMessageView.messageData
-                                      ?.envelop.id === props.envelop.id
+                                      ?.envelop.message.signature ===
+                                      props.envelop.message.signature
                                 ? 'msg-editing-active'
                                 : 'ms-3 own-msg-background'
                             : !props.message &&

packages/messenger-widget/src/components/MessageAction/MessageAction.tsx

@@ -48,7 +48,6 @@ export function MessageAction(props: MessageProps) {
     };
 
     const setAction = (action: MessageActionType) => {
-        console.log('setAction', action);
         dispatch({
             type: UiViewStateType.SetMessageView,
             payload: {
@@ -64,10 +63,15 @@ export function MessageAction(props: MessageProps) {
             throw Error('no contact selected');
         }
 
-        // @Bhupesh why do we need to filter here
-        // const filteredElemtns = props.reactions.some(
-        //     (data) => data.message.message === message,
-        // );
+        // Filters if the reaction already exists
+        const filteredReactions = props.reactions.filter(
+            (data) => data.message.message === message,
+        );
+
+        // if same reaction already exists, then it should not be added again so returns
+        if (filteredReactions.length) {
+            return;
+        }
 
         dispatch({
             type: UiViewStateType.SetMessageView,

packages/messenger-widget/src/components/SendMessage/onSubmitMessage.ts

@@ -37,7 +37,8 @@ export const onSubmitMessage = async (
             referenceMessageHash!,
             props.filesSelected.map((file) => file.data),
         );
-        await addMessage(
+
+        addMessage(
             selectedContact?.contactDetails.account.ensName!,
             messageData,
         );
@@ -48,6 +49,16 @@ export const onSubmitMessage = async (
             type: ModalStateType.LastMessageAction,
             payload: MessageActionType.REPLY,
         });
+
+        // Removes preview of reply to message in the UI
+        dispatch({
+            type: UiViewStateType.SetMessageView,
+            payload: {
+                actionType: MessageActionType.NONE,
+                messageData: undefined,
+            },
+        });
+
         return;
     }
     if (state.uiView.selectedMessageView.actionType === 'EDIT') {

packages/messenger-widget/src/hooks/conversation/hydrateContact.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import {
     Account,
-    getAccountDisplayName,
     getDeliveryServiceProfile,
     getUserProfile,
     normalizeEnsName,

packages/messenger-widget/src/hooks/conversation/useConversation.tsx

@@ -33,7 +33,6 @@ export const useConversation = (config: Config) => {
     const conversationCount = useMemo(() => contacts.length, [contacts]);
 
     const selectedContact = useMemo(() => {
-        console.log('selectedContactName MEMO', selectedContactName);
         return contacts.find(
             (contact) =>
                 contact.contactDetails.account.ensName === selectedContactName,
@@ -67,8 +66,6 @@ export const useConversation = (config: Config) => {
             }
             const currentConversationsPage = await getConversations(page);
 
-            console.log('currentConversationsPage', currentConversationsPage);
-
             //Hydrate the contacts by fetching their profile and DS profile
             const storedContacts = await Promise.all(
                 currentConversationsPage.map((conversation) => {
@@ -180,7 +177,6 @@ export const useConversation = (config: Config) => {
             conversation,
             resolveAliasToTLD,
         );
-        console.log('hydrated contact', hydratedContact);
         setContacts((prev) => {
             return prev.map((existingContact) => {
                 //Find the contact in the list and replace it with the hydrated one
@@ -227,7 +223,6 @@ export const useConversation = (config: Config) => {
             ...contact,
             isHidden: false,
         };
-        console.log('unhiddenContact', unhiddenContact);
         setSelectedContactName(unhiddenContact.contactDetails.account.ensName);
         hydrateExistingContactAsync(unhiddenContact);
     };

packages/messenger-widget/src/hooks/messages/renderer/messageTypes/renderDelete.ts

@@ -13,6 +13,7 @@ export const renderDelete = (messages: MessageModel[]) => {
         (deleteMessage) =>
             deleteMessage.envelop.message.metadata.referenceMessageHash,
     );
+
     //We return the messages with out messages that are to be deleted and the delete requests
     return messages
         .filter(
@@ -35,12 +36,28 @@ export const renderDelete = (messages: MessageModel[]) => {
                             message: '',
                             metadata: {
                                 ...message.envelop.message.metadata,
-                                type: MessageActionType.DELETE as MessageType,
+                                // REACT messages are set, so that it can be filtered out
+                                // to be not shown on UI
+                                type:
+                                    message.envelop.message.metadata.type ===
+                                    MessageActionType.REACT
+                                        ? (MessageActionType.REACT as MessageType)
+                                        : (MessageActionType.DELETE as MessageType),
                             },
                         },
                     },
                 };
             }
             return message;
-        });
+            // filter out all the reaction messages those are deleted
+            // its not to be shown on UI
+        })
+        .filter(
+            (messageData) =>
+                !(
+                    messageData.envelop.message.message === '' &&
+                    messageData.envelop.message.metadata.type ===
+                        MessageActionType.REACT
+                ),
+        );
 };