contact request metadata updates

TERITORI · Jul 14, 2023 · 75ab666 · 75ab666
1 parent 6dd0619
commit 75ab666
Show file tree

Hide file tree

Showing 16 changed files with 347 additions and 62 deletions.
diff --git a/go.sum b/go.sum
@@ -1985,6 +1985,8 @@ github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.2 h1:+h33VjcLVPDHtOdpUCuF+7gSuG3yGIftsP1YvFihtJ8=
+github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.3 h1:RP3t2pwF7cMEbC1dqtB6poj3niw/9gnV4Cjg5oW5gtY=
 github.com/stretchr/testify v1.8.3/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/subosito/gotenv v1.2.0 h1:Slr1R9HxAlEKefgq5jn9U+DnETlIUa6HfgEzj0g5d7s=

diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "dotenv-webpack": "^8.0.0",
     "draft-convert": "^2.1.13",
     "draft-js": "^0.11.7",
+    "electron-store": "^8.1.0",
     "eslint-config-universe": "^11.0.0",
     "ethers": "^5.7.2",
     "expo": "^47.0.0",
@@ -81,6 +82,7 @@
     "expo-updates": "~0.15.6",
     "grpc-web": "^1.4.2",
     "html-to-draftjs": "^1.5.0",
+    "is-electron": "^2.2.2",
     "lodash": "^4.17.21",
     "long": "^5.2.1",
     "lottie-ios": "3.4.0",
@@ -126,6 +128,7 @@
     "react-native-webview": "11.23.1",
     "react-redux": "^8.0.2",
     "redux-persist": "^6.0.0",
+    "redux-persist-electron-storage": "^2.1.0",
     "text-encoding-polyfill": "^0.6.7",
     "uuid": "^9.0.0",
     "victory-native": "^36.6.8",

