update create conversation flow

src/@context/Orbis.tsx

@@ -52,7 +52,7 @@ type IOrbisProvider = {
 const OrbisContext = createContext({} as IOrbisProvider)
 
 const orbis: IOrbis = new Orbis()
-const NOTIFICATION_REFRESH_INTERVAL = 10000
+const NOTIFICATION_REFRESH_INTERVAL = 5000
 const CONVERSATION_CONTEXT = 'ocean_market' // Can be changed to whatever
 
 function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
@@ -126,7 +126,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   const disconnectOrbis = (address: string) => {
     const res = orbis.logout()
     if (res.status === 200) {
-      console.log('disconnected')
       resetStates()
       removeLitSignature()
       removeCeramicSession(address)
@@ -162,7 +161,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
       const data = await connectOrbis({ address, lit })
       return data
     } else {
-      console.log('not connected')
       resetStates()
       removeLitSignature()
       removeCeramicSession(address)
@@ -252,7 +250,6 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   }
 
   const clearMessageNotifs = (conversationId: string) => {
-    console.log('clearMessageNotifs', conversationId)
     const _usersNotifications = { ...usersNotifications }
     const address = didToAddress(account?.did)
     if (_usersNotifications[address]) {
@@ -303,22 +300,30 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
 
     if (!hasLit) {
       const res = await connectLit()
-      if (res.status !== 200) return
+      if (res.status !== 200) {
+        alert('Error connecting to Lit.')
+        return
+      }
     }
 
-    let _conversations = [...conversations]
-    if (!_conversations.length) {
-      _conversations = await getConversations(_account?.did)
-    }
-
-    const existingConversations = _conversations.filter(
+    let existingConversation = conversations.find(
       (conversation: IOrbisConversation) => {
         return conversation.recipients.includes(userDid)
       }
     )
 
-    if (existingConversations.length > 0) {
-      setConversationId(existingConversations[0].stream_id)
+    // Refetch to make sure we have the latest conversations
+    if (!existingConversation) {
+      const _conversations = await getConversations(_account?.did)
+      existingConversation = _conversations.find(
+        (conversation: IOrbisConversation) => {
+          return conversation.recipients.includes(userDid)
+        }
+      )
+    }
+
+    if (existingConversation) {
+      setConversationId(existingConversation.stream_id)
       setOpenConversations(true)
     } else {
       const res = await orbis.createConversation({
@@ -326,8 +331,14 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
         context: CONVERSATION_CONTEXT
       })
       if (res.status === 200) {
-        setConversationId(res.doc)
-        setOpenConversations(true)
+        setTimeout(async () => {
+          const { data, error } = await orbis.getConversation(res.doc)
+          if (!error && data) {
+            setConversations([data, ...conversations])
+          }
+          setConversationId(res.doc)
+          setOpenConversations(true)
+        }, 2000)
       }
     }
   }
@@ -339,6 +350,8 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
         (o) => o.stream_id === conversationId
       )
 
+      if (!conversation) return null
+
       // Get address from did
       const did = conversation.recipients.find((o: string) => o !== account.did)
       const address = didToAddress(did)

src/components/@shared/Orbis/DirectMessages/Conversation.module.css

@@ -37,6 +37,12 @@
   color: var(--color-secondary);
 }
 
+.noMessages {
+  text-align: center;
+  padding: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+}
+
 .messages {
   position: relative;
   flex-grow: 1;

src/components/@shared/Orbis/DirectMessages/Conversation.tsx

@@ -48,7 +48,7 @@ export default function DmConversation() {
       console.log(error)
     }
 
-    if (data) {
+    if (data.length) {
       data.reverse()
       if (!polling) {
         setHasMore(data.length >= 50)
@@ -163,34 +163,38 @@ export default function DmConversation() {
         <>
           {isLoading && <div className={styles.loading}>Loading...</div>}
           <div className={styles.messages}>
-            <div ref={messagesWrapper} className={styles.scrollContent}>
-              {messages.map((message) => (
-                <div
-                  key={message.stream_id}
-                  className={`${styles.message} ${
-                    message.stream_id.startsWith('new_post--')
-                      ? styles.pulse
-                      : ''
-                  } ${
-                    account?.did === message.creator_details.did
-                      ? styles.right
-                      : styles.left
-                  } ${showTime(message.stream_id) && styles.showTime}`}
-                >
-                  <div className={styles.chatBubble}>
-                    <DecryptedMessage content={message.content} />
+            {!isLoading && messages.length === 0 ? (
+              <div className={styles.noMessages}>No message yet</div>
+            ) : (
+              <div ref={messagesWrapper} className={styles.scrollContent}>
+                {messages.map((message) => (
+                  <div
+                    key={message.stream_id}
+                    className={`${styles.message} ${
+                      message.stream_id.startsWith('new_post--')
+                        ? styles.pulse
+                        : ''
+                    } ${
+                      account?.did === message.creator_details.did
+                        ? styles.right
+                        : styles.left
+                    } ${showTime(message.stream_id) && styles.showTime}`}
+                  >
+                    <div className={styles.chatBubble}>
+                      <DecryptedMessage content={message.content} />
+                    </div>
+                    <div className={styles.time}>
+                      <Time
+                        date={message.timestamp.toString()}
+                        isUnix={true}
+                        relative={false}
+                        displayFormat="MMM d, yyyy, h:mm aa"
+                      />
+                    </div>
                   </div>
-                  <div className={styles.time}>
-                    <Time
-                      date={message.timestamp.toString()}
-                      isUnix={true}
-                      relative={false}
-                      displayFormat="MMM d, yyyy, h:mm aa"
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
 
             {newMessages > 0 && (
               <button

src/components/@shared/Orbis/DirectMessages/Header.tsx

@@ -7,6 +7,7 @@ import ChevronUp from '@images/chevronup.svg'
 
 export default function Header() {
   const {
+    conversations,
     conversationId,
     openConversations,
     notifications,
@@ -35,7 +36,8 @@ export default function Header() {
     } else {
       setName(null)
     }
-  }, [conversationId, getConversationTitle])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conversationId, conversations])
 
   return (
     <div className={styles.header} onClick={handleToggle}>

src/components/Profile/Header/index.tsx

@@ -27,6 +27,7 @@ const DmButton = ({ accountId }: { accountId: string }) => {
   const { accountId: ownAccountId, connect } = useWeb3()
   const { checkOrbisConnection, createConversation, getDid } = useOrbis()
   const [userDid, setUserDid] = useState<string | undefined>()
+  const [isCreatingConversation, setIsCreatingConversation] = useState(false)
 
   const handleActivation = async (e: React.MouseEvent) => {
     e.preventDefault()
@@ -58,10 +59,14 @@ const DmButton = ({ accountId }: { accountId: string }) => {
         <Button
           style="primary"
           size="small"
-          disabled={!ownAccountId}
-          onClick={() => createConversation(userDid)}
+          disabled={!ownAccountId || isCreatingConversation}
+          onClick={async () => {
+            setIsCreatingConversation(true)
+            await createConversation(userDid)
+            setIsCreatingConversation(false)
+          }}
         >
-          Send Direct Message
+          {isCreatingConversation ? 'Loading...' : 'Send Direct Message'}
         </Button>
       </div>
     )