ui fixes

packages/components/friends/FriendsList.tsx

@@ -10,6 +10,10 @@ import { useNSUserInfo } from "../../hooks/useNSUserInfo";
 import { neutral22, neutralA3, secondaryColor } from "../../utils/style/colors";
 import { fontSemibold13, fontSemibold11 } from "../../utils/style/fonts";
 import { Conversation } from "../../utils/types/message";
+import {
+  getConversationAvatar,
+  getConversationName,
+} from "../../weshnet/client/messageHelpers";
 import { BrandText } from "../BrandText";
 import FlexRow from "../FlexRow";
 import { SVG } from "../SVG";
@@ -22,17 +26,16 @@ type FriendListProps = {
 
 const isOnline = true;
 const FriendList = ({ item, handleChatPress }: FriendListProps) => {
-  const { metadata } = useNSUserInfo(
-    item.members?.[0]?.tokenId || "sakul.tori"
-  );
-
   const onlineStatusBadgeColor = isOnline ? "green" : "yellow";
   return (
     <View>
       <FlexRow justifyContent="space-between">
         <View>
           <FlexRow>
-            <Avatar.Image size={40} source={metadata.image || ""} />
+            <Avatar.Image
+              size={40}
+              source={getConversationAvatar(item) || ""}
+            />
             <Badge
               style={{
                 position: "absolute",
@@ -46,11 +49,7 @@ const FriendList = ({ item, handleChatPress }: FriendListProps) => {
             <SpacerRow size={1.5} />
             <View>
               <BrandText style={[fontSemibold13, { color: secondaryColor }]}>
-                {metadata.public_name || "Anon"}
-              </BrandText>
-              <SpacerColumn size={0.4} />
-              <BrandText style={[fontSemibold11, { color: neutralA3 }]}>
-                {isOnline ? "Online" : "Offline"}
+                {getConversationName(item)}
               </BrandText>
             </View>
           </FlexRow>

packages/components/requests/Request.tsx

@@ -51,12 +51,10 @@ const RequestList = ({ isOnline, data }: Props) => {
   const { setToastSuccess, setToastError } = useFeedbacks();
   const [addLoading, setAddLoading] = useState(false);
   const [rejectLoading, setRejectLoading] = useState(false);
-  const { metadata } = useNSUserInfo(data.tokenId || "sakul.tori");
 
   const onlineStatusBadgeColor = isOnline ? "green" : "yellow";
 
   const handleAddFriend = async () => {
-    console.log(metadata);
     setAddLoading(true);
     try {
       const contactPk = bytesFromString(data?.contactId);
@@ -114,10 +112,6 @@ const RequestList = ({ isOnline, data }: Props) => {
               <BrandText style={[fontSemibold13, { color: secondaryColor }]}>
                 {data?.name || "Anon"}
               </BrandText>
-              <SpacerColumn size={0.4} />
-              <BrandText style={[fontSemibold11, { color: neutralA3 }]}>
-                {isOnline ? "Online" : "Offline"}
-              </BrandText>
             </View>
           </FlexRow>
         </View>

packages/screens/Message/components/ChatItem.tsx

@@ -4,11 +4,9 @@ import { Platform, TouchableOpacity, View } from "react-native";
 import { Avatar } from "react-native-paper";
 import { useSelector } from "react-redux";
 
-import avatarPNG from "../../../../assets/icons/ava.png";
 import { BrandText } from "../../../components/BrandText";
 import FlexRow from "../../../components/FlexRow";
 import { SpacerColumn, SpacerRow } from "../../../components/spacer";
-import { useNSUserInfo } from "../../../hooks/useNSUserInfo";
 import { selectLastMessageByGroupPk } from "../../../store/slices/message";
 import { useAppNavigation } from "../../../utils/navigation";
 import {
@@ -53,10 +51,7 @@ export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => {
         <FlexRow justifyContent="space-between">
           <View>
             <FlexRow>
-              <Avatar.Image
-                size={40}
-                source={contactInfo?.avatar || avatarPNG}
-              />
+              <Avatar.Image size={40} source={contactInfo?.avatar || ""} />
               <SpacerRow size={1.5} />
               <View>
                 <FlexRow>
@@ -82,12 +77,6 @@ export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => {
                 <BrandText style={[fontMedium10, { color: secondaryColor }]}>
                   {moment(lastMessage?.timestamp).fromNow()}
                 </BrandText>
-                {/* <SpacerRow size={0.6} />
-                <SVG
-                  width={16}
-                  height={16}
-                  source={lastMessage?.isRead ? doubleCheckSVG : singleCheckSVG}
-                /> */}
               </FlexRow>
             </View>
           )}

packages/screens/Message/components/ChatSection.tsx

@@ -42,6 +42,7 @@ import {
 } from "../../../utils/types/message";
 import { GroupInfo_Reply } from "../../../weshnet";
 import { weshClient } from "../../../weshnet/client";
+import { getNewConversationText } from "../../../weshnet/client/messageHelpers";
 import { sendMessage } from "../../../weshnet/client/services";
 import {
   subscribeMessages,
@@ -239,8 +240,7 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => {
             }}
           >
             <BrandText style={[fontSemibold12]}>
-              You created contact; Your contact request hasn't been accepted by{" "}
-              {conversation?.members?.[0]?.name || "Anon"}{" "}
+              {getNewConversationText(conversation)}
             </BrandText>
           </View>
         )}
@@ -343,69 +343,71 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => {
 
         <SpacerColumn size={3} />
       </View>
-      <View
-        style={{
-          flexDirection: "row",
-          padding: layout.padding_x1,
-          alignItems: "center",
-        }}
-      >
-        <Dropdown triggerComponent={<SVG source={plus} />}>
-          {({ closeOpenedDropdown }) => (
-            <UploadImage onClose={closeOpenedDropdown} setFile={setFile} />
-          )}
-        </Dropdown>
+      {!!messages.length && (
+        <View
+          style={{
+            flexDirection: "row",
+            padding: layout.padding_x1,
+            alignItems: "center",
+          }}
+        >
+          <Dropdown triggerComponent={<SVG source={plus} />}>
+            {({ closeOpenedDropdown }) => (
+              <UploadImage onClose={closeOpenedDropdown} setFile={setFile} />
+            )}
+          </Dropdown>
 
-        <SpacerRow size={2} />
-        <View style={{ flex: 1 }}>
-          {!!replyTo?.message && (
-            <View
-              style={{
-                backgroundColor: neutral33,
-                padding: layout.padding_x1,
-                marginLeft: layout.padding_x3,
-                borderRadius: 10,
-                maxWidth: 400,
+          <SpacerRow size={2} />
+          <View style={{ flex: 1 }}>
+            {!!replyTo?.message && (
+              <View
+                style={{
+                  backgroundColor: neutral33,
+                  padding: layout.padding_x1,
+                  marginLeft: layout.padding_x3,
+                  borderRadius: 10,
+                  maxWidth: 400,
+                }}
+              >
+                <BrandText style={[fontSemibold12, { color: "white" }]}>
+                  Reply to: {replyTo?.message}
+                </BrandText>
+              </View>
+            )}
+            <TextInputCustom
+              autoFocus
+              fullWidth
+              setRef={setInputRef}
+              containerStyle={{
+                marginHorizontal: layout.padding_x0_5,
               }}
-            >
-              <BrandText style={[fontSemibold12, { color: "white" }]}>
-                Reply to: {replyTo?.message}
-              </BrandText>
-            </View>
-          )}
-          <TextInputCustom
-            autoFocus
-            fullWidth
-            setRef={setInputRef}
-            containerStyle={{
-              marginHorizontal: layout.padding_x0_5,
-            }}
-            height={Math.max(40, inputHeight)}
-            name="message"
-            placeHolder={
-              replyTo?.message ? "Add reply message" : "Add a Message"
-            }
-            value={message}
-            onChangeText={setMessage}
-            label=""
-            textInputStyle={{
-              height: Math.max(20, inputHeight - 20),
-            }}
-            onSubmitEditing={() => {
-              if (message.length) {
-                handleSend();
+              height={Math.max(40, inputHeight)}
+              name="message"
+              placeHolder={
+                replyTo?.message ? "Add reply message" : "Add a Message"
               }
-            }}
-            onContentSizeChange={(event) => {
-              setInputHeight(event.nativeEvent.contentSize.height);
-            }}
-          >
-            <TouchableOpacity onPress={handleSend}>
-              <SVG source={sent} />
-            </TouchableOpacity>
-          </TextInputCustom>
+              value={message}
+              onChangeText={setMessage}
+              label=""
+              textInputStyle={{
+                height: Math.max(20, inputHeight - 20),
+              }}
+              onSubmitEditing={() => {
+                if (message.length) {
+                  handleSend();
+                }
+              }}
+              onContentSizeChange={(event) => {
+                setInputHeight(event.nativeEvent.contentSize.height);
+              }}
+            >
+              <TouchableOpacity onPress={handleSend}>
+                <SVG source={sent} />
+              </TouchableOpacity>
+            </TextInputCustom>
+          </View>
         </View>
-      </View>
+      )}
       {!!file && (
         <UploadedPreview
           setFile={setFile}

packages/screens/Message/components/CheckboxGroup.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, Text, TouchableOpacity, Image } from "react-native";
+import { Avatar } from "react-native-paper";
 
 import avatar from "../../../../assets/icons/avatar.svg";
 import { BrandText } from "../../../components/BrandText";
@@ -9,9 +10,9 @@ import { SpacerColumn, SpacerRow } from "../../../components/spacer";
 import { secondaryColor } from "../../../utils/style/colors";
 import { fontSemibold14 } from "../../../utils/style/fonts";
 import { CheckboxDappStore } from "../../DAppStore/components/CheckboxDappStore";
-
 interface CheckboxItem {
   name: string;
+  avatar: string;
   icon: string;
   checked: boolean;
 }
@@ -45,7 +46,8 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
               <CheckboxDappStore isChecked={item.checked} />
             </TouchableOpacity>
             <SpacerRow size={2} />
-            <SVG source={avatar} />
+            <Avatar.Image size={40} source={item.avatar || ""} />
+
             <SpacerRow size={2} />
             <BrandText style={[fontSemibold14, { color: secondaryColor }]}>
               {item.name}

packages/screens/Message/components/CreateGroup.tsx

@@ -38,6 +38,10 @@ import {
   MultiMemberGroupCreate_Reply,
 } from "../../../weshnet";
 import { weshClient, weshConfig } from "../../../weshnet/client";
+import {
+  getConversationAvatar,
+  getConversationName,
+} from "../../../weshnet/client/messageHelpers";
 import { activateGroup, sendMessage } from "../../../weshnet/client/services";
 import { encodeJSON, stringFromBytes } from "../../../weshnet/client/utils";
 
@@ -64,7 +68,8 @@ export const CreateGroup = ({ onClose }: CreateGroupProps) => {
         const contactPk = item?.members?.[0].id;
 
         return {
-          name: "Anon",
+          name: getConversationName(item),
+          avatar: getConversationAvatar(item),
           contactPk,
           checked: checkedContacts.includes(contactPk),
         };

packages/weshnet/client/messageHelpers.ts

@@ -0,0 +1,34 @@
+import { Conversation, Message } from "../../utils/types/message";
+
+export const getLineTextByMessageType = ({ message }: { message: Message }) => {
+  switch (message.type) {
+    case "contact-request":
+      return `Anon has sent a contact`;
+  }
+};
+
+export const getNewConversationText = (conversation: Conversation) => {
+  if (conversation.type === "contact") {
+    return `Your contact request with ${
+      conversation?.members?.[0]?.name || "Anon"
+    } is still pending and has not yet been accepted.`;
+  } else {
+    return "Congratulations on creating this group! Currently, there are no members who have joined yet.";
+  }
+};
+
+export const getConversationName = (conversation: Conversation) => {
+  if (conversation.type === "contact") {
+    return conversation?.members?.[0]?.name || "Anon";
+  } else {
+    return "Group";
+  }
+};
+
+export const getConversationAvatar = (conversation: Conversation) => {
+  if (conversation.type === "contact") {
+    return conversation?.members?.[0]?.avatar || "";
+  } else {
+    return "";
+  }
+};