diff --git a/packages/components/requests/Request.tsx b/packages/components/requests/Request.tsx
@@ -26,6 +26,7 @@ import { weshClient } from "../../weshnet/client";
 import {
   acceptFriendRequest,
   activateGroup,
+  sendMessage,
 } from "../../weshnet/client/services";
 import {
   bytesFromString,
@@ -60,7 +61,13 @@ const RequestList = ({ isOnline, data }: Props) => {
     try {
       const contactPk = bytesFromString(data?.contactId);
       await acceptFriendRequest(contactPk);
-      await activateGroup({ contactPk });
+      const groupInfo = await activateGroup({ contactPk });
+      await sendMessage({
+        groupPk: groupInfo?.group?.publicKey,
+        message: {
+          type: "accept-contact",
+        },
+      });
     } catch (err) {
       console.log("add friend err", err);
       setToastError({
@@ -91,7 +98,7 @@ const RequestList = ({ isOnline, data }: Props) => {
       <FlexRow justifyContent="space-between">
         <View>
           <FlexRow>
-            <Avatar.Image size={40} source={metadata?.image} />
+            <Avatar.Image size={40} source={data.avatar} />
             <Badge
               style={{
                 position: "absolute",
@@ -105,7 +112,7 @@ const RequestList = ({ isOnline, data }: Props) => {
             <SpacerRow size={1.5} />
             <View>
               <BrandText style={[fontSemibold13, { color: secondaryColor }]}>
-                {metadata?.public_name || "Anon"}
+                {data?.name || "Anon"}
               </BrandText>
               <SpacerColumn size={0.4} />
               <BrandText style={[fontSemibold11, { color: neutralA3 }]}>

diff --git a/packages/screens/Message/MessageScreen.tsx b/packages/screens/Message/MessageScreen.tsx
@@ -38,10 +38,6 @@ export const MessageScreen: ScreenFC<"Message"> = () => {
     weshServices.createConfig();
   }, []);
 
-  useEffect(() => {
-    weshServices.createSharableLink(userInfo?.metadata?.tokenId);
-  }, [userInfo?.metadata?.tokenId]);
-
   const HEADER_CONFIG = [
     {
       id: 1,

diff --git a/packages/screens/Message/components/ChatHeader.tsx b/packages/screens/Message/components/ChatHeader.tsx
@@ -38,7 +38,12 @@ import {
   fontMedium10,
   fontMedium14,
 } from "../../../utils/style/fonts";
-export const ChatHeader = ({ searchInput, setSearchInput, name }: any) => {
+export const ChatHeader = ({
+  searchInput,
+  setSearchInput,
+  name,
+  conversation,
+}: any) => {
   const [showTextInput, setShowTextInput] = useState(false);
   const [showCalendar, setShowCalendar] = useState(false);
   const [audioCall, setAudioCall] = useState(false);
@@ -77,7 +82,7 @@ export const ChatHeader = ({ searchInput, setSearchInput, name }: any) => {
           <SpacerRow size={1} />
           <View>
             <BrandText style={[fontSemibold13, { color: secondaryColor }]}>
-              {name}
+              {conversation?.members?.[0]?.name || "Anon"}
             </BrandText>
           </View>
         </View>

diff --git a/packages/screens/Message/components/ChatItem.tsx b/packages/screens/Message/components/ChatItem.tsx
@@ -32,12 +32,8 @@ interface ChatItemProps {
 
 export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => {
   const navigation = useAppNavigation();
-
   const lastMessage = useSelector(selectLastMessageByGroupPk(data.id));
-
-  const { metadata } = useNSUserInfo(
-    data.members?.[0]?.tokenId || "sakul.tori"
-  );
+  const contactInfo = data.members?.[0];
 
   return (
     <TouchableOpacity
@@ -57,14 +53,17 @@ export const ChatItem = ({ data, onPress, isActive }: ChatItemProps) => {
         <FlexRow justifyContent="space-between">
           <View>
             <FlexRow>
-              <Avatar.Image size={40} source={metadata?.image || avatarPNG} />
+              <Avatar.Image
+                size={40}
+                source={contactInfo?.avatar || avatarPNG}
+              />
               <SpacerRow size={1.5} />
               <View>
                 <FlexRow>
                   <BrandText
                     style={[fontSemibold13, { color: secondaryColor }]}
                   >
-                    {data.name || metadata.public_name || "Anon"}
+                    {contactInfo?.name || "Anon"}
                   </BrandText>
                 </FlexRow>
                 <SpacerColumn size={0.5} />

diff --git a/packages/screens/Message/components/ChatSection.tsx b/packages/screens/Message/components/ChatSection.tsx
@@ -178,7 +178,7 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => {
             messages={messages}
             searchInput={searchInput}
             setSearchInput={setSearchInput}
-            name={conversation.name || "Anon"}
+            conversation={conversation}
           />
         </View>
         <Separator color={neutral33} />
@@ -231,6 +231,20 @@ export const ChatSection = ({ conversation }: ChatSectionProps) => {
           </View>
         )}
 
+        {!messages.length && (
+          <View
+            style={{
+              alignItems: "center",
+              marginTop: layout.padding_x2,
+            }}
+          >
+            <BrandText style={[fontSemibold12]}>
+              You created contact; Your contact request hasn't been accepted by{" "}
+              {conversation?.members?.[0]?.name || "Anon"}{" "}
+            </BrandText>
+          </View>
+        )}
+
         <FlatList
           inverted
           data={messages}

diff --git a/packages/screens/Message/components/Conversation.tsx b/packages/screens/Message/components/Conversation.tsx
@@ -27,6 +27,7 @@ import {
 import {
   fontBold10,
   fontMedium10,
+  fontSemibold10,
   fontSemibold11,
 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
@@ -90,6 +91,16 @@ export const Conversation = ({
 
   const receiverName = "Anon";
 
+  if (message.type === "accept-contact") {
+    return (
+      <View style={{ alignItems: "center" }}>
+        <BrandText style={[fontSemibold10, { color: neutralA3 }]}>
+          Contact accepted
+        </BrandText>
+      </View>
+    );
+  }
+
   return (
     <FlexRow
       alignItems="flex-start"
@@ -178,11 +189,11 @@ export const Conversation = ({
             {message.type === "message" ? (
               <>
                 <BrandText style={[fontSemibold11, { color: secondaryColor }]}>
-                  {message.payload.message}
+                  {message?.payload?.message}
                 </BrandText>
-                {!!message.payload.files.length && (
+                {!!message.payload?.files?.length && (
                   <FileRenderer
-                    files={message.payload.files || []}
+                    files={message?.payload?.files || []}
                     maxWidth={400}
                     waveFormMaxWidth={340}
                   />

diff --git a/packages/screens/Message/components/CreateConversation.tsx b/packages/screens/Message/components/CreateConversation.tsx
@@ -1,31 +1,41 @@
 import React, { useState } from "react";
+import { useForm, FormProvider } from "react-hook-form";
 import { View } from "react-native";
 import QRCode from "react-native-qrcode-svg";
+import { useDispatch, useSelector } from "react-redux";
 
 import logoHexagonPNG from "../../../../assets/logos/logo-hexagon.png";
 import { BrandText } from "../../../components/BrandText";
 import { CopyToClipboard } from "../../../components/CopyToClipboard";
 import { ErrorText } from "../../../components/ErrorText";
+import { Separator } from "../../../components/Separator";
 import { PrimaryButton } from "../../../components/buttons/PrimaryButton";
 import { TextInputCustom } from "../../../components/inputs/TextInputCustom";
 import ModalBase from "../../../components/modals/ModalBase";
 import { SpacerColumn, SpacerRow } from "../../../components/spacer";
 import { useNSUserInfo } from "../../../hooks/useNSUserInfo";
 import useSelectedWallet from "../../../hooks/useSelectedWallet";
+import {
+  MessageState,
+  selectContactInfo,
+  setContactInfo,
+} from "../../../store/slices/message";
 import { neutral00, secondaryColor } from "../../../utils/style/colors";
 import { fontSemibold16 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
 import { weshClient, weshConfig, weshServices } from "../../../weshnet/client";
-
+import { createSharableLink } from "../../../weshnet/client/services";
 interface CreateConversationProps {
   onClose: () => void;
 }
 
 export const CreateConversation = ({ onClose }: CreateConversationProps) => {
+  const contactInfo = useSelector(selectContactInfo);
   const [contactLink, setContactLink] = useState("");
   const [addContactLoading, setAddContactLoading] = useState(false);
   const [error, setError] = useState("");
 
+  const dispatch = useDispatch();
   const selectedWallet = useSelectedWallet();
   const userInfo = useNSUserInfo(selectedWallet?.userId);
 
@@ -34,7 +44,7 @@ export const CreateConversation = ({ onClose }: CreateConversationProps) => {
     setError("");
 
     try {
-      await weshServices.addContact(contactLink, userInfo?.metadata?.tokenId);
+      await weshServices.addContact(contactLink, contactInfo);
       onClose();
     } catch (err) {
       setError(err?.message);
@@ -43,6 +53,22 @@ export const CreateConversation = ({ onClose }: CreateConversationProps) => {
     setAddContactLoading(false);
   };
 
+  const handleContactInfoChange = (
+    key: keyof MessageState["contactInfo"],
+    value: string
+  ) => {
+    const shareLink = createSharableLink({
+      ...contactInfo,
+      [key]: value,
+    });
+    dispatch(
+      setContactInfo({
+        [key]: value,
+        shareLink,
+      })
+    );
+  };
+
   return (
     <ModalBase
       label="Create conversation"
@@ -51,15 +77,55 @@ export const CreateConversation = ({ onClose }: CreateConversationProps) => {
       width={580}
     >
       <SpacerColumn size={2} />
+
+      <BrandText style={[fontSemibold16, { marginBottom: layout.padding_x1 }]}>
+        Name
+      </BrandText>
+
+      <TextInputCustom
+        name="name"
+        label=""
+        placeHolder="Add name here"
+        height={50}
+        fullWidth
+        onChangeText={(text) => handleContactInfoChange("name", text)}
+        value={contactInfo.name}
+        containerStyle={{
+          flex: 1,
+        }}
+        placeholderTextColor={secondaryColor}
+        squaresBackgroundColor={neutral00}
+      />
+      <SpacerColumn size={2} />
+      <BrandText style={[fontSemibold16, { marginBottom: layout.padding_x1 }]}>
+        Avatar
+      </BrandText>
+
+      <TextInputCustom
+        name="avatar"
+        label=""
+        placeHolder="Paste avatar URL here"
+        height={50}
+        fullWidth
+        onChangeText={(text) => handleContactInfoChange("avatar", text)}
+        value={contactInfo.avatar}
+        containerStyle={{
+          flex: 1,
+        }}
+        placeholderTextColor={secondaryColor}
+        squaresBackgroundColor={neutral00}
+      />
+
       <View
         style={{
           alignItems: "center",
         }}
       >
-        {!!weshConfig.shareLink && (
+        <SpacerColumn size={2} />
+        {!!contactInfo.shareLink && (
           <QRCode
             size={200}
-            value={weshConfig.shareLink}
+            value={contactInfo.shareLink}
             logo={logoHexagonPNG}
             logoSize={40}
           />
@@ -77,10 +143,12 @@ export const CreateConversation = ({ onClose }: CreateConversationProps) => {
           containerStyle={{
             width: "100%",
           }}
-          text={weshConfig?.shareLink}
+          text={contactInfo.shareLink}
         />
       </View>
-      <SpacerColumn size={2} />
+      <SpacerColumn size={3} />
+      <Separator />
+      <SpacerColumn size={3} />
       <View>
         <BrandText
           style={[fontSemibold16, { marginBottom: layout.padding_x1 }]}