Show names in members (#160)

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -31,7 +31,7 @@ interface ChatInputProps {
 }
 
 export function ChatInput({ reply, setReply }: ChatInputProps) {
-  const { sendMessage } = useMessengerContext();
+  const { sendMessage, contacts } = useMessengerContext();
   const theme = useTheme() as Theme;
   const [content, setContent] = useState("");
   const [clearComponent, setClearComponent] = useState("");
@@ -254,7 +254,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
             <ReplyTo>
               {" "}
               <ReplySvg width={18} height={18} className="input" />{" "}
-              {reply.sender}
+              {contacts[reply.sender]?.customName ??
+                contacts[reply.sender].trueName}
             </ReplyTo>
             <ReplyOn>{reply.content}</ReplyOn>
             {reply.image && <ImagePreview src={reply.image} />}

packages/react-chat/src/components/Members/Member.tsx

@@ -6,6 +6,7 @@ import { Contact } from "../../models/Contact";
 import { ContactMenu } from "../Form/ContactMenu";
 import { Icon } from "../Icons/Icon";
 import { UserIcon } from "../Icons/UserIcon";
+import { UserAddress } from "../Messages/Styles";
 
 interface MemberProps {
   contact: Contact;
@@ -47,7 +48,10 @@ export function Member({
         {showMenu && <ContactMenu id={contact.id} setShowMenu={setShowMenu} />}
         <UserIcon memberView={true} />
       </MemberIcon>
-      <MemberName>{contact?.customName ?? contact.id}</MemberName>
+      <MemberName>{contact?.customName ?? contact.trueName}</MemberName>
+      <UserAddress>
+        {contact.id.slice(0, 5)}...{contact.id.slice(-3)}
+      </UserAddress>
     </MemberData>
   );
 }
@@ -69,6 +73,7 @@ export const MemberName = styled.p`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  margin-right: 4px;
 `;
 
 export const MemberIcon = styled(Icon)`

packages/react-chat/src/components/Messages/MessageQuote.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import styled from "styled-components";
 
+import { useMessengerContext } from "../../contexts/messengerProvider";
 import { ChatMessage } from "../../models/ChatMessage";
 import { ReplyOn, ReplyTo } from "../Chat/ChatInput";
 import { QuoteSvg } from "../Icons/QuoteIcon";
@@ -21,6 +22,7 @@ type MessageQuoteProps = {
 };
 
 export function MessageQuote({ quote }: MessageQuoteProps) {
+  const { contacts } = useMessengerContext();
   const quoteClick = useCallback(() => {
     if (quote) {
       const quoteDiv = document.getElementById(quote.id);
@@ -42,13 +44,15 @@ export function MessageQuote({ quote }: MessageQuoteProps) {
     }
   }, [quote]);
 
-  if (quote) {
+  if (quote && quote.sender) {
     return (
       <QuoteWrapper onClick={quoteClick}>
         <QuoteSvg width={22} height={calcHeight(quote)} />
         <QuoteSender>
           {" "}
-          <UserIcon memberView={true} /> {quote.sender}
+          <UserIcon memberView={true} />{" "}
+          {contacts[quote.sender]?.customName ??
+            contacts[quote.sender].trueName}
         </QuoteSender>
         <Quote>{quote.content}</Quote>
         {quote.image && <QuoteImage src={quote.image} />}

packages/react-chat/src/components/SearchBlock.tsx

@@ -23,7 +23,12 @@ export const SearchBlock = ({
 
   const searchList = useMemo(() => {
     return Object.values(contacts)
-      .filter((member) => member.id.includes(query))
+      .filter(
+        (member) =>
+          member.id.includes(query) ||
+          member?.customName?.includes(query) ||
+          member.trueName.includes(query)
+      )
       .filter((member) => !discludeList.includes(member.id));
   }, [query, discludeList, contacts]);
 
@@ -35,10 +40,7 @@ export const SearchBlock = ({
       style={{ [onBotttom ? "bottom" : "top"]: "calc(100% + 24px)" }}
     >
       <ContactsList>
-        {Object.values(contacts)
-          .filter((member) => member.id.includes(query))
-          .filter((member) => !discludeList.includes(member.id))
-          .map((member) => (
+        {searchList.map((member) => (
           <Member
             key={member.id}
             contact={member}

packages/status-communities/src/messenger.ts

@@ -223,7 +223,6 @@ export class Messenger {
         callback(messages.filter(isDefined));
       }
     };
-    console.log(`querying ${chat.contentTopic} for ${startTime} to ${endTime}`);
     const allMessages = await this.waku.store.queryHistory(
       [chat.contentTopic],
       {
@@ -231,10 +230,6 @@ export class Messenger {
         callback: _callback,
       }
     );
-    console.log(
-      `ended querying ${chat.contentTopic} for ${startTime} to ${endTime}`
-    );
-
     return allMessages.length;
   }