hide conversations

packages/messenger-demo/src/App.tsx

@@ -11,6 +11,7 @@ function App() {
         walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
         showAlways: true,
         hideFunction: 'attachments,edit,delete', // OPTINAL PARAMETER : 'attachments,edit,delete' or undefined
+        showContacts: true, // true for all contacts / false for default contact
     };
 
     return (

packages/messenger-demo/src/index.css

@@ -72,5 +72,4 @@ code {
     left: 20px;
     transform: translate(0, 0);
     z-index: 10;
-    box-shadow: 6px 6px 20px 0 rgba(05, 010, 020, 1);
 }

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

@@ -112,11 +112,13 @@ export function Chat(props: HideFunctionProps) {
     return (
         <div
             id="chat-msgs"
-            className={'chat-msgs width-fill '.concat(
-                state.accounts.selectedContact
-                    ? 'highlight-chat-border'
-                    : 'highlight-chat-border-none',
-            )}
+            className={'chat-msgs width-fill '
+                .concat(
+                    state.accounts.selectedContact
+                        ? 'highlight-chat-border'
+                        : 'highlight-chat-border-none',
+                )
+                .concat(' ', !props.showContacts ? ' ps-2 pe-2' : '')}
         >
             {/* Shimmer effect while messages are loading */}
             {showShimEffect && (

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

@@ -224,6 +224,24 @@ export function Contacts(props: DashboardProps) {
         }
     }, [contactSelected]);
 
+    useEffect(() => {
+        if (
+            !props.dm3Props.config.showContacts &&
+            props.dm3Props.config.defaultContact &&
+            !state.accounts.selectedContact &&
+            contacts
+        ) {
+            const defaultContactIndex = contacts.findIndex(
+                (contact) =>
+                    contact.contactDetails.account.ensName ===
+                    props.dm3Props.config.defaultContact,
+            );
+            if (defaultContactIndex > -1) {
+                setContactSelected(defaultContactIndex);
+            }
+        }
+    }, [contacts]);
+
     useEffect(() => {
         fetchMessageSizeLimit(state, dispatch);
     }, []);

packages/messenger-widget/src/components/RightHeader/RightHeader.css

@@ -7,7 +7,7 @@
 }
 
 .profile-name-container {
-    padding: 0.8rem;
+    padding: 0.5rem;
     border-top-right-radius: 8px;
 }
 

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

@@ -11,8 +11,10 @@ import {
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { globalConfig } from 'dm3-lib-shared';
 import { hasUserProfile } from 'dm3-lib-profile';
+import { HideFunctionProps } from '../../interfaces/props';
+import menuIcon from '../../assets/images/menu.svg';
 
-export function RightHeader() {
+export function RightHeader(props: HideFunctionProps) {
     // fetches context storage
     const { state, dispatch } = useContext(GlobalContext);
 
@@ -32,21 +34,24 @@ export function RightHeader() {
 
     // method to set profile page and set contact
     const updateView = () => {
-        let profileActive: RightViewSelected = state.uiView.selectedRightView;
-        profileActive =
-            profileActive === RightViewSelected.Profile
-                ? RightViewSelected.Default
-                : RightViewSelected.Profile;
+        if (props.showContacts) {
+            let profileActive: RightViewSelected =
+                state.uiView.selectedRightView;
+            profileActive =
+                profileActive === RightViewSelected.Profile
+                    ? RightViewSelected.Default
+                    : RightViewSelected.Profile;
 
-        dispatch({
-            type: UiViewStateType.SetSelectedRightView,
-            payload: profileActive,
-        });
+            dispatch({
+                type: UiViewStateType.SetSelectedRightView,
+                payload: profileActive,
+            });
 
-        dispatch({
-            type: AccountsType.SetSelectedContact,
-            payload: undefined,
-        });
+            dispatch({
+                type: AccountsType.SetSelectedContact,
+                payload: undefined,
+            });
+        }
     };
 
     const fetchDisplayName = async () => {
@@ -102,28 +107,45 @@ export function RightHeader() {
 
     return (
         <div
-            className={'col-12 d-flex align-items-center justify-content-end pr-0 profile-name-container'.concat(
-                ' ',
-                state.uiView.selectedRightView === RightViewSelected.Profile
-                    ? 'background-chat'
-                    : 'background-container',
+            className={(props.showContacts
+                ? 'justify-content-end'
+                : 'justify-content-between'
+            ).concat(
+                ' col-12 d-flex align-items-center pr-0 profile-name-container'.concat(
+                    ' ',
+                    state.uiView.selectedRightView === RightViewSelected.Profile
+                        ? ' background-chat'
+                        : ' background-container',
+                ),
             )}
         >
-            <div className="me-2">
-                <ConnectButton showBalance={false} />
+            {!props.showContacts && (
+                <div
+                    className={
+                        !props.showContacts ? 'p-2' : 'menu-icon-container'
+                    }
+                >
+                    <img src={menuIcon} className="pointer-cursor" alt="menu" />
+                </div>
+            )}
+
+            <div className="d-flex align-items-center justify-content-end">
+                <div className="me-2">
+                    <ConnectButton showBalance={false} />
+                </div>
+                <span
+                    onClick={() => updateView()}
+                    className="profile-name font-weight-500 pointer-cursor text-secondary-color"
+                >
+                    {displayName}
+                </span>
+                <img
+                    src={profilePic ? profilePic : humanIcon}
+                    alt="menu"
+                    className="pointer-cursor border-radius-3 default-profile-pic"
+                    onClick={() => updateView()}
+                />
             </div>
-            <span
-                onClick={() => updateView()}
-                className="profile-name font-weight-500 pointer-cursor text-secondary-color"
-            >
-                {displayName}
-            </span>
-            <img
-                src={profilePic ? profilePic : humanIcon}
-                alt="menu"
-                className="pointer-cursor border-radius-3 default-profile-pic"
-                onClick={() => updateView()}
-            />
         </div>
     );
 }

packages/messenger-widget/src/interfaces/props.ts

@@ -85,4 +85,6 @@ export interface DeleteDM3NameProps {
 
 export interface HideFunctionProps {
     hideFunction?: string;
+    showContacts?: boolean;
+    defaultContact?: string;
 }

packages/messenger-widget/src/styles/common.css

@@ -132,6 +132,10 @@ input:focus {
     height: 0.1rem;
 }
 
+.menu-icon-container {
+    padding: 0.9rem 0.7rem 0.7rem 2rem;
+}
+
 /* CSS to rotate the spinner svg image */
 @-webkit-keyframes rotating {
     from {

packages/messenger-widget/src/views/Dashboard/Dashboard.tsx

@@ -15,6 +15,22 @@ import DeleteMessage from '../../components/DeleteMessage/DeleteMessage';
 export default function Dashboard(props: DashboardProps) {
     const { state } = useContext(GlobalContext);
 
+    const getRightViewStyleClasses = () => {
+        if (props.dm3Props.config.showContacts) {
+            return 'p-0 h-100 col-lg-9 col-md-9 col-sm-12';
+        } else {
+            return 'p-0 h-100 col-12';
+        }
+    };
+
+    const getLeftViewStyleClasses = () => {
+        if (props.dm3Props.config.showContacts) {
+            return 'col-lg-3 col-md-3 col-sm-12 p-0 h-100';
+        } else {
+            return 'col-lg-3 col-md-3 col-sm-12 p-0 h-100 display-none';
+        }
+    };
+
     return (
         <div className="h-100">
             <Storage />
@@ -26,20 +42,22 @@ export default function Dashboard(props: DashboardProps) {
             {state.uiView.selectedMessageView.actionType ===
                 MessageActionType.DELETE && <DeleteMessage />}
             <div className="row m-0 h-100">
-                <div className="col-lg-3 col-md-3 col-sm-12 p-0 h-100">
+                <div className={getLeftViewStyleClasses()}>
                     <LeftView {...props} />
                 </div>
+
                 <div
-                    className={
-                        'col-lg-9 col-md-9 col-sm-12 p-0 h-100' +
-                        (state.uiView.selectedRightView ===
-                        RightViewSelected.Profile
+                    className={getRightViewStyleClasses().concat(
+                        state.uiView.selectedRightView ===
+                            RightViewSelected.Profile
                             ? ' dashboard-right-view-highlight'
-                            : '')
-                    }
+                            : '',
+                    )}
                 >
                     <RightView
                         hideFunction={props.dm3Props.config.hideFunction}
+                        showContacts={props.dm3Props.config.showContacts}
+                        defaultContact={props.dm3Props.config.defaultContact}
                     />
                 </div>
             </div>

packages/messenger-widget/src/views/LeftView/LeftView.tsx

@@ -1,4 +1,3 @@
-import './LeftView.css';
 import { Contacts } from '../../components/Contacts/Contacts';
 import menuIcon from '../../assets/images/menu.svg';
 import ConfigureProfileBox from '../../components/ConfigureProfileBox/ConfigureProfileBox';

packages/messenger-widget/src/views/RightView/RightView.tsx

@@ -12,10 +12,11 @@ import { HideFunctionProps } from '../../interfaces/props';
 export default function RightView(props: HideFunctionProps) {
     // fetches context storage
     const { state } = useContext(GlobalContext);
+
     return (
         <>
             <div className="col-12 p-0 h-100 border-radius-8 background-chat chat-screen-container">
-                <RightHeader />
+                <RightHeader showContacts={props.showContacts} />
                 {state.uiView.selectedRightView ===
                     RightViewSelected.Default && (
                     <div className="d-flex justify-content-center align-items-center default-screen">